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

{% block title %}Conditions Générales d'Utilisation - 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 MINI (Style réduit pour les pages légales) --- */
        .hero-legal {
            background: linear-gradient(135deg, var(--dark-navy) 0%, var(--express-green) 100%);
            padding: 120px 0 60px;
            color: white;
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
            text-align: center;
        }

        /* --- CONTENT STYLE --- */
        .legal-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;
        }

        .legal-section {
            margin-bottom: 40px;
            border-left: 4px solid var(--express-green);
            padding-left: 25px;
        }

        .legal-section h2 {
            color: var(--dark-navy);
            font-weight: 800;
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        .legal-section h3 {
            color: var(--express-green-dark);
            font-size: 1.1rem;
            font-weight: 700;
            margin-top: 20px;
        }

        .text-muted-legal {
            color: #64748b;
            line-height: 1.8;
            font-size: 0.95rem;
        }

        /* Style pour les badges de mise à jour */
        .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;
        }

        /* Liste stylisée */
        .legal-list {
            list-style: none;
            padding-left: 0;
        }
        .legal-list li {
            margin-bottom: 10px;
            position: relative;
            padding-left: 25px;
        }
        .legal-list li::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: var(--express-green);
            position: absolute;
            left: 0;
        }
    </style>
{% endblock %}

{% block body %}

    {# --- HERO SECTION --- #}
    <header class="hero-legal">
        <div class="container animate__animated animate__fadeIn">
            <span class="last-update">MISE À JOUR : 07 NOVEMBRE 2024</span>
            <h1 class="display-4 fw-bold">Conditions Générales <br><span class="text-warning">d'Utilisation</span></h1>
            <p class="lead opacity-75">Transparence et sécurité pour votre gestion immobilière.</p>
        </div>
    </header>

    {# --- MAIN CONTENT --- #}
    <div class="container mb-5">
        <div class="legal-container animate__animated animate__fadeInUp">
            
            <div class="alert bg-primary-subtle border-0 rounded-4 p-4 mb-5">
                <div class="d-flex gap-3">
                    <i class="fas fa-info-circle text-primary fa-2x"></i>
                    <p class="mb-0 small text-dark">
                        Bienvenue sur <strong>LoyerExpress.com</strong>. Les présentes CGU définissent les règles d'utilisation de notre plateforme de gestion immobilière adaptée aux réalités du marché africain francophone.
                    </p>
                </div>
            </div>

            {# 1. Présentation #}
            <section class="legal-section">
                <h2>1. Présentation du Logiciel</h2>
                <div class="text-muted-legal">
                    <p>Le Logiciel <strong>LoyerExpress</strong> est une plateforme de gestion de biens immobiliers en ligne éditée par la société [NOM DE VOTRE SOCIÉTÉ], immatriculée au RCCM sous le numéro [NUMÉRO].</p>
                    <p>La plateforme fournit des services facilitant :</p>
                    <ul class="legal-list">
                        <li>L'automatisation des quittances de loyer.</li>
                        <li>Le suivi des paiements par <strong>Mobile Money</strong> (Orange, MTN, Wave, etc.).</li>
                        <li>La gestion de la maintenance et des charges.</li>
                        <li>La communication entre bailleurs et locataires.</li>
                    </ul>
                </div>
            </section>

            {# 2. Accessibilité #}
            <section class="legal-section">
                <h2>2. Accessibilité et Inscription</h2>
                <div class="text-muted-legal">
                    <p>Le Logiciel est par principe accessible <strong>24h/24, 7j/7</strong>. Pour bénéficier des fonctionnalités, l'Utilisateur doit créer un compte. L'inscription est ouverte à toute personne physique ou morale ayant la capacité juridique dans son pays de résidence.</p>
                    <p>L'Utilisateur demeure seul responsable de la confidentialité de ses identifiants de connexion.</p>
                </div>
            </section>

            {# 3. Paiements et Mobile Money #}
            <section class="legal-section">
                <h2>3. Modalités Financières et Paiements</h2>
                <div class="text-muted-legal">
                    <p>LoyerExpress propose des offres gratuites et payantes. Les tarifs sont indiqués en FCFA (ou devise locale) Hors Taxes.</p>
                    <h3>Moyens de paiement acceptés :</h3>
                    <p>Nous intégrons des solutions de paiements sécurisées locales : <strong>Orange Money, MTN MoMo, Wave</strong> ainsi que les cartes bancaires <strong>Visa et Mastercard</strong>.</p>
                    <p>En cas de souscription à un plan annuel, l'utilisateur s'engage pour une durée de 12 mois ferme.</p>
                </div>
            </section>

            {# 4. Protection des Données #}
            <section class="legal-section">
                <h2>4. Protection de la Vie Privée</h2>
                <div class="text-muted-legal">
                    <p>Conformément aux législations nationales sur la protection des données personnelles (type CIL ou CDP), LoyerExpress s'engage à :</p>
                    <ul class="legal-list">
                        <li>Ne jamais revendre vos données à des tiers.</li>
                        <li>Sécuriser les données de vos locataires.</li>
                        <li>Vous permettre d'exporter vos données à tout moment (Format Excel/PDF).</li>
                    </ul>
                </div>
            </section>

            {# 5. Responsabilité #}
            <section class="legal-section">
                <h2>5. Responsabilité</h2>
                <div class="text-muted-legal">
                    <p>LoyerExpress agit en tant qu'intermédiaire technique. Les modèles de baux fournis sont des bases simplifiées conformes aux usages (OHADA). Ils ne remplacent pas l'avis d'un professionnel du droit (Notaire/Avocat).</p>
                    <p>Nous ne sommes pas responsables des litiges financiers entre le bailleur et son locataire.</p>
                </div>
            </section>

            {# 6. Loi applicable #}
            <section class="legal-section">
                <h2>6. Loi applicable et Litiges</h2>
                <div class="text-muted-legal">
                    <p>Les présentes CGU sont régies par le droit en vigueur au [VOTRE PAYS]. En cas de litige, et à défaut d'accord amiable, compétence exclusive est attribuée aux tribunaux de [VOTRE VILLE].</p>
                </div>
            </section>

            <div class="text-center mt-5">
                <p class="text-muted small">Vous avez des questions ?</p>
                <a href="mailto:contact@loyerexpress.com" class="btn btn-outline-primary rounded-pill px-4">
                    <i class="fas fa-envelope me-2"></i> Contactez le support
                </a>
            </div>

        </div>
    </div>

  

{% endblock %}