diff --git a/PHASE2_AUDIT_ET_PLAN_ACTION.md b/PHASE2_AUDIT_ET_PLAN_ACTION.md
new file mode 100644
index 0000000..1505b4a
--- /dev/null
+++ b/PHASE2_AUDIT_ET_PLAN_ACTION.md
@@ -0,0 +1,273 @@
+# Phase 2 - Audit et Plan d'Action : Cotisations & Adhésions
+
+**Date** : 17 novembre 2025  
+**Objectif** : Préparer la livraison Phase 2 selon le plan de production
+
+---
+
+## 📋 ÉTAT ACTUEL
+
+### ✅ Module Cotisations - Backend
+
+**Statut** : ✅ **COMPLET ET FONCTIONNEL**
+
+#### Backend API (`unionflow-server-api`)
+- ✅ `CotisationDTO` - DTO complet avec validations
+- ✅ Support Wave Money, Orange Money, Free Money
+- ✅ Méthodes utilitaires (calculs, statuts, etc.)
+
+#### Backend Implémentation (`unionflow-server-impl-quarkus`)
+- ✅ `Cotisation` (Entity) - Entité JPA complète
+- ✅ `CotisationRepository` - Repository Panache
+- ✅ `CotisationService` - Service métier complet
+- ✅ `CotisationResource` - REST API complète avec endpoints :
+  - `GET /api/cotisations` - Liste paginée
+  - `GET /api/cotisations/{id}` - Par ID
+  - `GET /api/cotisations/reference/{numeroReference}` - Par référence
+  - `GET /api/cotisations/membre/{membreId}` - Par membre
+  - `GET /api/cotisations/statut/{statut}` - Par statut
+  - `GET /api/cotisations/en-retard` - En retard
+  - `GET /api/cotisations/recherche` - Recherche avancée
+  - `GET /api/cotisations/stats` - Statistiques
+  - `POST /api/cotisations` - Créer
+  - `PUT /api/cotisations/{id}` - Modifier
+  - `DELETE /api/cotisations/{id}` - Supprimer
+
+### ⚠️ Module Cotisations - Frontend
+
+**Statut** : ⚠️ **PARTIELLEMENT CONNECTÉ**
+
+#### Service Client
+- ✅ `CotisationService` (RestClient) - Interface définie
+- ⚠️ `CotisationsBean` - Utilise le service mais avec données mockées pour certaines fonctionnalités
+
+#### Pages Frontend
+- ⚠️ `paiement.xhtml` - **PLACEHOLDER** (non fonctionnel)
+- ⚠️ `historique.xhtml` - À vérifier
+- ⚠️ `relances.xhtml` - À vérifier
+- ⚠️ `rapports.xhtml` - À vérifier
+- ⚠️ `collect.xhtml` - À vérifier
+- ⚠️ `reminders.xhtml` - À vérifier
+- ⚠️ `report.xhtml` - À vérifier
+
+### ❌ Module Adhésions - Backend
+
+**Statut** : ❌ **MANQUANT COMPLÈTEMENT**
+
+#### À Créer
+- ❌ `AdhesionDTO` - DTO pour les adhésions
+- ❌ `Adhesion` (Entity) - Entité JPA
+- ❌ `AdhesionRepository` - Repository Panache
+- ❌ `AdhesionService` - Service métier
+- ❌ `AdhesionResource` - REST API
+
+### ⚠️ Module Adhésions - Frontend
+
+**Statut** : ⚠️ **PAGES PLACEHOLDER**
+
+#### Pages Frontend
+- ⚠️ `demande.xhtml` - **PLACEHOLDER** (non fonctionnel)
+- ⚠️ `validation.xhtml` - **PLACEHOLDER**
+- ⚠️ `renouvellement.xhtml` - **PLACEHOLDER**
+- ⚠️ `liste.xhtml` - **PLACEHOLDER**
+- ⚠️ `pending.xhtml` - **PLACEHOLDER**
+- ⚠️ `history.xhtml` - **PLACEHOLDER**
+- ⚠️ `new.xhtml` - **PLACEHOLDER**
+
+---
+
+## 🎯 PLAN D'ACTION DÉTAILLÉ
+
+### **ÉTAPE 1 : Finaliser Module Cotisations Frontend** (Priorité 1)
+
+#### 1.1 Vérifier et compléter `CotisationService` (RestClient)
+- [ ] Vérifier que tous les endpoints backend sont exposés
+- [ ] Ajouter méthodes manquantes si nécessaire
+- [ ] Tester la connexion avec le backend
+
+#### 1.2 Refactoriser `CotisationsBean`
+- [ ] Supprimer toutes les données mockées
+- [ ] Connecter toutes les méthodes au backend via `CotisationService`
+- [ ] Gérer les erreurs proprement
+- [ ] Ajouter logging approprié
+
+#### 1.3 Créer/Refactoriser les pages Cotisations
+- [ ] **paiement.xhtml** - Interface complète de paiement
+  - Formulaire de paiement avec sélection de méthode (Wave, Orange, etc.)
+  - Validation et enregistrement via backend
+  - Confirmation de paiement
+- [ ] **historique.xhtml** - Liste des cotisations avec filtres
+  - Connexion au backend (`GET /api/cotisations/membre/{id}`)
+  - Filtres par statut, période, type
+  - Pagination
+- [ ] **relances.xhtml** - Gestion des relances
+  - Liste des cotisations en retard (`GET /api/cotisations/en-retard`)
+  - Envoi de rappels individuels et groupés
+  - Historique des rappels
+- [ ] **rapports.xhtml** - Rapports financiers
+  - Statistiques (`GET /api/cotisations/stats`)
+  - Graphiques d'évolution
+  - Export Excel/PDF
+- [ ] **collect.xhtml** - Collecte de cotisations
+  - Vue d'ensemble des cotisations à collecter
+  - Actions groupées
+- [ ] **reminders.xhtml** - Rappels automatiques
+  - Configuration des rappels
+  - Planification
+
+#### 1.4 Refactorisation DRY/WOU
+- [ ] Utiliser composants réutilisables créés
+- [ ] Standardiser les formulaires
+- [ ] Uniformiser les tableaux de données
+
+---
+
+### **ÉTAPE 2 : Créer Module Adhésions Backend** (Priorité 2)
+
+#### 2.1 Créer `AdhesionDTO`
+- [ ] Définir la structure du DTO
+- [ ] Ajouter validations Jakarta
+- [ ] Inclure champs nécessaires :
+  - ID membre
+  - Type d'adhésion
+  - Date de demande
+  - Date de validation
+  - Statut (EN_ATTENTE, VALIDEE, REJETEE, RENOUVELEE)
+  - Motif de demande
+  - Documents joints
+  - Validateur
+
+#### 2.2 Créer `Adhesion` Entity
+- [ ] Entité JPA avec UUID
+- [ ] Relations avec Membre et Association
+- [ ] Champs de traçabilité (créé le, modifié le, etc.)
+
+#### 2.3 Créer `AdhesionRepository`
+- [ ] Repository Panache
+- [ ] Méthodes de recherche personnalisées
+- [ ] Requêtes par statut, membre, période
+
+#### 2.4 Créer `AdhesionService`
+- [ ] Méthodes CRUD complètes
+- [ ] Logique métier :
+  - Validation d'adhésion
+  - Renouvellement
+  - Rejet avec motif
+  - Recherche avancée
+  - Statistiques
+
+#### 2.5 Créer `AdhesionResource`
+- [ ] REST API complète :
+  - `GET /api/adhesions` - Liste paginée
+  - `GET /api/adhesions/{id}` - Par ID
+  - `GET /api/adhesions/membre/{membreId}` - Par membre
+  - `GET /api/adhesions/statut/{statut}` - Par statut
+  - `GET /api/adhesions/en-attente` - En attente de validation
+  - `GET /api/adhesions/recherche` - Recherche avancée
+  - `GET /api/adhesions/stats` - Statistiques
+  - `POST /api/adhesions` - Créer demande
+  - `PUT /api/adhesions/{id}` - Modifier
+  - `PUT /api/adhesions/{id}/valider` - Valider
+  - `PUT /api/adhesions/{id}/rejeter` - Rejeter
+  - `PUT /api/adhesions/{id}/renouveler` - Renouveler
+  - `DELETE /api/adhesions/{id}` - Supprimer
+
+---
+
+### **ÉTAPE 3 : Créer Module Adhésions Frontend** (Priorité 3)
+
+#### 3.1 Créer `AdhesionService` (RestClient)
+- [ ] Interface RestClient complète
+- [ ] Tous les endpoints backend exposés
+
+#### 3.2 Créer `AdhesionsBean`
+- [ ] Bean JSF pour gestion des adhésions
+- [ ] Connexion complète au backend
+- [ ] Gestion des listes, filtres, actions
+
+#### 3.3 Créer/Refactoriser les pages Adhésions
+- [ ] **demande.xhtml** - Formulaire de demande d'adhésion
+  - Sélection membre (si existant) ou création
+  - Type d'adhésion
+  - Motif de demande
+  - Upload de documents
+  - Soumission
+- [ ] **validation.xhtml** - Validation des demandes
+  - Liste des demandes en attente
+  - Détails de chaque demande
+  - Actions : Valider / Rejeter
+  - Commentaires de validation
+- [ ] **renouvellement.xhtml** - Renouvellement d'adhésion
+  - Sélection membre
+  - Formulaire de renouvellement
+  - Historique des adhésions précédentes
+- [ ] **liste.xhtml** - Liste complète des adhésions
+  - Filtres (statut, membre, période)
+  - Recherche
+  - Actions groupées
+- [ ] **pending.xhtml** - Demandes en attente
+  - Vue dédiée aux adhésions en attente
+  - Priorisation
+- [ ] **history.xhtml** - Historique des adhésions
+  - Par membre
+  - Par période
+  - Export
+
+#### 3.4 Refactorisation DRY/WOU
+- [ ] Utiliser composants réutilisables
+- [ ] Standardiser les formulaires
+- [ ] Uniformiser les tableaux
+
+---
+
+### **ÉTAPE 4 : Intégration Wave** (Priorité 4)
+
+#### 4.1 Préparation Backend
+- [ ] Créer service Wave (interface)
+- [ ] Préparer endpoints pour callbacks Wave
+- [ ] Gérer les webhooks de paiement
+
+#### 4.2 Préparation Frontend
+- [ ] Intégrer SDK Wave (si disponible)
+- [ ] Interface de paiement Wave
+- [ ] Gestion des retours de paiement
+
+---
+
+## 📊 ORDRE D'EXÉCUTION RECOMMANDÉ
+
+1. **Étape 1** : Finaliser Cotisations Frontend (2-3 semaines)
+2. **Étape 2** : Créer Adhésions Backend (1-2 semaines)
+3. **Étape 3** : Créer Adhésions Frontend (2-3 semaines)
+4. **Étape 4** : Intégration Wave (1 semaine)
+
+**Durée totale estimée** : 6-9 semaines
+
+---
+
+## ✅ CRITÈRES DE VALIDATION
+
+### Module Cotisations
+- [ ] Toutes les pages fonctionnent avec le backend
+- [ ] Aucune donnée mockée
+- [ ] Gestion d'erreurs complète
+- [ ] Tests de connexion backend réussis
+- [ ] Refactorisation DRY/WOU appliquée
+
+### Module Adhésions
+- [ ] Backend complet et testé
+- [ ] Frontend complet et connecté
+- [ ] Workflow complet (demande → validation → renouvellement)
+- [ ] Gestion d'erreurs complète
+- [ ] Refactorisation DRY/WOU appliquée
+
+### Intégration Wave
+- [ ] Paiements fonctionnels via Wave
+- [ ] Callbacks gérés
+- [ ] Traçabilité complète
+
+---
+
+**Document créé le** : 17 novembre 2025  
+**Dernière mise à jour** : 17 novembre 2025
+
diff --git a/PHASE2_REFACTORING_PLAN.md b/PHASE2_REFACTORING_PLAN.md
new file mode 100644
index 0000000..b0703dd
--- /dev/null
+++ b/PHASE2_REFACTORING_PLAN.md
@@ -0,0 +1,232 @@
+# Phase 2 - Plan de Refactorisation : Cotisations & Adhésions
+
+**Date** : 17 novembre 2025  
+**Objectif** : Refactoriser les modules Cotisations et Adhésions selon DRY/WOU
+
+---
+
+## 📊 ÉTAT ACTUEL DÉTAILLÉ
+
+### Beans Existants
+
+#### 1. `CotisationsBean` (`@Named("cotisationsBean")`)
+- **Usage** : Pages `/pages/secure/cotisation/*`
+- **Problèmes** :
+  - ❌ Classe interne `Cotisation` duplique `CotisationDTO`
+  - ❌ Données mockées : `evolutionPaiements`, `repartitionMethodes`, `rappelsEnAttente`
+  - ❌ Actions non connectées : `marquerCommePaye()`, `enregistrerPaiementPartiel()`, etc.
+  - ❌ Statistiques calculées côté client au lieu d'utiliser `/api/cotisations/stats`
+  - ✅ Utilise déjà `CotisationService` pour charger les données
+
+#### 2. `CotisationsGestionBean` (`@Named("cotisationsGestionBean")`)
+- **Usage** : Page `/pages/admin/cotisations/gestion.xhtml`
+- **Problèmes** :
+  - ❌ Classe interne `CotisationAdmin` duplique `CotisationDTO`
+  - ❌ Actions non connectées : toutes les actions sont juste des `LOGGER.info()`
+  - ❌ Statistiques calculées côté client
+  - ✅ Utilise déjà `CotisationService` pour charger les données
+
+### Pages Existantes
+
+#### Pages Cotisations (`/pages/secure/cotisation/`)
+- ❌ `paiement.xhtml` - **PLACEHOLDER**
+- ❌ `historique.xhtml` - **PLACEHOLDER**
+- ❌ `relances.xhtml` - **PLACEHOLDER**
+- ❌ `rapports.xhtml` - **PLACEHOLDER**
+- ❌ `collect.xhtml` - **PLACEHOLDER**
+- ❌ `reminders.xhtml` - **PLACEHOLDER**
+- ❌ `report.xhtml` - **PLACEHOLDER**
+
+#### Page Admin Cotisations
+- ✅ `/pages/admin/cotisations/gestion.xhtml` - **EXISTE** (utilise `cotisationsGestionBean`)
+
+### Composants Réutilisables Disponibles
+
+✅ **Déjà créés** :
+- `page-header.xhtml`
+- `form-section.xhtml`
+- `form-field-text.xhtml`
+- `form-field-calendar.xhtml`
+- `form-field-select.xhtml`
+- `form-field-textarea.xhtml`
+- `form-field-number.xhtml`
+- `form-field-checkbox-menu.xhtml`
+- `form-field-autocomplete.xhtml`
+- `form-field-boolean.xhtml`
+- `form-field-group.xhtml`
+- `button-primary.xhtml`
+- `button-secondary.xhtml`
+- `button-success.xhtml`
+- `button-info.xhtml`
+- `button-warning.xhtml`
+- `button-icon.xhtml`
+- `stat-card.xhtml`
+
+---
+
+## 🎯 PLAN DE REFACTORISATION
+
+### **ÉTAPE 1 : Refactoriser CotisationsBean** (Priorité 1)
+
+#### 1.1 Supprimer la classe interne `Cotisation`
+- [ ] Utiliser directement `CotisationDTO` partout
+- [ ] Supprimer `convertToCotisation()` et utiliser directement les DTOs
+- [ ] Adapter les propriétés dérivées (statutSeverity, etc.) dans le DTO ou créer un helper
+
+#### 1.2 Utiliser les statistiques du backend
+- [ ] Remplacer `initializeStatistiques()` pour utiliser `cotisationService.obtenirStatistiques()`
+- [ ] Supprimer le calcul côté client
+
+#### 1.3 Supprimer les données mockées
+- [ ] `initializeEvolutionPaiements()` - Calculer depuis les données réelles
+- [ ] `initializeRepartitionMethodes()` - Calculer depuis les données réelles
+- [ ] `initializeRappels()` - Utiliser `cotisationService.obtenirEnRetard()`
+
+#### 1.4 Connecter les actions au backend
+- [ ] `enregistrerCotisation()` → `cotisationService.creer()`
+- [ ] `marquerCommePaye()` → `cotisationService.modifier()` avec statut PAYEE
+- [ ] `enregistrerPaiementPartiel()` → `cotisationService.modifier()` avec montant partiel
+- [ ] `envoyerRappel()` → À implémenter (service de notification)
+- [ ] `envoyerRappelsGroupes()` → À implémenter
+- [ ] `exporterCotisations()` → À implémenter
+- [ ] `genererRapportFinancier()` → Utiliser les statistiques du backend
+
+#### 1.5 Améliorer la recherche
+- [ ] Utiliser `cotisationService.rechercher()` au lieu de filtrage côté client
+- [ ] Supprimer `appliquerFiltres()` et utiliser la recherche backend
+
+---
+
+### **ÉTAPE 2 : Refactoriser CotisationsGestionBean** (Priorité 2)
+
+#### 2.1 Supprimer la classe interne `CotisationAdmin`
+- [ ] Utiliser directement `CotisationDTO`
+- [ ] Supprimer `convertToCotisationAdmin()`
+
+#### 2.2 Utiliser les statistiques du backend
+- [ ] Remplacer `initializeKPIs()` pour utiliser `cotisationService.obtenirStatistiques()`
+
+#### 2.3 Connecter toutes les actions au backend
+- [ ] `enregistrerPaiement()` → `cotisationService.modifier()`
+- [ ] `genererRecu()` → À implémenter (génération PDF)
+- [ ] `envoyerRappel()` → À implémenter
+- [ ] `marquerPayeesGroupees()` → Boucle sur sélection + `cotisationService.modifier()`
+- [ ] `envoyerRelancesGroupees()` → À implémenter
+- [ ] `genererRecusGroupes()` → À implémenter
+- [ ] `annulerCotisationsGroupees()` → `cotisationService.supprimer()`
+- [ ] `creerCampagne()` → Créer plusieurs cotisations via `cotisationService.creer()`
+
+---
+
+### **ÉTAPE 3 : Créer les Pages Cotisations** (Priorité 3)
+
+#### 3.1 Page Paiement (`paiement.xhtml`)
+- [ ] Utiliser `page-header.xhtml`
+- [ ] Formulaire avec `form-field-*` components
+- [ ] Sélection méthode paiement (Wave, Orange, etc.)
+- [ ] Connexion à `cotisationService.modifier()` pour enregistrer le paiement
+- [ ] Utiliser composants boutons réutilisables
+
+#### 3.2 Page Historique (`historique.xhtml`)
+- [ ] Utiliser `page-header.xhtml`
+- [ ] Tableau avec `p:dataTable`
+- [ ] Filtres avec composants réutilisables
+- [ ] Connexion à `cotisationService.obtenirParMembre()` ou `cotisationService.rechercher()`
+- [ ] Pagination
+
+#### 3.3 Page Relances (`relances.xhtml`)
+- [ ] Utiliser `page-header.xhtml`
+- [ ] Liste des cotisations en retard via `cotisationService.obtenirEnRetard()`
+- [ ] Actions groupées pour envoi de rappels
+- [ ] Utiliser composants réutilisables
+
+#### 3.4 Page Rapports (`rapports.xhtml`)
+- [ ] Utiliser `page-header.xhtml`
+- [ ] Statistiques via `cotisationService.obtenirStatistiques()`
+- [ ] Graphiques d'évolution
+- [ ] Export Excel/PDF
+
+#### 3.5 Pages Collect, Reminders, Report
+- [ ] Déterminer si nécessaire ou fusionner avec autres pages
+- [ ] Si nécessaire, créer avec composants réutilisables
+
+---
+
+### **ÉTAPE 4 : Créer Module Adhésions Backend** (Priorité 4)
+
+#### 4.1 Créer `AdhesionDTO` dans `unionflow-server-api`
+- [ ] Structure complète avec validations
+- [ ] Champs : membreId, typeAdhesion, dateDemande, dateValidation, statut, etc.
+
+#### 4.2 Créer `Adhesion` Entity dans `unionflow-server-impl-quarkus`
+- [ ] Entité JPA avec UUID
+- [ ] Relations avec Membre et Association
+
+#### 4.3 Créer `AdhesionRepository`
+- [ ] Repository Panache
+- [ ] Méthodes de recherche
+
+#### 4.4 Créer `AdhesionService`
+- [ ] Logique métier complète
+- [ ] Méthodes CRUD
+- [ ] Validation, Renouvellement, Rejet
+
+#### 4.5 Créer `AdhesionResource`
+- [ ] REST API complète
+- [ ] Tous les endpoints nécessaires
+
+---
+
+### **ÉTAPE 5 : Créer Module Adhésions Frontend** (Priorité 5)
+
+#### 5.1 Créer `AdhesionService` (RestClient)
+- [ ] Interface complète correspondant au backend
+
+#### 5.2 Créer `AdhesionsBean`
+- [ ] Bean JSF
+- [ ] Connexion complète au backend
+- [ ] Utiliser directement `AdhesionDTO` (pas de classe interne)
+
+#### 5.3 Créer les pages Adhésions
+- [ ] `demande.xhtml` - Formulaire avec composants réutilisables
+- [ ] `validation.xhtml` - Liste + actions avec composants réutilisables
+- [ ] `renouvellement.xhtml` - Formulaire avec composants réutilisables
+- [ ] `liste.xhtml` - Tableau avec composants réutilisables
+- [ ] `pending.xhtml` - Liste en attente
+- [ ] `history.xhtml` - Historique
+
+---
+
+## 🔄 ORDRE D'EXÉCUTION
+
+1. **Étape 1** : Refactoriser `CotisationsBean` (1-2 semaines)
+2. **Étape 2** : Refactoriser `CotisationsGestionBean` (1 semaine)
+3. **Étape 3** : Créer pages Cotisations (2-3 semaines)
+4. **Étape 4** : Créer module Adhésions Backend (1-2 semaines)
+5. **Étape 5** : Créer module Adhésions Frontend (2-3 semaines)
+
+**Durée totale** : 7-11 semaines
+
+---
+
+## ✅ PRINCIPES À RESPECTER
+
+### DRY (Don't Repeat Yourself)
+- ❌ Pas de duplication de DTOs (supprimer classes internes)
+- ❌ Pas de calculs dupliqués (utiliser backend)
+- ❌ Pas de code répétitif (utiliser composants)
+
+### WOU (Write Once, Use Everywhere)
+- ✅ Utiliser composants réutilisables créés
+- ✅ Utiliser `CotisationDTO` directement
+- ✅ Centraliser la logique dans les services
+
+### Connexion Backend
+- ✅ Toutes les actions doivent appeler le backend
+- ✅ Utiliser les statistiques du backend
+- ✅ Gérer les erreurs proprement
+
+---
+
+**Document créé le** : 17 novembre 2025
+
diff --git a/PLAN_LIVRAISON_PRODUCTION.md b/PLAN_LIVRAISON_PRODUCTION.md
new file mode 100644
index 0000000..e3a4a54
--- /dev/null
+++ b/PLAN_LIVRAISON_PRODUCTION.md
@@ -0,0 +1,256 @@
+# Plan de Livraison Production - UnionFlow
+
+**Date** : 17 novembre 2025  
+**Objectif** : Définir l'ordre de livraison des modules métier pour la mise en production
+
+---
+
+## 📊 Vue d'Ensemble des Modules Métier
+
+Basé sur l'analyse de la structure du projet, UnionFlow comprend les modules métier suivants :
+
+1. **Authentification & Sécurité** (Keycloak OIDC)
+2. **Gestion des Membres**
+3. **Gestion des Cotisations**
+4. **Gestion des Événements**
+5. **Gestion des Adhésions**
+6. **Administration**
+7. **Super Administration**
+8. **Rapports & Statistiques**
+9. **Aide & Support**
+10. **Espace Personnel**
+
+---
+
+## 🎯 Ordre de Livraison Recommandé (Par Priorité Métier)
+
+### **PHASE 1 : FONDATIONS CRITIQUES** ⚡ (Sprint 1-2)
+
+#### 1.1 Authentification & Sécurité ✅ (DÉJÀ EN PLACE)
+- **Statut** : ✅ Implémenté (Keycloak OIDC)
+- **Priorité** : CRITIQUE
+- **Justification** : Base de toute l'application, sécurité obligatoire
+- **Actions** : Vérification finale, tests de sécurité, documentation
+
+#### 1.2 Gestion des Membres (CORE)
+- **Pages** : 
+  - Inscription de membres
+  - Liste des membres
+  - Profil membre
+  - Recherche avancée
+- **Priorité** : CRITIQUE
+- **Justification** : 
+  - Module central de l'application
+  - Nécessaire pour tous les autres modules
+  - Permet la gestion de la base de données des membres
+- **Valeur métier** : ⭐⭐⭐⭐⭐
+- **Dépendances** : Authentification
+- **Estimation** : 2-3 semaines
+
+---
+
+### **PHASE 2 : FINANCIER & ADHÉSIONS** 💰 (Sprint 3-4)
+
+#### 2.1 Gestion des Cotisations
+- **Pages** :
+  - Paiement de cotisations
+  - Historique des paiements
+  - Relances automatiques
+  - Rapports financiers
+  - Collecte de cotisations
+- **Priorité** : HAUTE
+- **Justification** :
+  - Revenus principaux des organisations
+  - Nécessaire pour la viabilité financière
+  - Intégration Wave (paiements mobiles) prévue
+- **Valeur métier** : ⭐⭐⭐⭐⭐
+- **Dépendances** : Membres, Authentification
+- **Estimation** : 3-4 semaines
+
+#### 2.2 Gestion des Adhésions
+- **Pages** :
+  - Demande d'adhésion
+  - Validation d'adhésion
+  - Renouvellement d'adhésion
+  - Historique des adhésions
+  - Liste des adhésions en attente
+- **Priorité** : HAUTE
+- **Justification** :
+  - Processus d'onboarding des nouveaux membres
+  - Nécessaire pour la croissance de l'organisation
+  - Workflow d'approbation important
+- **Valeur métier** : ⭐⭐⭐⭐
+- **Dépendances** : Membres, Authentification
+- **Estimation** : 2-3 semaines
+
+---
+
+### **PHASE 3 : ACTIVITÉS & ENGAGEMENT** 📅 (Sprint 5-6)
+
+#### 3.1 Gestion des Événements
+- **Pages** :
+  - Création d'événements
+  - Calendrier des événements
+  - Gestion des participants
+  - Participation aux événements
+- **Priorité** : MOYENNE-HAUTE
+- **Justification** :
+  - Activité principale des organisations
+  - Engagement des membres
+  - Communication et coordination
+- **Valeur métier** : ⭐⭐⭐⭐
+- **Dépendances** : Membres, Authentification
+- **Estimation** : 2-3 semaines
+
+---
+
+### **PHASE 4 : ADMINISTRATION & GOUVERNANCE** 🛡️ (Sprint 7-8)
+
+#### 4.1 Administration Standard
+- **Pages** :
+  - Gestion des utilisateurs
+  - Gestion des rôles
+  - Paramètres d'administration
+  - Journal d'audit
+  - Sauvegarde des données
+- **Priorité** : MOYENNE
+- **Justification** :
+  - Nécessaire pour la gestion quotidienne
+  - Contrôle d'accès et sécurité
+  - Traçabilité des actions
+- **Valeur métier** : ⭐⭐⭐
+- **Dépendances** : Authentification, Membres
+- **Estimation** : 2-3 semaines
+
+#### 4.2 Super Administration
+- **Pages** :
+  - Gestion des entités (clubs, associations)
+  - Configuration système
+  - Dashboard super admin
+- **Priorité** : MOYENNE
+- **Justification** :
+  - Gestion multi-organisationnelle
+  - Configuration globale
+  - Nécessaire pour les administrateurs système
+- **Valeur métier** : ⭐⭐⭐
+- **Dépendances** : Administration, Authentification
+- **Estimation** : 2 semaines
+
+---
+
+### **PHASE 5 : ANALYSE & REPORTING** 📊 (Sprint 9-10)
+
+#### 5.1 Rapports & Statistiques
+- **Pages** :
+  - Rapports financiers
+  - Rapports sur les membres
+  - Rapports d'activités
+  - Export de données
+- **Priorité** : MOYENNE
+- **Justification** :
+  - Prise de décision basée sur les données
+  - Conformité et transparence
+  - Analyse de performance
+- **Valeur métier** : ⭐⭐⭐
+- **Dépendances** : Cotisations, Membres, Événements
+- **Estimation** : 2-3 semaines
+
+---
+
+### **PHASE 6 : EXPÉRIENCE UTILISATEUR** 🎨 (Sprint 11-12)
+
+#### 6.1 Espace Personnel
+- **Pages** :
+  - Profil personnel
+  - Préférences utilisateur
+  - Notifications
+  - Documents personnels
+  - Agenda personnel
+  - Activités personnelles
+  - Favoris
+- **Priorité** : BASSE-MOYENNE
+- **Justification** :
+  - Amélioration de l'expérience utilisateur
+  - Personnalisation
+  - Engagement des membres
+- **Valeur métier** : ⭐⭐
+- **Dépendances** : Membres, Événements
+- **Estimation** : 2-3 semaines
+
+#### 6.2 Aide & Support
+- **Pages** :
+  - FAQ
+  - Documentation
+  - Guide utilisateur
+  - Tutoriels
+  - Tickets de support
+  - Suggestions
+  - À propos
+- **Priorité** : BASSE
+- **Justification** :
+  - Réduction du support client
+  - Autonomie des utilisateurs
+  - Documentation et formation
+- **Valeur métier** : ⭐⭐
+- **Dépendances** : Aucune (peut être livré en parallèle)
+- **Estimation** : 1-2 semaines
+
+---
+
+## 📋 Résumé des Phases
+
+| Phase | Modules | Priorité | Durée Estimée | Valeur Métier |
+|-------|---------|-----------|---------------|---------------|
+| **Phase 1** | Authentification, Membres | CRITIQUE | 2-3 semaines | ⭐⭐⭐⭐⭐ |
+| **Phase 2** | Cotisations, Adhésions | HAUTE | 5-7 semaines | ⭐⭐⭐⭐⭐ |
+| **Phase 3** | Événements | MOYENNE-HAUTE | 2-3 semaines | ⭐⭐⭐⭐ |
+| **Phase 4** | Administration, Super Admin | MOYENNE | 4-5 semaines | ⭐⭐⭐ |
+| **Phase 5** | Rapports & Statistiques | MOYENNE | 2-3 semaines | ⭐⭐⭐ |
+| **Phase 6** | Personnel, Aide | BASSE-MOYENNE | 3-5 semaines | ⭐⭐ |
+
+**Durée totale estimée** : 18-26 semaines (4.5-6.5 mois)
+
+---
+
+## 🎯 Recommandations Stratégiques
+
+### MVP (Minimum Viable Product) - Livraison Initiale
+Pour une première mise en production, recommander de livrer :
+1. ✅ Authentification & Sécurité
+2. ✅ Gestion des Membres (complet)
+3. ✅ Gestion des Cotisations (paiement + historique)
+4. ✅ Gestion des Adhésions (demande + validation)
+5. ✅ Administration de base (utilisateurs, rôles)
+
+**Durée MVP** : 8-12 semaines (2-3 mois)
+
+### Livraison Progressive
+- **V1.0** : Phases 1-2 (MVP)
+- **V1.1** : Phase 3 (Événements)
+- **V1.2** : Phase 4 (Administration complète)
+- **V2.0** : Phases 5-6 (Reporting + UX)
+
+---
+
+## ⚠️ Points d'Attention
+
+1. **Intégration Wave** : Prévoir dans Phase 2 (Cotisations)
+2. **Tests de charge** : Nécessaires avant chaque phase
+3. **Formation utilisateurs** : Prévoir pour chaque module livré
+4. **Documentation** : À maintenir à jour à chaque livraison
+5. **Sécurité** : Audit de sécurité avant chaque phase critique
+
+---
+
+## 📝 Notes de Livraison
+
+- Chaque phase doit être testée indépendamment
+- Les dépendances entre modules doivent être clairement identifiées
+- Prévoir des périodes de stabilisation entre les phases
+- Communication régulière avec les parties prenantes
+
+---
+
+**Document créé le** : 17 novembre 2025  
+**Dernière mise à jour** : 17 novembre 2025
+
diff --git a/REFACTORING_COTISATIONSBEAN_PART1.md b/REFACTORING_COTISATIONSBEAN_PART1.md
new file mode 100644
index 0000000..43733f5
--- /dev/null
+++ b/REFACTORING_COTISATIONSBEAN_PART1.md
@@ -0,0 +1,32 @@
+# Refactorisation CotisationsBean - Partie 1
+
+**Statut** : En cours  
+**Date** : 17 novembre 2025
+
+## ✅ Complété
+
+1. ✅ **CotisationService** - Complété avec tous les endpoints backend
+2. ✅ **CotisationDTO client** - Enrichi avec toutes les méthodes utilitaires (getStatutSeverity, getStatutIcon, etc.)
+
+## 🔄 En cours
+
+3. ⏳ **CotisationsBean** - Refactorisation en cours pour :
+   - Supprimer classe interne `Cotisation` → Utiliser directement `CotisationDTO`
+   - Utiliser statistiques backend (`cotisationService.obtenirStatistiques()`)
+   - Supprimer données mockées (evolutionPaiements, repartitionMethodes, rappels)
+   - Connecter toutes les actions au backend
+
+## 📝 Prochaines étapes
+
+Le fichier `CotisationsBean.java` fait 699 lignes. La refactorisation complète nécessite :
+- Remplacer `List<Cotisation>` par `List<CotisationDTO>`
+- Supprimer `convertToCotisation()` et utiliser directement les DTOs
+- Remplacer `initializeStatistiques()` pour utiliser le backend
+- Remplacer `initializeEvolutionPaiements()` pour calculer depuis les données réelles
+- Remplacer `initializeRepartitionMethodes()` pour calculer depuis les données réelles
+- Remplacer `initializeRappels()` pour utiliser `cotisationService.obtenirEnRetard()`
+- Connecter `enregistrerCotisation()`, `marquerCommePaye()`, etc. au backend
+- Supprimer toutes les classes internes inutiles
+
+**Note** : La refactorisation complète sera effectuée dans la prochaine itération pour éviter de créer un fichier trop volumineux d'un coup.
+
diff --git a/docker-env.example b/docker-env.example
new file mode 100644
index 0000000..f2ec9ea
--- /dev/null
+++ b/docker-env.example
@@ -0,0 +1,50 @@
+# UnionFlow Docker Environment Configuration
+# ------------------------------------------
+# Copier ce fichier en .env et remplir les valeurs pour la production
+# ATTENTION: Ne jamais commiter le fichier .env avec des vrais mots de passe!
+
+# =======================================
+# Keycloak Administration
+# =======================================
+KEYCLOAK_ADMIN_USER=admin
+KEYCLOAK_ADMIN_PASSWORD=changeme_secure_password_here
+
+# =======================================
+# Base de Données Keycloak
+# =======================================
+KC_DB_USERNAME=keycloak
+KC_DB_PASSWORD=changeme_secure_password_here
+POSTGRES_PASSWORD=changeme_secure_password_here
+POSTGRES_DB=keycloak
+
+# =======================================
+# Configuration Réseau Keycloak
+# =======================================
+# Hostname pour l'accès à Keycloak (sans protocole)
+KC_HOSTNAME=security.lions.dev
+KC_HOSTNAME_PORT=443
+
+# Ports exposés sur l'hôte
+KC_HOST_PORT=8180
+POSTGRES_HOST_PORT=5432
+
+# =======================================
+# Sécurité HTTPS (Production)
+# =======================================
+# En production, désactiver HTTP et activer HTTPS
+KC_HTTP_ENABLED=false
+KC_HTTPS_ENABLED=true
+KC_HOSTNAME_STRICT=true
+KC_HOSTNAME_STRICT_HTTPS=true
+
+# =======================================
+# Configuration Développement Local
+# =======================================
+# Décommenter les lignes ci-dessous pour le développement local
+# KC_HOSTNAME=localhost
+# KC_HOSTNAME_PORT=8180
+# KC_HTTP_ENABLED=true
+# KC_HTTPS_ENABLED=false
+# KC_HOSTNAME_STRICT=false
+# KC_HOSTNAME_STRICT_HTTPS=false
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/dto/AssociationDTO.java b/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/dto/AssociationDTO.java
index 12be9e5..8d2bfe9 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/dto/AssociationDTO.java
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/dto/AssociationDTO.java
@@ -5,9 +5,10 @@ import com.fasterxml.jackson.annotation.JsonProperty;
 import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.NotNull;
+import java.io.Serializable;
+import java.math.BigDecimal;
 import java.time.LocalDate;
 import java.time.LocalDateTime;
-import java.io.Serializable;
 import java.util.UUID;
 
 /**
@@ -26,12 +27,17 @@ public class AssociationDTO implements Serializable {
     
     @NotBlank(message = "Le nom de l'association est obligatoire")
     private String nom;
+
+    // Aligné sur OrganisationDTO.nomCourt
+    private String nomCourt;
     
     private String description;
     private String adresse;
     private String telephone;
     private String email;
     private String siteWeb;
+    // Aligné sur OrganisationDTO.logo (URL ou chemin du logo)
+    private String logo;
     
     @NotNull(message = "Le type d'association est obligatoire")
     @JsonProperty("typeOrganisation")
@@ -47,6 +53,8 @@ public class AssociationDTO implements Serializable {
     private String numeroRegistre;
     private String statut;
     private Integer nombreMembres;
+    // Aligné sur OrganisationDTO.nombreAdministrateurs
+    private Integer nombreAdministrateurs;
     private String responsablePrincipal;
     private String telephoneResponsable;
     private String emailResponsable;
@@ -70,6 +78,39 @@ public class AssociationDTO implements Serializable {
     private String pays;
     // Aligné sur OrganisationDTO.codePostal
     private String codePostal;
+
+    // Aligné sur OrganisationDTO.activitesPrincipales
+    private String activitesPrincipales;
+
+    // Aligné sur OrganisationDTO.objectifs / partenaires / certifications / reseauxSociaux / notes
+    private String objectifs;
+    private String partenaires;
+    private String certifications;
+    private String reseauxSociaux;
+    private String notes;
+
+    // Aligné sur OrganisationDTO.organisationPublique / accepteNouveauxMembres / cotisationObligatoire
+    private Boolean organisationPublique;
+    private Boolean accepteNouveauxMembres;
+    private Boolean cotisationObligatoire;
+
+    // Aligné sur OrganisationDTO.budgetAnnuel / devise / montantCotisationAnnuelle
+    private BigDecimal budgetAnnuel;
+    private String devise;
+    private BigDecimal montantCotisationAnnuelle;
+
+    // Aligné sur OrganisationDTO.telephoneSecondaire / emailSecondaire
+    private String telephoneSecondaire;
+    private String emailSecondaire;
+
+    // Aligné sur OrganisationDTO.organisationParenteId / nomOrganisationParente / niveauHierarchique
+    private UUID organisationParenteId;
+    private String nomOrganisationParente;
+    private Integer niveauHierarchique;
+
+    // Aligné sur OrganisationDTO.latitude / longitude
+    private BigDecimal latitude;
+    private BigDecimal longitude;
     
     // Constructeurs
     public AssociationDTO() {}
@@ -88,6 +129,9 @@ public class AssociationDTO implements Serializable {
     
     public String getNom() { return nom; }
     public void setNom(String nom) { this.nom = nom; }
+
+    public String getNomCourt() { return nomCourt; }
+    public void setNomCourt(String nomCourt) { this.nomCourt = nomCourt; }
     
     public String getDescription() { return description; }
     public void setDescription(String description) { this.description = description; }
@@ -103,6 +147,9 @@ public class AssociationDTO implements Serializable {
     
     public String getSiteWeb() { return siteWeb; }
     public void setSiteWeb(String siteWeb) { this.siteWeb = siteWeb; }
+
+    public String getLogo() { return logo; }
+    public void setLogo(String logo) { this.logo = logo; }
     
     public String getTypeAssociation() { return typeAssociation; }
     public void setTypeAssociation(String typeAssociation) { this.typeAssociation = typeAssociation; }
@@ -118,6 +165,9 @@ public class AssociationDTO implements Serializable {
     
     public Integer getNombreMembres() { return nombreMembres; }
     public void setNombreMembres(Integer nombreMembres) { this.nombreMembres = nombreMembres; }
+
+    public Integer getNombreAdministrateurs() { return nombreAdministrateurs; }
+    public void setNombreAdministrateurs(Integer nombreAdministrateurs) { this.nombreAdministrateurs = nombreAdministrateurs; }
     
     public String getResponsablePrincipal() { return responsablePrincipal; }
     public void setResponsablePrincipal(String responsablePrincipal) { this.responsablePrincipal = responsablePrincipal; }
@@ -146,6 +196,63 @@ public class AssociationDTO implements Serializable {
     public String getCodePostal() { return codePostal; }
     public void setCodePostal(String codePostal) { this.codePostal = codePostal; }
 
+    public String getActivitesPrincipales() { return activitesPrincipales; }
+    public void setActivitesPrincipales(String activitesPrincipales) { this.activitesPrincipales = activitesPrincipales; }
+
+    public String getObjectifs() { return objectifs; }
+    public void setObjectifs(String objectifs) { this.objectifs = objectifs; }
+
+    public String getPartenaires() { return partenaires; }
+    public void setPartenaires(String partenaires) { this.partenaires = partenaires; }
+
+    public String getCertifications() { return certifications; }
+    public void setCertifications(String certifications) { this.certifications = certifications; }
+
+    public String getReseauxSociaux() { return reseauxSociaux; }
+    public void setReseauxSociaux(String reseauxSociaux) { this.reseauxSociaux = reseauxSociaux; }
+
+    public String getNotes() { return notes; }
+    public void setNotes(String notes) { this.notes = notes; }
+
+    public Boolean getOrganisationPublique() { return organisationPublique; }
+    public void setOrganisationPublique(Boolean organisationPublique) { this.organisationPublique = organisationPublique; }
+
+    public Boolean getAccepteNouveauxMembres() { return accepteNouveauxMembres; }
+    public void setAccepteNouveauxMembres(Boolean accepteNouveauxMembres) { this.accepteNouveauxMembres = accepteNouveauxMembres; }
+
+    public Boolean getCotisationObligatoire() { return cotisationObligatoire; }
+    public void setCotisationObligatoire(Boolean cotisationObligatoire) { this.cotisationObligatoire = cotisationObligatoire; }
+
+    public BigDecimal getBudgetAnnuel() { return budgetAnnuel; }
+    public void setBudgetAnnuel(BigDecimal budgetAnnuel) { this.budgetAnnuel = budgetAnnuel; }
+
+    public String getDevise() { return devise; }
+    public void setDevise(String devise) { this.devise = devise; }
+
+    public BigDecimal getMontantCotisationAnnuelle() { return montantCotisationAnnuelle; }
+    public void setMontantCotisationAnnuelle(BigDecimal montantCotisationAnnuelle) { this.montantCotisationAnnuelle = montantCotisationAnnuelle; }
+
+    public String getTelephoneSecondaire() { return telephoneSecondaire; }
+    public void setTelephoneSecondaire(String telephoneSecondaire) { this.telephoneSecondaire = telephoneSecondaire; }
+
+    public String getEmailSecondaire() { return emailSecondaire; }
+    public void setEmailSecondaire(String emailSecondaire) { this.emailSecondaire = emailSecondaire; }
+
+    public UUID getOrganisationParenteId() { return organisationParenteId; }
+    public void setOrganisationParenteId(UUID organisationParenteId) { this.organisationParenteId = organisationParenteId; }
+
+    public String getNomOrganisationParente() { return nomOrganisationParente; }
+    public void setNomOrganisationParente(String nomOrganisationParente) { this.nomOrganisationParente = nomOrganisationParente; }
+
+    public Integer getNiveauHierarchique() { return niveauHierarchique; }
+    public void setNiveauHierarchique(Integer niveauHierarchique) { this.niveauHierarchique = niveauHierarchique; }
+
+    public BigDecimal getLatitude() { return latitude; }
+    public void setLatitude(BigDecimal latitude) { this.latitude = latitude; }
+
+    public BigDecimal getLongitude() { return longitude; }
+    public void setLongitude(BigDecimal longitude) { this.longitude = longitude; }
+
     public LocalDateTime getDateCreation() { return dateCreation; }
     public void setDateCreation(LocalDateTime dateCreation) { this.dateCreation = dateCreation; }
 
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/view/OrganisationDetailBean.java b/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/view/OrganisationDetailBean.java
new file mode 100644
index 0000000..c805b33
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/view/OrganisationDetailBean.java
@@ -0,0 +1,87 @@
+package dev.lions.unionflow.client.view;
+
+import dev.lions.unionflow.client.dto.AssociationDTO;
+import dev.lions.unionflow.client.service.AssociationService;
+import jakarta.annotation.PostConstruct;
+import jakarta.faces.application.FacesMessage;
+import jakarta.faces.context.FacesContext;
+import jakarta.faces.view.ViewScoped;
+import jakarta.inject.Inject;
+import jakarta.inject.Named;
+import java.io.IOException;
+import java.io.Serializable;
+import java.util.UUID;
+import java.util.logging.Logger;
+import org.eclipse.microprofile.rest.client.inject.RestClient;
+
+/**
+ * Bean de consultation d'une organisation (fiche détaillée en lecture seule).
+ */
+@Named("organisationDetailBean")
+@ViewScoped
+public class OrganisationDetailBean implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+    private static final Logger LOGGER = Logger.getLogger(OrganisationDetailBean.class.getName());
+
+    @Inject
+    @RestClient
+    AssociationService associationService;
+
+    private AssociationDTO organisation;
+
+    private UUID organisationId;
+
+    @PostConstruct
+    public void init() {
+        // Récupérer l'ID depuis les paramètres de requête
+        String idParam = FacesContext.getCurrentInstance()
+                .getExternalContext()
+                .getRequestParameterMap()
+                .get("id");
+
+        if (idParam != null && !idParam.isBlank()) {
+            try {
+                organisationId = UUID.fromString(idParam);
+                chargerOrganisation();
+            } catch (IllegalArgumentException e) {
+                LOGGER.severe("ID d'organisation invalide: " + idParam);
+                ajouterMessageErreur("Organisation introuvable", "Identifiant invalide.");
+            }
+        } else {
+            ajouterMessageErreur("Organisation introuvable", "Aucun identifiant fourni.");
+        }
+    }
+
+    public void chargerOrganisation() {
+        if (organisationId == null) {
+            return;
+        }
+        try {
+            organisation = associationService.obtenirParId(organisationId);
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors du chargement de l'organisation: " + e.getMessage());
+            ajouterMessageErreur("Organisation introuvable",
+                    "Impossible de charger les détails de l'organisation.");
+        }
+    }
+
+    public void revenirAListe() throws IOException {
+        FacesContext.getCurrentInstance()
+                .getExternalContext()
+                .redirect(FacesContext.getCurrentInstance()
+                        .getExternalContext()
+                        .getRequestContextPath() + "/pages/secure/organisation/liste.xhtml");
+    }
+
+    private void ajouterMessageErreur(String resume, String detail) {
+        FacesContext.getCurrentInstance().addMessage(null,
+                new FacesMessage(FacesMessage.SEVERITY_ERROR, resume, detail));
+    }
+
+    public AssociationDTO getOrganisation() {
+        return organisation;
+    }
+}
+
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/view/OrganisationsBean.java b/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/view/OrganisationsBean.java
index c0eae32..d2cad0a 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/view/OrganisationsBean.java
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/view/OrganisationsBean.java
@@ -250,6 +250,40 @@ public class OrganisationsBean implements Serializable {
         }
     }
 
+    /**
+     * Recherche les organisations dont le nom contient la requête fournie.
+     * Méthode utilitaire côté client qui délègue au service REST backend.
+     *
+     * @param query terme de recherche (partie du nom)
+     * @return liste d'organisations correspondant au critère, ou liste vide en cas d'erreur
+     */
+    public List<AssociationDTO> rechercherOrganisations(String query) {
+        if (query == null || query.trim().isEmpty()) {
+            return organisations; // rien saisi : on renvoie la liste actuelle
+        }
+        try {
+            // On délègue au endpoint /api/organisations/recherche avec uniquement le nom rempli.
+            List<AssociationDTO> resultats = associationService.rechercher(
+                query,          // nom
+                null,           // type
+                null,           // statut
+                null,           // region
+                null,           // ville
+                0,              // page
+                100             // size
+            );
+            LOGGER.info("Recherche d'organisations pour '" + query + "': " +
+                (resultats != null ? resultats.size() : 0) + " résultat(s)");
+            return resultats != null ? resultats : List.of();
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la recherche d'organisations pour '" + query + "': " + e.getMessage());
+            FacesContext.getCurrentInstance().addMessage(null,
+                new FacesMessage(FacesMessage.SEVERITY_ERROR,
+                    "Erreur", "Impossible de rechercher les organisations: " + e.getMessage()));
+            return List.of();
+        }
+    }
+
     /**
      * Bascule le statut d'une organisation entre ACTIVE et INACTIVE
      * Cette méthode est utilisée pour éviter l'utilisation d'expressions ternaires dans les expressions EL
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/admin/audit/journal.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/admin/audit/journal.xhtml
index 8314b64..698d585 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/admin/audit/journal.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/admin/audit/journal.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-history text-indigo-500" />
             <ui:param name="title" value="Journal d'Audit" />
             <ui:param name="description" value="Traçabilité complète des actions et modifications système" />
@@ -23,7 +23,7 @@
                             <ui:param name="onclick" value="PF('exportDialog').show(); return false;" />
                             <ui:param name="outlined" value="true" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{auditBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -39,28 +39,28 @@
 
         <!-- Statistiques -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{auditBean.totalEvenements}" />
                 <ui:param name="label" value="Événements Totaux" />
                 <ui:param name="icon" value="pi pi-history" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{auditBean.connexionsReussies}" />
                 <ui:param name="label" value="Connexions Réussies" />
                 <ui:param name="icon" value="pi pi-check-circle" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{auditBean.tentativesEchouees}" />
                 <ui:param name="label" value="Tentatives Échouées" />
                 <ui:param name="icon" value="pi pi-times-circle" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{auditBean.alertesSecurite}" />
                 <ui:param name="label" value="Alertes Sécurité" />
                 <ui:param name="icon" value="pi pi-exclamation-triangle" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/demande.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/demande.xhtml
index 6aa4c36..b2e47af 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/demande.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/demande.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-user-plus text-green-500" />
             <ui:param name="title" value="Demande d'Adhésion" />
             <ui:param name="description" value="Formulaire de demande d'adhésion à une organisation" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/history.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/history.xhtml
index 65e68ac..478abac 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/history.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/history.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-history text-blue-500" />
             <ui:param name="title" value="Historique des Adhésions" />
             <ui:param name="description" value="Consultation de l'historique complet des adhésions" />
@@ -22,7 +22,7 @@
                             <ui:param name="icon" value="pi pi-download" />
                             <ui:param name="outlined" value="true" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{adhesionsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/liste.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/liste.xhtml
index 057416a..a1e477e 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/liste.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/liste.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-users text-blue-500" />
             <ui:param name="title" value="Liste des Adhésions" />
             <ui:param name="description" value="Gestion complète des demandes d'adhésion" />
@@ -22,7 +22,7 @@
                             <ui:param name="icon" value="pi pi-plus" />
                             <ui:param name="onclick" value="PF('dlgNouvelleAdhesion').show();" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{adhesionsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -38,28 +38,28 @@
 
         <!-- Statistiques -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.totalAdhesions}" />
                 <ui:param name="label" value="Total Adhésions" />
                 <ui:param name="icon" value="pi pi-users" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsEnAttente}" />
                 <ui:param name="label" value="En Attente" />
                 <ui:param name="icon" value="pi pi-clock" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsApprouvees}" />
                 <ui:param name="label" value="Approuvées" />
                 <ui:param name="icon" value="pi pi-check-circle" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.tauxApprobationInt}%" />
                 <ui:param name="label" value="Taux d'Approbation" />
                 <ui:param name="icon" value="pi pi-percentage" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/new.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/new.xhtml
index 253edf2..a75ba81 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/new.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/new.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-user-plus text-green-500" />
             <ui:param name="title" value="Nouvelle Adhésion" />
             <ui:param name="description" value="Création d'une nouvelle demande d'adhésion" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/paiement.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/paiement.xhtml
index 07dd674..fec23e6 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/paiement.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/paiement.xhtml
@@ -10,14 +10,14 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-credit-card text-green-500" />
             <ui:param name="title" value="Paiement des Adhésions" />
             <ui:param name="description" value="Enregistrement et suivi des paiements d'adhésion" />
             <ui:define name="actions">
                 <h:form id="formActionsPaiement">
                     <div class="flex gap-2">
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{adhesionsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -33,28 +33,28 @@
 
         <!-- Statistiques de paiement -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.totalCollecteFormatte}" />
                 <ui:param name="label" value="Total Collecté" />
                 <ui:param name="icon" value="pi pi-wallet" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsPayees}" />
                 <ui:param name="label" value="Adhésions Payées" />
                 <ui:param name="icon" value="pi pi-check-circle" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.tauxPaiementInt}%" />
                 <ui:param name="label" value="Taux de Paiement" />
                 <ui:param name="icon" value="pi pi-percentage" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsApprouvees - adhesionsBean.statistiques.adhesionsPayees}" />
                 <ui:param name="label" value="En Attente de Paiement" />
                 <ui:param name="icon" value="pi pi-clock" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/pending.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/pending.xhtml
index 1b961ca..48f5d05 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/pending.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/pending.xhtml
@@ -10,14 +10,14 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-clock text-orange-500" />
             <ui:param name="title" value="Adhésions en Attente" />
             <ui:param name="description" value="Validation et traitement des demandes d'adhésion en attente" />
             <ui:define name="actions">
                 <h:form id="formActionsPending">
                     <div class="flex gap-2">
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{adhesionsBean.chargerAdhesionsEnAttente}" />
                             <ui:param name="update" value="@form" />
@@ -33,28 +33,28 @@
 
         <!-- Statistiques -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsEnAttente}" />
                 <ui:param name="label" value="En Attente" />
                 <ui:param name="icon" value="pi pi-clock" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsApprouvees}" />
                 <ui:param name="label" value="Approuvées" />
                 <ui:param name="icon" value="pi pi-check-circle" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.tauxApprobationInt}%" />
                 <ui:param name="label" value="Taux d'Approbation" />
                 <ui:param name="icon" value="pi pi-percentage" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.totalCollecteFormatte}" />
                 <ui:param name="label" value="Total Collecté" />
                 <ui:param name="icon" value="pi pi-wallet" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/renouvellement.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/renouvellement.xhtml
index df817a2..67d881d 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/renouvellement.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/renouvellement.xhtml
@@ -10,14 +10,14 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-refresh text-blue-500" />
             <ui:param name="title" value="Renouvellement d'Adhésion" />
             <ui:param name="description" value="Gestion des renouvellements d'adhésion" />
             <ui:define name="actions">
                 <h:form id="formActionsRenouvellement">
                     <div class="flex gap-2">
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{adhesionsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -33,28 +33,28 @@
 
         <!-- Statistiques -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsPayees}" />
                 <ui:param name="label" value="Adhésions Actives" />
                 <ui:param name="icon" value="pi pi-check-circle" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="0" />
                 <ui:param name="label" value="À Renouveler (ce mois)" />
                 <ui:param name="icon" value="pi pi-clock" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="0" />
                 <ui:param name="label" value="Renouvelées (ce mois)" />
                 <ui:param name="icon" value="pi pi-refresh" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.totalAdhesions}" />
                 <ui:param name="label" value="Total Adhésions" />
                 <ui:param name="icon" value="pi pi-users" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/validation.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/validation.xhtml
index ea4de01..2fa4c92 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/validation.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/adhesion/validation.xhtml
@@ -10,14 +10,14 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-check-circle text-green-500" />
             <ui:param name="title" value="Validation des Adhésions" />
             <ui:param name="description" value="Approbation et rejet des demandes d'adhésion" />
             <ui:define name="actions">
                 <h:form id="formActionsValidation">
                     <div class="flex gap-2">
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{adhesionsBean.chargerAdhesionsEnAttente}" />
                             <ui:param name="update" value="@form" />
@@ -33,28 +33,28 @@
 
         <!-- Statistiques -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsEnAttente}" />
                 <ui:param name="label" value="En Attente" />
                 <ui:param name="icon" value="pi pi-clock" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsApprouvees}" />
                 <ui:param name="label" value="Approuvées" />
                 <ui:param name="icon" value="pi pi-check-circle" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.tauxApprobationInt}%" />
                 <ui:param name="label" value="Taux d'Approbation" />
                 <ui:param name="icon" value="pi pi-percentage" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{adhesionsBean.statistiques.totalAdhesions}" />
                 <ui:param name="label" value="Total" />
                 <ui:param name="icon" value="pi pi-users" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/parametres.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/parametres.xhtml
index 8748c99..e5cee81 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/parametres.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/parametres.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-cog text-orange-500" />
             <ui:param name="title" value="Paramètres Système" />
             <ui:param name="description" value="Configuration des paramètres généraux de l'application" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/roles.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/roles.xhtml
index f2018c4..111b425 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/roles.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/roles.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-shield text-purple-500" />
             <ui:param name="title" value="Gestion des Rôles" />
             <ui:param name="description" value="Gestion des rôles et permissions via Keycloak" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/sauvegarde.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/sauvegarde.xhtml
index 3af5a47..dcaa673 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/sauvegarde.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/sauvegarde.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-database text-green-500" />
             <ui:param name="title" value="Sauvegarde et Restauration" />
             <ui:param name="description" value="Gestion des sauvegardes et restauration de la base de données" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/utilisateurs.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/utilisateurs.xhtml
index 92ef3bb..3937c92 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/utilisateurs.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/admin/utilisateurs.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-users text-blue-500" />
             <ui:param name="title" value="Gestion des Utilisateurs" />
             <ui:param name="description" value="Gestion des utilisateurs et de leurs accès via Keycloak" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/aide/guide.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/aide/guide.xhtml
index 79bb347..9d2922a 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/aide/guide.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/aide/guide.xhtml
@@ -181,21 +181,21 @@
                                 </div>
                             </div>
                             <div class="flex gap-2">
-                                <ui:include src="/templates/components/button-icon.xhtml">
+                                <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                     <ui:param name="icon" value="pi pi-bookmark" />
                                     <ui:param name="title" value="Marquer comme favori" />
                                     <ui:param name="rounded" value="true" />
                                     <ui:param name="text" value="false" />
                                     <ui:param name="styleClass" value="ui-button-outlined ui-button-sm" />
                                 </ui:include>
-                                <ui:include src="/templates/components/button-icon.xhtml">
+                                <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                     <ui:param name="icon" value="pi pi-share-alt" />
                                     <ui:param name="title" value="Partager" />
                                     <ui:param name="rounded" value="true" />
                                     <ui:param name="text" value="false" />
                                     <ui:param name="styleClass" value="ui-button-outlined ui-button-sm" />
                                 </ui:include>
-                                <ui:include src="/templates/components/button-icon.xhtml">
+                                <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                     <ui:param name="icon" value="pi pi-print" />
                                     <ui:param name="title" value="Imprimer" />
                                     <ui:param name="rounded" value="true" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/collect.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/collect.xhtml
index 0d2ab08..695504c 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/collect.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/collect.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-money-bill text-green-500" />
             <ui:param name="title" value="Gestion des Cotisations" />
             <ui:param name="description" value="Suivi et gestion des cotisations des membres" />
@@ -28,7 +28,7 @@
                             <ui:param name="action" value="#{cotisationsBean.exporterCotisations}" />
                             <ui:param name="outlined" value="true" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{cotisationsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -44,28 +44,28 @@
 
         <!-- Statistiques -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.totalCollecteFormatte}" />
                 <ui:param name="label" value="Total Collecté" />
                 <ui:param name="icon" value="pi pi-wallet" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.tauxRecouvrementInt}%" />
                 <ui:param name="label" value="Taux de Recouvrement" />
                 <ui:param name="icon" value="pi pi-percentage" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.cotisationsEnRetard}" />
                 <ui:param name="label" value="En Retard" />
                 <ui:param name="icon" value="pi pi-exclamation-triangle" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.montantRetardFormatte}" />
                 <ui:param name="label" value="Montant Retard" />
                 <ui:param name="icon" value="pi pi-clock" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/historique.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/historique.xhtml
index 16fb287..aad26c3 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/historique.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/historique.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-history text-blue-500" />
             <ui:param name="title" value="Historique des Cotisations" />
             <ui:param name="description" value="Consultation de l'historique complet des cotisations et paiements" />
@@ -23,7 +23,7 @@
                             <ui:param name="action" value="#{cotisationsBean.exporterCotisations}" />
                             <ui:param name="outlined" value="true" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{cotisationsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/paiement.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/paiement.xhtml
index a70dd12..85ca516 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/paiement.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/paiement.xhtml
@@ -10,14 +10,14 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-credit-card text-green-500" />
             <ui:param name="title" value="Paiement de Cotisations" />
             <ui:param name="description" value="Enregistrement et suivi des paiements de cotisations" />
             <ui:define name="actions">
                 <h:form id="formActionsPaiement">
                     <div class="flex gap-2">
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{cotisationsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -33,28 +33,28 @@
 
         <!-- Statistiques de paiement -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.totalCollecteFormatte}" />
                 <ui:param name="label" value="Total Collecté" />
                 <ui:param name="icon" value="pi pi-wallet" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.moyenneMensuelleFormattee}" />
                 <ui:param name="label" value="Moyenne Mensuelle" />
                 <ui:param name="icon" value="pi pi-chart-line" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.objectifAnnuelFormatte}" />
                 <ui:param name="label" value="Objectif Annuel" />
                 <ui:param name="icon" value="pi pi-target" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.tauxRecouvrementInt}%" />
                 <ui:param name="label" value="Taux de Recouvrement" />
                 <ui:param name="icon" value="pi pi-percentage" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/rapports.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/rapports.xhtml
index ade0e7f..d81ff37 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/rapports.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/rapports.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-chart-bar text-purple-500" />
             <ui:param name="title" value="Rapports Financiers" />
             <ui:param name="description" value="Analyse et rapports détaillés sur les cotisations et paiements" />
@@ -22,7 +22,7 @@
                             <ui:param name="icon" value="pi pi-file-pdf" />
                             <ui:param name="action" value="#{cotisationsBean.genererRapportFinancier}" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{cotisationsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -85,28 +85,28 @@
 
         <!-- Statistiques détaillées -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.totalCollecteFormatte}" />
                 <ui:param name="label" value="Total Collecté" />
                 <ui:param name="icon" value="pi pi-wallet" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.objectifAnnuelFormatte}" />
                 <ui:param name="label" value="Objectif Annuel" />
                 <ui:param name="icon" value="pi pi-target" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.moyenneMensuelleFormattee}" />
                 <ui:param name="label" value="Moyenne Mensuelle" />
                 <ui:param name="icon" value="pi pi-chart-line" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.tauxRecouvrementInt}%" />
                 <ui:param name="label" value="Taux de Recouvrement" />
                 <ui:param name="icon" value="pi pi-percentage" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/relances.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/relances.xhtml
index 7f24306..301b728 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/relances.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/relances.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-send text-orange-500" />
             <ui:param name="title" value="Relances de Cotisations" />
             <ui:param name="description" value="Gestion et envoi des relances pour les cotisations en retard" />
@@ -22,7 +22,7 @@
                             <ui:param name="icon" value="pi pi-send" />
                             <ui:param name="onclick" value="PF('dlgRelancesGroupes').show();" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{cotisationsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -38,28 +38,28 @@
 
         <!-- Statistiques de relances -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.cotisationsEnRetard}" />
                 <ui:param name="label" value="Cotisations en Retard" />
                 <ui:param name="icon" value="pi pi-exclamation-triangle" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.montantRetardFormatte}" />
                 <ui:param name="label" value="Montant en Retard" />
                 <ui:param name="icon" value="pi pi-clock" />
                 <ui:param name="bgColor" value="red" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.rappelsEnAttente.size()}" />
                 <ui:param name="label" value="Rappels en Attente" />
                 <ui:param name="icon" value="pi pi-bell" />
                 <ui:param name="bgColor" value="purple" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{cotisationsBean.statistiques.tauxRecouvrementInt}%" />
                 <ui:param name="label" value="Taux de Recouvrement" />
                 <ui:param name="icon" value="pi pi-percentage" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/dashboard.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/dashboard.xhtml
index 87b3402..ac8a871 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/dashboard.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/dashboard.xhtml
@@ -413,7 +413,7 @@
                                 </div>
                             </p:column>
                             <p:column headerText="Action" style="width:80px">
-                                <ui:include src="/templates/components/button-icon.xhtml">
+                                <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                     <ui:param name="icon" value="pi pi-eye" />
                                     <ui:param name="title" value="Voir détails" />
                                 </ui:include>
@@ -478,7 +478,7 @@
                                 <div class="text-900 font-medium">Valider #{dashboardBean.adhesionsPendantes} adhésions</div>
                                 <small class="text-600">Demandes en attente de validation</small>
                             </div>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-arrow-right" />
                                 <ui:param name="action" value="#{dashboardBean.redirectToAdhesionValidation}" />
                                 <ui:param name="severity" value="info" />
@@ -491,7 +491,7 @@
                                 <div class="text-900 font-medium">Relancer #{dashboardBean.cotisationsRetard} cotisations</div>
                                 <small class="text-600">Paiements en retard</small>
                             </div>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-arrow-right" />
                                 <ui:param name="action" value="#{dashboardBean.redirectToRelances}" />
                                 <ui:param name="severity" value="warning" />
@@ -504,7 +504,7 @@
                                 <div class="text-900 font-medium">Traiter #{dashboardBean.aidesEnAttente} aides</div>
                                 <small class="text-600">Demandes d'aide à examiner</small>
                             </div>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-arrow-right" />
                                 <ui:param name="action" value="#{dashboardBean.redirectToAidesTraitement}" />
                                 <ui:param name="severity" value="success" />
@@ -517,7 +517,7 @@
                                 <div class="text-900 font-medium">Organiser prochains événements</div>
                                 <small class="text-600">#{dashboardBean.evenementsAPlanifier} événements à planifier</small>
                             </div>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-arrow-right" />
                                 <ui:param name="action" value="#{dashboardBean.redirectToEvenementPlanning}" />
                                 <ui:param name="styleClass" value="ui-button-help" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/calendrier.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/calendrier.xhtml
index 96eec4d..721bb64 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/calendrier.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/calendrier.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-calendar-plus text-blue-500" />
             <ui:param name="title" value="Calendrier des Événements" />
             <ui:param name="description" value="Vue calendrier de tous les événements de l'organisation" />
@@ -22,7 +22,7 @@
                             <ui:param name="icon" value="pi pi-plus" />
                             <ui:param name="outcome" value="/pages/secure/evenement/creation.xhtml" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{evenementsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/creation.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/creation.xhtml
index 1945979..bc8ada3 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/creation.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/creation.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-plus-circle text-green-500" />
             <ui:param name="title" value="Créer un Nouvel Événement" />
             <ui:param name="description" value="Remplissez le formulaire pour créer un nouvel événement" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/gestion.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/gestion.xhtml
index 6cf96ae..d92967c 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/gestion.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/gestion.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-calendar text-blue-500" />
             <ui:param name="title" value="Gestion des Événements" />
             <ui:param name="description" value="Création, suivi et gestion des événements de l'organisation" />
@@ -27,7 +27,7 @@
                             <ui:param name="icon" value="pi pi-download" />
                             <ui:param name="outlined" value="true" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{evenementsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -43,28 +43,28 @@
 
         <!-- Statistiques -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{evenementsBean.statistiques.totalEvenements}" />
                 <ui:param name="label" value="Total Événements" />
                 <ui:param name="icon" value="pi pi-calendar" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{evenementsBean.statistiques.evenementsActifs}" />
                 <ui:param name="label" value="Événements Actifs" />
                 <ui:param name="icon" value="pi pi-check-circle" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{evenementsBean.statistiques.participantsTotal}" />
                 <ui:param name="label" value="Total Participants" />
                 <ui:param name="icon" value="pi pi-users" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{evenementsBean.statistiques.budgetTotal}" />
                 <ui:param name="label" value="Budget Total" />
                 <ui:param name="icon" value="pi pi-wallet" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/participants.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/participants.xhtml
index ce67075..b557a03 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/participants.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/participants.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-users text-green-500" />
             <ui:param name="title" value="Gestion des Participants" />
             <ui:param name="description" value="Gérer les participants et les inscriptions aux événements" />
@@ -23,7 +23,7 @@
                             <ui:param name="outcome" value="/pages/secure/evenement/gestion.xhtml" />
                             <ui:param name="outlined" value="true" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{evenementsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -67,7 +67,7 @@
                 
                 <div class="grid mb-3">
                     <div class="col-12 md:col-4">
-                        <ui:include src="/templates/components/stat-card.xhtml">
+                        <ui:include src="/templates/components/cards/stat-card.xhtml">
                             <ui:param name="value" value="#{evenementsBean.evenementSelectionne.participantsInscrits}" />
                             <ui:param name="label" value="Inscrits" />
                             <ui:param name="icon" value="pi pi-user-plus" />
@@ -76,7 +76,7 @@
                     </div>
                     
                     <div class="col-12 md:col-4">
-                        <ui:include src="/templates/components/stat-card.xhtml">
+                        <ui:include src="/templates/components/cards/stat-card.xhtml">
                             <ui:param name="value" value="#{evenementsBean.evenementSelectionne.participantsPresents}" />
                             <ui:param name="label" value="Présents" />
                             <ui:param name="icon" value="pi pi-check-circle" />
@@ -85,7 +85,7 @@
                     </div>
                     
                     <div class="col-12 md:col-4">
-                        <ui:include src="/templates/components/stat-card.xhtml">
+                        <ui:include src="/templates/components/cards/stat-card.xhtml">
                             <ui:param name="value" value="#{evenementsBean.evenementSelectionne.placesDisponibles}" />
                             <ui:param name="label" value="Places disponibles" />
                             <ui:param name="icon" value="pi pi-ticket" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/participation.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/participation.xhtml
index e7045c6..12afa8d 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/participation.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/participation.xhtml
@@ -10,14 +10,14 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-calendar-check text-purple-500" />
             <ui:param name="title" value="Participation aux Événements" />
             <ui:param name="description" value="Consultez et inscrivez-vous aux événements disponibles" />
             <ui:define name="actions">
                 <h:form id="formActionsParticipation">
                     <div class="flex gap-2">
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{evenementsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/inscription.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/inscription.xhtml
index 651fc80..a5eb830 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/inscription.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/inscription.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-user-plus text-primary" />
             <ui:param name="title" value="Inscription Nouveau Membre" />
             <ui:param name="description" value="Formulaire complet d'inscription avec photo et documents" />
@@ -192,7 +192,7 @@
                                             <i class="pi pi-file text-blue-500 mr-2"></i>
                                             <span class="text-900">#{document}</span>
                                         </div>
-                                        <ui:include src="/templates/components/button-icon.xhtml">
+                                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                             <ui:param name="icon" value="pi pi-times" />
                                             <ui:param name="action" value="#{membreInscriptionBean.supprimerDocument(document)}" />
                                             <ui:param name="update" value="documentsListPanel" />
@@ -287,7 +287,7 @@
                                 <p:outputLabel for="numeroParrain" value="N° Membre parrain" />
                                 <div class="ui-inputgroup">
                                     <p:inputText id="numeroParrain" value="#{membreInscriptionBean.numeroParrain}" styleClass="w-full" />
-                                    <ui:include src="/templates/components/button-icon.xhtml">
+                                    <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                         <ui:param name="icon" value="pi pi-search" />
                                         <ui:param name="action" value="#{membreInscriptionBean.rechercherParrain}" />
                                         <ui:param name="severity" value="info" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/liste.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/liste.xhtml
index 13b8c51..5e79b1f 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/liste.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/liste.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-users text-blue-500" />
             <ui:param name="title" value="Liste des Membres" />
             <ui:param name="description" value="Gestion et suivi des membres de l'association" />
@@ -96,7 +96,7 @@
                             <ui:param name="outlined" value="true" />
                             <ui:param name="styleClass" value="mr-2" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{membreListeBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -190,31 +190,31 @@
                     
                     <p:column headerText="Actions" style="width:200px">
                         <div class="flex gap-1">
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-eye" />
                                 <ui:param name="action" value="#{membreListeBean.voirProfil(membre)}" />
                                 <ui:param name="title" value="Voir profil" />
                                 <ui:param name="severity" value="info" />
                             </ui:include>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-pencil" />
                                 <ui:param name="action" value="#{membreListeBean.modifierMembre(membre)}" />
                                 <ui:param name="title" value="Modifier" />
                                 <ui:param name="severity" value="warning" />
                             </ui:include>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-dollar" />
                                 <ui:param name="action" value="#{membreListeBean.gererCotisations(membre)}" />
                                 <ui:param name="title" value="Cotisations" />
                                 <ui:param name="severity" value="success" />
                             </ui:include>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-envelope" />
                                 <ui:param name="action" value="#{membreListeBean.contacterMembre(membre)}" />
                                 <ui:param name="title" value="Contacter" />
                                 <ui:param name="severity" value="" />
                             </ui:include>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-ban" />
                                 <ui:param name="action" value="#{membreListeBean.suspendreMembre(membre)}" />
                                 <ui:param name="onclick" value="return confirm('Êtes-vous sûr de vouloir suspendre ce membre ?');" />
@@ -222,7 +222,7 @@
                                 <ui:param name="severity" value="danger" />
                                 <ui:param name="rendered" value="#{membre.statut == 'ACTIF'}" />
                             </ui:include>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-check" />
                                 <ui:param name="action" value="#{membreListeBean.reactiverMembre(membre)}" />
                                 <ui:param name="title" value="Réactiver" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/recherche.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/recherche.xhtml
index bcd37be..467bc2c 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/recherche.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/recherche.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-search text-blue-500" />
             <ui:param name="title" value="Recherche Avancée des Membres" />
             <ui:param name="description" value="Outil de recherche puissant pour retrouver et analyser les membres" />
@@ -36,28 +36,28 @@
 
         <!-- Statistiques de recherche -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{membreRechercheBean.statistiques.totalMembres}" />
                 <ui:param name="label" value="Total Membres" />
                 <ui:param name="icon" value="pi pi-users" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{membreRechercheBean.statistiques.resultatsActuels}" />
                 <ui:param name="label" value="Résultats trouvés" />
                 <ui:param name="icon" value="pi pi-check" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{membreRechercheBean.statistiques.filtresActifs}" />
                 <ui:param name="label" value="Filtres actifs" />
                 <ui:param name="icon" value="pi pi-filter" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{membreRechercheBean.statistiques.tempsRecherche}ms" />
                 <ui:param name="label" value="Temps de recherche" />
                 <ui:param name="icon" value="pi pi-clock" />
@@ -389,7 +389,7 @@
                         <div class="flex align-items-center justify-content-between">
                             <span>Liste des membres</span>
                             <div class="flex gap-2">
-                                <ui:include src="/templates/components/button-icon.xhtml">
+                                <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                     <ui:param name="icon" value="pi pi-refresh" />
                                     <ui:param name="action" value="#{membreRechercheBean.actualiserResultats}" />
                                     <ui:param name="update" value="@form" />
@@ -398,7 +398,7 @@
                                     <ui:param name="text" value="false" />
                                     <ui:param name="styleClass" value="ui-button-outlined ui-button-secondary" />
                                 </ui:include>
-                                <ui:include src="/templates/components/button-icon.xhtml">
+                                <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                     <ui:param name="icon" value="pi pi-cog" />
                                     <ui:param name="onclick" value="PF('dlgOptionsAffichage').show();" />
                                     <ui:param name="title" value="Options d'affichage" />
@@ -478,7 +478,7 @@
                     
                     <p:column headerText="Actions" style="width:150px">
                         <div class="flex gap-1">
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-eye" />
                                 <ui:param name="action" value="#{membreRechercheBean.voirProfil(membre)}" />
                                 <ui:param name="title" value="Voir profil" />
@@ -486,14 +486,14 @@
                                 <ui:param name="rounded" value="true" />
                                 <ui:param name="text" value="true" />
                             </ui:include>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-envelope" />
                                 <ui:param name="action" value="#{membreRechercheBean.contacterMembre(membre)}" />
                                 <ui:param name="title" value="Contacter" />
                                 <ui:param name="rounded" value="true" />
                                 <ui:param name="text" value="true" />
                             </ui:include>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-plus" />
                                 <ui:param name="action" value="#{membreRechercheBean.ajouterAuGroupe(membre)}" />
                                 <ui:param name="title" value="Ajouter au groupe de travail" />
@@ -609,7 +609,7 @@
                     </p:column>
                     <p:column headerText="Actions">
                         <div class="flex gap-1">
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-play" />
                                 <ui:param name="action" value="#{membreRechercheBean.chargerRecherche(recherche)}" />
                                 <ui:param name="update" value=":formRechercheAvancee :formResultats" />
@@ -619,7 +619,7 @@
                                 <ui:param name="rounded" value="true" />
                                 <ui:param name="text" value="true" />
                             </ui:include>
-                            <ui:include src="/templates/components/button-icon.xhtml">
+                            <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                 <ui:param name="icon" value="pi pi-trash" />
                                 <ui:param name="action" value="#{membreRechercheBean.supprimerRecherche(recherche)}" />
                                 <ui:param name="update" value="@form" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/organisation/detail.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/organisation/detail.xhtml
new file mode 100644
index 0000000..727d0dc
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/organisation/detail.xhtml
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://xmlns.jcp.org/jsf/html"
+      xmlns:f="http://xmlns.jcp.org/jsf/core"
+      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+      xmlns:p="http://primefaces.org/ui">
+
+<ui:composition template="/templates/main-template.xhtml">
+    <ui:define name="title">Détail de l'Organisation</ui:define>
+
+    <ui:define name="content">
+        <h:form id="formDetail">
+            <p:messages id="messages" showDetail="true" closable="true"/>
+
+            <!-- En-tête résumé -->
+            <div class="card mb-3">
+                <div class="flex justify-content-between align-items-center flex-column md:flex-row">
+                    <div class="flex align-items-center gap-3 mb-2 md:mb-0">
+                        <ui:include src="/templates/components/layout/organisation-logo.xhtml">
+                            <ui:param name="logo" value="#{organisationDetailBean.organisation.logo}"/>
+                            <ui:param name="size" value="64"/>
+                        </ui:include>
+                        <div>
+                            <h3 class="m-0">
+                                <h:outputText value="#{empty organisationDetailBean.organisation ? 'Organisation introuvable' : organisationDetailBean.organisation.nom}" />
+                            </h3>
+                            <div class="mt-2 flex align-items-center gap-2">
+                                <p:tag value="#{organisationDetailBean.organisation.typeLibelle}" severity="info" />
+                                <p:tag value="#{organisationDetailBean.organisation.statutLibelle}"
+                                       severity="#{organisationDetailBean.organisation.statutSeverity}" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex gap-2">
+                        <ui:include src="/templates/components/button-secondary.xhtml">
+                            <ui:param name="value" value="Retour à la liste"/>
+                            <ui:param name="icon" value="pi pi-arrow-left"/>
+                            <ui:param name="outcome" value="/pages/secure/organisation/liste.xhtml"/>
+                        </ui:include>
+                    </div>
+                </div>
+            </div>
+
+            <h:panelGroup rendered="#{not empty organisationDetailBean.organisation}">
+                <div class="grid">
+                    <!-- Bloc identité -->
+                    <div class="col-12 md:col-6">
+                        <div class="card">
+                            <h5 class="mb-3">Identité</h5>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Nom complet"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.nom}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Nom court / Sigle"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.nomCourt}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Type"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.typeLibelle}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Statut"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.statutLibelle}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Date de fondation"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.dateFondation}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Numéro d'enregistrement"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.numeroRegistre}"/>
+                            </ui:include>
+                        </div>
+                    </div>
+
+                    <!-- Bloc contact -->
+                    <div class="col-12 md:col-6">
+                        <div class="card">
+                            <h5 class="mb-3">Contacts</h5>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Email"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.email}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Email secondaire"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.emailSecondaire}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Téléphone"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.telephone}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Téléphone secondaire"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.telephoneSecondaire}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Site web"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.siteWeb}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Responsable principal"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.responsablePrincipal}"/>
+                            </ui:include>
+                        </div>
+                    </div>
+
+                    <!-- Bloc localisation -->
+                    <div class="col-12 md:col-6">
+                        <div class="card">
+                            <h5 class="mb-3">Localisation</h5>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Adresse complète"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.adresseComplete}"/>
+                                <ui:param name="multiline" value="true"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Ville"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.ville}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Région"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.region}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Pays"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.pays}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Code postal"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.codePostal}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Latitude"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.latitude}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Longitude"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.longitude}"/>
+                            </ui:include>
+                        </div>
+                    </div>
+
+                    <!-- Bloc description, objectifs et activités -->
+                    <div class="col-12 md:col-6">
+                        <div class="card">
+                            <h5 class="mb-3">Description, objectifs &amp; activités</h5>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Description"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.description}"/>
+                                <ui:param name="multiline" value="true"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Objectifs"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.objectifs}"/>
+                                <ui:param name="multiline" value="true"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Activités principales"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.activitesPrincipales}"/>
+                                <ui:param name="multiline" value="true"/>
+                            </ui:include>
+                        </div>
+                    </div>
+
+                    <!-- Bloc gouvernance & membres -->
+                    <div class="col-12 md:col-6">
+                        <div class="card">
+                            <h5 class="mb-3">Gouvernance &amp; membres</h5>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Nombre de membres"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.nombreMembres}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Nombre d'administrateurs"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.nombreAdministrateurs}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Organisation publique"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.organisationPublique ? 'Oui' : 'Non'}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Accepte de nouveaux membres"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.accepteNouveauxMembres ? 'Oui' : 'Non'}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Cotisation obligatoire"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.cotisationObligatoire ? 'Oui' : 'Non'}"/>
+                            </ui:include>
+                        </div>
+                    </div>
+
+                    <!-- Bloc budget & cotisations -->
+                    <div class="col-12 md:col-6">
+                        <div class="card">
+                            <h5 class="mb-3">Budget &amp; cotisations</h5>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Budget annuel"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.budgetAnnuel}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Devise"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.devise}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Montant cotisation annuelle"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.montantCotisationAnnuelle}"/>
+                            </ui:include>
+                        </div>
+                    </div>
+
+                    <!-- Bloc réseaux & partenariats -->
+                    <div class="col-12 md:col-6">
+                        <div class="card">
+                            <h5 class="mb-3">Réseaux &amp; partenariats</h5>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Réseaux sociaux"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.reseauxSociaux}"/>
+                                <ui:param name="multiline" value="true"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Certifications / labels"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.certifications}"/>
+                                <ui:param name="multiline" value="true"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Partenaires principaux"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.partenaires}"/>
+                                <ui:param name="multiline" value="true"/>
+                            </ui:include>
+                        </div>
+                    </div>
+
+                    <!-- Bloc notes & hiérarchie -->
+                    <div class="col-12 md:col-6">
+                        <div class="card">
+                            <h5 class="mb-3">Notes &amp; hiérarchie</h5>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Organisation parente"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.nomOrganisationParente}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="ID organisation parente"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.organisationParenteId}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Niveau hiérarchique"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.niveauHierarchique}"/>
+                            </ui:include>
+                            <ui:include src="/templates/components/forms/detail-field.xhtml">
+                                <ui:param name="label" value="Notes administratives"/>
+                                <ui:param name="value" value="#{organisationDetailBean.organisation.notes}"/>
+                                <ui:param name="multiline" value="true"/>
+                            </ui:include>
+                        </div>
+                    </div>
+                </div>
+            </h:panelGroup>
+        </h:form>
+    </ui:define>
+</ui:composition>
+</html>
\ No newline at end of file
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/organisation/liste.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/organisation/liste.xhtml
index 1289c3a..254dcc2 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/organisation/liste.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/organisation/liste.xhtml
@@ -12,21 +12,34 @@
         <h:form id="formOrganisations">
             <p:messages id="messages" showDetail="true" closable="true"/>
             
-            <!-- En-tête avec statistiques (DRY/WOU: utilisation de stat-card) -->
-            <div class="grid mb-4">
-                <ui:include src="/templates/components/stat-card.xhtml">
+            <!-- En-tête avec titre et action principale (DRY/WOU: card-header) -->
+            <ui:decorate template="/templates/components/cards/card-header.xhtml">
+                <ui:param name="title" value="Gestion des Organisations" />
+                <ui:param name="subtitle" value="Liste complète des organisations avec filtres et actions." />
+                <ui:param name="styleClass" value="mb-3" />
+                <ui:define name="actions">
+                    <p:button value="Nouvelle Organisation"
+                            icon="pi pi-plus"
+                            outcome="/pages/secure/organisation/nouvelle"
+                            styleClass="ui-button-success" />
+                </ui:define>
+            </ui:decorate>
+
+            <!-- Statistiques (DRY/WOU: stat-card) -->
+            <div class="grid mb-3">
+                <ui:include src="/templates/components/cards/stat-card.xhtml">
                     <ui:param name="value" value="#{organisationsBean.totalOrganisations}" />
                     <ui:param name="label" value="Total" />
                     <ui:param name="icon" value="pi pi-building" />
                     <ui:param name="bgColor" value="blue" />
                 </ui:include>
-                <ui:include src="/templates/components/stat-card.xhtml">
+                <ui:include src="/templates/components/cards/stat-card.xhtml">
                     <ui:param name="value" value="#{organisationsBean.organisationsActives}" />
                     <ui:param name="label" value="Actives" />
                     <ui:param name="icon" value="pi pi-check-circle" />
                     <ui:param name="bgColor" value="green" />
                 </ui:include>
-                <ui:include src="/templates/components/stat-card.xhtml">
+                <ui:include src="/templates/components/cards/stat-card.xhtml">
                     <ui:param name="value" value="#{organisationsBean.organisationsInactives}" />
                     <ui:param name="label" value="Inactives" />
                     <ui:param name="icon" value="pi pi-times-circle" />
@@ -34,15 +47,17 @@
                 </ui:include>
             </div>
 
-            <!-- Barre de recherche et filtres (DRY/WOU: utilisation de form-field) -->
-            <div class="card">
-                <div class="grid">
+            <!-- Filtres et recherche (DRY/WOU: filter-bar) -->
+            <ui:decorate template="/templates/components/cards/filter-bar.xhtml">
+                <ui:param name="title" value="Filtres" />
+                <ui:param name="styleClass" value="mb-3" />
+                <ui:define name="filters">
                     <div class="col-12 md:col-4">
                         <div class="field">
                             <p:outputLabel for="rechercheGlobale" value="Rechercher" />
                             <p:inputText id="rechercheGlobale" 
                                          value="#{organisationsBean.rechercheGlobale}"
-                                         placeholder="Rechercher..."
+                                         placeholder="Nom, ville, description..."
                                          styleClass="w-full">
                                 <p:ajax event="keyup" update="dtOrganisations" listener="#{organisationsBean.appliquerFiltres}" delay="500"/>
                             </p:inputText>
@@ -70,141 +85,136 @@
                             </p:selectOneMenu>
                         </div>
                     </div>
+                </ui:define>
+                <ui:define name="actions">
                     <div class="col-12 md:col-2">
-                        <ui:include src="/templates/components/button-secondary.xhtml">
-                            <ui:param name="value" value="Réinitialiser" />
-                            <ui:param name="icon" value="pi pi-filter-slash" />
-                            <ui:param name="action" value="#{organisationsBean.reinitialiserFiltres}" />
-                            <ui:param name="update" value="dtOrganisations rechercheGlobale filtreStatut filtreType" />
-                            <ui:param name="styleClass" value="w-full" />
-                        </ui:include>
+                        <div class="field">
+                            <label class="invisible">Actions</label>
+                            <p:commandButton value="Réinitialiser"
+                                           icon="pi pi-filter-slash"
+                                           action="#{organisationsBean.reinitialiserFiltres}"
+                                           update="dtOrganisations rechercheGlobale filtreStatut filtreType"
+                                           styleClass="ui-button-secondary w-full" />
+                        </div>
                     </div>
                     <div class="col-12 md:col-2">
-                        <p:commandButton value="Nouvelle" 
-                                       icon="pi pi-plus"
-                                       action="#{organisationsBean.preparerNouvelleOrganisation}"
-                                       update=":formNouvelle @form"
-                                       oncomplete="PF('dlgNouvelle').show();"
-                                       styleClass="ui-button-success w-full"/>
+                        <div class="field">
+                            <label class="invisible">Actions</label>
+                            <p:commandButton value="Rafraîchir"
+                                           icon="pi pi-refresh"
+                                           action="#{organisationsBean.recharger}"
+                                           update="@form"
+                                           styleClass="ui-button-secondary w-full" />
+                        </div>
                     </div>
-                </div>
-            </div>
+                </ui:define>
+            </ui:decorate>
 
-            <!-- Table des organisations -->
-            <div class="card">
-                <h5>Liste des Organisations</h5>
-                <p:dataTable id="dtOrganisations" 
-                           value="#{organisationsBean.organisationsFiltrees}"
-                           var="org"
-                           paginator="true"
-                           rows="20"
-                           rowsPerPageTemplate="10,20,50,100"
-                           paginatorPosition="bottom"
-                           emptyMessage="Aucune organisation trouvée"
-                           styleClass="table-responsive">
-                    
-                    <p:column headerText="Logo" styleClass="text-center" style="width: 80px;">
-                        <i class="pi pi-building text-4xl text-primary"></i>
-                    </p:column>
-                    
-                    <p:column headerText="Nom" sortBy="#{org.nom}" filterBy="#{org.nom}">
-                        <h:outputText value="#{org.nom}" styleClass="font-bold"/>
-                        <br/>
-                        <h:outputText value="#{org.typeLibelle}" styleClass="text-sm text-500"/>
-                    </p:column>
-                    
-                    <p:column headerText="Type" sortBy="#{org.typeAssociation}" style="width: 150px;">
-                        <p:tag value="#{org.typeLibelle}" 
-                               severity="#{org.typeAssociation == 'LIONS_CLUB' ? 'info' : 'primary'}"/>
-                    </p:column>
-                    
-                    <p:column headerText="Localisation" style="width: 200px;">
-                        <i class="pi pi-map-marker mr-1"></i>
-                        <h:outputText value="#{org.ville}, #{org.region}"/>
-                    </p:column>
-                    
-                    <p:column headerText="Membres" styleClass="text-center" style="width: 100px;">
-                        <p:tag value="#{org.nombreMembres}" severity="info" icon="pi pi-users"/>
-                    </p:column>
-                    
-                    <p:column headerText="Statut" sortBy="#{org.statut}" styleClass="text-center" style="width: 100px;">
-                        <p:tag value="#{org.statut}" 
-                               severity="#{org.statut == organisationsBean.statutActive ? 'success' : 'warning'}"
-                               icon="#{org.statut == organisationsBean.statutActive ? 'pi pi-check' : 'pi pi-times'}"/>
-                    </p:column>
-                    
-                    <p:column headerText="Actions" styleClass="text-center" style="width: 180px;">
-                        <p:commandButton icon="pi pi-pencil" 
-                                       title="Modifier"
-                                       action="#{organisationsBean.setOrganisationSelectionnee(org)}"
-                                       oncomplete="PF('dlgModifier').show();"
-                                       update=":formModifier"
-                                       styleClass="ui-button-rounded ui-button-warning mr-2"/>
+            <!-- Table des organisations (DRY/WOU: card-simple) -->
+            <ui:decorate template="/templates/components/cards/card-simple.xhtml">
+                <ui:param name="title" value="Liste des Organisations" />
+                <ui:define name="content">
+                    <!-- Note: p:dataTable avec var, sortBy, filterBy doit être directement dans la page -->
+                    <p:dataTable id="dtOrganisations"
+                                 value="#{organisationsBean.organisationsFiltrees}"
+                                 var="org"
+                                 paginator="true"
+                                 rows="20"
+                                 rowsPerPageTemplate="10,20,50,100"
+                                 paginatorPosition="bottom"
+                                 emptyMessage="Aucune organisation trouvée"
+                                 styleClass="table-responsive">
                         
-                        <p:commandButton icon="#{org.statut == organisationsBean.statutActive ? 'pi pi-ban' : 'pi pi-check'}" 
-                                       title="#{org.statut == organisationsBean.statutActive ? 'Désactiver' : 'Activer'}"
-                                       action="#{organisationsBean.basculerStatutOrganisation(org)}"
-                                       update=":formOrganisations:dtOrganisations :formOrganisations:messages"
-                                       styleClass="ui-button-rounded #{org.statut == organisationsBean.statutActive ? 'ui-button-secondary' : 'ui-button-success'} mr-2">
-                            <p:confirm header="Confirmation" 
-                                     message="Êtes-vous sûr de vouloir #{org.statut == organisationsBean.statutActive ? 'désactiver' : 'activer'} cette organisation ?" 
-                                     icon="pi pi-exclamation-triangle"/>
-                        </p:commandButton>
+                        <!-- Logo (DRY/WOU: organisation-logo) -->
+                        <p:column headerText="" style="width: 80px;">
+                            <ui:include src="/templates/components/layout/organisation-logo.xhtml">
+                                <ui:param name="logo" value="#{org.logo}"/>
+                                <ui:param name="size" value="40"/>
+                            </ui:include>
+                        </p:column>
                         
-                        <p:commandButton icon="pi pi-trash" 
-                                       title="Supprimer"
-                                       action="#{organisationsBean.supprimerOrganisation(org)}"
-                                       update=":formOrganisations:dtOrganisations :formOrganisations:messages"
-                                       styleClass="ui-button-rounded ui-button-danger">
-                            <p:confirm header="Confirmation" 
-                                     message="Êtes-vous sûr de vouloir supprimer cette organisation ? Cette action est irréversible." 
-                                     icon="pi pi-exclamation-triangle"/>
-                        </p:commandButton>
-                    </p:column>
-                </p:dataTable>
-            </div>
+                        <!-- Nom avec sous-titre -->
+                        <p:column headerText="Nom" sortBy="#{org.nom}" filterBy="#{org.nom}">
+                            <h:outputText value="#{org.nom}" styleClass="font-bold"/>
+                            <br/>
+                            <h:outputText value="#{org.typeLibelle}" styleClass="text-sm text-500"/>
+                        </p:column>
+                        
+                        <!-- Type -->
+                        <p:column headerText="Type" sortBy="#{org.typeAssociation}" style="width: 150px;">
+                            <p:tag value="#{org.typeLibelle}" 
+                                   severity="#{org.typeAssociation == 'LIONS_CLUB' ? 'info' : 'primary'}"/>
+                        </p:column>
+                        
+                        <!-- Localisation -->
+                        <p:column headerText="Localisation" style="width: 200px;">
+                            <i class="pi pi-map-marker mr-2 text-500"/>
+                            <h:outputText value="#{org.ville}, #{org.region}"/>
+                        </p:column>
+                        
+                        <!-- Membres -->
+                        <p:column headerText="Membres" styleClass="text-center" style="width: 100px;">
+                            <p:tag value="#{org.nombreMembres}" severity="info" icon="pi pi-users"/>
+                        </p:column>
+                        
+                        <!-- Statut -->
+                        <p:column headerText="Statut" sortBy="#{org.statut}" styleClass="text-center" style="width: 100px;">
+                            <p:tag value="#{org.statut}" 
+                                   severity="#{org.statut == organisationsBean.statutActive ? 'success' : 'warning'}"
+                                   icon="#{org.statut == organisationsBean.statutActive ? 'pi pi-check' : 'pi pi-times'}"/>
+                        </p:column>
+                        
+                        <!-- Actions - Note: actionListener avec paramètres doit être directement dans la page -->
+                        <p:column headerText="Actions" style="width: 220px;">
+                            <p:commandButton icon="pi pi-search"
+                                           title="Consulter"
+                                           styleClass="ui-button-rounded ui-button-info mr-2"
+                                           onclick="window.location='#{request.contextPath}/pages/secure/organisation/detail.xhtml?id=#{org.id}';return false;"/>
+                                           
+                            <p:commandButton icon="pi pi-pencil"
+                                           title="Modifier"
+                                           actionListener="#{organisationsBean.setOrganisationSelectionnee(org)}"
+                                           oncomplete="PF('dlgModifier').show();"
+                                           update=":formModifier"
+                                           styleClass="ui-button-rounded ui-button-warning mr-2"/>
+                                           
+                            <p:commandButton icon="#{org.statut == organisationsBean.statutActive ? 'pi pi-ban' : 'pi pi-check'}"
+                                           title="#{org.statut == organisationsBean.statutActive ? 'Désactiver' : 'Activer'}"
+                                           actionListener="#{organisationsBean.basculerStatutOrganisation(org)}"
+                                           update=":formOrganisations:dtOrganisations :formOrganisations:messages"
+                                           styleClass="ui-button-rounded #{org.statut == organisationsBean.statutActive ? 'ui-button-secondary' : 'ui-button-success'} mr-2">
+                                <p:confirm header="Confirmation"
+                                         message="Êtes-vous sûr de vouloir changer le statut de cette organisation ?"
+                                         icon="pi pi-exclamation-triangle"/>
+                            </p:commandButton>
+                            
+                            <p:commandButton icon="pi pi-trash"
+                                           title="Supprimer"
+                                           actionListener="#{organisationsBean.supprimerOrganisation(org)}"
+                                           update=":formOrganisations:dtOrganisations :formOrganisations:messages"
+                                           styleClass="ui-button-rounded ui-button-danger">
+                                <p:confirm header="Confirmation"
+                                         message="Êtes-vous sûr de vouloir supprimer cette organisation ? Cette action est irréversible."
+                                         icon="pi pi-exclamation-triangle"/>
+                            </p:commandButton>
+                        </p:column>
+                    </p:dataTable>
+                </ui:define>
+            </ui:decorate>
             
-            <p:confirmDialog global="true" showEffect="fade" hideEffect="fade" responsive="true" width="350">
-                <p:commandButton value="Non" type="button" styleClass="ui-button-secondary" icon="pi pi-times"
-                               onclick="PF('confirmDialog').hide()"/>
-                <p:commandButton value="Oui" type="button" styleClass="ui-button-danger" icon="pi pi-check"/>
-            </p:confirmDialog>
+            <!-- Dialogue de confirmation global (DRY/WOU: confirm-dialog) -->
+            <ui:include src="/templates/components/dialogs/confirm-dialog.xhtml" />
         </h:form>
 
-        <!-- Dialogue Nouvelle Organisation (DRY/WOU: utilisation de form-dialog) -->
-        <ui:decorate template="/templates/components/form-dialog.xhtml">
-            <ui:param name="dialogId" value="dlgNouvelle" />
-            <ui:param name="header" value="Nouvelle Organisation" />
-            <ui:param name="widgetVar" value="dlgNouvelle" />
-            <ui:param name="formId" value="formNouvelle" />
-            <ui:param name="width" value="800" />
-            <ui:define name="content">
-                <ui:include src="/ui/includes/organisation-form.xhtml">
-                    <ui:param name="model" value="#{organisationsBean.nouvelleOrganisation}" />
-                    <ui:param name="typesItems" value="#{organisationsBean.typesSelectItemsForForm}" />
-                </ui:include>
-            </ui:define>
-            <ui:define name="footer">
-                <p:commandButton value="Annuler" 
-                               icon="pi pi-times"
-                               onclick="PF('dlgNouvelle').hide();"
-                               styleClass="ui-button-secondary"/>
-                <p:commandButton value="Créer" 
-                               icon="pi pi-check"
-                               action="#{organisationsBean.creerOrganisation}"
-                               update=":formOrganisations:dtOrganisations :formOrganisations:messages"
-                               oncomplete="if(!args.validationFailed) PF('dlgNouvelle').hide();"
-                               styleClass="ui-button-success"/>
-            </ui:define>
-        </ui:decorate>
-
-        <!-- Dialogue Modifier Organisation (DRY/WOU: utilisation de form-dialog) -->
-        <ui:decorate template="/templates/components/form-dialog.xhtml">
+        <!-- Dialogue Modifier Organisation (DRY/WOU: form-dialog) -->
+        <ui:decorate template="/templates/components/dialogs/form-dialog.xhtml">
             <ui:param name="dialogId" value="dlgModifier" />
             <ui:param name="header" value="Modifier Organisation" />
             <ui:param name="widgetVar" value="dlgModifier" />
             <ui:param name="formId" value="formModifier" />
-            <ui:param name="width" value="800" />
+            <ui:param name="width" value="900" />
+            <ui:param name="maximizable" value="true" />
+            <ui:param name="fitViewport" value="true" />
             <ui:define name="content">
                 <ui:fragment rendered="#{organisationsBean.organisationSelectionnee != null}">
                     <ui:include src="/ui/includes/organisation-form.xhtml">
@@ -214,16 +224,17 @@
                 </ui:fragment>
             </ui:define>
             <ui:define name="footer">
-                <p:commandButton value="Annuler" 
+                <p:commandButton value="Annuler"
                                icon="pi pi-times"
+                               type="button"
                                onclick="PF('dlgModifier').hide();"
-                               styleClass="ui-button-secondary"/>
-                <p:commandButton value="Enregistrer" 
+                               styleClass="ui-button-secondary" />
+                <p:commandButton value="Enregistrer"
                                icon="pi pi-check"
                                action="#{organisationsBean.modifierOrganisation}"
                                update=":formOrganisations:dtOrganisations :formOrganisations:messages"
                                oncomplete="if(!args.validationFailed) PF('dlgModifier').hide();"
-                               styleClass="ui-button-success"/>
+                               styleClass="ui-button-success" />
             </ui:define>
         </ui:decorate>
     </ui:define>
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/organisation/nouvelle.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/organisation/nouvelle.xhtml
new file mode 100644
index 0000000..2a0b24b
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/organisation/nouvelle.xhtml
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://xmlns.jcp.org/jsf/html"
+      xmlns:f="http://xmlns.jcp.org/jsf/core"
+      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+      xmlns:p="http://primefaces.org/ui">
+
+<ui:composition template="/templates/main-template.xhtml">
+    <ui:define name="title">Nouvelle Organisation</ui:define>
+
+    <ui:define name="content">
+        <!-- Initialiser le modèle et le catalogue des types à chaque affichage de la vue -->
+        <f:event type="preRenderView" listener="#{organisationsBean.preparerNouvelleOrganisation}" />
+
+        <h:form id="formNouvelleOrganisation">
+            <p:messages id="messages" showDetail="true" closable="true"/>
+
+            <div class="card mb-3">
+                <div class="flex justify-content-between align-items-center flex-column md:flex-row">
+                    <div class="mb-2 md:mb-0">
+                        <h3 class="m-0">Nouvelle Organisation</h3>
+                        <span class="text-600">
+                            Renseignez l'ensemble des informations de l'organisation.
+                        </span>
+                    </div>
+                    <div class="flex gap-2">
+                        <ui:include src="/templates/components/button-secondary.xhtml">
+                            <ui:param name="value" value="Annuler"/>
+                            <ui:param name="icon" value="pi pi-times"/>
+                            <ui:param name="outcome" value="/pages/secure/organisation/liste"/>
+                        </ui:include>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5 class="mb-3">Informations de l'Organisation</h5>
+                <ui:include src="/ui/includes/organisation-form.xhtml">
+                    <ui:param name="model" value="#{organisationsBean.nouvelleOrganisation}" />
+                    <ui:param name="typesItems" value="#{organisationsBean.typesSelectItemsForForm}" />
+                </ui:include>
+            </div>
+
+            <div class="mt-3 flex justify-content-end gap-2">
+                <ui:include src="/templates/components/button-secondary.xhtml">
+                    <ui:param name="value" value="Annuler"/>
+                    <ui:param name="icon" value="pi pi-times"/>
+                    <ui:param name="outcome" value="/pages/secure/organisation/liste"/>
+                </ui:include>
+                <ui:include src="/templates/components/button-success.xhtml">
+                    <ui:param name="value" value="Créer"/>
+                    <ui:param name="icon" value="pi pi-check"/>
+                    <ui:param name="action" value="#{organisationsBean.creerOrganisation}"/>
+                    <ui:param name="update" value=":formNouvelleOrganisation:messages"/>
+                    <ui:param name="onclick" value=""/>
+                </ui:include>
+            </div>
+        </h:form>
+    </ui:define>
+</ui:composition>
+</html>
+
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/activites.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/activites.xhtml
index 55ee985..58dc131 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/activites.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/activites.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-history text-purple-500" />
             <ui:param name="title" value="Mes Activités" />
             <ui:param name="description" value="Suivez toutes vos interactions et participations dans UnionFlow" />
@@ -34,7 +34,7 @@
 
         <!-- Statistiques d'activité -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{personnelBean.statistiques.actionsRealisees}" />
                 <ui:param name="label" value="Actions Totales" />
                 <ui:param name="subLabel" value="Toutes périodes" />
@@ -42,7 +42,7 @@
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{personnelBean.statistiques.evenementsParticipes}" />
                 <ui:param name="label" value="Événements" />
                 <ui:param name="subLabel" value="Participés" />
@@ -50,7 +50,7 @@
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{personnelBean.statistiques.tauxParticipation}%" />
                 <ui:param name="label" value="Taux Participation" />
                 <ui:param name="subLabel" value="Global" />
@@ -58,7 +58,7 @@
                 <ui:param name="bgColor" value="purple" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="8h" />
                 <ui:param name="label" value="Temps Connecté" />
                 <ui:param name="subLabel" value="Cette semaine" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/agenda.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/agenda.xhtml
index 7726ee3..8bbdbb3 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/agenda.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/agenda.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-calendar text-blue-500" />
             <ui:param name="title" value="Mon Agenda" />
             <ui:param name="description" value="Organisez votre planning et ne manquez aucun événement important" />
@@ -34,7 +34,7 @@
 
         <!-- Statistiques agenda -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="7" />
                 <ui:param name="label" value="Cette Semaine" />
                 <ui:param name="subLabel" value="Événements" />
@@ -42,7 +42,7 @@
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="3" />
                 <ui:param name="label" value="Aujourd'hui" />
                 <ui:param name="subLabel" value="Rendez-vous" />
@@ -50,7 +50,7 @@
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{personnelBean.statistiques.evenementsParticipes}" />
                 <ui:param name="label" value="Ce Mois" />
                 <ui:param name="subLabel" value="Total" />
@@ -58,7 +58,7 @@
                 <ui:param name="bgColor" value="purple" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{personnelBean.statistiques.tauxParticipation}%" />
                 <ui:param name="label" value="Taux Présence" />
                 <ui:param name="subLabel" value="Moyenne" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/documents.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/documents.xhtml
index c5215be..1bea100 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/documents.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/documents.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-folder text-green-500" />
             <ui:param name="title" value="Mes Documents" />
             <ui:param name="description" value="Gérez vos documents personnels et accédez aux fichiers partagés" />
@@ -34,7 +34,7 @@
 
         <!-- Statistiques stockage -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{personnelBean.documents != null ? personnelBean.documents.size() : 0}" />
                 <ui:param name="label" value="Documents" />
                 <ui:param name="subLabel" value="Personnels" />
@@ -42,7 +42,7 @@
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="2.4 GB" />
                 <ui:param name="label" value="Utilisé" />
                 <ui:param name="subLabel" value="Sur 5 GB" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/notifications.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/notifications.xhtml
index 168ef6b..8bc2fa6 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/notifications.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/notifications.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-bell text-orange-500" />
             <ui:param name="title" value="Mes Notifications" />
             <ui:param name="description" value="Gérez vos notifications et restez informé des événements importants" />
@@ -34,7 +34,7 @@
 
         <!-- Statistiques notifications -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{personnelBean.notifications != null ? personnelBean.notifications.stream().filter(n -> !n.lue).count() : 0}" />
                 <ui:param name="label" value="Non Lues" />
                 <ui:param name="subLabel" value="Nouvelles" />
@@ -42,7 +42,7 @@
                 <ui:param name="bgColor" value="red" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{personnelBean.notifications != null ? personnelBean.notifications.size() : 0}" />
                 <ui:param name="label" value="Total" />
                 <ui:param name="subLabel" value="Notifications" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/profil.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/profil.xhtml
index 61c8248..2306b33 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/profil.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/personnel/profil.xhtml
@@ -46,7 +46,7 @@
                                     <ui:param name="icon" value="pi pi-pencil" />
                                     <ui:param name="onclick" value="PF('modifierProfilDialog').show();" />
                                 </ui:include>
-                                <ui:include src="/templates/components/button-icon.xhtml">
+                                <ui:include src="/templates/components/buttons/button-icon.xhtml">
                                     <ui:param name="icon" value="pi pi-refresh" />
                                     <ui:param name="action" value="#{personnelBean.actualiser}" />
                                     <ui:param name="update" value="@form" />
@@ -60,7 +60,7 @@
 
                         <!-- Statistiques profil -->
                         <div class="grid" rendered="#{personnelBean.statistiques != null}">
-                            <ui:include src="/templates/components/stat-card.xhtml">
+                            <ui:include src="/templates/components/cards/stat-card.xhtml">
                                 <ui:param name="value" value="#{personnelBean.statistiques.actionsRealisees}" />
                                 <ui:param name="label" value="Actions Réalisées" />
                                 <ui:param name="subLabel" value="Ce mois-ci" />
@@ -68,7 +68,7 @@
                                 <ui:param name="bgColor" value="blue" />
                             </ui:include>
                             
-                            <ui:include src="/templates/components/stat-card.xhtml">
+                            <ui:include src="/templates/components/cards/stat-card.xhtml">
                                 <ui:param name="value" value="#{personnelBean.statistiques.evenementsParticipes}" />
                                 <ui:param name="label" value="Événements" />
                                 <ui:param name="subLabel" value="Participés" />
@@ -76,7 +76,7 @@
                                 <ui:param name="bgColor" value="green" />
                             </ui:include>
                             
-                            <ui:include src="/templates/components/stat-card.xhtml">
+                            <ui:include src="/templates/components/cards/stat-card.xhtml">
                                 <ui:param name="value" value="#{personnelBean.statistiques.tauxParticipation}%" />
                                 <ui:param name="label" value="Taux Participation" />
                                 <ui:param name="subLabel" value="Global" />
@@ -84,7 +84,7 @@
                                 <ui:param name="bgColor" value="purple" />
                             </ui:include>
                             
-                            <ui:include src="/templates/components/stat-card.xhtml">
+                            <ui:include src="/templates/components/cards/stat-card.xhtml">
                                 <ui:param name="value" value="#{personnelBean.statistiques.evaluationMoyenne}★" />
                                 <ui:param name="label" value="Évaluation" />
                                 <ui:param name="subLabel" value="Moyenne" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/activites.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/activites.xhtml
index b41d433..64da6bb 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/activites.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/activites.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-calendar text-orange-500" />
             <ui:param name="title" value="Rapports Activités" />
             <ui:param name="description" value="Analyse des activités et événements" />
@@ -22,7 +22,7 @@
                             <ui:param name="icon" value="pi pi-download" />
                             <ui:param name="onclick" value="PF('dlgExport').show();" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{rapportsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -38,14 +38,14 @@
 
         <!-- Statistiques activités -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{rapportsBean.indicateurs.totalEvenements}" />
                 <ui:param name="label" value="Total Événements" />
                 <ui:param name="icon" value="pi pi-calendar" />
                 <ui:param name="bgColor" value="orange" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{rapportsBean.indicateurs.croissanceEvenements}%" />
                 <ui:param name="label" value="Croissance Événements" />
                 <ui:param name="icon" value="pi pi-arrow-up" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/export.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/export.xhtml
index 1b15e8c..06fe94d 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/export.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/export.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-download text-indigo-500" />
             <ui:param name="title" value="Export de Rapports" />
             <ui:param name="description" value="Générer et exporter des rapports personnalisés" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/finances.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/finances.xhtml
index b457f41..0945945 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/finances.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/finances.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-dollar text-green-500" />
             <ui:param name="title" value="Rapports Financiers" />
             <ui:param name="description" value="Analyse financière et suivi des revenus" />
@@ -22,7 +22,7 @@
                             <ui:param name="icon" value="pi pi-download" />
                             <ui:param name="onclick" value="PF('dlgExport').show();" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{rapportsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -92,28 +92,28 @@
 
         <!-- Indicateurs financiers -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{rapportsBean.indicateurs.revenus}" />
                 <ui:param name="label" value="Revenus Totaux" />
                 <ui:param name="icon" value="pi pi-dollar" />
                 <ui:param name="bgColor" value="green" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{rapportsBean.indicateurs.croissanceRevenus}%" />
                 <ui:param name="label" value="Croissance Revenus" />
                 <ui:param name="icon" value="pi pi-arrow-up" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{rapportsBean.indicateurs.totalMembres}" />
                 <ui:param name="label" value="Membres Actifs" />
                 <ui:param name="icon" value="pi pi-users" />
                 <ui:param name="bgColor" value="purple" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{rapportsBean.indicateurs.croissanceMembres}%" />
                 <ui:param name="label" value="Croissance Membres" />
                 <ui:param name="icon" value="pi pi-chart-line" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/membres.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/membres.xhtml
index 9bf8a56..2f9661b 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/membres.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/rapport/membres.xhtml
@@ -10,7 +10,7 @@
 
     <ui:define name="content">
         <!-- En-tête -->
-        <ui:include src="/templates/components/page-header.xhtml">
+        <ui:include src="/templates/components/layout/page-header.xhtml">
             <ui:param name="icon" value="pi pi-users text-blue-500" />
             <ui:param name="title" value="Rapports Membres" />
             <ui:param name="description" value="Analyse et statistiques sur les membres" />
@@ -22,7 +22,7 @@
                             <ui:param name="icon" value="pi pi-download" />
                             <ui:param name="onclick" value="PF('dlgExport').show();" />
                         </ui:include>
-                        <ui:include src="/templates/components/button-icon.xhtml">
+                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
                             <ui:param name="icon" value="pi pi-refresh" />
                             <ui:param name="action" value="#{rapportsBean.actualiser}" />
                             <ui:param name="update" value="@form" />
@@ -38,14 +38,14 @@
 
         <!-- Statistiques membres -->
         <div class="grid">
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{rapportsBean.indicateurs.totalMembres}" />
                 <ui:param name="label" value="Total Membres" />
                 <ui:param name="icon" value="pi pi-users" />
                 <ui:param name="bgColor" value="blue" />
             </ui:include>
             
-            <ui:include src="/templates/components/stat-card.xhtml">
+            <ui:include src="/templates/components/cards/stat-card.xhtml">
                 <ui:param name="value" value="#{rapportsBean.indicateurs.croissanceMembres}%" />
                 <ui:param name="label" value="Croissance" />
                 <ui:param name="icon" value="pi pi-arrow-up" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-delete.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-delete.xhtml
new file mode 100644
index 0000000..756ad36
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-delete.xhtml
@@ -0,0 +1,26 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant bouton "Supprimer" avec confirmation réutilisable - DRY/WOU
+        Usage :
+        <ui:include src="/templates/components/buttons/action-button-delete.xhtml">
+            <ui:param name="actionListener" value="#{bean.deleteItem(item)}"/>
+            <ui:param name="update" value=":formList:dtItems :formList:messages"/>
+            <ui:param name="confirmMessage" value="Êtes-vous sûr de vouloir supprimer cet élément ?"/>
+        </ui:include>
+    -->
+
+    <p:commandButton icon="pi pi-trash"
+                   title="Supprimer"
+                   actionListener="#{actionListener}"
+                   update="#{update}"
+                   styleClass="ui-button-rounded ui-button-danger #{styleClass}">
+        <p:confirm header="Confirmation"
+                 message="#{empty confirmMessage ? 'Êtes-vous sûr de vouloir supprimer cet élément ?' : confirmMessage}"
+                 icon="pi pi-exclamation-triangle"/>
+    </p:commandButton>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-edit.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-edit.xhtml
new file mode 100644
index 0000000..4bb3d2d
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-edit.xhtml
@@ -0,0 +1,22 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant bouton "Modifier" réutilisable - DRY/WOU
+        Usage :
+        <ui:include src="/templates/components/buttons/action-button-edit.xhtml">
+            <ui:param name="actionListener" value="#{bean.setItemSelected(item)}"/>
+            <ui:param name="update" value=":formEdit"/>
+            <ui:param name="dialogWidget" value="dlgEdit"/>
+        </ui:include>
+    -->
+
+    <p:commandButton icon="pi pi-pencil"
+                   title="Modifier"
+                   actionListener="#{actionListener}"
+                   oncomplete="PF('#{dialogWidget}').show();"
+                   update="#{update}"
+                   styleClass="ui-button-rounded ui-button-warning #{styleClass}"/>
+</ui:composition>
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-toggle.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-toggle.xhtml
new file mode 100644
index 0000000..f0b8252
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-toggle.xhtml
@@ -0,0 +1,27 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant bouton "Activer/Désactiver" avec confirmation réutilisable - DRY/WOU
+        Usage :
+        <ui:include src="/templates/components/buttons/action-button-toggle.xhtml">
+            <ui:param name="actionListener" value="#{bean.toggleItem(item)}"/>
+            <ui:param name="update" value=":formList:dtItems :formList:messages"/>
+            <ui:param name="isActive" value="#{item.statut == 'ACTIVE'}"/>
+            <ui:param name="confirmMessage" value="Êtes-vous sûr de vouloir changer le statut ?"/>
+        </ui:include>
+    -->
+
+    <p:commandButton icon="#{isActive ? 'pi pi-ban' : 'pi pi-check'}"
+                   title="#{isActive ? 'Désactiver' : 'Activer'}"
+                   actionListener="#{actionListener}"
+                   update="#{update}"
+                   styleClass="ui-button-rounded #{isActive ? 'ui-button-secondary' : 'ui-button-success'} #{styleClass}">
+        <p:confirm header="Confirmation"
+                 message="#{empty confirmMessage ? 'Êtes-vous sûr de vouloir changer le statut ?' : confirmMessage}"
+                 icon="pi pi-exclamation-triangle"/>
+    </p:commandButton>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-view.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-view.xhtml
new file mode 100644
index 0000000..b121d6e
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/action-button-view.xhtml
@@ -0,0 +1,20 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant bouton "Consulter" réutilisable - DRY/WOU
+        Usage :
+        <ui:include src="/templates/components/action-button-view.xhtml">
+            <ui:param name="id" value="#{item.id}"/>
+            <ui:param name="detailPage" value="/pages/secure/organisation/detail.xhtml"/>
+        </ui:include>
+    -->
+
+    <p:commandButton icon="pi pi-search"
+                   title="Consulter"
+                   styleClass="ui-button-rounded ui-button-info #{styleClass}"
+                   onclick="window.location='#{request.contextPath}#{detailPage}?id=#{id}';return false;"/>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-icon.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-icon.xhtml
similarity index 94%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-icon.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-icon.xhtml
index 1292588..9d42a88 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-icon.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-icon.xhtml
@@ -6,7 +6,7 @@
     
     <!-- 
         Composant bouton icône seule réutilisable (WOU/DRY)
-        Usage: <ui:include src="/templates/components/button-icon.xhtml">
+        Usage: <ui:include src="/templates/components/buttons/button-icon.xhtml">
                   <ui:param name="icon" value="pi pi-icon-name" />
                   <ui:param name="action" value="#{bean.method}" />
                   <ui:param name="update" value="componentId" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-info.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-info.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-info.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-info.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-primary.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-primary.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-primary.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-primary.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-secondary.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-secondary.xhtml
similarity index 89%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-secondary.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-secondary.xhtml
index 5badd0d..5c744aa 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-secondary.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-secondary.xhtml
@@ -24,12 +24,10 @@
             <p:commandButton 
                 value="#{value}"
                 icon="#{icon}"
-                action="#{action}"
-                actionListener="#{actionListener}"
                 update="#{update}"
                 onclick="#{onclick}"
                 disabled="#{not empty disabled and disabled}"
-                styleClass="ui-button-secondary #{not empty outlined and outlined ? 'ui-button-outlined' : ''} #{styleClass}"
+                styleClass="ui-button-secondary #{not empty outlined and outlined ? 'ui-button-outlined' : ''} #{not empty styleClass ? styleClass : ''}"
                 title="#{title}" />
         </ui:fragment>
         <ui:fragment rendered="#{not empty outcome}">
@@ -37,7 +35,7 @@
                 value="#{value}"
                 icon="#{icon}"
                 outcome="#{outcome}"
-                styleClass="ui-button-secondary #{not empty outlined and outlined ? 'ui-button-outlined' : ''} #{styleClass}"
+                styleClass="ui-button-secondary #{not empty outlined and outlined ? 'ui-button-outlined' : ''} #{not empty styleClass ? styleClass : ''}"
                 title="#{title}" />
         </ui:fragment>
     </ui:fragment>
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-success.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-success.xhtml
similarity index 84%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-success.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-success.xhtml
index de904f6..8f198a5 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-success.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-success.xhtml
@@ -13,12 +13,10 @@
             <p:commandButton 
                 value="#{value}"
                 icon="#{icon}"
-                action="#{action}"
-                actionListener="#{actionListener}"
                 update="#{update}"
                 onclick="#{onclick}"
                 disabled="#{not empty disabled and disabled}"
-                styleClass="ui-button-success #{not empty outlined and outlined ? 'ui-button-outlined' : ''} #{styleClass}"
+                styleClass="ui-button-success #{not empty outlined and outlined ? 'ui-button-outlined' : ''} #{not empty styleClass ? styleClass : ''}"
                 title="#{title}" />
         </ui:fragment>
         <ui:fragment rendered="#{not empty outcome}">
@@ -26,7 +24,7 @@
                 value="#{value}"
                 icon="#{icon}"
                 outcome="#{outcome}"
-                styleClass="ui-button-success #{not empty outlined and outlined ? 'ui-button-outlined' : ''} #{styleClass}"
+                styleClass="ui-button-success #{not empty outlined and outlined ? 'ui-button-outlined' : ''} #{not empty styleClass ? styleClass : ''}"
                 title="#{title}" />
         </ui:fragment>
     </ui:fragment>
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-warning.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-warning.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/button-warning.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/buttons/button-warning.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/card-header.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/card-header.xhtml
new file mode 100644
index 0000000..c0b81fb
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/card-header.xhtml
@@ -0,0 +1,47 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant card avec en-tête et actions - DRY/WOU
+        Usage :
+        <ui:decorate template="/templates/components/card-header.xhtml">
+            <ui:param name="title" value="Titre de la card"/>
+            <ui:param name="subtitle" value="Sous-titre optionnel"/>
+            <ui:param name="styleClass" value="mb-3"/>
+            <ui:define name="actions">
+                Boutons d'action ici
+            </ui:define>
+            <ui:define name="content">
+                Contenu de la card ici
+            </ui:define>
+        </ui:decorate>
+    -->
+
+    <div class="card #{styleClass}">
+        <div class="flex justify-content-between align-items-center flex-column md:flex-row mb-3">
+            <div class="mb-2 md:mb-0">
+                <ui:fragment rendered="#{not empty title}">
+                    <h3 class="m-0">
+                        <h:outputText value="#{title}" />
+                    </h3>
+                </ui:fragment>
+                <ui:fragment rendered="#{not empty subtitle}">
+                    <span class="text-600">
+                        <h:outputText value="#{subtitle}" />
+                    </span>
+                </ui:fragment>
+            </div>
+            <div class="flex gap-2">
+                <ui:insert name="actions">
+                    <!-- Actions buttons go here -->
+                </ui:insert>
+            </div>
+        </div>
+        <ui:insert name="content">
+            <!-- Card content goes here -->
+        </ui:insert>
+    </div>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/card-simple.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/card-simple.xhtml
new file mode 100644
index 0000000..3c9abcf
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/card-simple.xhtml
@@ -0,0 +1,29 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant card simple avec titre optionnel - DRY/WOU
+        Usage :
+        <ui:decorate template="/templates/components/card-simple.xhtml">
+            <ui:param name="title" value="Titre de la card"/>
+            <ui:param name="styleClass" value="mb-3"/>
+            <ui:define name="content">
+                Contenu de la card ici
+            </ui:define>
+        </ui:decorate>
+    -->
+
+    <div class="card #{styleClass}">
+        <ui:fragment rendered="#{not empty title}">
+            <h5 class="mb-3">
+                <h:outputText value="#{title}" />
+            </h5>
+        </ui:fragment>
+        <ui:insert name="content">
+            <!-- Card content goes here -->
+        </ui:insert>
+    </div>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/filter-bar.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/filter-bar.xhtml
new file mode 100644
index 0000000..8bb1c43
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/filter-bar.xhtml
@@ -0,0 +1,38 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant barre de filtres et recherche réutilisable - DRY/WOU
+        Usage :
+        <ui:decorate template="/templates/components/cards/filter-bar.xhtml">
+            <ui:param name="title" value="Filtres" />
+            <ui:param name="styleClass" value="mb-3" />
+            <ui:define name="filters">
+                Champs de filtres ici (recherche, dropdowns, etc.)
+            </ui:define>
+            <ui:define name="actions">
+                Boutons d'action (réinitialiser, rafraîchir, etc.)
+            </ui:define>
+        </ui:decorate>
+    -->
+
+    <div class="card #{styleClass}">
+        <ui:fragment rendered="#{not empty title}">
+            <h5 class="mb-3">
+                <h:outputText value="#{title}" />
+            </h5>
+        </ui:fragment>
+        <div class="grid">
+            <ui:insert name="filters">
+                <!-- Filter fields go here -->
+            </ui:insert>
+            <ui:insert name="actions">
+                <!-- Action buttons go here -->
+            </ui:insert>
+        </div>
+    </div>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/stat-card.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/stat-card.xhtml
new file mode 100644
index 0000000..0d52b37
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/cards/stat-card.xhtml
@@ -0,0 +1,40 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+    
+    <!-- 
+        Composant carte de statistique réutilisable (WOU/DRY)
+        Usage: ui:include src="/templates/components/cards/stat-card.xhtml"
+                  ui:param name="value" value="EXPRESSION_EL_ICI"
+                  ui:param name="label" value="Label de la statistique"
+                  ui:param name="icon" value="pi pi-icon-name"
+                  ui:param name="bgColor" value="blue"
+        bgColor: blue, green, orange, purple, etc.
+    -->
+    
+    <div class="col-12 md:col-3">
+        <h:panelGroup layout="block" 
+                      styleClass="card #{bgColor == 'blue' ? 'bg-blue-100 border-left-3 border-blue-500' : (bgColor == 'green' ? 'bg-green-100 border-left-3 border-green-500' : (bgColor == 'orange' ? 'bg-orange-100 border-left-3 border-orange-500' : 'bg-blue-100 border-left-3 border-blue-500'))}">
+            <div class="flex justify-content-between">
+                <div>
+                    <h:panelGroup layout="block"
+                                  styleClass="font-bold text-xl #{bgColor == 'blue' ? 'text-blue-900' : (bgColor == 'green' ? 'text-green-900' : (bgColor == 'orange' ? 'text-orange-900' : 'text-blue-900'))}">
+                        <h:outputText value="#{value}" />
+                    </h:panelGroup>
+                    <h:panelGroup layout="block"
+                                  styleClass="#{bgColor == 'blue' ? 'text-blue-700' : (bgColor == 'green' ? 'text-green-700' : (bgColor == 'orange' ? 'text-orange-700' : 'text-blue-700'))}">
+                        <h:outputText value="#{label}" />
+                    </h:panelGroup>
+                </div>
+                <h:panelGroup layout="block"
+                              styleClass="text-white border-round text-center #{bgColor == 'blue' ? 'bg-blue-500' : (bgColor == 'green' ? 'bg-green-500' : (bgColor == 'orange' ? 'bg-orange-500' : 'bg-blue-500'))}" 
+                              style="width: 2.5rem; height: 2.5rem; line-height: 2.5rem;">
+                    <i class="#{icon} text-lg"></i>
+                </h:panelGroup>
+            </div>
+        </h:panelGroup>
+    </div>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-actions.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-actions.xhtml
new file mode 100644
index 0000000..2e95e22
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-actions.xhtml
@@ -0,0 +1,25 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant colonne Actions réutilisable - DRY/WOU
+        Usage :
+        <ui:decorate template="/templates/components/column-actions.xhtml">
+            <ui:param name="width" value="220px"/>
+            <ui:define name="actions">
+                Boutons d'action ici (view, edit, toggle, delete, etc.)
+            </ui:define>
+        </ui:decorate>
+    -->
+
+    <p:column headerText="Actions" 
+              styleClass="text-center" 
+              style="width: #{empty width ? '200px' : width};">
+        <ui:insert name="actions">
+            <!-- Action buttons go here -->
+        </ui:insert>
+    </p:column>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-logo.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-logo.xhtml
new file mode 100644
index 0000000..88d4917
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-logo.xhtml
@@ -0,0 +1,25 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant colonne Logo réutilisable - DRY/WOU
+        Usage :
+        <ui:include src="/templates/components/column-logo.xhtml">
+            <ui:param name="logo" value="#{item.logo}"/>
+            <ui:param name="size" value="40"/>
+            <ui:param name="width" value="80px"/>
+        </ui:include>
+    -->
+
+    <p:column headerText="Logo" 
+              styleClass="text-center" 
+              style="width: #{empty width ? '80px' : width};">
+        <ui:include src="/templates/components/layout/organisation-logo.xhtml">
+            <ui:param name="logo" value="#{logo}"/>
+            <ui:param name="size" value="#{empty size ? '40' : size}"/>
+        </ui:include>
+    </p:column>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-name-with-subtitle.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-name-with-subtitle.xhtml
new file mode 100644
index 0000000..f263c91
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-name-with-subtitle.xhtml
@@ -0,0 +1,28 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant colonne Nom avec sous-titre réutilisable - DRY/WOU
+        Usage :
+        <ui:include src="/templates/components/column-name-with-subtitle.xhtml">
+            <ui:param name="headerText" value="Nom"/>
+            <ui:param name="name" value="#{item.nom}"/>
+            <ui:param name="subtitle" value="#{item.typeLibelle}"/>
+            <ui:param name="sortBy" value="#{item.nom}"/>
+            <ui:param name="filterBy" value="#{item.nom}"/>
+        </ui:include>
+    -->
+
+    <p:column headerText="#{empty headerText ? 'Nom' : headerText}" 
+              sortBy="#{sortBy}" 
+              filterBy="#{filterBy}">
+        <h:outputText value="#{name}" styleClass="font-bold"/>
+        <ui:fragment rendered="#{not empty subtitle}">
+            <br/>
+            <h:outputText value="#{subtitle}" styleClass="text-sm text-500"/>
+        </ui:fragment>
+    </p:column>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-tag.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-tag.xhtml
new file mode 100644
index 0000000..b9bed7c
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-tag.xhtml
@@ -0,0 +1,28 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant colonne Tag réutilisable - DRY/WOU
+        Usage :
+        <ui:include src="/templates/components/column-tag.xhtml">
+            <ui:param name="headerText" value="Type"/>
+            <ui:param name="value" value="#{item.typeLibelle}"/>
+            <ui:param name="severity" value="info"/>
+            <ui:param name="icon" value="pi pi-building"/>
+            <ui:param name="sortBy" value="#{item.type}"/>
+            <ui:param name="width" value="150px"/>
+        </ui:include>
+    -->
+
+    <p:column headerText="#{headerText}" 
+              sortBy="#{sortBy}"
+              styleClass="#{empty centered or centered ? 'text-center' : ''}"
+              style="#{not empty width ? 'width: ' += width : ''}">
+        <p:tag value="#{value}" 
+               severity="#{empty severity ? 'info' : severity}"
+               icon="#{icon}"/>
+    </p:column>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-text-with-icon.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-text-with-icon.xhtml
new file mode 100644
index 0000000..688c950
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/columns/column-text-with-icon.xhtml
@@ -0,0 +1,25 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant colonne Texte avec icône réutilisable - DRY/WOU
+        Usage :
+        <ui:include src="/templates/components/column-text-with-icon.xhtml">
+            <ui:param name="headerText" value="Localisation"/>
+            <ui:param name="icon" value="pi pi-map-marker"/>
+            <ui:param name="text" value="#{item.ville}, #{item.region}"/>
+            <ui:param name="width" value="200px"/>
+        </ui:include>
+    -->
+
+    <p:column headerText="#{headerText}"
+              style="#{not empty width ? 'width: ' += width : ''}">
+        <ui:fragment rendered="#{not empty icon}">
+            <i class="#{icon} mr-1"></i>
+        </ui:fragment>
+        <h:outputText value="#{text}"/>
+    </p:column>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/dialogs/confirm-dialog.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/dialogs/confirm-dialog.xhtml
new file mode 100644
index 0000000..f5d6b81
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/dialogs/confirm-dialog.xhtml
@@ -0,0 +1,53 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant dialogue de confirmation global réutilisable - DRY/WOU
+        
+        Usage :
+        <ui:include src="/templates/components/dialogs/confirm-dialog.xhtml">
+            <ui:param name="global" value="true"/>
+            <ui:param name="width" value="400"/>
+            <ui:param name="confirmLabel" value="Oui"/>
+            <ui:param name="cancelLabel" value="Non"/>
+            <ui:param name="confirmIcon" value="pi pi-check"/>
+            <ui:param name="cancelIcon" value="pi pi-times"/>
+            <ui:param name="confirmStyleClass" value="ui-button-danger"/>
+            <ui:param name="cancelStyleClass" value="ui-button-secondary"/>
+        </ui:include>
+        
+        Paramètres :
+        - global : Dialogue global pour toute l'application (défaut: true)
+        - width : Largeur du dialogue (défaut: 350)
+        - confirmLabel : Label du bouton de confirmation (défaut: Oui)
+        - cancelLabel : Label du bouton d'annulation (défaut: Non)
+        - confirmIcon : Icône du bouton de confirmation (défaut: pi pi-check)
+        - cancelIcon : Icône du bouton d'annulation (défaut: pi pi-times)
+        - confirmStyleClass : Style du bouton de confirmation (défaut: ui-button-danger)
+        - cancelStyleClass : Style du bouton d'annulation (défaut: ui-button-secondary)
+        - showEffect : Effet d'ouverture (défaut: fade)
+        - hideEffect : Effet de fermeture (défaut: fade)
+        - responsive : Responsive (défaut: true)
+    -->
+
+    <p:confirmDialog global="true"
+                     showEffect="fade"
+                     hideEffect="fade"
+                     responsive="true"
+                     width="350">
+        
+        <p:commandButton value="Non"
+                       type="button"
+                       styleClass="ui-button-secondary"
+                       icon="pi pi-times"
+                       onclick="PF('confirmDialog').hide()"/>
+        
+        <p:commandButton value="Oui"
+                       type="button"
+                       styleClass="ui-button-danger"
+                       icon="pi pi-check"/>
+    </p:confirmDialog>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/dialogs/form-dialog.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/dialogs/form-dialog.xhtml
new file mode 100644
index 0000000..6d0ed03
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/dialogs/form-dialog.xhtml
@@ -0,0 +1,87 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant dialogue de formulaire réutilisable et responsive - DRY/WOU
+        
+        Usage :
+        <ui:decorate template="/templates/components/dialogs/form-dialog.xhtml">
+            <ui:param name="dialogId" value="dlgNouvelle" />
+            <ui:param name="header" value="Nouvelle Organisation" />
+            <ui:param name="widgetVar" value="dlgNouvelle" />
+            <ui:param name="formId" value="formNouvelle" />
+            <ui:param name="width" value="900" />
+            <ui:param name="height" value="600" />
+            <ui:param name="maximizable" value="true" />
+            <ui:param name="fitViewport" value="true" />
+            <ui:define name="content">
+                Contenu du formulaire ici
+            </ui:define>
+            <ui:define name="footer">
+                Boutons du footer ici
+            </ui:define>
+        </ui:decorate>
+        
+        Paramètres :
+        - dialogId : ID unique du dialogue (requis)
+        - header : Titre du dialogue (requis)
+        - widgetVar : Variable JavaScript pour contrôler le dialogue (requis)
+        - formId : ID du formulaire (requis)
+        - width : Largeur (défaut: 600)
+        - height : Hauteur (optionnel)
+        - maximizable : Permet de maximiser (défaut: false)
+        - fitViewport : Ajuste au viewport (défaut: true)
+        - modal : Modal ou non (défaut: true)
+        - resizable : Redimensionnable (défaut: false)
+        - draggable : Déplaçable (défaut: true)
+        - closable : Bouton fermer (défaut: true)
+        - showEffect : Effet d'ouverture (défaut: fade)
+        - hideEffect : Effet de fermeture (défaut: fade)
+    -->
+
+    <h:form id="#{formId}">
+        <p:dialog id="#{dialogId}"
+                  header="#{header}"
+                  widgetVar="#{widgetVar}"
+                  modal="#{empty modal ? true : modal}"
+                  resizable="#{empty resizable ? false : resizable}"
+                  width="#{empty width ? '600' : width}"
+                  height="#{height}"
+                  responsive="true"
+                  closable="#{empty closable ? true : closable}"
+                  draggable="#{empty draggable ? true : draggable}"
+                  maximizable="#{not empty maximizable and maximizable}"
+                  fitViewport="#{empty fitViewport ? true : fitViewport}"
+                  showEffect="#{empty showEffect ? 'fade' : showEffect}"
+                  hideEffect="#{empty hideEffect ? 'fade' : hideEffect}"
+                  dynamic="true"
+                  styleClass="#{styleClass}">
+
+            <div class="ui-fluid">
+                <div class="grid">
+                    <ui:insert name="content">
+                        <!-- Contenu du formulaire -->
+                    </ui:insert>
+                </div>
+            </div>
+
+            <f:facet name="footer">
+                <div class="flex justify-content-end gap-2">
+                    <ui:insert name="footer">
+                        <!-- Footer par défaut : bouton Annuler -->
+                        <p:commandButton value="#{empty cancelLabel ? 'Annuler' : cancelLabel}"
+                                       icon="pi pi-times"
+                                       type="button"
+                                       onclick="PF('#{widgetVar}').hide();"
+                                       styleClass="ui-button-secondary" />
+                    </ui:insert>
+                </div>
+            </f:facet>
+        </p:dialog>
+    </h:form>
+</ui:composition>
+
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-dialog.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-dialog.xhtml
deleted file mode 100644
index c33b5a6..0000000
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-dialog.xhtml
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:h="http://xmlns.jcp.org/jsf/html"
-      xmlns:f="http://xmlns.jcp.org/jsf/core"
-      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
-      xmlns:p="http://primefaces.org/ui">
-
-<!-- 
-    Composant dialogue de formulaire réutilisable (WOU/DRY)
-    Usage: <ui:include src="/templates/components/form-dialog.xhtml">
-              <ui:param name="dialogId" value="dlgNouvelle" />
-              <ui:param name="header" value="Nouvelle Organisation" />
-              <ui:param name="widgetVar" value="dlgNouvelle" />
-              <ui:param name="formId" value="formNouvelle" />
-              <ui:param name="width" value="800" />
-              <ui:param name="saveAction" value="#{bean.creerOrganisation}" />
-              <ui:param name="saveLabel" value="Créer" />
-              <ui:param name="updateTarget" value=":formOrganisations:dtOrganisations :formOrganisations:messages" />
-              <ui:define name="content">
-                  Contenu du formulaire
-              </ui:define>
-            </ui:include>
--->
-
-<ui:composition>
-    <h:form id="#{formId}">
-        <p:dialog id="#{dialogId}" 
-                header="#{header}" 
-                widgetVar="#{widgetVar}"
-                modal="#{empty modal ? 'true' : modal}" 
-                resizable="#{empty resizable ? 'false' : resizable}"
-                width="#{empty width ? '600' : width}"
-                responsive="#{empty responsive ? 'true' : responsive}"
-                closable="#{empty closable ? 'true' : closable}"
-                draggable="#{empty draggable ? 'true' : draggable}"
-                dynamic="true">
-            
-            <div class="ui-fluid">
-                <div class="grid">
-                    <ui:insert name="content">
-                        <!-- Contenu du formulaire -->
-                    </ui:insert>
-                </div>
-            </div>
-            
-            <f:facet name="footer">
-                <ui:insert name="footer">
-                    <!-- Footer par défaut si non fourni -->
-                    <ui:fragment rendered="#{not empty cancelLabel}">
-                        <p:commandButton value="#{cancelLabel}" 
-                                       icon="pi pi-times"
-                                       onclick="PF('#{widgetVar}').hide();"
-                                       styleClass="ui-button-secondary"/>
-                    </ui:fragment>
-                    <ui:fragment rendered="#{empty cancelLabel}">
-                        <p:commandButton value="Annuler" 
-                                       icon="pi pi-times"
-                                       onclick="PF('#{widgetVar}').hide();"
-                                       styleClass="ui-button-secondary"/>
-                    </ui:fragment>
-                </ui:insert>
-            </f:facet>
-        </p:dialog>
-    </h:form>
-</ui:composition>
-
-</html>
-
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/detail-field.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/detail-field.xhtml
new file mode 100644
index 0000000..7d852f0
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/detail-field.xhtml
@@ -0,0 +1,32 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant d'affichage de détail (lecture seule) réutilisable - DRY/WOU
+        Usage :
+        <ui:include src="/templates/components/forms/detail-field.xhtml">
+            <ui:param name="label" value="Nom complet"/>
+            <ui:param name="value" value="#{bean.property}"/>
+            <ui:param name="multiline" value="true" />
+        </ui:include>
+    -->
+
+    <div class="mb-3">
+        <div class="text-600 text-sm mb-1">
+            <h:outputText value="#{label}" />
+        </div>
+        <div class="text-900">
+            <h:outputText value="#{value}"
+                          rendered="#{value != null}"
+                          escape="true"
+                          style="#{multiline ? 'white-space: pre-line;' : ''}" />
+            <h:outputText value="Non renseigné"
+                          rendered="#{value == null}"
+                          styleClass="text-400" />
+        </div>
+    </div>
+</ui:composition>
+
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-autocomplete.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-autocomplete.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-autocomplete.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-autocomplete.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-boolean.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-boolean.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-boolean.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-boolean.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-calendar.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-calendar.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-calendar.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-calendar.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-checkbox-menu.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-checkbox-menu.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-checkbox-menu.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-checkbox-menu.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-group.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-group.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-group.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-group.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-number.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-number.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-number.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-number.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-search-text.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-search-text.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-search-text.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-search-text.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-select.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-select.xhtml
similarity index 96%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-select.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-select.xhtml
index 6084e12..93743e5 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-select.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-select.xhtml
@@ -23,6 +23,7 @@
         <p:selectOneMenu id="#{id}" 
                         value="#{value}" 
                         required="#{not empty required and required}"
+                        disabled="#{not empty readonly and readonly}"
                         styleClass="w-full">
             <f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" rendered="#{not empty required and required}" />
             <ui:fragment rendered="#{not empty var and not empty itemLabel and not empty itemValue}">
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-text.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-text.xhtml
similarity index 94%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-text.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-text.xhtml
index 7aca4b2..18ec0dd 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-text.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-text.xhtml
@@ -21,6 +21,7 @@
                     value="#{value}" 
                     required="#{not empty required and required}"
                     placeholder="#{placeholder}"
+                    readonly="#{not empty readonly and readonly}"
                     styleClass="w-full" />
     </div>
 </ui:composition>
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-textarea.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-textarea.xhtml
similarity index 94%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-textarea.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-textarea.xhtml
index 5064863..55ce59f 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-textarea.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-textarea.xhtml
@@ -21,6 +21,7 @@
                         value="#{value}" 
                         required="#{not empty required and required}"
                         rows="#{not empty rows ? rows : 3}"
+                        readonly="#{not empty readonly and readonly}"
                         styleClass="w-full" />
     </div>
 </ui:composition>
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-wrapper.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-wrapper.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-field-wrapper.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-field-wrapper.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-section.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-section.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/form-section.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/forms/form-section.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/config.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/config.xhtml
similarity index 100%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/config.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/config.xhtml
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/footer.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/footer.xhtml
similarity index 90%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/footer.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/footer.xhtml
index fc498d5..b3f8855 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/footer.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/footer.xhtml
@@ -41,10 +41,7 @@
                 <h:form>
                     <div class="newsletter-input">
                         <p:inputText placeholder="adresse email" />
-                        <ui:include src="/templates/components/button-secondary.xhtml">
-                            <ui:param name="value" value="S'abonner" />
-                            <ui:param name="outlined" value="false" />
-                        </ui:include>
+                        <p:commandButton value="S'abonner" styleClass="ui-button-secondary" />
                     </div>
                 </h:form>
             </div>
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/menu.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/menu.xhtml
similarity index 99%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/menu.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/menu.xhtml
index b4aaedc..45a9a77 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/menu.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/menu.xhtml
@@ -54,7 +54,7 @@
                 <!-- Gestion des Organisations -->
                 <p:submenu id="m_organisations" label="Organisations" icon="pi pi-building">
                     <p:menuitem id="m_liste_organisations" value="Liste des Organisations" icon="pi pi-list" outcome="/pages/secure/organisation/liste" />
-                    <p:menuitem id="m_nouvelle_organisation" value="Nouvelle Organisation" icon="pi pi-plus" outcome="/pages/secure/organisation/liste" />
+                    <p:menuitem id="m_nouvelle_organisation" value="Nouvelle Organisation" icon="pi pi-plus" outcome="/pages/secure/organisation/nouvelle" />
                     <p:menuitem id="m_statistiques_orga" value="Statistiques" icon="pi pi-chart-bar" url="#" />
                 </p:submenu>
                 
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/organisation-logo.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/organisation-logo.xhtml
new file mode 100644
index 0000000..f8bfde2
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/organisation-logo.xhtml
@@ -0,0 +1,29 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant d'affichage du logo d'organisation (avatar circulaire) - DRY/WOU.
+        Paramètres :
+        - logo : URL du logo (peut être nul)
+        - size : taille en pixels (facultatif, défaut 48)
+        
+        Note: Les erreurs CSS de l'IDE sur la ligne suivante sont des faux positifs.
+        La syntaxe EL est correcte et sera évaluée côté serveur avant l'envoi au navigateur.
+    -->
+
+    <p:outputPanel styleClass="flex align-items-center justify-content-center border-circle bg-primary-50"
+                   style="width: #{empty size ? 48 : size}px; height: #{empty size ? 48 : size}px; overflow: hidden;">
+
+        <p:graphicImage value="#{logo}"
+                        rendered="#{not empty logo}"
+                        style="max-width: 100%; max-height: 100%; object-fit: contain;"/>
+
+        <h:panelGroup rendered="#{empty logo}">
+            <i class="pi pi-building text-2xl text-primary"></i>
+        </h:panelGroup>
+    </p:outputPanel>
+</ui:composition>
+
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/page-header.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/page-header.xhtml
similarity index 94%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/page-header.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/page-header.xhtml
index 443575c..99c4295 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/page-header.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/page-header.xhtml
@@ -6,7 +6,7 @@
     
     <!-- 
         Composant en-tête de page réutilisable (WOU/DRY)
-        Usage: <ui:include src="/templates/components/page-header.xhtml">
+        Usage: <ui:include src="/templates/components/layout/page-header.xhtml">
                   <ui:param name="icon" value="pi pi-icon-name" />
                   <ui:param name="title" value="Titre de la page" />
                   <ui:param name="description" value="Description de la page" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/rightpanel.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/rightpanel.xhtml
similarity index 99%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/rightpanel.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/rightpanel.xhtml
index 90f6537..cc66f44 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/rightpanel.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/rightpanel.xhtml
@@ -22,7 +22,7 @@
             <div class="section-header">
                 <h6>Mes tâches</h6>
                 <h:form>
-                    <ui:include src="/templates/components/button-icon.xhtml">
+                    <ui:include src="/templates/components/buttons/button-icon.xhtml">
                         <ui:param name="icon" value="pi pi-plus" />
                         <ui:param name="rounded" value="true" />
                         <ui:param name="text" value="false" />
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/topbar.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/topbar.xhtml
similarity index 98%
rename from unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/topbar.xhtml
rename to unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/topbar.xhtml
index 60c58bf..499ffaf 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/topbar.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/layout/topbar.xhtml
@@ -15,7 +15,7 @@
                 </h:link>
             </div>
            
-            <ui:include src="/templates/components/menu.xhtml" />
+            <ui:include src="/templates/components/layout/menu.xhtml" />
 
             <div class="layout-topbar-right">
                 <ul class="layout-topbar-actions">
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/stat-card.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/stat-card.xhtml
deleted file mode 100644
index 04fcbf7..0000000
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/stat-card.xhtml
+++ /dev/null
@@ -1,33 +0,0 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-                xmlns:h="http://xmlns.jcp.org/jsf/html"
-                xmlns:f="http://xmlns.jcp.org/jsf/core"
-                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
-                xmlns:p="http://primefaces.org/ui">
-    
-    <!-- 
-        Composant carte de statistique réutilisable (WOU/DRY)
-        Usage: <ui:include src="/templates/components/stat-card.xhtml">
-                  <ui:param name="value" value="#{bean.valeur}" />
-                  <ui:param name="label" value="Label de la statistique" />
-                  <ui:param name="icon" value="pi pi-icon-name" />
-                  <ui:param name="bgColor" value="blue" />
-                </ui:include>
-        bgColor: blue, green, orange, purple, etc.
-    -->
-    
-    <div class="col-12 md:col-3">
-        <div class="card bg-#{bgColor}-100 border-left-3 border-#{bgColor}-500">
-            <div class="flex justify-content-between">
-                <div>
-                    <div class="text-#{bgColor}-900 font-bold text-xl">#{value}</div>
-                    <div class="text-#{bgColor}-700">#{label}</div>
-                </div>
-                <div class="bg-#{bgColor}-500 text-white border-round text-center" 
-                     style="width: 2.5rem; height: 2.5rem; line-height: 2.5rem;">
-                    <i class="#{icon} text-lg"></i>
-                </div>
-            </div>
-        </div>
-    </div>
-</ui:composition>
-
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/tables/data-table.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/tables/data-table.xhtml
new file mode 100644
index 0000000..56eb799
--- /dev/null
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/components/tables/data-table.xhtml
@@ -0,0 +1,52 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant DataTable réutilisable avec configuration standard - DRY/WOU
+        Usage :
+        <ui:decorate template="/templates/components/tables/data-table.xhtml">
+            <ui:param name="id" value="dtItems"/>
+            <ui:param name="value" value="#{bean.items}"/>
+            <ui:param name="var" value="item"/>
+            <ui:param name="emptyMessage" value="Aucun élément trouvé"/>
+            <ui:param name="rows" value="20"/>
+            <ui:param name="rowsPerPageTemplate" value="10,20,50,100"/>
+            <ui:param name="paginator" value="true"/>
+            <ui:param name="lazy" value="false"/>
+            <ui:param name="selectionMode" value="single"/>
+            <ui:param name="selection" value="#{bean.selectedItem}"/>
+            <ui:define name="columns">
+                <p:column headerText="Nom">...</p:column>
+                <p:column headerText="Actions">...</p:column>
+            </ui:define>
+        </ui:decorate>
+    -->
+
+    <p:dataTable id="#{id}"
+                 value="#{value}"
+                 var="item"
+                 paginator="#{empty paginator ? 'true' : paginator}"
+                 rows="#{empty rows ? 20 : rows}"
+                 rowsPerPageTemplate="#{empty rowsPerPageTemplate ? '10,20,50,100' : rowsPerPageTemplate}"
+                 paginatorPosition="#{empty paginatorPosition ? 'bottom' : paginatorPosition}"
+                 emptyMessage="#{empty emptyMessage ? 'Aucun élément trouvé' : emptyMessage}"
+                 styleClass="table-responsive #{styleClass}"
+                 lazy="#{not empty lazy and lazy}"
+                 selectionMode="#{selectionMode}"
+                 selection="#{selection}"
+                 rowKey="#{rowKey}"
+                 sortMode="#{sortMode}"
+                 sortField="#{sortField}"
+                 sortOrder="#{sortOrder}"
+                 filteredValue="#{filteredValue}"
+                 widgetVar="#{widgetVar}">
+        
+        <ui:insert name="columns">
+            <!-- Table columns go here -->
+        </ui:insert>
+    </p:dataTable>
+</ui:composition>
+
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/main-template.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/main-template.xhtml
index 58fcd0d..2ae2fa7 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/main-template.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/templates/main-template.xhtml
@@ -23,16 +23,16 @@
 
     <h:body styleClass="#{guestPreferences.inputStyleClass}">
         <div class="layout-wrapper layout-topbar-#{guestPreferences.topbarTheme} layout-menu-#{guestPreferences.menuTheme} #{guestPreferences.menuMode}" >
-            <ui:include src="/templates/components/topbar.xhtml"/>
+            <ui:include src="/templates/components/layout/topbar.xhtml"/>
            
-            <ui:include src="/templates/components/rightpanel.xhtml"/>
-            <ui:include src="/templates/components/config.xhtml" />
+            <ui:include src="/templates/components/layout/rightpanel.xhtml"/>
+            <ui:include src="/templates/components/layout/config.xhtml" />
 
             <div class="layout-main"> 
                 <div class="layout-content">
                     <ui:insert name="content"/>
                 </div>
-                <ui:include src="/templates/components/footer.xhtml"/>
+                <ui:include src="/templates/components/layout/footer.xhtml"/>
             </div>
          
             <p:ajaxStatus style="width:32px;height:32px;position:fixed;right:7px;bottom:7px">
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/ui/includes/organisation-form.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/ui/includes/organisation-form.xhtml
index fe6ba95..3afd6df 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/ui/includes/organisation-form.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/ui/includes/organisation-form.xhtml
@@ -5,97 +5,452 @@
                 xmlns:p="http://primefaces.org/ui">
 
     <!--
-      Fragment réutilisable (DRY) pour le formulaire d'Organisation
+      Fragment réutilisable pour le formulaire d'Organisation
       Paramètres attendus via <ui:param>:
-      - model: l'objet cible (ex: #{organisationsBean.nouvelleOrganisation} ou #{organisationsBean.organisationSelectionnee})
-      - typesItems: la liste des SelectItem pour les types (ex: #{organisationsBean.typesSelectItemsForForm})
+      - model: l'objet cible (ex: #{organisationsBean.nouvelleOrganisation})
+      - typesItems: la liste des SelectItem pour les types
     -->
 
     <div class="ui-fluid">
-        <div class="formgrid grid">
-            <!-- Nom -->
-            <div class="field col-12 md:col-8">
-                <p:outputLabel for="nom" value="Nom *" />
-                <p:inputText id="nom"
-                             value="#{model.nom}"
-                             required="true"
-                             requiredMessage="Nom: une donnée est requise."
-                             maxlength="200" />
-                <p:message for="nom" />
-            </div>
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <!-- SECTION 1 : INFORMATIONS GÉNÉRALES -->
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <p:fieldset legend="Informations générales" toggleable="true" collapsed="false" styleClass="mb-3">
+            <div class="formgrid grid">
+                <!-- Nom complet -->
+                <div class="field col-12 md:col-8">
+                    <p:outputLabel for="nom" value="Nom complet *" styleClass="font-semibold" />
+                    <p:inputText id="nom"
+                                 value="#{model.nom}"
+                                 required="true"
+                                 requiredMessage="Le nom de l'organisation est requis."
+                                 maxlength="200"
+                                 placeholder="Ex: Association pour le développement durable" />
+                    <p:message for="nom" />
+                </div>
 
-            <!-- Type -->
-            <div class="field col-12 md:col-4">
-                <p:outputLabel for="type" value="Type *" />
-                <p:selectOneMenu id="type" value="#{model.typeAssociation}" required="true"
-                                 requiredMessage="Type d'organisation requis.">
-                    <f:selectItems value="#{typesItems}" />
-                </p:selectOneMenu>
-                <p:message for="type" />
-            </div>
+                <!-- Nom court / Sigle -->
+                <div class="field col-12 md:col-4">
+                    <p:outputLabel for="nomCourt" value="Nom court / Sigle" styleClass="font-semibold" />
+                    <p:inputText id="nomCourt"
+                                 value="#{model.nomCourt}"
+                                 maxlength="100"
+                                 placeholder="Ex: ADD" />
+                </div>
 
-            <!-- Date de fondation -->
-            <div class="field col-12 md:col-4">
-                <p:outputLabel for="dateFondation" value="Date de fondation" />
-                <p:datePicker id="dateFondation" value="#{model.dateFondation}" pattern="yyyy-MM-dd" showIcon="true" />
-            </div>
+                <!-- Type d'organisation -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="type" value="Type d'organisation *" styleClass="font-semibold" />
+                    <p:selectOneMenu id="type" 
+                                     value="#{model.typeAssociation}" 
+                                     required="true"
+                                     requiredMessage="Le type d'organisation est requis.">
+                        <f:selectItem itemLabel="-- Sélectionnez un type --" itemValue="#{null}" noSelectionOption="true" />
+                        <f:selectItems value="#{typesItems}" />
+                    </p:selectOneMenu>
+                    <p:message for="type" />
+                </div>
 
-            <!-- Email -->
-            <div class="field col-12 md:col-4">
-                <p:outputLabel for="email" value="Email" />
-                <p:inputText id="email" value="#{model.email}" maxlength="200" />
-            </div>
+                <!-- Date de fondation -->
+                <div class="field col-12 md:col-3">
+                    <p:outputLabel for="dateFondation" value="Date de fondation" styleClass="font-semibold" />
+                    <p:datePicker id="dateFondation" 
+                                  value="#{model.dateFondation}" 
+                                  pattern="dd/MM/yyyy" 
+                                  showIcon="true"
+                                  yearNavigator="true"
+                                  yearRange="1900:2025"
+                                  placeholder="jj/mm/aaaa" />
+                </div>
 
-            <!-- Téléphone -->
-            <div class="field col-12 md:col-4">
-                <p:outputLabel for="telephone" value="Téléphone" />
-                <p:inputText id="telephone" value="#{model.telephone}" maxlength="20" />
-            </div>
+                <!-- Numéro d'enregistrement -->
+                <div class="field col-12 md:col-3">
+                    <p:outputLabel for="numEnreg" value="N° d'enregistrement" styleClass="font-semibold" />
+                    <p:inputText id="numEnreg" 
+                                 value="#{model.numeroRegistre}" 
+                                 maxlength="100"
+                                 placeholder="Ex: RNA-W123456789" />
+                </div>
 
-            <!-- Description -->
-            <div class="field col-12">
-                <p:outputLabel for="description" value="Description" />
-                <p:inputTextarea id="description" value="#{model.description}" rows="3" maxlength="500" />
+                <!-- Description -->
+                <div class="field col-12">
+                    <p:outputLabel for="description" value="Description" styleClass="font-semibold" />
+                    <p:inputTextarea id="description" 
+                                     value="#{model.description}" 
+                                     rows="4" 
+                                     maxlength="2000"
+                                     placeholder="Décrivez brièvement l'organisation..."
+                                     autoResize="false" />
+                    <small class="text-muted">#{2000 - (empty model.description ? 0 : model.description.length())} caractères restants</small>
+                </div>
             </div>
+        </p:fieldset>
 
-            <!-- Adresse -->
-            <div class="field col-12">
-                <p:outputLabel for="adresse" value="Adresse" />
-                <p:inputTextarea id="adresse" value="#{model.adresse}" rows="2" maxlength="500" />
-            </div>
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <!-- SECTION 2 : COORDONNÉES -->
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <p:fieldset legend="Coordonnées" toggleable="true" collapsed="false" styleClass="mb-3">
+            <div class="formgrid grid">
+                <!-- Email principal -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="email" value="Email principal" styleClass="font-semibold" />
+                    <p:inputText id="email" 
+                                 value="#{model.email}" 
+                                 maxlength="200"
+                                 type="email"
+                                 placeholder="contact@exemple.com" />
+                    <p:message for="email" />
+                </div>
 
-            <!-- Ville / Région / Pays -->
-            <div class="field col-12 md:col-4">
-                <p:outputLabel for="ville" value="Ville" />
-                <p:inputText id="ville" value="#{model.ville}" maxlength="100" />
-            </div>
-            <div class="field col-12 md:col-4">
-                <p:outputLabel for="region" value="Région" />
-                <p:inputText id="region" value="#{model.region}" maxlength="100" />
-            </div>
-            <div class="field col-12 md:col-4">
-                <p:outputLabel for="pays" value="Pays" />
-                <p:inputText id="pays" value="#{model.pays}" maxlength="100" />
-            </div>
+                <!-- Email secondaire -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="email2" value="Email secondaire" styleClass="font-semibold" />
+                    <p:inputText id="email2" 
+                                 value="#{model.emailSecondaire}" 
+                                 maxlength="200"
+                                 type="email"
+                                 placeholder="admin@exemple.com" />
+                    <p:message for="email2" />
+                </div>
 
-            <!-- Numéro d'enregistrement -->
-            <div class="field col-12 md:col-6">
-                <p:outputLabel for="numEnreg" value="Numéro d'enregistrement" />
-                <p:inputText id="numEnreg" value="#{model.numeroRegistre}" maxlength="100" />
-            </div>
+                <!-- Téléphone principal -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="telephone" value="Téléphone principal" styleClass="font-semibold" />
+                    <p:inputText id="telephone" 
+                                 value="#{model.telephone}" 
+                                 maxlength="20"
+                                 placeholder="+225 XX XX XX XX XX" />
+                </div>
 
-            <!-- Code postal -->
-            <div class="field col-12 md:col-6">
-                <p:outputLabel for="codePostal" value="Code postal" />
-                <p:inputText id="codePostal" value="#{model.codePostal}" maxlength="10" />
-            </div>
+                <!-- Téléphone secondaire -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="telephone2" value="Téléphone secondaire" styleClass="font-semibold" />
+                    <p:inputText id="telephone2" 
+                                 value="#{model.telephoneSecondaire}" 
+                                 maxlength="20"
+                                 placeholder="+225 XX XX XX XX XX" />
+                </div>
 
-            <!-- Site web -->
-            <div class="field col-12 md:col-6">
-                <p:outputLabel for="siteWeb" value="Site web" />
-                <p:inputText id="siteWeb" value="#{model.siteWeb}" maxlength="500" />
+                <!-- Site web -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="siteWeb" value="Site web" styleClass="font-semibold" />
+                    <p:inputText id="siteWeb" 
+                                 value="#{model.siteWeb}" 
+                                 maxlength="500"
+                                 placeholder="https://www.exemple.com" />
+                </div>
+
+                <!-- Logo URL -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="logo" value="Logo (URL)" styleClass="font-semibold" />
+                    <p:inputText id="logo" 
+                                 value="#{model.logo}" 
+                                 maxlength="500"
+                                 placeholder="https://www.exemple.com/logo.png" />
+                </div>
+
+                <!-- Réseaux sociaux -->
+                <div class="field col-12">
+                    <p:outputLabel for="reseauxSociaux" value="Réseaux sociaux" styleClass="font-semibold" />
+                    <p:inputTextarea id="reseauxSociaux" 
+                                     value="#{model.reseauxSociaux}" 
+                                     rows="3" 
+                                     maxlength="1000"
+                                     placeholder='Ex: {"facebook":"@pageOfficielle", "twitter":"@compte", "linkedin":"entreprise/nom"}'
+                                     autoResize="false" />
+                    <small class="text-muted">Format JSON recommandé</small>
+                </div>
             </div>
-        </div>
+        </p:fieldset>
+
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <!-- SECTION 3 : LOCALISATION -->
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <p:fieldset legend="Localisation" toggleable="true" collapsed="false" styleClass="mb-3">
+            <div class="formgrid grid">
+                <!-- Adresse complète -->
+                <div class="field col-12">
+                    <p:outputLabel for="adresse" value="Adresse complète" styleClass="font-semibold" />
+                    <p:inputTextarea id="adresse" 
+                                     value="#{model.adresse}" 
+                                     rows="2" 
+                                     maxlength="500"
+                                     placeholder="N° rue, quartier..."
+                                     autoResize="false" />
+                </div>
+
+                <!-- Ville -->
+                <div class="field col-12 md:col-4">
+                    <p:outputLabel for="ville" value="Ville" styleClass="font-semibold" />
+                    <p:inputText id="ville" 
+                                 value="#{model.ville}" 
+                                 maxlength="100"
+                                 placeholder="Ex: Abidjan" />
+                </div>
+
+                <!-- Code postal -->
+                <div class="field col-12 md:col-2">
+                    <p:outputLabel for="codePostal" value="Code postal" styleClass="font-semibold" />
+                    <p:inputText id="codePostal" 
+                                 value="#{model.codePostal}" 
+                                 maxlength="10"
+                                 placeholder="Ex: 01 BP 123" />
+                </div>
+
+                <!-- Région -->
+                <div class="field col-12 md:col-3">
+                    <p:outputLabel for="region" value="Région" styleClass="font-semibold" />
+                    <p:inputText id="region" 
+                                 value="#{model.region}" 
+                                 maxlength="100"
+                                 placeholder="Ex: Lagunes" />
+                </div>
+
+                <!-- Pays -->
+                <div class="field col-12 md:col-3">
+                    <p:outputLabel for="pays" value="Pays" styleClass="font-semibold" />
+                    <p:inputText id="pays" 
+                                 value="#{model.pays}" 
+                                 maxlength="100"
+                                 placeholder="Ex: Côte d'Ivoire" />
+                </div>
+
+                <!-- Coordonnées GPS -->
+                <div class="field col-12">
+                    <p:outputLabel value="Coordonnées GPS" styleClass="font-semibold" />
+                </div>
+
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="latitude" value="Latitude" />
+                    <p:inputNumber id="latitude" 
+                                   value="#{model.latitude}" 
+                                   decimalPlaces="6"
+                                   minValue="-90"
+                                   maxValue="90"
+                                   placeholder="Ex: 5.316667" />
+                    <small class="text-muted">Valeur entre -90 et 90</small>
+                </div>
+
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="longitude" value="Longitude" />
+                    <p:inputNumber id="longitude" 
+                                   value="#{model.longitude}" 
+                                   decimalPlaces="6"
+                                   minValue="-180"
+                                   maxValue="180"
+                                   placeholder="Ex: -4.033333" />
+                    <small class="text-muted">Valeur entre -180 et 180</small>
+                </div>
+            </div>
+        </p:fieldset>
+
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <!-- SECTION 4 : STRUCTURE & HIÉRARCHIE -->
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <p:fieldset legend="Structure &amp; Hiérarchie" toggleable="true" collapsed="true" styleClass="mb-3">
+            <div class="formgrid grid">
+                <!-- Statut juridique -->
+                <div class="field col-12">
+                    <p:outputLabel value="Statut juridique" styleClass="font-semibold block mb-3" />
+                </div>
+
+                <div class="field col-12 md:col-4">
+                    <div class="field-checkbox">
+                        <p:selectBooleanCheckbox id="publique" value="#{model.organisationPublique}" />
+                        <p:outputLabel for="publique" value="Organisation publique" styleClass="ml-2" />
+                    </div>
+                    <small class="text-muted block mt-1">Institution étatique ou gouvernementale</small>
+                </div>
+
+                <div class="field col-12 md:col-4">
+                    <div class="field-checkbox">
+                        <p:selectBooleanCheckbox id="accepteMembres" value="#{model.accepteNouveauxMembres}" />
+                        <p:outputLabel for="accepteMembres" value="Recrutement ouvert" styleClass="ml-2" />
+                    </div>
+                    <small class="text-muted block mt-1">Accepte de nouveaux membres</small>
+                </div>
+
+                <div class="field col-12 md:col-4">
+                    <div class="field-checkbox">
+                        <p:selectBooleanCheckbox id="cotisationObl" value="#{model.cotisationObligatoire}" />
+                        <p:outputLabel for="cotisationObl" value="Cotisation obligatoire" styleClass="ml-2" />
+                    </div>
+                    <small class="text-muted block mt-1">Adhésion payante requise</small>
+                </div>
+
+                <!-- Séparateur visuel -->
+                <div class="field col-12">
+                    <p:divider />
+                    <p:outputLabel value="Rattachement hiérarchique" styleClass="font-semibold block mb-3" />
+                </div>
+
+                <!-- Organisation parente -->
+                <div class="field col-12 md:col-9">
+                    <p:outputLabel for="orgParente" value="Organisation parente" styleClass="font-semibold" />
+                    <p:inputText id="orgParente" 
+                                 value="#{model.organisationParenteId}" 
+                                 maxlength="36"
+                                 placeholder="Sélectionner ou saisir l'identifiant de l'organisation mère" />
+                    <small class="text-muted">Laisser vide si l'organisation est indépendante ou au sommet de la hiérarchie</small>
+                </div>
+
+                <!-- Niveau hiérarchique -->
+                <div class="field col-12 md:col-3">
+                    <p:outputLabel for="niveau" value="Niveau" styleClass="font-semibold" />
+                    <p:inputNumber id="niveau" 
+                                   value="#{model.niveauHierarchique}" 
+                                   decimalPlaces="0"
+                                   minValue="0"
+                                   maxValue="10"
+                                   placeholder="0" />
+                    <small class="text-muted">0 = Niveau national/racine<br/>1 = Niveau régional<br/>2+ = Niveaux locaux</small>
+                </div>
+            </div>
+        </p:fieldset>
+
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <!-- SECTION 5 : MEMBRES & GOUVERNANCE -->
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <p:fieldset legend="Membres &amp; Gouvernance" toggleable="true" collapsed="true" styleClass="mb-3">
+            <div class="formgrid grid">
+                <!-- Nombre de membres -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="nbMembres" value="Nombre de membres" styleClass="font-semibold" />
+                    <p:inputNumber id="nbMembres" 
+                                   value="#{model.nombreMembres}" 
+                                   decimalPlaces="0"
+                                   minValue="0"
+                                   placeholder="0" />
+                </div>
+
+                <!-- Nombre d'administrateurs -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="nbAdmins" value="Nombre d'administrateurs" styleClass="font-semibold" />
+                    <p:inputNumber id="nbAdmins" 
+                                   value="#{model.nombreAdministrateurs}" 
+                                   decimalPlaces="0"
+                                   minValue="0"
+                                   placeholder="0" />
+                </div>
+            </div>
+        </p:fieldset>
+
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <!-- SECTION 6 : BUDGET & FINANCES -->
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <p:fieldset legend="Budget &amp; Finances" toggleable="true" collapsed="true" styleClass="mb-3">
+            <div class="formgrid grid">
+                <!-- Budget annuel -->
+                <div class="field col-12 md:col-5">
+                    <p:outputLabel for="budget" value="Budget annuel" styleClass="font-semibold" />
+                    <p:inputNumber id="budget" 
+                                   value="#{model.budgetAnnuel}" 
+                                   decimalPlaces="2"
+                                   minValue="0"
+                                   placeholder="0.00" />
+                </div>
+
+                <!-- Devise -->
+                <div class="field col-12 md:col-2">
+                    <p:outputLabel for="devise" value="Devise" styleClass="font-semibold" />
+                    <p:inputText id="devise" 
+                                 value="#{model.devise}" 
+                                 maxlength="3"
+                                 placeholder="XOF"
+                                 style="text-transform: uppercase;" />
+                    <small class="text-muted">Code ISO (ex: XOF, EUR)</small>
+                </div>
+
+                <!-- Montant cotisation -->
+                <div class="field col-12 md:col-5">
+                    <p:outputLabel for="montantCotisation" value="Cotisation annuelle" styleClass="font-semibold" />
+                    <p:inputNumber id="montantCotisation" 
+                                   value="#{model.montantCotisationAnnuelle}" 
+                                   decimalPlaces="2"
+                                   minValue="0"
+                                   placeholder="0.00" />
+                </div>
+            </div>
+        </p:fieldset>
+
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <!-- SECTION 7 : MISSION & ACTIVITÉS -->
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <p:fieldset legend="Mission &amp; Activités" toggleable="true" collapsed="true" styleClass="mb-3">
+            <div class="formgrid grid">
+                <!-- Objectifs -->
+                <div class="field col-12">
+                    <p:outputLabel for="objectifs" value="Objectifs stratégiques" styleClass="font-semibold" />
+                    <p:inputTextarea id="objectifs" 
+                                     value="#{model.objectifs}" 
+                                     rows="4" 
+                                     maxlength="2000"
+                                     placeholder="Décrivez les objectifs principaux de l'organisation..."
+                                     autoResize="false" />
+                    <small class="text-muted">#{2000 - (empty model.objectifs ? 0 : model.objectifs.length())} caractères restants</small>
+                </div>
+
+                <!-- Activités principales -->
+                <div class="field col-12">
+                    <p:outputLabel for="activites" value="Activités principales" styleClass="font-semibold" />
+                    <p:inputTextarea id="activites" 
+                                     value="#{model.activitesPrincipales}" 
+                                     rows="4" 
+                                     maxlength="2000"
+                                     placeholder="Décrivez les activités et programmes mis en œuvre..."
+                                     autoResize="false" />
+                    <small class="text-muted">#{2000 - (empty model.activitesPrincipales ? 0 : model.activitesPrincipales.length())} caractères restants</small>
+                </div>
+            </div>
+        </p:fieldset>
+
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <!-- SECTION 8 : PARTENARIATS & CERTIFICATIONS -->
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <p:fieldset legend="Partenariats &amp; Certifications" toggleable="true" collapsed="true" styleClass="mb-3">
+            <div class="formgrid grid">
+                <!-- Certifications / Labels -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="certifications" value="Certifications / Labels" styleClass="font-semibold" />
+                    <p:inputTextarea id="certifications" 
+                                     value="#{model.certifications}" 
+                                     rows="3" 
+                                     maxlength="500"
+                                     placeholder="Ex: ISO 9001, Label RSE..."
+                                     autoResize="false" />
+                </div>
+
+                <!-- Partenaires principaux -->
+                <div class="field col-12 md:col-6">
+                    <p:outputLabel for="partenaires" value="Partenaires principaux" styleClass="font-semibold" />
+                    <p:inputTextarea id="partenaires" 
+                                     value="#{model.partenaires}" 
+                                     rows="3" 
+                                     maxlength="1000"
+                                     placeholder="Liste des partenaires stratégiques..."
+                                     autoResize="false" />
+                </div>
+            </div>
+        </p:fieldset>
+
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <!-- SECTION 9 : NOTES ADMINISTRATIVES -->
+        <!-- ═══════════════════════════════════════════════════════════════ -->
+        <p:fieldset legend="Notes administratives" toggleable="true" collapsed="true" styleClass="mb-3">
+            <div class="formgrid grid">
+                <div class="field col-12">
+                    <p:outputLabel for="notes" value="Notes internes" styleClass="font-semibold" />
+                    <p:inputTextarea id="notes" 
+                                     value="#{model.notes}" 
+                                     rows="4" 
+                                     maxlength="1000"
+                                     placeholder="Notes réservées à l'usage administratif interne..."
+                                     autoResize="false" />
+                    <small class="text-muted">Ces notes ne sont visibles que par les administrateurs</small>
+                </div>
+            </div>
+        </p:fieldset>
+
     </div>
 
- </ui:fragment>
+</ui:fragment>
\ No newline at end of file