{% extends 'base.twig' %}

{% block title %}Cookies- Ludikevent{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-5xl mx-auto space-y-8">

        {# En-tête avec Logo #}
        <div class="text-center">
            <img class="h-25 w-auto mx-auto mb-4" src="{{ asset('provider/images/logo.png') }}" alt="Ludikevent">
        </div>
    <div id="cookies" class="container mx-auto px-4 max-w-5xl font-sans">
        <header class="mb-10 text-center border-b pb-4">
            <h1 class="text-4xl font-extrabold text-gray-900 mb-2 esrgaa-voice">Politique de gestion des cookies</h1>
            <p class="text-lg text-gray-600 esrgaa-voice">Informations détaillées sur l'utilisation des cookies sur notre site.</p>
        </header>

        <section class="mb-10 p-6 bg-gray-50 rounded-xl shadow-inner border-l-4 border-indigo-500">
            <p class="text-gray-700 leading-relaxed esrgaa-voice">
                Cette politique vous informe sur la nature, l'utilisation et la gestion des cookies déposés sur votre terminal (ordinateur, tablette, smartphone, etc.) lorsque vous naviguez sur notre site. Les cookies sont essentiels pour garantir le bon fonctionnement de nos services et améliorer votre expérience utilisateur.

            </p>
        </section>

        <section class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-2 esrgaa-voice">Types de Cookies Utilisés</h2>

            <div class="space-y-6">
                <!-- Type 1: Essentiels -->
                <div class="p-4 border border-gray-200 rounded-lg bg-white shadow-sm">
                    <h3 class="text-xl font-semibold text-green-600 mb-1 flex items-center esrgaa-voice">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        Cookies Essentiels (Obligatoires)
                    </h3>
                    <p class="text-gray-600 text-sm esrgaa-voice">Ces cookies sont strictement nécessaires au fonctionnement du site et ne peuvent être désactivés. Ils permettent d'assurer les fonctionnalités de base comme la navigation, la connexion à votre espace client, la mémorisation du panier d'achat et la sécurité. Sans ces cookies, les services que vous avez demandés ne peuvent pas être fournis.
                    </p>
                </div>

                <!-- Type 2: Performance/Analyse -->
                <div class="p-4 border border-gray-200 rounded-lg bg-white shadow-sm">
                    <h3 class="text-xl font-semibold text-blue-600 mb-1 flex items-center esrgaa-voice">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M18 10h4M4 18h.01M6 18h.01M10 18h.01M4 14h.01M4 10h.01M4 6h.01"></path>
                        </svg>
                        Cookies de Performance et d'Analyse
                    </h3>
                    <p class="text-gray-600 text-sm esrgaa-voice">Ces cookies nous permettent de compter les visites et les sources de trafic afin de mesurer et d'améliorer les performances de notre site. Ils nous aident à savoir quelles pages sont les plus ou les moins populaires, et à voir comment les visiteurs naviguent sur le site. Si vous n'autorisez pas ces cookies, nous ne saurons pas quand vous avez visité notre site.
                    </p>
                </div>

                <!-- Type 3: Marketing -->
                <div class="p-4 border border-gray-200 rounded-lg bg-white shadow-sm">
                    <h3 class="text-xl font-semibold text-red-600 mb-1 flex items-center esrgaa-voice">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464A4 4 0 0117 12h2a6 6 0 00-10.778-3.322l-.782 1.408a.5.5 0 00.43 1.056h1.564a.5.5 0 00.5-.5V8.464zM9.536 15.536A4 4 0 017 12H5a6 6 0 0010.778 3.322l.782-1.408a.5.5 0 00-.43-1.056h-1.564a.5.5 0 00-.5.5v1.464z"></path>
                        </svg>
                        Cookies de Marketing et Publicité
                    </h3>
                    <p class="text-gray-600 text-sm esrgaa-voice">Ces cookies peuvent être mis en place par nos partenaires publicitaires. Ils peuvent être utilisés par ces entreprises pour établir un profil de vos intérêts et vous proposer des publicités pertinentes sur d'autres sites. Ils ne stockent pas directement des informations personnelles, mais sont basés sur l'identification unique de votre navigateur et de votre terminal.
                    </p>
                </div>
            </div>
        </section>

        <!-- SECTION : Liste Détaillée des Cookies -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-2 esrgaa-voice">Liste Détaillée des Cookies</h2>
            <p class="text-gray-700 mb-4 esrgaa-voice">Voici une liste des cookies que nous utilisons, classés par fonction :</p>

            <!-- Affichage en mode TABLEAU pour DESKTOP (md et plus) -->
            <div class="hidden md:block overflow-x-auto shadow-md rounded-lg">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-100">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider esrgaa-voice">Nom du Cookie</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider esrgaa-voice">Objectif</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider esrgaa-voice">Type</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider esrgaa-voice">Durée de Vie</th>
                    </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                    <tr class="hover:bg-green-50/50">
                        <td class="px-6 py-4 whitespace-nowrap font-mono text-sm text-gray-900 esrgaa-voice">__Host-session</td>
                        <td class="px-6 py-4 text-sm text-gray-600 esrgaa-voice">Cookie obligatoire pour maintenir la session en cas de connexion à un espace client ou lors d'une commande. Assure l'intégrité et la sécurité de la session.</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600 esrgaa-voice">Essentiel</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 esrgaa-voice">Automatique à la fermeture du site (Session)</td>
                    </tr>
                    <tr class="hover:bg-green-50/50">
                        <td class="px-6 py-4 whitespace-nowrap font-mono text-sm text-gray-900 esrgaa-voice">PHPSESSID</td>
                        <td class="px-6 py-4 text-sm text-gray-600 esrgaa-voice">Utilisé par le serveur web pour stocker l'état de la session utilisateur. Nécessaire pour le bon fonctionnement des interactions sur le site.</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600 esrgaa-voice">Essentiel</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 esrgaa-voice">Automatique à la fermeture du site (Session)</td>
                    </tr>
                    <tr class="hover:bg-blue-50/50">
                        <td class="px-6 py-4 whitespace-nowrap font-mono text-sm text-gray-900 esrgaa-voice">__cf_bm</td>
                        <td class="px-6 py-4 text-sm text-gray-600 esrgaa-voice">Cookie de Cloudflare utilisé pour la gestion des bots. Permet d'améliorer la performance et la sécurité du site en distinguant le trafic humain du trafic automatisé.</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600 esrgaa-voice">Sécurité / Tiers</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 esrgaa-voice">30 minutes</td>
                    </tr>
                    <tr class="hover:bg-blue-50/50">
                        <td class="px-6 py-4 whitespace-nowrap font-mono text-sm text-gray-900 esrgaa-voice">__cf_clearance</td>
                        <td class="px-6 py-4 text-sm text-gray-600 esrgaa-voice">Cookie de Cloudflare utilisé pour des raisons de sécurité afin d'identifier le trafic de confiance. Nécessaire pour accéder au site si un défi de sécurité est présenté.</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600 esrgaa-voice">Sécurité / Tiers</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 esrgaa-voice">1 an</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- Affichage en mode LISTE/CARTES pour MOBILE (moins de md) -->
            <div class="md:hidden space-y-6">



                <div class="p-4 border-2 rounded-xl shadow-md space-y-3 bg-green-50 ring-1 ring-green-500">

                    <h3 class="text-lg font-extrabold font-mono text-gray-900 border-b pb-1 esrgaa-voice">
                        __Host-session
                    </h3>

                    <dl class="text-sm">
                        <div class="flex flex-col mb-2">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Type :</dt>
                            <dd class="font-medium text-green-600 esrgaa-voice">Essentiel</dd>
                        </div>

                        <div class="flex flex-col mb-2">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Durée de Vie :</dt>
                            <dd class="text-gray-600 esrgaa-voice">Automatique à la fermeture du site (Session)</dd>
                        </div>

                        <div class="flex flex-col">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Objectif :</dt>
                            <dd class="text-gray-700 mt-1 esrgaa-voice">Cookie obligatoire pour maintenir la session en cas de connexion à un espace client ou lors d'une commande. Assure l'intégrité et la sécurité de la session.</dd>
                        </div>
                    </dl>
                </div>

                <div class="p-4 border-2 rounded-xl shadow-md space-y-3 bg-green-50 ring-1 ring-green-500">

                    <h3 class="text-lg font-extrabold font-mono text-gray-900 border-b pb-1 esrgaa-voice">
                        PHPSESSID
                    </h3>

                    <dl class="text-sm">
                        <div class="flex flex-col mb-2">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Type :</dt>
                            <dd class="font-medium text-green-600 esrgaa-voice">Essentiel</dd>
                        </div>

                        <div class="flex flex-col mb-2">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Durée de Vie :</dt>
                            <dd class="text-gray-600 esrgaa-voice">Automatique à la fermeture du site (Session)</dd>
                        </div>

                        <div class="flex flex-col">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Objectif :</dt>
                            <dd class="text-gray-700 mt-1 esrgaa-voice">Utilisé par le serveur web pour stocker l'état de la session utilisateur. Nécessaire pour le bon fonctionnement des interactions sur le site.</dd>
                        </div>
                    </dl>
                </div>

                <div class="p-4 border-2 rounded-xl shadow-md space-y-3 bg-blue-50 ring-1 ring-blue-500">

                    <h3 class="text-lg font-extrabold font-mono text-gray-900 border-b pb-1 esrgaa-voice">
                        __cf_bm
                    </h3>

                    <dl class="text-sm">
                        <div class="flex flex-col mb-2">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Type :</dt>
                            <dd class="font-medium text-blue-600 esrgaa-voice">Sécurité / Tiers</dd>
                        </div>

                        <div class="flex flex-col mb-2">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Durée de Vie :</dt>
                            <dd class="text-gray-600 esrgaa-voice">30 minutes</dd>
                        </div>

                        <div class="flex flex-col">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Objectif :</dt>
                            <dd class="text-gray-700 mt-1 esrgaa-voice">Cookie de Cloudflare utilisé pour la gestion des bots. Permet d'améliorer la performance et la sécurité du site en distinguant le trafic humain du trafic automatisé.</dd>
                        </div>
                    </dl>
                </div>

                <div class="p-4 border-2 rounded-xl shadow-md space-y-3 bg-blue-50 ring-1 ring-blue-500">

                    <h3 class="text-lg font-extrabold font-mono text-gray-900 border-b pb-1 esrgaa-voice">
                        __cf_clearance
                    </h3>

                    <dl class="text-sm">
                        <div class="flex flex-col mb-2">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Type :</dt>
                            <dd class="font-medium text-blue-600 esrgaa-voice">Sécurité / Tiers</dd>
                        </div>

                        <div class="flex flex-col mb-2">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Durée de Vie :</dt>
                            <dd class="text-gray-600 esrgaa-voice">1 an</dd>
                        </div>

                        <div class="flex flex-col">
                            <dt class="font-semibold text-gray-700 esrgaa-voice">Objectif :</dt>
                            <dd class="text-gray-700 mt-1 esrgaa-voice">Cookie de Cloudflare utilisé pour des raisons de sécurité afin d'identifier le trafic de confiance. Nécessaire pour accéder au site si un défi de sécurité est présenté.</dd>
                        </div>
                    </dl>
                </div>
            </div>


            <!-- Lien vers la politique de Cloudflare (Affiché sous les deux versions) -->
            <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-gray-700">
                <p class="font-semibold mb-2 esrgaa-voice">Informations complémentaires sur les cookies Cloudflare :</p>
                <a href="https://www.cloudflare.com/cookie-policy/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium transition duration-150 ease-in-out esrgaa-voice">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                    </svg>
                    Consulter la politique de cookies de Cloudflare
                </a>
            </div>
        </section>


        <!-- Section de gestion des cookies -->
        <section class="p-8 bg-indigo-50 border border-indigo-200 rounded-xl shadow-lg">
            <h2 class="text-2xl font-bold text-indigo-700 mb-4 flex items-center esrgaa-voice">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mr-3 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M11.493 3.99c-.06-.328-.352-.563-.69-.563H9.197c-.338 0-.63.235-.69.563l-.403 2.164a1 1 0 01-.64.64L6.15 7.697a1 1 0 01-1.052-.162l-1.458-1.25a1 1 0 00-1.282.493l-.493 1.018a1 1 0 00.493 1.282l1.25 1.458a1 1 0 01.162 1.052l-.697 1.403a1 1 0 00.563.69l2.164.403c.328.06.563.352.563.69v1.606c0 .338-.235.63-.563.69l-2.164.403a1 1 0 00-.69.563l-.403 2.164c-.06.328-.352.563-.69.563H9.197c-.338 0-.63-.235-.69-.563l-.403-2.164a1 1 0 01-.64-.64L6.15 12.303a1 1 0 01-1.052.162l-1.458 1.25a1 1 0 00-1.282-.493l-.493-1.018a1 1 0 00.493-1.282l1.25-1.458a1 1 0 01.162-1.052l-.697-1.403a1 1 0 00.563-.69l2.164-.403c.328-.06.563-.352.563-.69V3.99z" clip-rule="evenodd"></path>
                </svg>
                Gestion des Cookies
            </h2>

            <p class="text-gray-700 mb-4 esrgaa-voice">Vous pouvez à tout moment choisir de désactiver certains cookies via les paramètres de votre navigateur. Veuillez noter que la désactivation des cookies essentiels peut dégrader votre expérience de navigation et empêcher l'utilisation de certaines fonctionnalités du site.
            </p>

            <div class="mt-6">
                <a href="https://www.cnil.fr/fr/cookies-les-outils-pour-les-maitriser" target="_blank" rel="noopener noreferrer" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition duration-150 ease-in-out esrgaa-voice">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
                    </svg>
                    Comment maîtriser les cookies (CNIL)
                </a>
                <p class="text-sm text-gray-500 mt-2 esrgaa-voice">
                    (Lien externe vers la CNIL, autorité française de protection des données)
                </p>
            </div>
        </section>
    </div>
    </div>
</div>
{% endblock %}
