Fix: Correction critique de la boucle OAuth - Empêcher les échanges multiples du code

PROBLÈME RÉSOLU:
- Erreur "Code already used" répétée dans les logs Keycloak
- Boucle infinie de tentatives d'échange du code d'autorisation OAuth
- Utilisateurs bloqués à la connexion

CORRECTIONS APPLIQUÉES:
1. Ajout de useRef pour protéger contre les exécutions multiples
   - hasExchanged.current: Flag pour prévenir les réexécutions
   - isProcessing.current: Protection pendant le traitement

2. Modification des dépendances useEffect
   - AVANT: [searchParams, router] → exécution à chaque changement
   - APRÈS: [] → exécution unique au montage du composant

3. Amélioration du logging
   - Console logs pour debug OAuth flow
   - Messages emoji pour faciliter le suivi

4. Nettoyage de l'URL
   - window.history.replaceState() pour retirer les paramètres OAuth
   - Évite les re-renders causés par les paramètres dans l'URL

5. Gestion d'erreurs améliorée
   - Capture des erreurs JSON du serveur
   - Messages d'erreur plus explicites

FICHIERS AJOUTÉS:
- app/(main)/aide/* - 4 pages du module Aide (documentation, tutoriels, support)
- app/(main)/messages/* - 4 pages du module Messages (inbox, envoyés, archives)
- app/auth/callback/page.tsx.backup - Sauvegarde avant modification

IMPACT:
✅ Un seul échange de code par authentification
✅ Plus d'erreur "Code already used"
✅ Connexion fluide et sans boucle
✅ Logs propres et lisibles

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/(main)/aide/tutoriels/page.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import React, { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  Video,
+  Search,
+  Play,
+  Clock,
+  Star,
+  ThumbsUp,
+  Eye,
+  ArrowLeft,
+  Filter,
+} from "lucide-react";
+import Link from "next/link";
+
+/**
+ * Page des tutoriels
+ * Vidéos et guides pas-à-pas
+ */
+export default function TutorielsPage() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>("all");
+
+  const tutoriels = [
+    {
+      id: "1",
+      title: "Créer votre premier chantier",
+      description:
+        "Apprenez à créer et configurer un nouveau chantier de A à Z",
+      duration: "8:45",
+      views: 1234,
+      likes: 89,
+      rating: 4.8,
+      category: "Démarrage",
+      level: "Débutant",
+      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+1",
+    },
+    {
+      id: "2",
+      title: "Gérer les phases de chantier",
+      description: "Comment planifier et suivre les différentes phases d'un projet",
+      duration: "12:30",
+      views: 956,
+      likes: 72,
+      rating: 4.9,
+      category: "Chantiers",
+      level: "Intermédiaire",
+      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+2",
+    },
+    {
+      id: "3",
+      title: "Créer et envoyer un devis",
+      description: "Créez des devis professionnels et envoyez-les à vos clients",
+      duration: "10:15",
+      views: 1567,
+      likes: 124,
+      rating: 4.7,
+      category: "Facturation",
+      level: "Débutant",
+      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+3",
+    },
+    {
+      id: "4",
+      title: "Planifier les équipes efficacement",
+      description:
+        "Optimisez la gestion de vos équipes avec le planning intelligent",
+      duration: "15:20",
+      views: 823,
+      likes: 65,
+      rating: 4.6,
+      category: "Équipes",
+      level: "Avancé",
+      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+4",
+    },
+    {
+      id: "5",
+      title: "Maintenance préventive du matériel",
+      description: "Mettez en place un programme de maintenance efficace",
+      duration: "11:45",
+      views: 645,
+      likes: 51,
+      rating: 4.5,
+      category: "Matériel",
+      level: "Intermédiaire",
+      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+5",
+    },
+    {
+      id: "6",
+      title: "Générer des rapports personnalisés",
+      description: "Créez des rapports adaptés à vos besoins spécifiques",
+      duration: "9:30",
+      views: 734,
+      likes: 58,
+      rating: 4.8,
+      category: "Rapports",
+      level: "Avancé",
+      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+6",
+    },
+  ];
+
+  const categories = ["all", "Démarrage", "Chantiers", "Facturation", "Équipes", "Matériel", "Rapports"];
+  const levels = ["all", "Débutant", "Intermédiaire", "Avancé"];
+
+  const filteredTutoriels = tutoriels.filter((tuto) => {
+    const matchesSearch =
+      tuto.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      tuto.description.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesCategory =
+      selectedCategory === "all" || tuto.category === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
+
+  const getLevelColor = (level: string) => {
+    switch (level) {
+      case "Débutant":
+        return "bg-green-100 text-green-800";
+      case "Intermédiaire":
+        return "bg-blue-100 text-blue-800";
+      case "Avancé":
+        return "bg-purple-100 text-purple-800";
+      default:
+        return "bg-gray-100 text-gray-800";
+    }
+  };
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* En-tête */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/aide">
+            <Button variant="ghost" size="sm">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Retour à l'aide
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Tutoriels vidéo</h1>
+            <p className="text-gray-500 mt-1">
+              {filteredTutoriels.length} tutoriel{filteredTutoriels.length > 1 ? "s" : ""}{" "}
+              disponible{filteredTutoriels.length > 1 ? "s" : ""}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Barre de recherche et filtres */}
+      <div className="flex gap-4 flex-wrap">
+        <div className="flex-1 min-w-[300px]">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="Rechercher un tutoriel..."
+              className="pl-10"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+        </div>
+        <div className="flex gap-2 flex-wrap">
+          {categories.map((category) => (
+            <Button
+              key={category}
+              variant={selectedCategory === category ? "default" : "outline"}
+              size="sm"
+              onClick={() => setSelectedCategory(category)}
+            >
+              {category === "all" ? "Toutes les catégories" : category}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {/* Grid de tutoriels */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredTutoriels.map((tutoriel) => (
+          <Card
+            key={tutoriel.id}
+            className="overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
+          >
+            {/* Thumbnail */}
+            <div className="relative">
+              <img
+                src={tutoriel.thumbnail}
+                alt={tutoriel.title}
+                className="w-full h-48 object-cover"
+              />
+              <div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+                <div className="p-4 bg-white rounded-full">
+                  <Play className="h-8 w-8 text-blue-600" />
+                </div>
+              </div>
+              <div className="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white px-2 py-1 rounded text-xs flex items-center gap-1">
+                <Clock className="h-3 w-3" />
+                {tutoriel.duration}
+              </div>
+            </div>
+
+            {/* Contenu */}
+            <div className="p-4">
+              <div className="flex items-start justify-between gap-2 mb-2">
+                <Badge className={getLevelColor(tutoriel.level)}>
+                  {tutoriel.level}
+                </Badge>
+                <Badge variant="outline">{tutoriel.category}</Badge>
+              </div>
+
+              <h3 className="font-semibold text-lg mb-2">{tutoriel.title}</h3>
+              <p className="text-sm text-gray-600 mb-4 line-clamp-2">
+                {tutoriel.description}
+              </p>
+
+              {/* Stats */}
+              <div className="flex items-center justify-between text-sm text-gray-500">
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-1">
+                    <Eye className="h-4 w-4" />
+                    {tutoriel.views.toLocaleString()}
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <ThumbsUp className="h-4 w-4" />
+                    {tutoriel.likes}
+                  </div>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
+                  <span className="font-medium">{tutoriel.rating}</span>
+                </div>
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {filteredTutoriels.length === 0 && (
+        <Card className="p-12">
+          <div className="text-center">
+            <Video className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+            <p className="text-gray-500">Aucun tutoriel trouvé</p>
+          </div>
+        </Card>
+      )}
+
+      {/* Section suggestions */}
+      <Card className="p-6 bg-gradient-to-r from-purple-50 to-blue-50">
+        <div className="flex items-start gap-4">
+          <div className="p-3 bg-purple-600 rounded-lg">
+            <Video className="h-6 w-6 text-white" />
+          </div>
+          <div className="flex-1">
+            <h3 className="font-semibold text-lg mb-2">
+              Vous ne trouvez pas ce que vous cherchez ?
+            </h3>
+            <p className="text-sm text-gray-700 mb-4">
+              Suggérez-nous un nouveau tutoriel ! Nous sommes toujours à l'écoute de
+              vos besoins pour améliorer notre contenu pédagogique.
+            </p>
+            <Button className="bg-purple-600 hover:bg-purple-700">
+              Suggérer un tutoriel
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}