{% extends 'base.twig' %}

{% block title %}{{'rgpd_page_title'|trans}}{% endblock %}
{% block meta_description %}{{'rgpd_page_title'|trans}}{% endblock %}

{% block canonical_url %}
    <link rel="canonical" href="{{ url('app_rgpd') }}" />
{% endblock %}

{% block body %}
    <main id="rgpd" class="max-w-6xl mx-auto px-4 py-12 font-sans text-gray-800 bg-[#fbfbfb]">

        {# Header Principal #}
        <header class="mb-20 relative py-10">
            <div class="relative z-10">
                <h1 class="text-4xl md:text-6xl font-black text-gray-900 tracking-tighter uppercase italic leading-none esrgaa-voice">
                    // {{ 'rgpd_page_title_long'|trans }}
                </h1>
                <div class="mt-4 flex items-center gap-2">
                    <div class="h-2 w-24 bg-yellow-500 skew-x-[-20deg]"></div>
                    <div class="h-2 w-12 bg-gray-900 skew-x-[-20deg]"></div>
                </div>
            </div>
        </header>

        <div class="space-y-24">

            {# SECTION 1 #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    {{'rgpd_section1_title'|trans}}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)]">
                    <p class="text-sm italic leading-relaxed text-gray-700">{{'rgpd_section1_p1'|trans}}</p>
                </div>
            </section>

            {# SECTION 2 #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // {{'rgpd_section2_title'|trans}}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)]">
                    <p class="font-black text-gray-900 mb-6 italic uppercase tracking-tight">{{'rgpd_section2_p1_commitment'|trans}}</p>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="p-4 bg-gray-50 border-l-4 border-yellow-500 italic">
                            <strong class="block text-gray-900 mb-1">{{'rgpd_contact_form_title'|trans}}</strong>
                            <span class="text-xs">{{'rgpd_contact_form_details'|trans}}</span>
                        </div>
                        <div class="p-4 bg-gray-50 border-l-4 border-yellow-500 italic">
                            <strong class="block text-gray-900 mb-1">{{'rgpd_contest_form_title'|trans}}</strong>
                            <span class="text-xs">{{'rgpd_contest_form_details'|trans}}</span>
                        </div>
                        <div class="p-4 bg-gray-50 border-l-4 border-yellow-500 italic">
                            <strong class="block text-gray-900 mb-1">{{'rgpd_no_other_collection_title'|trans}}</strong>
                            <span class="text-xs">{{'rgpd_no_other_collection_details'|trans}}</span>
                        </div>
                    </div>
                </div>
            </section>

            {# SECTION 3 #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // {{'rgpd_section3_title'|trans}}
                </span>
                </div>
                <div class="bg-gray-900 text-white p-8 rounded-lg border-r-8 border-yellow-500 shadow-xl overflow-hidden">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                        <div class="space-y-6 text-sm italic text-gray-300">
                            <p>{{'rgpd_section3_p1_no_resale'|trans}}</p>
                            <div class="bg-white/5 p-4 rounded border border-white/10 font-mono text-[11px] leading-relaxed">
                                {{'rgpd_section3_p4_advanced_security'|trans({
                                    '%local_server%': '<span class="text-yellow-500">Local-Server</span>',
                                    '%key_rotation%': '<span class="text-yellow-500">24h-Rotation</span>',
                                    '%no_decryption_key%': '<span class="text-red-500 font-bold">No-Access-Policy</span>'
                                })|raw}}
                            </div>
                        </div>
                        <div class="bg-white/5 p-6 border-l-2 border-yellow-500/50">
                            <ul class="space-y-4 text-xs italic text-gray-300">
                                <li class="flex gap-2"><span class="text-yellow-500">»</span> <strong>{{'rgpd_breach_list1_strong'|trans}}</strong> : {{'rgpd_breach_list1_details'|trans}}</li>
                                <li class="flex gap-2"><span class="text-yellow-500">»</span> <strong>{{'rgpd_breach_list2_strong'|trans}}</strong> : {{'rgpd_breach_list2_details'|trans}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            {# SECTION 4 #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // {{'rgpd_section4_title'|trans}}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] grid grid-cols-1 md:grid-cols-2 gap-8">
                    <p class="text-sm italic leading-relaxed text-gray-600">{{'rgpd_section4_p1_rights_intro'|trans}}</p>
                    <ul class="space-y-3 text-sm italic font-black uppercase tracking-tighter text-gray-900">
                        <li class="flex items-center gap-2"><span class="w-2 h-2 bg-yellow-500"></span> {{'rgpd_right_access'|trans}}</li>
                        <li class="flex items-center gap-2"><span class="w-2 h-2 bg-yellow-500"></span> {{'rgpd_right_rectification'|trans}}</li>
                    </ul>
                </div>
            </section>

            {# SECTION 5 #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // {{'rgpd_section5_title'|trans}}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="flex flex-col justify-center italic text-sm text-gray-600">
                        {{'rgpd_section5_p1_contact_intro'|trans}}
                    </div>
                    <div class="bg-gray-50 p-6 border-l-4 border-yellow-500">
                        <p class="text-lg font-black text-gray-900 mb-4 italic">Serreau Jovann</p>
                        <a href="mailto:rgpd@e-cosplay.fr" class="bg-gray-900 text-white px-6 py-2 font-black italic uppercase hover:bg-yellow-500 hover:text-gray-900 transition-colors inline-block text-xs skew-x-[-10deg]">
                            <span class="skew-x-[10deg] block">rgpd@e-cosplay.fr</span>
                        </a>
                    </div>
                </div>
            </section>

            {# SECTION 6 (ADDITIF TECHNIQUE) #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 6. {{ 'rgpd_additif_title'|trans }}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2 space-y-6 italic text-sm">
                        <p>{{ 'rgpd_additif_collecte_text'|trans }}</p>
                        <div class="bg-gray-900 text-white p-4 font-mono text-[10px] uppercase">
                            <span class="text-yellow-500">// SSL</span> CLOUDFLARE + LET'S ENCRYPT
                        </div>
                    </div>
                    <div class="bg-yellow-500 p-6 border-2 border-gray-900 h-fit">
                        <h3 class="font-black uppercase text-xs mb-4 italic tracking-widest border-b border-gray-900/20 pb-2">DPO SITECONSEIL</h3>
                        <p class="text-[10px] font-bold uppercase italic text-gray-900 leading-tight">LEGRAND Philippe<br>03 23 05 62 43</p>
                    </div>
                </div>
            </section>

        </div>

    </main>
{% endblock %}