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

{% block title %}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 justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 font-[Poppins]">Design System</h1>
                    <p class="text-sm text-gray-500 mt-1">Documentation des composants UI de Bubul</p>
                </div>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                    v1.0.0
                </span>
            </div>
        </div>
    </header>

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

        {# ===== TOKENS ===== #}
        <section class="mb-12">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-2xl">🎨</span>
                <h2 class="text-xl font-semibold text-gray-900">Tokens</h2>
                <span class="text-sm text-gray-500">Variables de design</span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

                {# Colors #}
                <a href="{{ path('admin_design_system_colors') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-lg"></div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Couleurs</h3>
                    <p class="text-sm text-gray-500 mt-1">Palette complète avec couleurs sémantiques et gradients</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Primary</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Success</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Error</span>
                    </div>
                </a>

                {# Spacing - À venir #}
                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 opacity-60">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-600">
                            À venir
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-500">Espacements</h3>
                    <p class="text-sm text-gray-400 mt-1">Marges, paddings et gaps</p>
                </div>

                {# Typography - À venir #}
                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 opacity-60">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
                            <span class="text-xl font-bold text-gray-400">Aa</span>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-600">
                            À venir
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-500">Typographie</h3>
                    <p class="text-sm text-gray-400 mt-1">Fonts, tailles et line-heights</p>
                </div>

            </div>
        </section>

        {# ===== INTRODUCTION ===== #}
        <section class="mb-12 bg-white rounded-xl p-6 shadow-sm border border-gray-200">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">Introduction</h2>
            <p class="text-gray-600 mb-4">
                Ce Design System suit la méthodologie <strong>Atomic Design</strong> de Brad Frost.
                Les composants sont organisés en 5 niveaux hiérarchiques :
            </p>
            <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mt-6">
                <div class="text-center p-4 bg-blue-50 rounded-lg">
                    <div class="text-3xl mb-2">⚛️</div>
                    <h3 class="font-semibold text-blue-900">Atomes</h3>
                    <p class="text-xs text-blue-700 mt-1">Boutons, inputs, badges...</p>
                </div>
                <div class="text-center p-4 bg-green-50 rounded-lg">
                    <div class="text-3xl mb-2">🔗</div>
                    <h3 class="font-semibold text-green-900">Molécules</h3>
                    <p class="text-xs text-green-700 mt-1">Form groups, cards...</p>
                </div>
                <div class="text-center p-4 bg-purple-50 rounded-lg">
                    <div class="text-3xl mb-2">🧬</div>
                    <h3 class="font-semibold text-purple-900">Organismes</h3>
                    <p class="text-xs text-purple-700 mt-1">Header, sidebar, modals...</p>
                </div>
                <div class="text-center p-4 bg-orange-50 rounded-lg">
                    <div class="text-3xl mb-2">📄</div>
                    <h3 class="font-semibold text-orange-900">Templates</h3>
                    <p class="text-xs text-orange-700 mt-1">Layouts de page</p>
                </div>
                <div class="text-center p-4 bg-red-50 rounded-lg">
                    <div class="text-3xl mb-2">📱</div>
                    <h3 class="font-semibold text-red-900">Pages</h3>
                    <p class="text-xs text-red-700 mt-1">Instances finales</p>
                </div>
            </div>
        </section>

        {# ===== ATOMES ===== #}
        <section class="mb-12">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-2xl">⚛️</span>
                <h2 class="text-xl font-semibold text-gray-900">Atomes</h2>
                <span class="text-sm text-gray-500">Éléments de base indivisibles</span>
            </div>

            {# Explication pédagogique #}
            <div class="mb-8 bg-blue-50 rounded-xl p-6 border border-blue-200">
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-1">
                        <h3 class="font-semibold text-blue-900 mb-2">Qu'est-ce qu'un Atome ?</h3>
                        <p class="text-sm text-blue-800 mb-3">
                            Les atomes sont les <strong>éléments fondamentaux</strong> de l'interface.
                            Ce sont les plus petites unités fonctionnelles qui ne peuvent pas être divisées
                            sans perdre leur sens : boutons, inputs, labels, icônes...
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">Indépendants</span>
                            <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">Réutilisables</span>
                            <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">Sans logique métier</span>
                        </div>
                    </div>
                    <div class="flex items-center justify-center gap-3 text-blue-600">
                        <div class="flex flex-col items-center gap-1">
                            <div class="w-12 h-8 bg-blue-500 rounded flex items-center justify-center">
                                <span class="text-white text-xs font-medium">Btn</span>
                            </div>
                            <span class="text-xs text-blue-700">Button</span>
                        </div>
                        <div class="flex flex-col items-center gap-1">
                            <div class="w-16 h-8 border-2 border-blue-300 rounded bg-white"></div>
                            <span class="text-xs text-blue-700">Input</span>
                        </div>
                        <div class="flex flex-col items-center gap-1">
                            <div class="w-6 h-6 bg-blue-200 rounded-full"></div>
                            <span class="text-xs text-blue-700">Badge</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

                {# Avatar #}
                <a href="{{ path('admin_design_system_avatar') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-violet-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Avatar</h3>
                    <p class="text-sm text-gray-500 mt-1">Images ou initiales utilisateur avec statut</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">6 tailles</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">4 statuts</span>
                    </div>
                </a>

                {# Badge #}
                <a href="{{ path('admin_design_system_badge') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Badge</h3>
                    <p class="text-sm text-gray-500 mt-1">Indicateurs visuels pour statuts et compteurs</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">7 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">4 tailles</span>
                    </div>
                </a>

                {# Button #}
                <a href="{{ path('admin_design_system_button') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <rect x="3" y="6" width="18" height="12" rx="2" stroke-width="2"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Button</h3>
                    <p class="text-sm text-gray-500 mt-1">Boutons d'action avec variantes, tailles et états</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">10 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">5 tailles</span>
                    </div>
                </a>

                {# Checkbox #}
                <a href="{{ path('admin_design_system_checkbox') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-orange-600" 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>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Checkbox</h3>
                    <p class="text-sm text-gray-500 mt-1">Cases à cocher personnalisées</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">2 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                    </div>
                </a>

                {# Divider #}
                <a href="{{ path('admin_design_system_divider') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-stone-100 rounded-lg flex items-center justify-center">
                            <div class="w-8 h-px bg-stone-400"></div>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Divider</h3>
                    <p class="text-sm text-gray-500 mt-1">Séparateur horizontal ou vertical</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">avec texte</span>
                    </div>
                </a>

                {# Icon #}
                <a href="{{ path('admin_design_system_icon') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-rose-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Icon</h3>
                    <p class="text-sm text-gray-500 mt-1">Bibliothèque de 67 icônes SVG</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">6 tailles</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">10 couleurs</span>
                    </div>
                </a>

                {# Input #}
                <a href="{{ path('admin_design_system_input') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Input</h3>
                    <p class="text-sm text-gray-500 mt-1">Champs de saisie texte, email, password, textarea</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">2 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                    </div>
                </a>

                {# Kbd #}
                <a href="{{ path('admin_design_system_kbd') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
                            <kbd class="text-xs bg-white border border-gray-300 px-1.5 py-0.5 rounded shadow-sm font-mono">⌘K</kbd>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Kbd</h3>
                    <p class="text-sm text-gray-500 mt-1">Affichage de raccourcis clavier</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">combos</span>
                    </div>
                </a>

                {# Label #}
                <a href="{{ path('admin_design_system_label') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-lime-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-lime-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.99 1.99 0 013 12V7a4 4 0 014-4z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Label</h3>
                    <p class="text-sm text-gray-500 mt-1">Étiquettes avec indicateurs et tooltip</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">tooltip</span>
                    </div>
                </a>

                {# Link #}
                <a href="{{ path('admin_design_system_link') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-sky-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Link</h3>
                    <p class="text-sm text-gray-500 mt-1">Liens stylisés avec icônes optionnelles</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">6 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                    </div>
                </a>

                {# Logo #}
                <a href="{{ path('admin_design_system_logo') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-logo', size: 'lg', color: 'primary' } %}
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Logo</h3>
                    <p class="text-sm text-gray-500 mt-1">Logos Bubul détaillé et simplifié</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">2 versions</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">guidelines</span>
                    </div>
                </a>

                {# Progress #}
                <a href="{{ path('admin_design_system_progress') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Progress</h3>
                    <p class="text-sm text-gray-500 mt-1">Barres de progression pour tâches et quotas</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">4 tailles</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">striped</span>
                    </div>
                </a>

                {# Radio #}
                <a href="{{ path('admin_design_system_radio') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="9" stroke-width="2"/>
                                <circle cx="12" cy="12" r="4" fill="currentColor"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Radio</h3>
                    <p class="text-sm text-gray-500 mt-1">Boutons radio pour choix exclusifs</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">2 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                    </div>
                </a>

                {# Select #}
                <a href="{{ path('admin_design_system_select') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Select</h3>
                    <p class="text-sm text-gray-500 mt-1">Menus déroulants personnalisés</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                    </div>
                </a>

                {# Skeleton #}
                <a href="{{ path('admin_design_system_skeleton') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center overflow-hidden">
                            <div class="w-8 h-8 bg-slate-300 rounded animate-pulse"></div>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Skeleton</h3>
                    <p class="text-sm text-gray-500 mt-1">Placeholders de chargement animés</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">8 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">2 animations</span>
                    </div>
                </a>

                {# Spinner #}
                <a href="{{ path('admin_design_system_spinner') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-indigo-600 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" stroke-width="2" stroke-dasharray="30 70"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Spinner</h3>
                    <p class="text-sm text-gray-500 mt-1">Indicateurs de chargement animés</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">5 tailles</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">6 couleurs</span>
                    </div>
                </a>

                {# Tag #}
                <a href="{{ path('admin_design_system_tag') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                            <span class="text-xs bg-blue-500 text-white px-2 py-0.5 rounded-full">Tag</span>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Tag</h3>
                    <p class="text-sm text-gray-500 mt-1">Étiquette supprimable pour filtres</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">removable</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">selectable</span>
                    </div>
                </a>

                {# Textarea #}
                <a href="{{ path('admin_design_system_textarea') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-fuchsia-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-fuchsia-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h10"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Textarea</h3>
                    <p class="text-sm text-gray-500 mt-1">Champs multiligne avec compteur de caractères</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 resize</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">compteur</span>
                    </div>
                </a>

                {# Toggle #}
                <a href="{{ path('admin_design_system_toggle') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Toggle</h3>
                    <p class="text-sm text-gray-500 mt-1">Interrupteurs on/off</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">5 couleurs</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                    </div>
                </a>

                {# Tooltip #}
                <a href="{{ path('admin_design_system_tooltip') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-amber-600" 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>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Tooltip</h3>
                    <p class="text-sm text-gray-500 mt-1">Info-bulles CSS-only au survol</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">4 positions</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">2 styles</span>
                    </div>
                </a>

                {# Typography #}
                <a href="{{ path('admin_design_system_typography') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                            <span class="text-xl font-bold text-emerald-600">Aa</span>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Typography</h3>
                    <p class="text-sm text-gray-500 mt-1">Titres, textes et labels stylisés</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">14 variantes</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">13 couleurs</span>
                    </div>
                </a>

            </div>
        </section>

        {# ===== MOLÉCULES ===== #}
        <section class="mb-12">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-2xl">🧬</span>
                <h2 class="text-xl font-semibold text-gray-900">Molécules</h2>
                <span class="text-sm text-gray-500">Combinaisons d'atomes réutilisables</span>
            </div>

            {# Explication pédagogique #}
            <div class="mb-8 bg-green-50 rounded-xl p-6 border border-green-200">
                <div class="flex flex-col lg:flex-row gap-6">
                    <div class="flex-1">
                        <h3 class="font-semibold text-green-900 mb-2">Qu'est-ce qu'une Molécule ?</h3>
                        <p class="text-sm text-green-800 mb-3">
                            Une molécule <strong>combine plusieurs atomes</strong> pour créer un composant
                            fonctionnel réutilisable. Elle encapsule la logique de composition et garantit
                            la cohérence à travers l'application.
                        </p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">DRY : Ne pas répéter</span>
                            <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">Cohérence garantie</span>
                            <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">Maintenance centralisée</span>
                        </div>
                    </div>
                    {# Diagramme visuel #}
                    <div class="flex items-center justify-center gap-2 text-sm">
                        <div class="flex flex-col items-center gap-1">
                            <div class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded border border-blue-200 font-medium">Label</div>
                        </div>
                        <span class="text-green-400 font-bold">+</span>
                        <div class="flex flex-col items-center gap-1">
                            <div class="px-3 py-1.5 bg-purple-100 text-purple-700 rounded border border-purple-200 font-medium">Input</div>
                        </div>
                        <span class="text-green-400 font-bold">+</span>
                        <div class="flex flex-col items-center gap-1">
                            <div class="px-3 py-1.5 bg-red-100 text-red-700 rounded border border-red-200 font-medium">Error</div>
                        </div>
                        <span class="text-green-600 font-bold text-lg">=</span>
                        <div class="flex flex-col items-center gap-1">
                            <div class="px-4 py-2 bg-green-500 text-white rounded-lg font-semibold shadow-sm">FormField</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

                {# Alert #}
                <a href="{{ path('admin_design_system_alert') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-600" 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>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Alert</h3>
                    <p class="text-sm text-gray-500 mt-1">Messages de notification et feedback</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Typography</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">5 variantes</span>
                    </div>
                </a>

                {# Toast #}
                <a href="{{ path('admin_design_system_toast') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Toast</h3>
                    <p class="text-sm text-gray-500 mt-1">Notifications temporaires non-bloquantes</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">Alert</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">JavaScript</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">auto-dismiss</span>
                    </div>
                </a>

                {# Breadcrumb #}
                <a href="{{ path('admin_design_system_breadcrumb') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Breadcrumb</h3>
                    <p class="text-sm text-gray-500 mt-1">Fil d'ariane pour la navigation</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Link</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                    </div>
                </a>

                {# Card #}
                <a href="{{ path('admin_design_system_card') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Card</h3>
                    <p class="text-sm text-gray-500 mt-1">Conteneur avec header, body et footer</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Typography</span>
                        <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded">Button</span>
                    </div>
                </a>

                {# EmptyState #}
                <a href="{{ path('admin_design_system_empty_state') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">EmptyState</h3>
                    <p class="text-sm text-gray-500 mt-1">Affichage pour les états vides et résultats nuls</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Typography</span>
                        <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded">Button</span>
                    </div>
                </a>

                {# FormCheckbox #}
                <a href="{{ path('admin_design_system_form_checkbox') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-600" 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>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">FormCheckbox</h3>
                    <p class="text-sm text-gray-500 mt-1">Checkbox stylisée avec label et messages</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded">Checkbox</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">2 variantes</span>
                    </div>
                </a>

                {# FormField #}
                <a href="{{ path('admin_design_system_form_field') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">FormField</h3>
                    <p class="text-sm text-gray-500 mt-1">Label + Input + Error en un seul composant</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Label</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Input</span>
                        <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded">Error</span>
                    </div>
                </a>

                {# Modal #}
                <a href="{{ path('admin_design_system_modal') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Modal</h3>
                    <p class="text-sm text-gray-500 mt-1">Dialogues de confirmation et formulaires</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Overlay</span>
                        <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded">Button</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">6 tailles</span>
                    </div>
                </a>

                {# Pagination #}
                <a href="{{ path('admin_design_system_pagination') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-slate-600" 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"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h13"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Pagination</h3>
                    <p class="text-sm text-gray-500 mt-1">Navigation paginée pour listes et tableaux</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded">Button</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                    </div>
                </a>

                {# SearchBar #}
                <a href="{{ path('admin_design_system_search_bar') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-violet-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">SearchBar</h3>
                    <p class="text-sm text-gray-500 mt-1">Barre de recherche avec raccourci clavier</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Input</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Kbd</span>
                    </div>
                </a>

                {# Search Input #}
                <a href="{{ path('admin_design_system_search_input') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Search Input</h3>
                    <p class="text-sm text-gray-500 mt-1">Champ de recherche pill des bibliothèques d'outils</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Stimulus</span>
                    </div>
                </a>

                {# Chart Card #}
                <a href="{{ path('admin_design_system_chart_card') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'chart', size: 'lg', color: 'primary' } only %}
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Chart Card</h3>
                    <p class="text-sm text-gray-500 mt-1">Carte enveloppant un graphique : en-tête, actions, canvas, état vide</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 hauteurs</span>
                    </div>
                </a>

                {# StatCard #}
                <a href="{{ path('admin_design_system_stat_card') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">StatCard</h3>
                    <p class="text-sm text-gray-500 mt-1">Carte de statistique pour dashboards</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-cyan-100 text-cyan-600 px-2 py-1 rounded">Progress</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">5 variantes</span>
                    </div>
                </a>

                {# Tabs #}
                <a href="{{ path('admin_design_system_tabs') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Tabs</h3>
                    <p class="text-sm text-gray-500 mt-1">Système d'onglets pour organiser le contenu</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Badge</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">4 variantes</span>
                    </div>
                </a>

                {# Progress Ring #}
                <a href="{{ path('admin_design_system_progress_ring') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center">
                            {% include '_molecules/progress-ring/progress-ring.html.twig' with { value: 75, size: 'xs', showLabel: false } %}
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Progress Ring</h3>
                    <p class="text-sm text-gray-500 mt-1">Cercle de progression SVG avec pourcentage</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">5 tailles</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">4 variantes</span>
                    </div>
                </a>

                {# Mini Stat #}
                <a href="{{ path('admin_design_system_mini_stat') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'lg', color: 'primary' } %}
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Mini Stat</h3>
                    <p class="text-sm text-gray-500 mt-1">Statistique compacte avec icône et label</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">5 variantes</span>
                    </div>
                </a>

                {# Level Indicator #}
                <a href="{{ path('admin_design_system_level_indicator') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
                            {% include '_molecules/level-indicator/level-indicator.html.twig' with { level: 2, maxLevel: 3, size: 'sm' } %}
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Level Indicator</h3>
                    <p class="text-sm text-gray-500 mt-1">Barres de niveau pour difficulté/priorité</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">auto-color</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">labels</span>
                    </div>
                </a>

                {# Nav Item #}
                <a href="{{ path('admin_design_system_nav_item') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-violet-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Nav Item</h3>
                    <p class="text-sm text-gray-500 mt-1">Élément de navigation sidebar</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Badge</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">collapsed</span>
                    </div>
                </a>

                {# Section Header #}
                <a href="{{ path('admin_design_system_section_header') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                            <div class="w-1 h-6 bg-primary rounded-full mr-2"></div>
                            <span class="text-xs font-semibold text-primary">Section</span>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Section Header</h3>
                    <p class="text-sm text-gray-500 mt-1">En-tête avec barre colorée latérale</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">produits</span>
                    </div>
                </a>

                {# Filter Tabs #}
                <a href="{{ path('admin_design_system_filter_tabs') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Filter Tabs</h3>
                    <p class="text-sm text-gray-500 mt-1">Boutons filtres avec compteurs</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Badge</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 variantes</span>
                    </div>
                </a>

                {# Page Header #}
                <a href="{{ path('admin_design_system_page_header') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-rose-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Page Header</h3>
                    <p class="text-sm text-gray-500 mt-1">En-tête de page avec breadcrumb et actions</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded">Button</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Badge</span>
                    </div>
                </a>

                {# User Card #}
                <a href="{{ path('admin_design_system_user_card') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">User Card</h3>
                    <p class="text-sm text-gray-500 mt-1">Carte utilisateur avec avatar et progress</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-cyan-100 text-cyan-600 px-2 py-1 rounded">Progress Ring</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Badge</span>
                    </div>
                </a>

                {# Data Row #}
                <a href="{{ path('admin_design_system_data_row') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Data Row</h3>
                    <p class="text-sm text-gray-500 mt-1">Paire label:valeur standardisée</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">2 layouts</span>
                    </div>
                </a>

                {# Action Bar #}
                <a href="{{ path('admin_design_system_action_bar') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Action Bar</h3>
                    <p class="text-sm text-gray-500 mt-1">Groupe de boutons d'action CRUD</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">4 variantes</span>
                    </div>
                </a>

                {# Tag Group #}
                <a href="{{ path('admin_design_system_tag_group') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-sky-100 rounded-lg flex items-center justify-center">
                            <div class="flex gap-0.5">
                                <span class="text-[8px] bg-sky-500 text-white px-1 rounded">A</span>
                                <span class="text-[8px] bg-sky-500 text-white px-1 rounded">B</span>
                                <span class="text-[8px] bg-sky-300 text-sky-700 px-1 rounded">+2</span>
                            </div>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Tag Group</h3>
                    <p class="text-sm text-gray-500 mt-1">Collection de tags avec "+X more"</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Tag</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">truncate</span>
                    </div>
                </a>

                {# Tool Toggle #}
                <a href="{{ path('admin_design_system_tool_toggle') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Tool Toggle</h3>
                    <p class="text-sm text-gray-500 mt-1">Activation/désactivation d'outils</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Stimulus</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                    </div>
                </a>

                {# Enrolled Card #}
                <a href="{{ path('admin_design_system_enrolled_card') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-fuchsia-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-fuchsia-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Enrolled Card</h3>
                    <p class="text-sm text-gray-500 mt-1">Carte utilisateur inscrit avec progression</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-cyan-100 text-cyan-600 px-2 py-1 rounded">Progress Ring</span>
                        <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded">Action Bar</span>
                    </div>
                </a>

                {# Member Slider #}
                <a href="{{ path('admin_design_system_member_slider') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-sky-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Member Slider</h3>
                    <p class="text-sm text-gray-500 mt-1">Slider + input synchronisés pour quotas</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Stimulus</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 variantes</span>
                    </div>
                </a>

                {# Step Indicator #}
                <a href="{{ path('admin_design_system_step_indicator') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Step Indicator</h3>
                    <p class="text-sm text-gray-500 mt-1">Progression par étapes pour wizards</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">2 layouts</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                    </div>
                </a>

                {# Step Nav #}
                <a href="{{ path('admin_design_system_step_nav') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4 4-4M17 8l4 4-4 4M3 12h18"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Step Nav</h3>
                    <p class="text-sm text-gray-500 mt-1">Retour et étape suivante — la même barre dans les trois outils</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Button</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Moodia · Slidia · Scormia</span>
                    </div>
                </a>

                {# Activity Item #}
                <a href="{{ path('admin_design_system_activity_item') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Activity Item</h3>
                    <p class="text-sm text-gray-500 mt-1">Élément d'activité avec icône et tokens</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Badge</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">4 outils</span>
                    </div>
                </a>

                {# Contract Row #}
                <a href="{{ path('admin_design_system_contract_row') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Contract Row</h3>
                    <p class="text-sm text-gray-500 mt-1">Ligne de contrat avec outils et tokens</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Badge</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">cliquable</span>
                    </div>
                </a>

                {# Status Zone #}
                <a href="{{ path('admin_design_system_status_zone') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Status Zone</h3>
                    <p class="text-sm text-gray-500 mt-1">Zone d'action avec bouton et modal</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Button</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">5 variantes</span>
                    </div>
                </a>


                {# Section Divider #}
                <a href="{{ path('admin_design_system_section_divider') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Section Divider</h3>
                    <p class="text-sm text-gray-500 mt-1">Séparateur de section avec icône et compteur</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Embed</span>
                    </div>
                </a>

                {# Stepper #}
                <a href="{{ path('admin_design_system_stepper') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Stepper</h3>
                    <p class="text-sm text-gray-500 mt-1">Progression multi-étapes pour wizards</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">3 tailles</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">2 variantes</span>
                    </div>
                </a>

                {# Tip #}
                <a href="{{ path('admin_design_system_tip') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-sky-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-sky-600" 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>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Tip</h3>
                    <p class="text-sm text-gray-500 mt-1">Encart conseil contextuel avec 4 variantes</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">4 variantes</span>
                    </div>
                </a>

                {# Tool Card #}
                <a href="{{ path('admin_design_system_tool_card') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-violet-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Tool Card</h3>
                    <p class="text-sm text-gray-500 mt-1">Carte outil dashboard avec sparkline</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">SVG Chart</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Stats</span>
                    </div>
                </a>

                {# Date Range Filter #}
                <a href="{{ path('admin_design_system_date_range_filter') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-green-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-info/10 rounded-lg flex items-center justify-center">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'calendar', size: 'lg', color: 'info' } only %}
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">Date Range Filter</h3>
                    <p class="text-sm text-gray-500 mt-1">Barre de filtre de période, émet du/au en GET</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Icon</span>
                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">Button</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Formulaire</span>
                    </div>
                </a>

            </div>
        </section>

        {# ===== ORGANISMES ===== #}
        <section class="mb-12">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-2xl">🏛️</span>
                <h2 class="text-xl font-semibold text-gray-900">Organismes</h2>
                <span class="text-sm text-gray-500">Sections de page complètes</span>
            </div>

            {# Explication pédagogique #}
            <div class="mb-8 bg-purple-50 rounded-xl p-6 border border-purple-200">
                <div class="flex flex-col lg:flex-row gap-6">
                    <div class="flex-1">
                        <h3 class="font-semibold text-purple-900 mb-2">Qu'est-ce qu'un Organisme ?</h3>
                        <p class="text-sm text-purple-800 mb-3">
                            Un organisme <strong>assemble molécules et atomes</strong> pour former une section
                            complète et fonctionnelle de l'interface. C'est une zone distincte de la page
                            avec une responsabilité propre : header, sidebar, formulaire complet, modal...
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">Sections autonomes</span>
                            <span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">Logique métier</span>
                            <span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">Contexte spécifique</span>
                        </div>
                    </div>
                    {# Diagramme visuel #}
                    <div class="flex items-center justify-center">
                        <div class="bg-white rounded-lg border-2 border-purple-200 p-3 shadow-sm w-48">
                            <div class="bg-purple-100 rounded h-4 mb-2"></div>
                            <div class="flex gap-2 mb-2">
                                <div class="bg-green-100 rounded h-8 flex-1"></div>
                                <div class="bg-green-100 rounded h-8 flex-1"></div>
                            </div>
                            <div class="flex gap-2">
                                <div class="bg-blue-100 rounded h-6 w-16"></div>
                                <div class="bg-gray-100 rounded h-6 w-12"></div>
                            </div>
                            <p class="text-xs text-purple-600 text-center mt-2 font-medium">LoginForm</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

                {# Sidebar #}
                <a href="{{ path('admin_design_system_sidebar') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">
                            Critique
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Sidebar</h3>
                    <p class="text-sm text-gray-500 mt-1">Navigation principale de l'application</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">nav-item</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">logo</span>
                    </div>
                </a>

                {# Course Card #}
                <a href="{{ path('admin_design_system_course_card') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">
                            Critique
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Course Card</h3>
                    <p class="text-sm text-gray-500 mt-1">Carte de cours Moodia avec stats et niveau</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">badge</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">level-indicator</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">mini-stat</span>
                    </div>
                </a>

                {# Company Card #}
                <a href="{{ path('admin_design_system_company_card') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                            Admin
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Company Card</h3>
                    <p class="text-sm text-gray-500 mt-1">Carte d'entreprise avec outils et statut</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">avatar</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">badge</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">icon</span>
                    </div>
                </a>

                {# Auth Layout #}
                <a href="{{ path('admin_design_system_auth_layout') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-violet-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Public
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Auth Layout</h3>
                    <p class="text-sm text-gray-500 mt-1">Layout split-screen pour pages d'authentification</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">logo</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">gradient</span>
                    </div>
                </a>

                {# Login Form #}
                <a href="{{ path('admin_design_system_login_form') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Public
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Login Form</h3>
                    <p class="text-sm text-gray-500 mt-1">Formulaire de connexion avec validation</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">form-field</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">button</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">checkbox</span>
                    </div>
                </a>

                {# Landing Header #}
                <a href="{{ path('admin_design_system_landing_header') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-pink-500 to-rose-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Public
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Header</h3>
                    <p class="text-sm text-gray-500 mt-1">Header de navigation pour la landing page</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">logo</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">button</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">nav</span>
                    </div>
                </a>

                {# Landing Hero #}
                <a href="{{ path('admin_design_system_landing_hero') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-sky-500 to-cyan-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Public
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Hero</h3>
                    <p class="text-sm text-gray-500 mt-1">Section hero avec blobs animes et CTA</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">button</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">blobs</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">animations</span>
                    </div>
                </a>

                {# Landing Hero Tool #}
                <a href="{{ path('admin_design_system_landing_hero_tool') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-violet-500 to-purple-600 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Hero Tool</h3>
                    <p class="text-sm text-gray-500 mt-1">Section hero parametree pour les pages d'outils (Moodia, Slidia, Serenia...)</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">liveBadge</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">visualHtml</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">pills</span>
                    </div>
                </a>

                {# Landing Features #}
                <a href="{{ path('admin_design_system_landing_features') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Public
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Features</h3>
                    <p class="text-sm text-gray-500 mt-1">Grille de fonctionnalites avec icones et descriptions</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">feature-card</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">icon</span>
                    </div>
                </a>

                {# Landing Features Alternating #}
                <a href="{{ path('admin_design_system_landing_features_alternating') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Features Alternating</h3>
                    <p class="text-sm text-gray-500 mt-1">Fonctionnalites en alternance texte/visuel pour pages outils</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">features</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">alternating</span>
                    </div>
                </a>

                {# Landing Steps Tool #}
                <a href="{{ path('admin_design_system_landing_steps_tool') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Steps Tool</h3>
                    <p class="text-sm text-gray-500 mt-1">Etapes numerotees "Comment ca marche" pour pages outils</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">steps</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">numbered</span>
                    </div>
                </a>

                {# Landing Tools #}
                <a href="{{ path('admin_design_system_landing_tools') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-amber-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Public
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Tools</h3>
                    <p class="text-sm text-gray-500 mt-1">Grille de cards outils avec couleurs et badges</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">tool-card</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">grid</span>
                    </div>
                </a>

                {# Landing Tools Ecosystem #}
                <a href="{{ path('admin_design_system_landing_tools_ecosystem') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-rose-500 to-pink-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Tools Ecosystem</h3>
                    <p class="text-sm text-gray-500 mt-1">Vue ecosysteme de tous les outils Bubul</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">ecosystem</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">tools</span>
                    </div>
                </a>

                {# Landing Pricing #}
                <a href="{{ path('admin_design_system_landing_pricing') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Public
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Pricing</h3>
                    <p class="text-sm text-gray-500 mt-1">Section tarifs avec plans et toggle mensuel/annuel</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">pricing-card</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">toggle</span>
                    </div>
                </a>

                {# Landing FAQ #}
                <a href="{{ path('admin_design_system_landing_faq') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-teal-500 to-cyan-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Public
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing FAQ</h3>
                    <p class="text-sm text-gray-500 mt-1">Section accordeon de questions frequentes</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">accordion</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">faq-item</span>
                    </div>
                </a>

                {# Landing CTA #}
                <a href="{{ path('admin_design_system_landing_cta') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-violet-600 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Public
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing CTA</h3>
                    <p class="text-sm text-gray-500 mt-1">Bande d'appel a l'action avec gradient et boutons</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">button</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">gradient</span>
                    </div>
                </a>

                {# Landing Footer #}
                <a href="{{ path('admin_design_system_landing_footer') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-gray-600 to-slate-700 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Public
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Footer</h3>
                    <p class="text-sm text-gray-500 mt-1">Footer avec logo, liens produits, nav et mentions legales</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">logo</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">links</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">socials</span>
                    </div>
                </a>

                {# Landing Trust #}
                <a href="{{ path('admin_design_system_landing_trust') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Trust</h3>
                    <p class="text-sm text-gray-500 mt-1">Bande de confiance avec badges securite et garanties</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">trust-badge</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">icons</span>
                    </div>
                </a>

                {# Landing Social Proof #}
                <a href="{{ path('admin_design_system_landing_social_proof') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-sky-500 to-blue-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Social Proof</h3>
                    <p class="text-sm text-gray-500 mt-1">Temoignages et avatars formateurs avec stats</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">testimonials</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">avatars</span>
                    </div>
                </a>

                {# Landing Demo Showcase #}
                <a href="{{ path('admin_design_system_landing_demo_showcase') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-fuchsia-500 to-pink-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Demo Showcase</h3>
                    <p class="text-sm text-gray-500 mt-1">Showcase interactif des demos produit avec tabs</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">tabs</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">demo</span>
                    </div>
                </a>

                {# Landing Screenshots #}
                <a href="{{ path('admin_design_system_landing_screenshots') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Screenshots</h3>
                    <p class="text-sm text-gray-500 mt-1">Galerie de screenshots avec navigation et zoom</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">gallery</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">slider</span>
                    </div>
                </a>

                {# Landing How It Works #}
                <a href="{{ path('admin_design_system_landing_how_it_works') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" 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>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing How It Works</h3>
                    <p class="text-sm text-gray-500 mt-1">Section "Comment ca marche" avec etapes visuelles</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">steps</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">timeline</span>
                    </div>
                </a>

                {# Landing Pillars #}
                <a href="{{ path('admin_design_system_landing_pillars') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-violet-500 to-indigo-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing Pillars</h3>
                    <p class="text-sm text-gray-500 mt-1">Valeurs et piliers de la plateforme en grille</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">pillars</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">grid</span>
                    </div>
                </a>

                {# Landing LMS Partnership #}
                <a href="{{ path('admin_design_system_landing_lms_partnership') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-600 to-cyan-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Landing LMS Partnership</h3>
                    <p class="text-sm text-gray-500 mt-1">Section partenariat LMS avec logos et integration</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">logos</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">integration</span>
                    </div>
                </a>

                {# Activity List #}
                <a href="{{ path('admin_design_system_activity_list') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-violet-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Activity List</h3>
                    <p class="text-sm text-gray-500 mt-1">Liste d'activités récentes avec card</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">activity-item</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">empty-state</span>
                    </div>
                </a>

                {# Contract List #}
                <a href="{{ path('admin_design_system_contract_list') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Contract List</h3>
                    <p class="text-sm text-gray-500 mt-1">Liste de contrats avec outils et tokens</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">contract-row</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">empty-state</span>
                    </div>
                </a>

                {# Feedback Widget #}
                <a href="{{ path('admin_design_system_feedback_widget') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Feedback Widget</h3>
                    <p class="text-sm text-gray-500 mt-1">Bouton flottant + modal de feedback utilisateur</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">stimulus</span>
                    </div>
                </a>

                {# Forgot Password Form #}
                <a href="{{ path('admin_design_system_forgot_password_form') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-rose-500 to-pink-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Forgot Password Form</h3>
                    <p class="text-sm text-gray-500 mt-1">Formulaire de recuperation de mot de passe</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">link</span>
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">input</span>
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">button</span>
                    </div>
                </a>

                {# Reset Password Form #}
                <a href="{{ path('admin_design_system_reset_password_form') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Reset Password Form</h3>
                    <p class="text-sm text-gray-500 mt-1">Formulaire de reinitialisation du mot de passe</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">link</span>
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">input</span>
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">button</span>
                    </div>
                </a>

                {# Auth Visual #}
                <a href="{{ path('admin_design_system_auth_visual') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-blue-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Auth Visual</h3>
                    <p class="text-sm text-gray-500 mt-1">Partie visuelle des pages d'authentification</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">logo</span>
                    </div>
                </a>

                {# Choice Card #}
                <a href="{{ path('admin_design_system_choice_card') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-violet-500 to-purple-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">
                            Critique
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Choice Card</h3>
                    <p class="text-sm text-gray-500 mt-1">Carte de choix premium pour wizards</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">features</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">gradient</span>
                    </div>
                </a>

                {# Dashboard Activity #}
                <a href="{{ path('admin_design_system_dashboard_activity') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-teal-500 to-cyan-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Dashboard Activity</h3>
                    <p class="text-sm text-gray-500 mt-1">Liste d'activites recentes avec tokens et energie</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">empty-state</span>
                    </div>
                </a>

                {# Eco Footprint #}
                <a href="{{ path('admin_design_system_eco_footprint') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Eco Footprint</h3>
                    <p class="text-sm text-gray-500 mt-1">Empreinte ecologique avec metriques et graphique</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">chart</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">metrics</span>
                    </div>
                </a>

                {# Tool Header #}
                <a href="{{ path('admin_design_system_tool_header') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h3l2 2h7a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V6z"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Tool Header</h3>
                    <p class="text-sm text-gray-500 mt-1">En-tête de bibliothèque d'outil, partagé entre les outils</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">icon</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">badge</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">button</span>
                    </div>
                </a>

                {# Tool Toolbar #}
                <a href="{{ path('admin_design_system_tool_toolbar') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h18M3 4v16a1 1 0 001 1h4M21 4v16a1 1 0 01-1 1h-4M8 4v17M16 4v17M11 12h2"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Disponible
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Tool Toolbar</h3>
                    <p class="text-sm text-gray-500 mt-1">Ligne de filtres et de recherche des bibliothèques d'outils</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">filter-tabs</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">search-input</span>
                    </div>
                </a>

                {# Choice Page #}
                <a href="{{ path('admin_design_system_choice_page') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M9 12h6m-6 4h6"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Choice Page</h3>
                    <p class="text-sm text-gray-500 mt-1">Page « comment voulez-vous commencer ? », gabarit commun aux pages de création des outils</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">choice-card</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">button</span>
                    </div>
                </a>

                {# Entity Card #}
                <a href="{{ path('admin_design_system_entity_card') }}"
                   class="group bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                            </svg>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                            Nouveau
                        </span>
                    </div>
                    <h3 class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Entity Card</h3>
                    <p class="text-sm text-gray-500 mt-1">Coque de carte partagée des bibliothèques d'outils (accent, corps, pied daté, menu)</p>
                    <div class="flex gap-2 mt-4">
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">action-menu</span>
                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">icon</span>
                    </div>
                </a>

            </div>
        </section>

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