Files
ludikevent_crm/templates/revervation/rgpd.twig
Serreau Jovann 010af74dda ```
 feat(revervation): create basetwig for réservation
```
2026-01-19 21:08:04 +01:00

189 lines
12 KiB
Twig

{% extends 'revervation/base.twig' %}
{% block title %}Protection des Données - Ludik Event{% endblock %}
{% block breadcrumb_json %}
,{
"@type": "ListItem",
"position": 1,
"name": "Règlement Général sur la Protection des Données (RGPD)",
"item": "{{ path('revervation_rgpd') }}"
}
{% endblock %}
{% block body %}
<div class="min-h-screen bg-gray-50 font-sans antialiased pb-20">
{# --- HEADER DYNAMIQUE --- #}
<div class="max-w-6xl mx-auto pt-16 pb-12 px-4">
<div class="flex flex-col md:flex-row items-end justify-between gap-6 border-b border-slate-200 pb-8">
<div>
<h1 class="text-4xl md:text-6xl font-black text-slate-900 uppercase tracking-tighter italic leading-none">
Règlement Général sur la Protection des Données (RGPD)
</h1>
<p class="mt-4 text-slate-500 font-medium italic">Engagement pour la sécurité et la confidentialité de vos données.</p>
</div>
<div class="text-right">
<p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-1">Mise à jour officielle</p>
<p class="text-sm font-bold text-slate-900 italic">23 Avril 2025</p>
</div>
</div>
</div>
{# --- GRILLE BENTO PRINCIPALE --- #}
<div class="max-w-6xl mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
{# 1. Introduction & Bases Légales (Large) #}
<div class="md:col-span-8 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-center">
<span class="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-4">01. Fondements Juridiques</span>
<p class="text-base md:text-lg text-slate-700 leading-relaxed italic">
Conformément au <strong class="text-slate-900 italic">RGPD (Art. 6)</strong>, vos données sont traitées sur la base de votre consentement, de l'exécution d'un contrat ou de nos intérêts légitimes. Nous garantissons une collecte transparente pour nos services en ligne et interactions directes.
</p>
</div>
{# 2. Chiffrement Haute Sécurité (Focus Technique) #}
<div class="md:col-span-4 bg-slate-900 p-8 rounded-[2.5rem] shadow-xl flex flex-col items-center justify-center text-center group relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-amber-400 to-indigo-500"></div>
<div class="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="text-3xl">🔑</span>
</div>
<h3 class="text-white font-black uppercase text-xs tracking-widest mb-2">Chiffrement AES-256</h3>
<p class="text-[10px] text-slate-400 italic leading-relaxed">
Rotation automatique des clés toutes les 24h. Données inaccessibles pour l'hébergeur et le propriétaire.
</p>
</div>
{# 3. Les 3 Catégories de Données (Full Width) #}
<div class="md:col-span-12 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
<p class="text-amber-600 text-xl mb-2">✍️</p>
<h4 class="text-xs font-black uppercase mb-2">Données communiquées</h4>
<p class="text-[11px] text-slate-500 italic">Nom, adresse, email, téléphone, date de naissance, données de paiement.</p>
</div>
<div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
<p class="text-indigo-600 text-xl mb-2">🤖</p>
<h4 class="text-xs font-black uppercase mb-2">Moyens automatisés</h4>
<p class="text-[11px] text-slate-500 italic">IP, UDID, Cookies, Géolocalisation (soumise à autorisation), historique de navigation.</p>
</div>
<div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
<p class="text-emerald-600 text-xl mb-2">🌐</p>
<h4 class="text-xs font-black uppercase mb-2">Autres sources</h4>
<p class="text-[11px] text-slate-500 italic">Réseaux sociaux, bases publiques et partenaires marketing.</p>
</div>
</div>
{# 4. Finalités du traitement (Medium - Indigo) #}
<div class="md:col-span-7 bg-indigo-50 p-8 rounded-[2.5rem] border border-indigo-100">
<h3 class="text-xs font-black text-indigo-900 uppercase tracking-widest mb-6 italic">Pourquoi collectons-nous ?</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-8">
<div class="flex items-center gap-3">
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Gestion des commandes</p>
</div>
<div class="flex items-center gap-3">
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Support client</p>
</div>
<div class="flex items-center gap-3">
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Sécurité des réseaux</p>
</div>
<div class="flex items-center gap-3">
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Marketing personnalisé</p>
</div>
</div>
</div>
{# 5. Vos Droits (Square - Amber) #}
<div class="md:col-span-5 bg-amber-50 p-8 rounded-[2.5rem] border border-amber-100 flex flex-col justify-between">
<div>
<h3 class="text-xs font-black text-amber-900 uppercase tracking-widest mb-4 italic">Vos Droits RGPD</h3>
<p class="text-[11px] text-amber-800 italic leading-relaxed">
Accès, rectification, effacement, opposition, portabilité et retrait de consentement.
</p>
</div>
<div class="mt-4">
<p class="text-[9px] font-black text-amber-900/50 uppercase mb-2">Contact Délégué :</p>
<p class="text-sm font-black text-amber-900 italic">contact@ludikevent.fr</p>
</div>
</div>
{# 6. Partage & Livraison (Medium) #}
<div class="md:col-span-6 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm">
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-4 italic">Partage & Livraison</h3>
<p class="text-[11px] text-slate-500 italic leading-relaxed mb-4">
Nous ne vendons aucune donnée. Vos informations sont partagées uniquement avec nos prestataires techniques et de livraison (prénom, nom, téléphone, adresse) pour honorer vos commandes.
</p>
<div class="flex gap-2">
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">Logistique</span>
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">Paiement</span>
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">Cloud EU</span>
</div>
</div>
{# 7. Additif Technique SITECONSEIL (Large) #}
<div class="md:col-span-6 bg-slate-50 p-8 rounded-[2.5rem] border border-slate-200 flex flex-col justify-between">
<div>
<h3 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 italic">Expertise Technique (SiteConseil)</h3>
<div class="space-y-3">
<div class="flex justify-between items-center text-[11px]">
<span class="font-bold text-slate-700 italic">Infrastructure</span>
<span class="text-slate-500 italic">Google Cloud Platform (GCP)</span>
</div>
<div class="flex justify-between items-center text-[11px]">
<span class="font-bold text-slate-700 italic">Certificats</span>
<span class="text-slate-500 italic">TLS/SSL (Cloudflare & Let's Encrypt)</span>
</div>
<div class="flex justify-between items-center text-[11px]">
<span class="font-bold text-slate-700 italic">DPO</span>
<span class="text-slate-500 italic">Philippe LEGRAND (03 23 05 62 43)</span>
</div>
</div>
</div>
<div class="mt-6 pt-4 border-t border-slate-200">
<p class="text-[9px] font-black text-indigo-500 uppercase italic">Contact Technique : rgpd@siteconseil.fr</p>
</div>
</div>
{# 8. Cookies & Localisation (Small) #}
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic mb-2">Cookies</h3>
<p class="text-[10px] text-slate-500 italic leading-relaxed">
Utilisés pour vous reconnaître, mesurer la performance et sécuriser le site. Désactivables via votre navigateur.
</p>
</div>
{# 9. Conservation & Enfants (Small) #}
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic mb-2">Conservation</h3>
<p class="text-[10px] text-slate-500 italic leading-relaxed">
Données conservées <strong class="text-slate-900 italic">3 ans</strong> après votre dernière activité. Pas de collecte < 15 ans sans accord parental.
</p>
</div>
{# 10. Contact Ludik Event (Small - Highlight) #}
<div class="md:col-span-4 bg-indigo-600 p-8 rounded-[2.5rem] text-white flex flex-col justify-between">
<h3 class="text-xs font-black uppercase tracking-widest italic">Siège Social</h3>
<address class="not-italic">
<p class="text-[11px] font-bold">LUDIK EVENT</p>
<p class="text-[11px] italic text-indigo-100">6, rue du Château</p>
<p class="text-[11px] italic text-indigo-100">02800 DANIZY</p>
</address>
<p class="text-[11px] font-black uppercase mt-2 tracking-widest">lilian@ludikevent.fr</p>
</div>
</div>
</div>
{# --- FOOTER LEGAL --- #}
<div class="max-w-6xl mx-auto px-4 mt-16 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-[9px] font-black text-slate-400 uppercase tracking-[0.5em]">Ludik Event © 2026 - Conforme CNIL</p>
<div class="flex gap-6">
<a href="{{ path('revervation') }}" class="text-[10px] font-black text-slate-900 hover:text-indigo-600 uppercase tracking-widest transition-colors flex items-center gap-2">
🏠 Accueil
</a>
</div>
</div>
</div>
{% endblock %}