Update Bot (j'ai plus le repo sur GitHub)

Qui c'est la conne qui a delete le repo sur GitHub? C'EST MOIIIII
2026-02-09 14:36:26 +01:00
parent eab4419e12
commit ad2014b7b2
586 changed files with 58986 additions and 25205 deletions
--- a/server/OAUTH_SETUP.md
+++ b/server/OAUTH_SETUP.md
@@ -0,0 +1,151 @@
+# Guide de Configuration OAuth Discord
+
+Ce guide t'explique comment configurer l'authentification Discord OAuth2 pour le serveur de transcripts.
+
+## Étape 1 : Créer une Application Discord
+
+1. Va sur le [Discord Developer Portal](https://discord.com/developers/applications)
+2. Clique sur **"New Application"** (Nouvelle Application)
+3. Donne un nom à ton application (ex: "France Femboy Transcripts")
+4. Clique sur **"Create"** (Créer)
+
+## Étape 2 : Récupérer le Client ID
+
+1. Dans le menu de gauche, clique sur **"OAuth2"**
+2. Tu verras ton **Client ID** dans la section "Client Information"
+3. **Copie ce Client ID** (tu en auras besoin plus tard)
+
+## Étape 3 : Créer un Client Secret
+
+1. Toujours dans **"OAuth2"**, scroll jusqu'à la section "Client Secret"
+2. Clique sur **"Reset Secret"** (Réinitialiser le Secret)
+3. **⚠️ ATTENTION :** Copie immédiatement le Client Secret qui s'affiche, car il ne sera plus visible après !
+4. Si tu l'as perdu, tu devras le régénérer
+
+## Étape 4 : Configurer les Redirects
+
+1. Toujours dans **"OAuth2"**, scroll jusqu'à la section **"Redirects"**
+2. Clique sur **"Add Redirect"** (Ajouter une redirection)
+3. **Tu peux ajouter PLUSIEURS URLs !** Ajoute-les une par une :
+
+   **Pour le développement local :**
+   ```
+   http://localhost:3000/auth/discord/callback
+   ```
+
+   **Pour la production (si tu as un domaine) :**
+   ```
+   https://transcripts.syxpi.fr/auth/discord/callback
+   ```
+   
+   **💡 Astuce :** Tu peux ajouter les deux URLs pour pouvoir tester en local ET utiliser en production. Discord accepte plusieurs redirect URLs !
+
+4. Après avoir ajouté chaque URL, clique sur **"Save Changes"** (Enregistrer les modifications)
+
+## Étape 5 : Configurer les Scopes
+
+1. Dans la section **"Scopes"** (juste au-dessus de Redirects)
+2. Coche ces cases :
+   - ✅ `identify` - Pour récupérer les infos de base de l'utilisateur
+   - ✅ `guilds` - Pour vérifier les rôles de l'utilisateur (optionnel, pour plus tard)
+
+## Étape 6 : Ajouter les variables dans .env
+
+Ouvre ton fichier `.env` à la racine du projet et ajoute ces lignes :
+
+```env
+# Discord OAuth
+# Tu peux utiliser CLIENT_ID et CLIENT_SECRET (déjà utilisés par le bot)
+# OU DISCORD_CLIENT_ID et DISCORD_CLIENT_SECRET (dédiés à l'OAuth)
+CLIENT_ID=ton_client_id_ici
+CLIENT_SECRET=ton_client_secret_ici
+
+# Pour le développement local :
+DISCORD_CALLBACK_URL=http://localhost:3000/auth/discord/callback
+
+# Pour la production (décommente quand tu déploies en prod) :
+# DISCORD_CALLBACK_URL=https://transcripts.syxpi.fr/auth/discord/callback
+```
+
+**Exemple :**
+```env
+CLIENT_ID=123456789012345678
+CLIENT_SECRET=abcdefghijklmnopqrstuvwxyz123456789
+DISCORD_CALLBACK_URL=http://localhost:3000/auth/discord/callback
+```
+
+**💡 Important :**
+- Le serveur accepte **`CLIENT_ID` et `CLIENT_SECRET`** (même variables que le bot)
+- Ou **`DISCORD_CLIENT_ID` et `DISCORD_CLIENT_SECRET`** (variables dédiées)
+- Dans le Discord Developer Portal, tu peux ajouter **les deux URLs** dans les Redirects
+- Dans ton `.env`, tu mets **seulement l'URL que tu utilises actuellement**
+- Pour tester en local : utilise `http://localhost:3000/auth/discord/callback`
+- Pour la production : change le `.env` pour utiliser `https://transcripts.syxpi.fr/auth/discord/callback`
+
+## Étape 7 : Configurer les Modérateurs (Optionnel)
+
+Si tu veux que certains utilisateurs aient accès à tous les transcripts (pas seulement les leurs), ajoute leurs IDs Discord dans `.env` :
+
+```env
+MODERATOR_IDS=361526553940721684,autre_id_ici,encore_un_autre_id
+```
+
+**Comment trouver ton ID Discord ?**
+1. Active le mode développeur dans Discord : Paramètres → Avancé → Mode développeur
+2. Clic droit sur ton nom/avatar → "Copier l'ID"
+
+## Étape 8 : Tester
+
+1. Redémarre le serveur : `npm run server`
+2. Va sur `http://localhost:3000`
+3. Tu devrais être redirigé vers la page de login Discord
+4. Clique sur "Se connecter avec Discord"
+5. Autorise l'application
+6. Tu devrais être redirigé vers le dashboard !
+
+## Dépannage
+
+### Erreur : "Invalid redirect_uri"
+- Vérifie que l'URL dans `DISCORD_CALLBACK_URL` correspond exactement à une des URLs dans les Redirects du Discord Developer Portal
+- Les URLs doivent correspondre caractère par caractère (y compris `http://` vs `https://`)
+- **Tu peux ajouter plusieurs URLs dans les Redirects**, mais dans `.env` tu mets seulement celle que tu utilises actuellement
+- Vérifie qu'il n'y a pas d'espace ou de caractère invisible dans l'URL
+
+### Erreur : "Unknown authentication strategy"
+- Vérifie que `passport-discord` est installé : `npm install passport-discord`
+- Vérifie que les variables `DISCORD_CLIENT_ID` et `DISCORD_CLIENT_SECRET` sont bien dans `.env`
+- Redémarre le serveur après avoir modifié `.env`
+
+### Erreur : "Missing Access"
+- Vérifie que tu as coché les bons scopes dans le Discord Developer Portal
+- Vérifie que l'URL de callback est bien configurée
+
+### Le serveur démarre mais l'OAuth ne fonctionne pas
+- Vérifie les logs du serveur : tu devrais voir "✅ Stratégie Discord OAuth configurée avec succès"
+- Si tu vois un avertissement, vérifie tes variables d'environnement
+
+## Production
+
+Pour déployer en production :
+
+1. **Configure un domaine** (ex: `transcript.syxpi.fr`)
+2. **Configure HTTPS** (Let's Encrypt avec Certbot)
+3. **Configure un reverse proxy** (Nginx/Apache) pointant vers le port 3000
+4. **Mets à jour les Redirects** dans le Discord Developer Portal avec l'URL de production
+5. **Mets à jour `DISCORD_CALLBACK_URL`** dans `.env` avec l'URL de production
+6. **Change `SESSION_SECRET`** pour une valeur aléatoire sécurisée
+7. **Configure `NODE_ENV=production`** dans `.env`
+
+## Sécurité
+
+- ⚠️ **NE PARTAGE JAMAIS** ton Client Secret
+- ⚠️ **NE COMMIT JAMAIS** ton fichier `.env` dans Git
+- ⚠️ Utilise des secrets forts pour `SESSION_SECRET` en production
+- ⚠️ Active HTTPS en production (obligatoire pour les cookies sécurisés)
+
+## Ressources
+
+- [Discord Developer Portal](https://discord.com/developers/applications)
+- [Documentation OAuth2 Discord](https://discord.com/developers/docs/topics/oauth2)
+- [Documentation passport-discord](https://github.com/nicholastay/passport-discord)
+
--- a/server/README.md
+++ b/server/README.md
@@ -0,0 +1,89 @@
+# Serveur Web pour les Transcripts
+
+Serveur web pour héberger les transcripts avec authentification Discord OAuth2.
+
+## Installation
+
+1. Installer les dépendances:
+```bash
+npm install express express-session passport passport-discord
+```
+
+2. Configurer les variables d'environnement dans `.env`:
+```env
+# Discord OAuth
+DISCORD_CLIENT_ID=ton_client_id
+DISCORD_CLIENT_SECRET=ton_client_secret
+DISCORD_CALLBACK_URL=http://localhost:3000/auth/discord/callback
+
+# Serveur
+TRANSCRIPT_PORT=3000
+TRANSCRIPT_WEB_URL=transcript.syxpi.fr
+SESSION_SECRET=change-me-in-production
+
+# Modérateurs (IDs Discord séparés par des virgules)
+MODERATOR_IDS=361526553940721684,autre_id_moderateur
+
+# Base de données (déjà configurée pour le bot)
+DB_HOST=192.168.1.6
+DB_USER=bot
+DB_PASSWORD=ton_password
+DB_NAME=bot
+```
+
+## Configuration Discord OAuth
+
+**📖 Guide détaillé :** Voir [OAUTH_SETUP.md](./OAUTH_SETUP.md) pour un guide complet étape par étape.
+
+**Résumé rapide :**
+1. Aller sur https://discord.com/developers/applications
+2. Créer une nouvelle application ou utiliser l'existante
+3. Aller dans "OAuth2" → "Redirects"
+4. Ajouter: `http://localhost:3000/auth/discord/callback` (pour le dev)
+5. Ajouter: `https://transcript.syxpi.fr/auth/discord/callback` (pour la prod)
+6. Copier le Client ID et le Client Secret dans `.env`
+7. Configurer les scopes : `identify` et `guilds`
+
+## Lancement
+
+```bash
+npm run server
+# ou
+node server/transcript-server.js
+```
+
+Le serveur sera accessible sur `http://localhost:3000`
+
+## Routes
+
+- `GET /login` - Page de connexion Discord
+- `GET /auth/discord` - Démarre l'authentification Discord
+- `GET /auth/discord/callback` - Callback OAuth Discord
+- `GET /auth/logout` - Déconnexion
+- `GET /` - Page d'accueil (liste des transcripts)
+- `GET /tickets/:type/:date/:file` - Accès à un transcript (avec auth)
+
+## Sécurité
+
+- Seuls les utilisateurs authentifiés peuvent accéder aux transcripts
+- Vérification que l'utilisateur est le créateur du ticket OU modérateur
+- Sessions sécurisées avec cookies httpOnly
+- HTTPS requis en production
+
+## Déploiement
+
+Pour déployer sur `transcript.syxpi.fr`:
+
+1. Configurer un reverse proxy (Nginx/Apache) pointant vers le port 3000
+2. Configurer SSL/HTTPS (Let's Encrypt)
+3. Mettre à jour `DISCORD_CALLBACK_URL` dans `.env`
+4. Lancer le serveur avec PM2 ou systemd
+
+## Améliorations futures
+
+- [ ] Vérification réelle des permissions Discord (rôles modérateur)
+- [ ] Interface de recherche/filtrage des transcripts
+- [ ] Statistiques et analytics
+- [ ] Export PDF des transcripts
+- [ ] API REST pour accéder aux transcripts
+
--- a/server/public/style.css
+++ b/server/public/style.css
@@ -0,0 +1,327 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
+
+:root {
+    --bg-dark: #0f172a;
+    --bg-card: #1e293b;
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --accent: #6366f1;
+    --accent-hover: #4f46e5;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --border: #334155;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--bg-dark);
+    color: var(--text-primary);
+    min-height: 100vh;
+}
+
+a { text-decoration: none; color: inherit; }
+
+/* Navbar */
+.navbar {
+    background: rgba(30, 41, 59, 0.8);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 50;
+}
+
+.brand {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.brand i { color: var(--accent); }
+
+.nav-links { display: flex; gap: 1.5rem; }
+
+.nav-link {
+    color: var(--text-secondary);
+    font-weight: 500;
+    transition: color 0.2s;
+}
+
+.nav-link:hover, .nav-link.active { color: var(--accent); }
+
+.user-menu { display: flex; align-items: center; gap: 1rem; }
+
+.avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); }
+
+.logout {
+    color: var(--danger);
+    font-size: 0.9rem;
+    font-weight: 600;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    transition: background 0.2s;
+}
+
+.logout:hover { background: rgba(239, 68, 68, 0.1); }
+
+/* Layout */
+.container { max-width: 1200px; margin: 2rem auto; padding: 0 1.5rem; }
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.title { font-size: 1.5rem; font-weight: 700; }
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+}
+
+.stat-card {
+    background: var(--bg-card);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    transition: transform 0.2s;
+}
+
+.stat-card:hover { transform: translateY(-2px); }
+
+.stat-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+}
+
+.icon-blue { background: rgba(99, 102, 241, 0.1); color: var(--accent); }
+.icon-green { background: rgba(16, 185, 129, 0.1); color: var(--success); }
+.icon-orange { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
+.icon-red { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
+
+.stat-info h3 { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; }
+.stat-info p { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
+
+/* Table & Lists */
+.card {
+    background: var(--bg-card);
+    border-radius: 1rem;
+    border: 1px solid var(--border);
+    overflow: hidden;
+}
+
+.table-responsive { overflow-x: auto; }
+
+table { width: 100%; border-collapse: collapse; }
+
+th {
+    text-align: left;
+    padding: 1rem 1.5rem;
+    background: rgba(0,0,0,0.2);
+    color: var(--text-secondary);
+    font-weight: 600;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+td {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--border);
+    color: var(--text-primary);
+}
+
+tr:hover td { background: rgba(255,255,255,0.02); }
+
+/* Badges */
+.badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+.status-ouvert { background: rgba(16, 185, 129, 0.1); color: var(--success); }
+.status-fermé { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
+.status-en-attente { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
+
+.type-badge { background: rgba(255,255,255,0.05); color: var(--text-secondary); border: 1px solid var(--border); }
+
+/* Buttons & Filters */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all 0.2s;
+    cursor: pointer;
+    border: none;
+}
+
+.btn-primary { background: var(--accent); color: white; }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-ghost { background: transparent; color: var(--text-secondary); }
+.btn-ghost:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
+
+.filters {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.filter-btn {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: all 0.2s;
+}
+
+.filter-btn:hover, .filter-btn.active {
+    background: var(--accent);
+    color: white;
+    border-color: var(--accent);
+}
+
+.empty-state {
+    padding: 4rem;
+    text-align: center;
+    color: var(--text-secondary);
+}
+
+.empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
+
+/* Tickets Grid (Dashboard) */
+.tickets-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+
+.ticket-card {
+    background: var(--bg-card);
+    border-left: 4px solid var(--accent);
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
+    transition: transform 0.2s;
+}
+
+.ticket-card:hover { transform: translateY(-2px); }
+
+.ticket-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.ticket-id {
+    font-family: monospace;
+    color: var(--accent);
+    font-weight: 600;
+    font-size: 1.1rem;
+}
+
+.ticket-type {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+    background: rgba(255,255,255,0.05);
+    border-radius: 4px;
+    color: var(--text-secondary);
+}
+
+.ticket-info {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+}
+
+.ticket-info div { margin-bottom: 0.25rem; }
+.ticket-info strong { color: var(--text-primary); }
+
+.ticket-status {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+.view-btn {
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    padding: 0.5rem;
+    background: var(--accent);
+    color: white;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    transition: background 0.2s;
+}
+
+.view-btn:hover { background: var(--accent-hover); }
+
+.section {
+    background: transparent;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    margin-bottom: 3rem;
+}
+
+.no-tickets {
+    text-align: center;
+    padding: 3rem;
+    background: var(--bg-card);
+    border-radius: 1rem;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+    .navbar { padding: 1rem; }
+    .nav-links { display: none; }
+    .stats-grid { grid-template-columns: 1fr; }
+    td, th { padding: 1rem; }
+    .section-header { flex-direction: column; align-items: flex-start; }
+}
--- a/server/transcript-server.js
+++ b/server/transcript-server.js
@@ -0,0 +1,467 @@
+/**
+ * Serveur web pour héberger les transcripts avec authentification Discord
+ * Interface professionnelle avec dashboard et statistiques
+ */
+
+require('dotenv').config();
+const express = require('express');
+const session = require('express-session');
+const passport = require('passport');
+const path = require('path');
+const fs = require('fs');
+const db = require('../functions/database/db.js');
+
+// --- DEBUG: Fonction pour afficher l'arborescence ---
+function printTree(dir, prefix = '') {
+    if (!fs.existsSync(dir)) return console.log(`${prefix}❌ ${dir} (Introuvable)`);
+    console.log(`${prefix}📁 ${path.basename(dir)}/`);
+    try {
+        const files = fs.readdirSync(dir);
+        files.forEach(file => {
+            const fullPath = path.join(dir, file);
+            const isDir = fs.statSync(fullPath).isDirectory();
+            if (isDir) {
+                printTree(fullPath, prefix + '  ');
+            } else {
+                console.log(`${prefix}  📄 ${file}`);
+            }
+        });
+    } catch (e) {
+        console.log(`${prefix}  ❌ Erreur lecture: ${e.message}`);
+    }
+}
+
+let DiscordStrategy;
+try {
+    DiscordStrategy = require('passport-discord').Strategy;
+} catch (err) {
+    console.warn('⚠️  passport-discord non installé.');
+    DiscordStrategy = null;
+}
+
+const app = express();
+const PORT = process.env.TRANSCRIPT_PORT || 3000;
+
+// --- DEBUG: Middleware de log HTTP ---
+app.use((req, res, next) => {
+    if (!req.url.includes('.css') && !req.url.includes('.js') && !req.url.includes('.png')) {
+        console.log(`[HTTP] ${req.method} ${req.url}`);
+    }
+    next();
+});
+
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+app.use(session({
+    secret: process.env.SESSION_SECRET || 'change-me-in-production',
+    resave: false,
+    saveUninitialized: false,
+    cookie: {
+        secure: process.env.NODE_ENV === 'production',
+        httpOnly: true,
+        maxAge: 24 * 60 * 60 * 1000
+    }
+}));
+
+app.use(passport.initialize());
+app.use(passport.session());
+
+let discordStrategyConfigured = false;
+const discordClientId = process.env.DISCORD_CLIENT_ID || process.env.CLIENT_ID;
+const discordClientSecret = process.env.DISCORD_CLIENT_SECRET || process.env.CLIENT_SECRET;
+
+if (DiscordStrategy && discordClientId && discordClientSecret) {
+    try {
+        passport.use('discord', new DiscordStrategy({
+            clientID: discordClientId,
+            clientSecret: discordClientSecret,
+            callbackURL: process.env.DISCORD_CALLBACK_URL || `http://localhost:${PORT}/auth/discord/callback`,
+            scope: ['identify', 'guilds']
+        }, (accessToken, refreshToken, profile, done) => {
+            return done(null, profile);
+        }));
+        discordStrategyConfigured = true;
+        console.log('✅ Stratégie Discord OAuth configurée avec succès');
+    } catch (err) {
+        console.error('❌ Erreur config Discord:', err);
+        discordStrategyConfigured = false;
+    }
+}
+
+passport.serializeUser((user, done) => done(null, user));
+passport.deserializeUser((obj, done) => done(null, obj));
+
+function isAuthenticated(req, res, next) {
+    if (req.isAuthenticated()) return next();
+    res.redirect('/login');
+}
+
+function isModerator(user) {
+    const moderatorIds = process.env.MODERATOR_IDS ? process.env.MODERATOR_IDS.split(',') : [];
+    return moderatorIds.includes(user.id);
+}
+
+async function hasPermission(req, res, next) {
+    if (!req.isAuthenticated()) return res.redirect('/login');
+
+    const filePath = req.params[0];
+    if (filePath.endsWith('.css')) return next();
+
+    try {
+        const [tickets] = await db.query(
+            'SELECT * FROM tickets WHERE transcriptPath = ? OR transcriptPath = ? OR transcriptPath LIKE ?',
+            [filePath, `transcripts/${filePath}`, `%${filePath}`]
+        );
+
+        if (tickets.length === 0) return res.status(404).send('Transcript introuvable.');
+
+        const ticket = tickets[0];
+        const userId = req.user.id;
+
+        if (ticket.userId === userId) return next();
+        if (isModerator(req.user)) return next();
+
+        return res.status(403).send('Accès refusé.');
+
+    } catch (err) {
+        console.error('Erreur permissions:', err);
+        return res.status(500).send('Erreur serveur.');
+    }
+}
+
+// --- HEAD COMMUN (Lien vers style.css) ---
+const COMMON_HEAD = `
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/static/style.css">
+`;
+
+function generateDashboardHTML(user, stats, userTickets, allTickets, isMod) {
+    let userAvatar;
+    if (user.avatar) userAvatar = `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png?size=128`;
+    else if (user.discriminator && user.discriminator !== '0') userAvatar = `https://cdn.discordapp.com/embed/avatars/${user.discriminator % 5}.png`;
+    else userAvatar = `https://cdn.discordapp.com/embed/avatars/${parseInt(user.id) % 5}.png`;
+
+    const statsHTML = isMod ? `
+        <div class="stats-grid">
+            <div class="stat-card"><div class="stat-icon icon-blue"><i class="fa-solid fa-ticket"></i></div><div class="stat-info"><h3>Total Tickets</h3><p>${stats.totalTickets}</p></div></div>
+            <div class="stat-card"><div class="stat-icon icon-green"><i class="fa-solid fa-folder-open"></i></div><div class="stat-info"><h3>Ouverts</h3><p>${stats.openTickets}</p></div></div>
+            <div class="stat-card"><div class="stat-icon icon-red"><i class="fa-solid fa-box-archive"></i></div><div class="stat-info"><h3>Fermés</h3><p>${stats.closedTickets}</p></div></div>
+            <div class="stat-card"><div class="stat-icon icon-orange"><i class="fa-solid fa-user-tag"></i></div><div class="stat-info"><h3>Mes Tickets (Gérés)</h3><p>${stats.myTickets}</p></div></div>
+        </div>
+    ` : '';
+
+    const allTicketsHTML = isMod ? `
+        <div class="section">
+            <h2 class="section-title">🌐 Tous les Transcripts</h2>
+            ${allTickets.length > 0 ? `<div class="tickets-grid">${allTickets.slice(0, 6).map(ticket => generateTicketCard(ticket)).join('')}</div>${allTickets.length > 6 ? `<p style="text-align: center; margin-top: 20px;"><a href="/transcripts" class="view-btn">Voir tous (${allTickets.length})</a></p>` : ''}` : '<div class="no-tickets">Aucun transcript disponible.</div>'}
+        </div>
+    ` : '';
+
+    const myTicketsTitle = isMod ? "📄 Mes Tickets (Gérés)" : "📄 Mes Tickets (Créés)";
+
+    return `<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <title>Dashboard • Femboy Croissant</title>
+    ${COMMON_HEAD}
+</head>
+<body>
+    <nav class="navbar">
+        <a href="/" class="brand"><i class="fa-solid fa-croissant"></i> Femboy Croissant</a>
+        <div class="nav-links">
+            <a href="/" class="nav-link active">Dashboard</a>
+            ${isMod ? '<a href="/transcripts" class="nav-link">Tous les Transcripts</a>' : ''}
+        </div>
+        <div class="user-menu">
+            <img src="${userAvatar}" class="avatar" alt="Avatar">
+            <a href="/auth/logout" class="logout"><i class="fa-solid fa-right-from-bracket"></i></a>
+        </div>
+    </nav>
+
+    <div class="container">
+        <div class="section-header">
+            <h1 class="title">Vue d'ensemble</h1>
+            <span style="color: var(--text-secondary)">Bienvenue, ${escapeHtml(user.username)}</span>
+        </div>
+
+        ${statsHTML}
+
+        <div class="section">
+            <h2 class="section-title">${myTicketsTitle}</h2>
+            ${userTickets.length > 0 ? `<div class="tickets-grid">${userTickets.map(ticket => generateTicketCard(ticket)).join('')}</div>` : '<div class="no-tickets">Aucun ticket trouvé.</div>'}
+        </div>
+
+        ${allTicketsHTML}
+    </div>
+</body>
+</html>`;
+}
+
+function generateTranscriptsPageHTML(user, tickets) {
+    const userAvatar = user.avatar 
+        ? `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png` 
+        : `https://cdn.discordapp.com/embed/avatars/${parseInt(user.id) % 5}.png`;
+
+    return `<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <title>Transcripts • Femboy Croissant</title>
+    ${COMMON_HEAD}
+    <script>
+        function filterTable(type) {
+            const rows = document.querySelectorAll('tbody tr');
+            const buttons = document.querySelectorAll('.filter-btn');
+            buttons.forEach(btn => btn.classList.remove('active'));
+            document.querySelector(\`button[onclick="filterTable('\${type}')"]\`).classList.add('active');
+            rows.forEach(row => {
+                const rowType = row.getAttribute('data-type');
+                if (type === 'all' || rowType === type) row.style.display = '';
+                else row.style.display = 'none';
+            });
+        }
+    </script>
+</head>
+<body>
+    <nav class="navbar">
+        <a href="/" class="brand"><i class="fa-solid fa-croissant"></i> Femboy Croissant</a>
+        <div class="nav-links">
+            <a href="/" class="nav-link">Dashboard</a>
+            <a href="/transcripts" class="nav-link active">Tous les Transcripts</a>
+        </div>
+        <div class="user-menu">
+            <img src="${userAvatar}" class="avatar" alt="Avatar">
+            <a href="/auth/logout" class="logout"><i class="fa-solid fa-right-from-bracket"></i></a>
+        </div>
+    </nav>
+
+    <div class="container">
+        <div class="section-header">
+            <h1 class="title">Archives des Tickets</h1>
+            <div class="filters">
+                <button class="filter-btn active" onclick="filterTable('all')">Tout</button>
+                <button class="filter-btn" onclick="filterTable('Support')">Support</button>
+                <button class="filter-btn" onclick="filterTable('Plainte')">Plainte</button>
+                <button class="filter-btn" onclick="filterTable('Candidature')">Candidature</button>
+                <button class="filter-btn" onclick="filterTable('Problème Technique')">Technique</button>
+            </div>
+        </div>
+
+        <div class="card">
+            ${tickets.length > 0 ? `
+                <div class="table-responsive">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Type</th>
+                                <th>Créateur</th>
+                                <th>Géré par</th>
+                                <th>Date</th>
+                                <th>Statut</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${tickets.map(t => generateTableRow(t, true)).join('')}
+                        </tbody>
+                    </table>
+                </div>
+            ` : `
+                <div class="empty-state">
+                    <div class="empty-icon"><i class="fa-solid fa-box-open"></i></div>
+                    <p>Aucun transcript disponible.</p>
+                </div>
+            `}
+        </div>
+    </div>
+</body>
+</html>`;
+}
+
+function generateTableRow(ticket, showModerator = false) {
+    const date = new Date(ticket.createdAt).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+    
+    let url = ticket.transcriptPath || '#';
+    if (url !== '#' && !url.startsWith('transcripts/') && !url.startsWith('/transcripts/')) {
+        url = `/transcripts/${url}`;
+    } else if (url !== '#' && !url.startsWith('/')) {
+        url = `/${url}`;
+    }
+
+    const statusClass = `status-${ticket.status.toLowerCase().replace(' ', '-')}`;
+    
+    let modCell = '';
+    if (showModerator) {
+        const mod = ticket.claimedByTag ? escapeHtml(ticket.claimedByTag) : (ticket.claimedBy ? 'Modérateur' : '-');
+        modCell = `<td><span style="color: var(--text-secondary)">${mod}</span></td>`;
+    }
+
+    return `
+        <tr data-type="${ticket.type}">
+            <td style="font-family: monospace; color: var(--accent);">${ticket.ticketId}</td>
+            <td><span class="badge type-badge">${ticket.type}</span></td>
+            <td><strong>${escapeHtml(ticket.userTag)}</strong></td>
+            ${modCell}
+            <td style="color: var(--text-secondary)">${date}</td>
+            <td><span class="badge ${statusClass}"><span class="badge-dot"></span>${ticket.status}</span></td>
+            <td>
+                ${ticket.transcriptPath ? 
+                    `<a href="${url}" class="btn btn-primary" target="_blank"><i class="fa-solid fa-eye"></i> Voir</a>` : 
+                    `<span class="btn btn-ghost" style="cursor: not-allowed; opacity: 0.5"><i class="fa-solid fa-ban"></i></span>`
+                }
+            </td>
+        </tr>
+    `;
+}
+
+function generateTicketCard(ticket) {
+    const date = formatDate(ticket.createdAt);
+    
+    let url = ticket.transcriptPath || '#';
+    if (url !== '#' && !url.startsWith('transcripts/') && !url.startsWith('/transcripts/')) {
+        url = `/transcripts/${url}`;
+    } else if (url !== '#' && !url.startsWith('/')) {
+        url = `/${url}`;
+    }
+
+    const typeEmojis = { 'Support': '💬', 'Plainte': '📢', 'Plainte Staff': '⚠️', 'Candidature': '📝', 'Problème Technique': '🔧' };
+
+    return `
+        <div class="ticket-card">
+            <div class="ticket-header">
+                <div class="ticket-id">${typeEmojis[ticket.type] || '🎫'} ${ticket.ticketId}</div>
+                <span class="ticket-type">${ticket.type}</span>
+            </div>
+            <div class="ticket-info">
+                <div><strong>Créé par:</strong> ${escapeHtml(ticket.userTag)}</div>
+                ${ticket.claimedBy ? `<div><strong>Géré par:</strong> ${ticket.claimedByTag || 'Modérateur'}</div>` : ''}
+                <div><strong>Date:</strong> ${date}</div>
+            </div>
+            <div><span class="ticket-status">${ticket.status}</span></div>
+            ${ticket.transcriptPath ? `<a href="${url}" class="view-btn">Voir le transcript</a>` : '<span style="color: #999;">Transcript non disponible</span>'}
+        </div>
+    `;
+}
+
+function formatDate(timestamp) {
+    try {
+        return new Intl.DateTimeFormat('fr-FR', {
+            timeZone: 'Europe/Paris', year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit'
+        }).format(new Date(timestamp));
+    } catch { return new Date(timestamp).toLocaleString(); }
+}
+
+function escapeHtml(text) {
+    if (!text) return '';
+    return text.replace(/[&<>"']/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' })[m]);
+}
+
+// Routes
+app.get('/login', (req, res) => {
+    res.send(`<!DOCTYPE html>
+    <html>
+    <head>
+        <title>Connexion</title>
+        ${COMMON_HEAD}
+        <style>body { display: flex; align-items: center; justify-content: center; }</style>
+    </head>
+    <body>
+        <div class="card" style="padding: 3rem; text-align: center; max-width: 400px;">
+            <h1 style="margin-bottom: 1rem;">🔐 Accès Restreint</h1>
+            <p style="color: var(--text-secondary); margin-bottom: 2rem;">Veuillez vous connecter avec votre compte Discord pour accéder aux archives.</p>
+            <a href="/auth/discord" class="btn btn-primary" style="width: 100%; justify-content: center; padding: 1rem;">
+                <i class="fa-brands fa-discord"></i> Se connecter avec Discord
+            </a>
+        </div>
+    </body>
+    </html>`);
+});
+
+app.get('/auth/discord', (req, res, next) => {
+    if (!discordStrategyConfigured) return res.send('Erreur configuration OAuth');
+    passport.authenticate('discord')(req, res, next);
+});
+
+app.get('/auth/discord/callback',
+    (req, res, next) => {
+        if (!discordStrategyConfigured) return res.redirect('/login?error=not_configured');
+        passport.authenticate('discord', { failureRedirect: '/login?error=auth_failed' })(req, res, next);
+    },
+    (req, res) => res.redirect('/')
+);
+
+app.get('/auth/logout', (req, res) => {
+    req.logout(() => res.redirect('/login'));
+});
+
+app.use('/static', express.static(path.join(__dirname, 'public')));
+
+// --- FIX CSS: Route explicite avec Header ---
+app.get('*/transcript.css', (req, res) => {
+    res.setHeader('Content-Type', 'text/css');
+    res.sendFile(path.join(process.cwd(), 'transcripts', 'transcript.css'));
+});
+
+app.get(['/tickets/*', '/transcripts/*'], isAuthenticated, hasPermission, (req, res) => {
+    const filePath = req.params[0];
+    const fullPath = path.join(process.cwd(), 'transcripts', filePath);
+    if (!fs.existsSync(fullPath)) return res.status(404).send('Transcript introuvable.');
+    res.sendFile(fullPath);
+});
+
+app.get('/', isAuthenticated, async (req, res) => {
+    try {
+        const userId = req.user.id;
+        const isMod = isModerator(req.user);
+
+        let stats = {};
+        let userTickets = [];
+        let allTickets = [];
+
+        if (isMod) {
+            const [totalStats] = await db.query('SELECT COUNT(*) as total FROM tickets');
+            const [myTicketsStats] = await db.query('SELECT COUNT(*) as total FROM tickets WHERE claimedBy = ?', [userId]);
+            const [openStats] = await db.query('SELECT COUNT(*) as total FROM tickets WHERE status = ?', ['Ouvert']);
+            const [closedStats] = await db.query('SELECT COUNT(*) as total FROM tickets WHERE status = ?', ['Fermé']);
+
+            stats = {
+                totalTickets: totalStats[0].total,
+                myTickets: myTicketsStats[0].total,
+                openTickets: openStats[0].total,
+                closedTickets: closedStats[0].total
+            };
+
+            [userTickets] = await db.query('SELECT * FROM tickets WHERE claimedBy = ? AND transcriptPath IS NOT NULL ORDER BY createdAt DESC LIMIT 10', [userId]);
+            [allTickets] = await db.query('SELECT * FROM tickets WHERE transcriptPath IS NOT NULL ORDER BY createdAt DESC LIMIT 10', []);
+        } else {
+            [userTickets] = await db.query('SELECT * FROM tickets WHERE userId = ? AND transcriptPath IS NOT NULL ORDER BY createdAt DESC LIMIT 20', [userId]);
+        }
+
+        res.send(generateDashboardHTML(req.user, stats, userTickets, allTickets, isMod));
+    } catch (err) {
+        console.error('Erreur dashboard:', err);
+        res.status(500).send('Erreur serveur.');
+    }
+});
+
+app.get('/transcripts', isAuthenticated, async (req, res) => {
+    if (!isModerator(req.user)) return res.status(403).send('Accès refusé.');
+
+    try {
+        const [allTickets] = await db.query('SELECT * FROM tickets WHERE transcriptPath IS NOT NULL ORDER BY createdAt DESC', []);
+        res.send(generateTranscriptsPageHTML(req.user, allTickets));
+    } catch (err) {
+        console.error('Erreur transcripts:', err);
+        res.status(500).send('Erreur serveur.');
+    }
+});
+
+app.listen(PORT, () => {
+    console.log(`🌐 Serveur de transcripts démarré sur le port ${PORT}`);
+    console.log('--- STRUCTURE DES FICHIERS ---');
+    printTree(path.join(__dirname, 'public'), 'server/public');
+    printTree(path.join(process.cwd(), 'transcripts'), 'transcripts');
+    console.log('------------------------------');
+});