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

{% block title %}Politique de Confidentialité - LOYER-EXPRESS{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    
    <style>
        :root {
            --express-green: #72a333;
            --express-green-dark: #5a8228;
            --express-orange: #ffc107;
            --dark-navy: #0f172a;
        }

        .hero-privacy {
            background: linear-gradient(135deg, var(--dark-navy) 0%, var(--express-green) 100%);
            padding: 100px 0 60px;
            color: white;
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
            text-align: center;
        }

        .privacy-container {
            background: white;
            border-radius: 30px;
            margin-top: -40px;
            padding: 50px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
            position: relative;
            z-index: 10;
        }

        .privacy-section {
            margin-bottom: 40px;
        }

        .privacy-section h2 {
            color: var(--dark-navy);
            font-weight: 800;
            font-size: 1.4rem;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .privacy-section h2 i {
            color: var(--express-green);
            font-size: 1.2rem;
        }

        .text-content {
            color: #4b5563;
            line-height: 1.7;
            font-size: 0.95rem;
            padding-left: 35px;
        }

        .data-badge {
            background: #f1f5f9;
            color: var(--dark-navy);
            padding: 4px 12px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.85rem;
            margin-right: 5px;
            display: inline-block;
            margin-bottom: 5px;
        }

        .last-update {
            background: var(--express-orange);
            color: var(--dark-navy);
            padding: 5px 15px;
            border-radius: 50px;
            font-weight: bold;
            font-size: 0.8rem;
            display: inline-block;
            margin-bottom: 20px;
        }

        @media (max-width: 768px) {
            .privacy-container { padding: 25px; }
            .text-content { padding-left: 0; }
        }
    </style>
{% endblock %}

{% block body %}

    {# --- HERO SECTION --- #}
    <header class="hero-privacy">
        <div class="container animate__animated animate__fadeIn">
            <span class="last-update">CONFIDENTIALITÉ & SÉCURITÉ</span>
            <h1 class="display-4 fw-bold">Politique de <span class="text-warning">Confidentialité</span></h1>
            <p class="lead opacity-75">Comment nous protégeons vos données chez LoyerExpress.</p>
        </div>
    </header>

    {# --- MAIN CONTENT --- #}
    <div class="container mb-5">
        <div class="privacy-container animate__animated animate__fadeInUp">
            
            <p class="text-muted mb-5">
                La présente Charte illustre l’engagement de <strong>LOYER-EXPRESS</strong> quant au respect de votre vie privée et à la protection des données personnelles vous concernant, recueillies et traitées lors de votre utilisation de notre plateforme conformément aux lois nationales de protection des données.
            </p>

            {# 1. Responsable de traitement #}
            <section class="privacy-section">
                <h2><i class="fas fa-user-shield"></i> 1. Responsable de traitement</h2>
                <div class="text-content">
                    <p>LoyerExpress est édité par la société [NOM DE VOTRE SOCIÉTÉ], située à [ADRESSE, VILLE, PAYS]. Pour toute question, vous pouvez contacter notre référent à la protection des données à l'adresse : <strong>[VOTRE EMAIL CONTACT]</strong>.</p>
                </div>
            </section>

            {# 2. Données collectées #}
            <section class="privacy-section">
                <h2><i class="fas fa-database"></i> 2. Données collectées</h2>
                <div class="text-content">
                    <p>Nous collectons les informations que vous nous fournissez volontairement :</p>
                    <div class="mb-3">
                        <span class="data-badge">Nom & Prénom</span>
                        <span class="data-badge">Email</span>
                        <span class="data-badge">Téléphone (Mobile Money)</span>
                        <span class="data-badge">Coordonnées bancaires</span>
                        <span class="data-badge">Détails du patrimoine</span>
                    </div>
                    <p>Nous collectons également des données automatiques : adresse IP, type de navigateur et logs de connexion pour garantir la sécurité de votre compte.</p>
                </div>
            </section>

            {# 3. Finalités #}
            <section class="privacy-section">
                <h2><i class="fas fa-bullseye"></i> 3. Pourquoi utilisons-nous vos données ?</h2>
                <div class="text-content">
                    <p>Vos données nous servent exclusivement à :</p>
                    <ul>
                        <li>Gérer votre compte et vos abonnements.</li>
                        <li>Générer vos quittances et contrats de bail.</li>
                        <li>Faciliter les paiements par Mobile Money.</li>
                        <li>Vous envoyer des alertes en cas d'impayés de vos locataires.</li>
                    </ul>
                </div>
            </section>

            {# 4. Sous-traitance OHADA / Afrique #}
            <section class="privacy-section">
                <h2><i class="fas fa-handshake"></i> 4. Partage des données</h2>
                <div class="text-content">
                    <p>LoyerExpress ne vend <strong>jamais</strong> vos données. Elles sont partagées uniquement avec nos prestataires techniques indispensables :</p>
                    <ul>
                        <li><strong>Hébergement :</strong> Serveurs sécurisés.</li>
                        <li><strong>Paiement :</strong> Opérateurs de Mobile Money et passerelles de paiement bancaire.</li>
                        <li><strong>Emailing :</strong> Pour l'envoi de vos quittances numériques.</li>
                    </ul>
                </div>
            </section>

            {# 5. Sécurité #}
            <section class="privacy-section">
                <h2><i class="fas fa-lock"></i> 5. Sécurité et Conservation</h2>
                <div class="text-content">
                    <p>Nous utilisons le chiffrement <strong>SSL 256 bits</strong> pour toutes les transmissions de données. Vos mots de passe sont hachés et illisibles par nos équipes.</p>
                    <p><strong>Inactivité :</strong> Un compte inactif pendant plus de 12 mois est susceptible d'être supprimé après notification, conformément à notre politique de minimisation des données.</p>
                </div>
            </section>

            {# 6. Vos Droits #}
            <section class="privacy-section">
                <h2><i class="fas fa-user-check"></i> 6. Vos Droits</h2>
                <div class="text-content">
                    <p>Conformément aux lois sur la protection des données personnelles (ex: Loi n° 2013-450 en Côte d'Ivoire ou équivalents), vous disposez d'un droit d'accès, de rectification, de portabilité et de suppression de vos données.</p>
                    <p>Pour exercer ces droits, rendez-vous dans votre espace "Mon Compte" ou contactez-nous par email.</p>
                </div>
            </section>

            <div class="alert bg-warning-subtle rounded-4 p-4 mt-5 border-0 text-center">
                <p class="mb-0 fw-bold"><i class="fas fa-exclamation-triangle me-2"></i> Note aux Locataires</p>
                <p class="small mb-0">LoyerExpress agit comme sous-traitant pour le compte de votre Bailleur. Pour toute demande concernant vos données personnelles, merci de contacter directement votre propriétaire ou gestionnaire.</p>
            </div>

        </div>
    </div>

   
{% endblock %}