<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Module Retour Client</title>
    <style>
        /* ============================================
           CSS MODERNE pour tester html2canvas-pro
           Utilise oklch, color-mix, gradient interpolation,
           light-dark, etc. pour simuler un projet Python 3.12+
           ============================================ */

        :root {
            color-scheme: light dark;

            /* Variables oklch */
            --primary: oklch(55% 0.25 260);
            --secondary: oklch(70% 0.15 160);
            --accent: oklch(75% 0.2 30);
            --surface: oklch(98% 0.005 260);
            --text: oklch(25% 0.02 260);

            /* Variables color-mix */
            --primary-hover: color-mix(in oklch, var(--primary), white 20%);
            --primary-light: color-mix(in srgb, var(--primary) 15%, transparent);
            --border-color: color-mix(in oklch, var(--text) 20%, transparent);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: system-ui, -apple-system, sans-serif;
            background: var(--surface);
            color: var(--text);
            line-height: 1.6;
        }

        /* Gradient avec interpolation oklch */
        header {
            background: linear-gradient(in oklch 135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 3rem;
            position: relative;
            overflow: hidden;
        }

        header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(in oklch, oklch(80% 0.3 300 / 0.3), transparent 70%);
            border-radius: 50%;
        }

        header h1 {
            font-size: 2rem;
            font-weight: 700;
            position: relative;
            z-index: 1;
        }

        header p {
            opacity: 0.9;
            margin-top: 0.5rem;
            position: relative;
            z-index: 1;
        }

        /* Navigation avec color-mix */
        nav {
            display: flex;
            gap: 1rem;
            padding: 1rem 3rem;
            background: color-mix(in oklch, var(--primary) 8%, white);
            border-bottom: 1px solid var(--border-color);
        }

        nav a {
            text-decoration: none;
            color: var(--text);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            transition: background 0.2s;
        }

        nav a:hover {
            background: color-mix(in oklch, var(--primary) 15%, transparent);
        }

        nav a.active {
            background: var(--primary);
            color: white;
        }

        /* Contenu principal */
        main {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        /* Cards avec gradients oklch */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid var(--border-color);
            transition: box-shadow 0.2s;
        }

        .card:hover {
            box-shadow: 0 8px 30px color-mix(in oklch, var(--primary) 15%, transparent);
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .card-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .card-icon.blue {
            background: linear-gradient(in oklch shorter hue 135deg, oklch(65% 0.25 250), oklch(65% 0.25 290));
        }

        .card-icon.green {
            background: linear-gradient(in oklch 135deg, oklch(70% 0.2 150), oklch(70% 0.2 170));
        }

        .card-icon.orange {
            background: linear-gradient(in oklch 135deg, oklch(75% 0.2 60), oklch(75% 0.2 30));
        }

        .card-icon.purple {
            background: linear-gradient(in oklch longer hue 135deg, oklch(60% 0.2 300), oklch(60% 0.2 310));
        }

        .card h3 {
            font-size: 1rem;
            color: var(--text);
        }

        .card p {
            color: color-mix(in oklch, var(--text) 60%, transparent);
            font-size: 0.9rem;
            margin-top: 0.5rem;
        }

        .card .value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            margin-top: 0.5rem;
        }

        /* Tableau avec light-dark */
        .table-container {
            background: white;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .table-container h2 {
            padding: 1.5rem;
            font-size: 1.2rem;
            border-bottom: 1px solid var(--border-color);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            background: color-mix(in oklch, var(--primary) 5%, white);
            text-align: left;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: color-mix(in oklch, var(--text) 70%, transparent);
        }

        td {
            padding: 0.75rem 1.5rem;
            border-top: 1px solid var(--border-color);
        }

        tr:hover td {
            background: color-mix(in oklch, var(--primary) 3%, white);
        }

        /* Badges avec oklch */
        .badge {
            display: inline-block;
            padding: 0.2rem 0.6rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .badge.critique {
            background: oklch(90% 0.1 25);
            color: oklch(40% 0.2 25);
        }

        .badge.normal {
            background: oklch(90% 0.08 250);
            color: oklch(40% 0.2 250);
        }

        .badge.ok {
            background: oklch(90% 0.08 150);
            color: oklch(40% 0.2 150);
        }

        /* Boutons avec gradient oklch */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-primary {
            background: linear-gradient(in oklch 135deg, var(--primary), var(--secondary));
            color: white;
        }

        .btn-primary:hover {
            filter: brightness(1.1);
            box-shadow: 0 4px 15px color-mix(in oklch, var(--primary) 40%, transparent);
        }

        /* Section stats avec mask-image */
        .stats-bar {
            height: 8px;
            border-radius: 4px;
            background: color-mix(in oklch, var(--primary) 15%, white);
            margin-top: 0.75rem;
            overflow: hidden;
        }

        .stats-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(in oklch 90deg, var(--primary), var(--accent));
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 2rem;
            color: color-mix(in oklch, var(--text) 50%, transparent);
            font-size: 0.85rem;
            border-top: 1px solid var(--border-color);
            margin-top: 3rem;
        }
    </style>
</head>
<body>

<header>
    <h1>Dashboard Test - Module Retour Client</h1>
    <p>Page de test avec CSS moderne (oklch, color-mix, gradient interpolation)</p>
</header>

<nav>
    <a href="#" class="active">Dashboard</a>
    <a href="#">Tickets</a>
    <a href="#">Statistiques</a>
    <a href="#">Utilisateurs</a>
    <a href="#">Configuration</a>
</nav>

<main>
    <div class="cards-grid">
        <div class="card">
            <div class="card-header">
                <div class="card-icon blue">&#128196;</div>
                <h3>Tickets ouverts</h3>
            </div>
            <div class="value">24</div>
            <p>+3 cette semaine</p>
            <div class="stats-bar">
                <div class="stats-fill" style="width: 65%"></div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="card-icon green">&#9989;</div>
                <h3>Tickets resolus</h3>
            </div>
            <div class="value">156</div>
            <p>Taux de resolution : 87%</p>
            <div class="stats-bar">
                <div class="stats-fill" style="width: 87%"></div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="card-icon orange">&#9888;&#65039;</div>
                <h3>Critiques</h3>
            </div>
            <div class="value">3</div>
            <p>A traiter en priorite</p>
            <div class="stats-bar">
                <div class="stats-fill" style="width: 12%"></div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="card-icon purple">&#128337;</div>
                <h3>Temps moyen</h3>
            </div>
            <div class="value">2.4h</div>
            <p>Par ticket cette semaine</p>
            <div class="stats-bar">
                <div class="stats-fill" style="width: 45%"></div>
            </div>
        </div>
    </div>

    <div class="table-container">
        <h2>Derniers tickets</h2>
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Titre</th>
                    <th>Priorite</th>
                    <th>Statut</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>142</td>
                    <td>Erreur 500 sur la page de connexion</td>
                    <td><span class="badge critique">Critique</span></td>
                    <td><span class="badge normal">En cours</span></td>
                    <td>15/02/2026</td>
                </tr>
                <tr>
                    <td>141</td>
                    <td>Bouton "Enregistrer" ne fonctionne pas sur mobile</td>
                    <td><span class="badge normal">Normal</span></td>
                    <td><span class="badge ok">Resolu</span></td>
                    <td>14/02/2026</td>
                </tr>
                <tr>
                    <td>140</td>
                    <td>Mauvais alignement du menu lateral</td>
                    <td><span class="badge ok">Non urgent</span></td>
                    <td><span class="badge normal">En attente</span></td>
                    <td>13/02/2026</td>
                </tr>
                <tr>
                    <td>139</td>
                    <td>Chargement lent de la page statistiques</td>
                    <td><span class="badge normal">Normal</span></td>
                    <td><span class="badge ok">Resolu</span></td>
                    <td>12/02/2026</td>
                </tr>
                <tr>
                    <td>138</td>
                    <td>Export CSV manque les colonnes de date</td>
                    <td><span class="badge normal">Normal</span></td>
                    <td><span class="badge critique">Critique</span></td>
                    <td>11/02/2026</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div style="display: flex; gap: 1rem; margin-bottom: 2rem;">
        <button class="btn btn-primary">Nouveau ticket</button>
        <button class="btn btn-primary">Exporter les donnees</button>
    </div>
</main>

<footer>
    Module Retour Client  &mdash; Page de test avec CSS oklch / color-mix / gradient interpolation
</footer>

{% include 'retour_client.html' %}

</body>
</html>
