ludikevent_crm/templates/revervation/hosting.twig

{% extends 'revervation/base.twig' %}

{% block title %}Hébergement et Infos Techniques | Ludik Event - Sécurité & Performance{% endblock %}
{% block description %}Informations techniques sur l'hébergement de Ludik Event. Découvrez nos engagements sur la sécurité des données, l'accessibilité et la performance de notre plateforme.{% endblock %}
{% block breadcrumb_json %}
    ,{
    "@type": "ListItem",
    "position": 1,
    "name": "Informations Légales et d'Hébergement",
    "item": "{{ url('reservation_hosting') }}"
    }
{% endblock %}
{% block body %}
    <div class="min-h-screen bg-gray-50 font-sans antialiased pb-20">

        {# --- HEADER TECHNIQUE --- #}
        <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">
                        Informations Légales et d'Hébergement
                    </h1>
                    <p class="mt-4 text-slate-500 font-medium italic">Architecture, infrastructure et mentions légales.</p>
                </div>
                <div class="text-right">
                    <div class="inline-flex items-center gap-2 px-3 py-1 bg-emerald-100 rounded-full mb-2">
                        <span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
                        <span class="text-[9px] font-black text-emerald-700 uppercase tracking-widest">Systèmes Opérationnels</span>
                    </div>
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em]">Zone EU-WEST4</p>
                </div>
            </div>
        </div>

        {# --- BENTO GRID --- #}
        <div class="max-w-6xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-4">

                {# 1. Éditeur du Site (Ludik Event) #}
                <div class="md:col-span-6 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
                    <div>
                        <span class="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-4 block italic">Éditeur du site</span>
                        <h2 class="text-2xl font-black text-slate-900 uppercase italic mb-4">Ludik Event</h2>
                        <address class="not-italic text-sm text-slate-500 space-y-1 italic">
                            <p>SIRET : 930 488 408 00012</p>
                            <p>6, rue du Château, 02800 Danizy</p>
                        </address>
                    </div>
                    <div class="mt-6">
                        <p class="text-[10px] font-black text-slate-400 uppercase mb-2 italic">Responsabilité Contenu</p>
                        <a href="mailto:lilian@ludikevent.fr" class="text-sm font-bold text-slate-900 hover:text-indigo-600">lilian@ludikevent.fr</a>
                    </div>
                </div>

                {# 2. Opérateur Technique (SiteConseil) #}
                <div class="md:col-span-6 bg-slate-900 p-8 rounded-[2.5rem] shadow-xl text-white relative overflow-hidden">
                    <div class="absolute -right-4 -bottom-4 text-7xl opacity-10">⚙️</div>
                    <span class="text-[10px] font-black text-amber-400 uppercase tracking-widest mb-4 block italic">Maintenance & Infrastructure</span>
                    <h2 class="text-2xl font-black uppercase italic mb-4">SARL SiteConseil</h2>
                    <div class="grid grid-cols-2 gap-4 text-[10px] text-slate-400 italic">
                        <p>SIRET : 418 664 058 00025</p>
                        <p>TVA : FR05418664058</p>
                        <p class="col-span-2">27 Rue Le Serurier, 02100 Saint-Quentin</p>
                    </div>
                    <div class="mt-8 pt-6 border-t border-white/10 flex justify-between items-center">
                        <p class="text-[10px] font-bold text-amber-400 uppercase italic">Signalement : signalement@siteconseil.fr</p>
                    </div>
                </div>

                {# 3. Eco-Impact (Green Box) #}
                <div class="md:col-span-4 bg-emerald-50 p-8 rounded-[2.5rem] border border-emerald-100 flex flex-col justify-between group">
                    <div>
                        <h3 class="text-xs font-black text-emerald-900 uppercase tracking-widest mb-4 italic">Innovation Durable</h3>
                        <p class="text-[11px] text-emerald-800 italic leading-relaxed">
                            Infrastructure propulsée par <strong class="text-emerald-900">Google Cloud</strong> avec une empreinte carbone estimée à <span class="text-emerald-600 font-bold">0,017 tCO₂e/mois</span>.
                        </p>
                    </div>
                    <div class="mt-6 flex items-center gap-2">
                        <span class="text-xl">🌱</span>
                        <p class="text-[9px] font-black text-emerald-700 uppercase">Haute efficience énergétique</p>
                    </div>
                </div>

                {# 4. Localisation Cloud (Map Box) #}
                <div class="md:col-span-8 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm relative overflow-hidden">
                    <div class="absolute right-0 top-0 p-8 opacity-5 text-9xl">🌍</div>
                    <h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-6 italic">Localisation & Disponibilité</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <p class="text-[10px] font-black text-indigo-500 uppercase mb-2 italic">Hébergement Principal</p>
                            <p class="text-sm font-bold text-slate-900 italic">Pays-Bas (EU-WEST4)</p>
                            <p class="text-[10px] text-slate-400 italic mt-1 leading-relaxed">Zones eu-west4-a/b/c pour une Haute Disponibilité.</p>
                        </div>
                        <div>
                            <p class="text-[10px] font-black text-indigo-500 uppercase mb-2 italic">Sauvegardes (DRP)</p>
                            <p class="text-sm font-bold text-slate-900 italic">Multi-Zones (EU-WEST9)</p>
                            <p class="text-[10px] text-slate-400 italic mt-1 leading-relaxed">Réplication sécurisée pour une sécurité maximale.</p>
                        </div>
                    </div>
                </div>

                {# 5. Services Techniques & Sous-domaines (Tableau) #}
                <div class="md:col-span-12 bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
                    <div class="p-8 border-b border-slate-50 flex justify-between items-center bg-slate-50/50">
                        <h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic">Écosystème Technique Esy-Web</h3>
                        <span class="text-[9px] font-bold text-slate-400 px-3 py-1 bg-white rounded-full border border-slate-100 uppercase">Géré par SiteConseil</span>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 divide-y sm:divide-y-0 sm:divide-x divide-slate-100">
                        <div class="p-6">
                            <p class="text-[9px] font-black text-indigo-500 uppercase mb-2">Stockage</p>
                            <p class="text-[10px] font-bold text-slate-700 font-mono">s3.esy-web.dev</p>
                        </div>

                        <div class="p-6">
                            <p class="text-[9px] font-black text-indigo-500 uppercase mb-2">Monitoring</p>
                            <p class="text-[10px] font-bold text-slate-700 font-mono">sentry.esy-web.dev</p>
                        </div>
                        <div class="p-6">
                            <p class="text-[9px] font-black text-indigo-500 uppercase mb-2">Sécurité</p>
                            <p class="text-[10px] font-bold text-slate-700 font-mono">tools-security.esy-web.dev</p>
                        </div>
                        <div class="p-6">
                            <p class="text-[9px] font-black text-indigo-500 uppercase mb-2">Emails</p>
                            <p class="text-[10px] font-bold text-slate-700 font-mono">mail.esy-web.dev</p>
                        </div>
                    </div>
                </div>

                {# 6. Stack Sécurité (Medium) #}
                <div class="md:col-span-7 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-6 italic italic">Protection Multicouche</h3>
                    <div class="space-y-6">
                        <div class="flex items-start gap-4">
                            <div class="w-10 h-10 bg-orange-50 rounded-xl flex items-center justify-center text-orange-600 font-bold shrink-0">CF</div>
                            <div>
                                <p class="text-[11px] font-black text-slate-900 uppercase">Cloudflare (CDN & Proxy)</p>
                                <p class="text-[10px] text-slate-500 italic">Bouclier Anti-DDoS, Anti-Bot et accélération globale du contenu.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-4">
                            <div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 font-bold shrink-0">SY</div>
                            <div>
                                <p class="text-[11px] font-black text-slate-900 uppercase">Sentry Monitoring</p>
                                <p class="text-[10px] text-slate-500 italic">Détection proactive des erreurs en temps réel pour une qualité de service optimale.</p>
                            </div>
                        </div>
                    </div>
                </div>

                {# 7. Email Delivery (Medium) #}
                <div class="md:col-span-5 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
                    <div>
                        <h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-4 italic italic">Esy Mail Service</h3>
                        <p class="text-[10px] text-slate-500 italic leading-relaxed">
                            Notifications et confirmations via <strong class="text-slate-900">Amazon SES</strong> (Relais externe) pour garantir une délivrabilité maximale.
                        </p>
                    </div>
                    <div class="mt-4 p-4 bg-amber-50 rounded-2xl border border-amber-100">
                        <p class="text-[9px] text-amber-800 italic leading-tight">
                            <strong>Note :</strong> Amazon SES traite le contenu technique des e-mails pour assurer l'envoi vers les destinataires.
                        </p>
                    </div>
                </div>

                {# 8. Conformité Légale (Bottom Full) #}
                <div class="md:col-span-12 bg-indigo-900 text-white p-8 rounded-[2.5rem] shadow-2xl relative overflow-hidden">
                    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-amber-400 via-indigo-400 to-emerald-400"></div>
                    <h3 class="text-xs font-black text-indigo-300 uppercase tracking-widest mb-6 italic">Conformité & Cadre Légal</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <p class="text-[11px] text-indigo-100 italic leading-relaxed">
                            <strong class="text-white block mb-1">RGPD EU</strong>
                            Hébergement 100% Union Européenne garantissant la protection souveraine de vos données personnelles.
                        </p>
                        <p class="text-[11px] text-indigo-100 italic leading-relaxed">
                            <strong class="text-white block mb-1">PROTECTION DES MINEURS</strong>
                            Architecture conforme à l'Art. 227-24 du Code Pénal pour le contrôle d'accès aux services.
                        </p>
                        <p class="text-[11px] text-indigo-100 italic leading-relaxed">
                            <strong class="text-white block mb-1">SÉCURITÉ INFRA</strong>
                            Défense multicouche (GCP + SiteConseil + Cloudflare) contre les menaces numériques.
                        </p>
                    </div>
                </div>

            </div>
        </div>

        {# --- FOOTER --- #}
        <div class="max-w-6xl mx-auto px-4 mt-16 flex justify-between items-center border-t border-slate-200 pt-8">
            <p class="text-[9px] font-black text-slate-300 uppercase tracking-[0.5em]">Ludik Event © 2026</p>
            <div class="flex gap-6">
                <a href="{{ path('reservation') }}" class="text-[10px] font-black text-slate-900 hover:text-indigo-600 uppercase tracking-widest">Accueil</a>
            </div>
        </div>
    </div>
{% endblock %}