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

{% block title %}Politique de confidentialité - SMA{% endblock %}

{% block body %}
<div class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-12 max-w-4xl">
        <div class="bg-white rounded-xl shadow-lg p-8 md:p-12">
            {# En-tête #}
            <div class="text-center mb-12">
                <h1 class="text-4xl font-bold text-[#045B79] mb-3">Politique de confidentialité</h1>
                <p class="text-xl text-gray-600">Site web SMA</p>
            </div>

            {# Identité du responsable #}
            <div class="mb-12">
                <h2 class="text-2xl font-semibold text-[#045B79] mb-6 pb-2 border-b-2 border-[#045B79]/20 flex items-center">
                    <svg class="w-6 h-6 mr-3" 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>
                    Identité du responsable de traitement
                </h2>
                <div class="bg-gray-50 p-8 rounded-lg border border-gray-100 shadow-sm">
                    <p class="font-semibold text-[#045B79] text-xl mb-4">Solutions Médicalisées Adaptées SMA</p>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <span class="text-gray-500 min-w-[140px] mt-[2px]">Forme juridique</span>
                            <span class="font-medium">SARL</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-gray-500 min-w-[140px] mt-[2px]">SIREN</span>
                            <span class="font-medium">508 156 882 RCS Lille Métropole</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-gray-500 min-w-[140px] mt-[2px]">Siège social</span>
                            <span class="font-medium">11 rue du grand ruage, 59650 Villeneuve d'Ascq</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-gray-500 min-w-[140px] mt-[2px]">Représentant</span>
                            <span class="font-medium">M. Romain WATREMEZ</span>
                        </li>
                    </ul>
                </div>
            </div>

            {# Données personnelles #}
            <div class="mb-12">
                <h2 class="text-2xl font-semibold text-[#045B79] mb-6 pb-2 border-b-2 border-[#045B79]/20 flex items-center">
                    <svg class="w-6 h-6 mr-3" 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>
                    Données personnelles
                </h2>
                <div class="space-y-6">
                    {# Finalités #}
                    <div class="bg-gray-50 p-8 rounded-lg border border-gray-100 shadow-sm">
                        <h3 class="text-lg font-semibold text-[#045B79] mb-4">Finalités du traitement</h3>
                        <ul class="list-disc list-inside space-y-2 text-gray-700 ml-4">
                            <li>La création d'un compte Client</li>
                            <li>La présentation des services</li>
                            <li>L'exécution des services commandés</li>
                            <li>La facturation des services</li>
                            <li>La communication des offres de formation</li>
                        </ul>
                    </div>

                    {# Données collectées #}
                    <div class="bg-gray-50 p-8 rounded-lg border border-gray-100 shadow-sm">
                        <h3 class="text-lg font-semibold text-[#045B79] mb-4">Données collectées</h3>
                        <ul class="list-disc list-inside space-y-2 text-gray-700 ml-4">
                            <li>Les données identitaires</li>
                            <li>Les données de contact</li>
                            <li>Les données de facturation et des modalités de paiement</li>
                            <li>L'historique de la relation contractuelle</li>
                            <li>Une copie de la correspondance avec nos services commerciaux</li>
                            <li>Le cas échéant, les réponses aux sondages et questionnaires</li>
                            <li>Les informations techniques liées à la navigation</li>
                        </ul>
                    </div>
                </div>
            </div>

            {# Engagements SMA #}
            <div class="mb-12">
                <h2 class="text-2xl font-semibold text-[#045B79] mb-6 pb-2 border-b-2 border-[#045B79]/20 flex items-center">
                    <svg class="w-6 h-6 mr-3" 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>
                    Nos engagements
                </h2>
                <div class="bg-gray-50 p-8 rounded-lg border border-gray-100 shadow-sm space-y-4">
                    <p class="text-gray-700">SMA garantit la confidentialité des Données traitées et s'engage à :</p>
                    <ul class="list-disc list-inside space-y-3 text-gray-700 ml-4">
                        <li>Veiller à la formation du personnel autorisé en matière de protection des données</li>
                        <li>Tenir un registre des activités de traitements</li>
                        <li>Appliquer les principes de protection des données dès la conception</li>
                        <li>Mettre en place des mesures techniques et organisationnelles adéquates</li>
                        <li>Assurer la sécurité et la confidentialité des données</li>
                    </ul>
                </div>
            </div>

            {# Vos droits #}
            <div class="mb-12">
                <h2 class="text-2xl font-semibold text-[#045B79] mb-6 pb-2 border-b-2 border-[#045B79]/20 flex items-center">
                    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/>
                    </svg>
                    Vos droits sur vos données
                </h2>
                <div class="bg-gray-50 p-8 rounded-lg border border-gray-100 shadow-sm space-y-6">
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="space-y-3">
                            <h3 class="font-semibold text-[#045B79]">Droits d'accès et de contrôle</h3>
                            <ul class="list-disc list-inside space-y-2 text-gray-700 ml-4">
                                <li>Droit d'accès aux données</li>
                                <li>Droit à l'effacement</li>
                                <li>Droit de rectification</li>
                                <li>Droit à la limitation du traitement</li>
                            </ul>
                        </div>
                        <div class="space-y-3">
                            <h3 class="font-semibold text-[#045B79]">Droits complémentaires</h3>
                            <ul class="list-disc list-inside space-y-2 text-gray-700 ml-4">
                                <li>Droit à la portabilité</li>
                                <li>Droit d'opposition</li>
                                <li>Droit de définir des directives post-mortem</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {# Contact DPO #}
            <div class="mb-12">
                <h2 class="text-2xl font-semibold text-[#045B79] mb-6 pb-2 border-b-2 border-[#045B79]/20 flex items-center">
                    <svg class="w-6 h-6 mr-3" 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>
                    Nous contacter
                </h2>
                <div class="bg-gray-50 p-8 rounded-lg border border-gray-100 shadow-sm">
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <h3 class="font-semibold text-[#045B79]">Service DPO</h3>
                            <p class="text-gray-700">Pour exercer vos droits ou pour toute question :</p>
                            <div class="space-y-2">
                                <a href="mailto:dpo@sma-groupe.fr" class="flex items-center text-gray-700 hover:text-[#045B79] transition-colors duration-300">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    dpo@sma-groupe.fr
                                </a>
                                <p class="flex items-start text-gray-700">
                                    <svg class="w-5 h-5 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    </svg>
                                    <span>SMA Service DPO<br/>11 rue du Grand Ruage - bât B6<br/>59650 Villeneuve d'Ascq</span>
                                </p>
                            </div>
                        </div>
                        <div class="space-y-4">
                            <h3 class="font-semibold text-[#045B79]">CNIL</h3>
                            <p class="text-gray-700">Pour toute réclamation auprès de la CNIL :</p>
                            <p class="flex items-start text-gray-700">
                                <svg class="w-5 h-5 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                </svg>
                                <span>3 Place de Fontenoy<br/>TSA 80715<br/>75334 PARIS CEDEX 07</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {# Bloctel #}
            <div class="mb-12">
                <div class="bg-gray-50 p-8 rounded-lg border border-gray-100 shadow-sm">
                    <p class="text-gray-700">Si vous ne souhaitez pas être contacté par téléphone par des sociétés dont vous n'êtes pas cliente, vous pouvez vous inscrire sur <a href="http://bloctel.gouv.fr" target="_blank" class="text-[#045B79] hover:underline">bloctel.gouv.fr</a></p>
                </div>
            </div>

            {# Note de bas de page #}
            <div class="text-sm text-gray-500 text-center mt-12 pt-6 border-t border-gray-200">
                <p> {{ "now"|date("Y") }} SMA - Tous droits réservés</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}