From f5a8e9a14bd779ed670cc60bb381e2147354baa2 Mon Sep 17 00:00:00 2001
From: Nabil Derouiche <nabil@bolbol.tn>
Date: Sat, 18 Apr 2026 16:52:53 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20v4=20=E2=80=94=20am=C3=A9liorations=20c?=
 =?UTF-8?q?ompl=C3=A8tes=20UX/bugs/architecture?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bugs corrigés :
- Remplace logo-TT.png et photo absents par logo-RLA.svg + avatar initiales
- Thème par défaut synchronisé avec CONFIG.DEFAULT_THEME
- showSlide() ne cible plus que les btn-slide-N (fix index des boutons export)
- Filtre entrepreneur "En Service" se réinitialise au changement de région
- Suppression variable `const now` inutilisée

Améliorations :
- normalizeMarche() : préprocesseur unifié des champs API multi-noms
- ALL_REGIONS centralisé dans config.js, buildRegionOptions() partout
- 2 bar charts région dans Vue Générale (avancement moyen + nb marchés)
- Taille de page configurable 10/25/50/100
- Icônes de tri actives (fa-sort-up/down + classe CSS)
- Filtres période (date) sur liste Marchés + bouton reset
- Filtres région + état dans Pilotage Proactif
- Modal édition utilisateur (rôle, région, mot de passe)
- Toast confirmation suppression utilisateur (remplace confirm natif)
- Gestion session expirée : 401 → toast + déconnexion auto
- Titre onglet dynamique avec badge alertes
- Toast unifié error/success/warning
- Touche Escape ferme le modal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CLAUDE.md    |  39 ++++
 config.js    |  17 +-
 index.html   | 636 ++++++++++++++++++++++++++++++++++++---------------
 logo-RLA.svg |  24 ++
 4 files changed, 523 insertions(+), 193 deletions(-)
 create mode 100644 logo-RLA.svg

diff --git a/CLAUDE.md b/CLAUDE.md
index f1658b8..b0c99bc 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -13,3 +13,42 @@
 ## MCP disponibles
 - baserow : http://192.168.100.33 (données marchés RLA)
 - portainer : http://192.168.100.33:9000 (déploiement Docker)
+
+## Architecture frontend (index.html)
+- Fichier unique SPA — HTML + CSS + JS inline
+- API REST : `/api/auth/login`, `/api/marches`, `/api/stats`, `/api/pilotage-proactif`, `/api/pipeline`, `/api/users`, `/api/logs`, `/api/export/:format`
+- JWT stocké en localStorage (`rla_jwt`)
+- Thème persisté en localStorage (`rla_theme`)
+- Rôles : `user` (lecture, régions restreintes) · `admin` (pipeline) · `superadmin` (users, logs, exports)
+
+## Champs API normalisés via `normalizeMarche(r)`
+Appeler `normalizeMarche(r)` à la réception — ensuite utiliser uniquement :
+- `r.id_marche`, `r.region`, `r.taux_phy` (number), `r.tot_marche` (number), `r.date_debut`, `r.date_fin`, `r.observation` (string)
+
+## Régions Zone Sud — source unique
+Défini dans `CONFIG.ALL_REGIONS` (config.js). Ne pas dupliquer dans le HTML.
+Accès via la variable globale `ALL_REGIONS` (initialisée depuis CONFIG).
+
+## Changelog v4 — 2026-04-18
+### Bugs corrigés
+- `logo-TT.png` / `Nabil.Derouiche.jpg` absents → remplacés par `logo-RLA.svg` + avatar initiales
+- Thème par défaut : `loadTheme()` utilise désormais `CONFIG.DEFAULT_THEME` (plus d'incohérence avec config.js)
+- `showSlide()` : active uniquement les `btn-slide-N`, pas les boutons export (ancien bug d'index)
+- Filtre entrepreneur "En Service" : se réinitialise quand la région change (`onServiceRegionChange`)
+- Variable `const now` inutilisée supprimée
+
+### Améliorations
+- **normalizeMarche()** : préprocesseur centralisé des champs API multi-noms
+- **ALL_REGIONS centralisé** dans config.js, injecté partout via `buildRegionOptions()`
+- **2 graphiques région** dans Vue Générale : avancement moyen + marchés actifs par région (bar charts)
+- **Taille de page configurable** : sélecteur 10/25/50/100 dans la pagination
+- **Icônes de tri actives** : fa-sort-up / fa-sort-down + classe CSS sur colonne active
+- **Filtres période** sur liste Marchés (date début / date fin) + bouton reset
+- **Filtre région + état** dans slide Pilotage Proactif
+- **Modal édition utilisateur** : modifier rôle, région, mot de passe (PATCH /api/users/:id)
+- **Toast de confirmation** pour suppression utilisateur (remplace `confirm()` natif)
+- **Gestion session expirée** : 401 → toast warning + déconnexion automatique après 1,5s
+- **Titre onglet dynamique** : `⚠️ N alertes — Marchés RLA` si alertes actives
+- **Toast unifié** (error / success / warning) remplace errorToast mono-usage
+- **Footer** : avatar initiales SVG remplace image absente
+- **Touche Escape** ferme le modal édition
diff --git a/config.js b/config.js
index 43e767e..5fc77cc 100644
--- a/config.js
+++ b/config.js
@@ -15,14 +15,17 @@ const CONFIG = {
     // Thème par défaut
     DEFAULT_THEME: 'light',
 
+    // Régions Zone Sud (source unique)
+    ALL_REGIONS: ['Gabes','Gafsa','Kebili','Medenine','Sfax','Tataouine','Tozeur'],
+
     // Couleurs régions
     REGION_COLORS: {
-        'Gabes': '#17A2B8',
-        'Gafsa': '#22C55E',
-        'Kebili': '#9333EA',
-        'Medenine': '#0EA5E9',
-        'Sfax': '#002855',
+        'Gabes':     '#17A2B8',
+        'Gafsa':     '#22C55E',
+        'Kebili':    '#9333EA',
+        'Medenine':  '#0EA5E9',
+        'Sfax':      '#002855',
         'Tataouine': '#14B8A6',
-        'Tozeur': '#818CF8'
+        'Tozeur':    '#818CF8'
     }
-};
\ No newline at end of file
+};
diff --git a/index.html b/index.html
index 3691fda..dfd24ef 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Marchés RLA - Zone Sud | Tunisie Telecom</title>
+  <link rel="icon" type="image/svg+xml" href="logo-RLA.svg">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" defer></script>
   <script src="config.js"></script>
@@ -35,7 +36,9 @@
     /* ── LOGIN ── */
     .login-container{position:fixed;inset:0;background:var(--bg-body);display:flex;justify-content:center;align-items:center;z-index:10000;}
     .login-box{background:var(--bg-card);padding:40px;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.4);border:1px solid var(--border-color);width:100%;max-width:400px;text-align:center;backdrop-filter:blur(20px);}
-    .login-box .login-logo{height:70px;margin-bottom:20px;object-fit:contain;}
+    .login-logo-wrap{height:70px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;}
+    .login-logo-wrap img{height:70px;object-fit:contain;}
+    .login-logo-wrap .logo-svg-fallback{width:70px;height:70px;}
     .login-box h2{color:var(--primary);margin-bottom:8px;font-size:1.5em;}
     [data-theme=""] .login-box h2,[data-theme="dark"] .login-box h2{color:var(--accent);}
     .login-box p{color:var(--text-muted);margin-bottom:25px;font-size:0.9em;}
@@ -55,6 +58,7 @@
     .header{background:linear-gradient(90deg,var(--primary),var(--primary-light));padding:14px 24px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 20px rgba(0,0,0,0.3);position:sticky;top:0;z-index:100;flex-wrap:wrap;gap:12px;}
     .logo-section{display:flex;align-items:center;gap:14px;}
     .logo-section img{height:46px;object-fit:contain;}
+    .logo-section .logo-svg-fallback{width:46px;height:46px;}
     .logo-section h1{font-size:1.2em;font-weight:700;color:white;line-height:1.2;}
     .logo-section .sub{font-size:0.78em;color:rgba(255,255,255,0.7);margin-top:2px;}
     .header-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
@@ -80,12 +84,12 @@
     .slide-nav button.active{background:linear-gradient(135deg,var(--accent),var(--primary-light));color:white;box-shadow:0 4px 15px rgba(0,212,255,0.25);}
     [data-theme="light"] .slide-nav button.active,[data-theme="professional"] .slide-nav button.active{box-shadow:0 4px 15px rgba(2,132,199,0.3);}
     .nav-separator{width:2px;height:28px;background:var(--border-color);margin:0 4px;align-self:center;}
-    .export-btn{background:linear-gradient(135deg,#dc2626,#b91c1c)!important;color:white!important;border-color:transparent!important;}
-    .export-pptx-btn{background:linear-gradient(135deg,#C65D21,#E07832)!important;color:white!important;border-color:transparent!important;}
-    .export-xlsx-btn{background:linear-gradient(135deg,#16a34a,#15803d)!important;color:white!important;border-color:transparent!important;}
-    .export-docx-btn{background:linear-gradient(135deg,#1d4ed8,#1e40af)!important;color:white!important;border-color:transparent!important;}
-    .refresh-btn{background:linear-gradient(135deg,#0891b2,#0e7490)!important;color:white!important;border-color:transparent!important;}
-    .nav-hidden{display:none!important;}
+    .export-btn{background:linear-gradient(135deg,#dc2626,#b91c1c) !important;color:white !important;border-color:transparent !important;}
+    .export-pptx-btn{background:linear-gradient(135deg,#C65D21,#E07832) !important;color:white !important;border-color:transparent !important;}
+    .export-xlsx-btn{background:linear-gradient(135deg,#16a34a,#15803d) !important;color:white !important;border-color:transparent !important;}
+    .export-docx-btn{background:linear-gradient(135deg,#1d4ed8,#1e40af) !important;color:white !important;border-color:transparent !important;}
+    .refresh-btn{background:linear-gradient(135deg,#0891b2,#0e7490) !important;color:white !important;border-color:transparent !important;}
+    .nav-hidden{display:none !important;}
 
     /* ── SLIDES ── */
     .slides-container{position:relative;max-width:1400px;margin:0 auto;padding:24px;min-height:75vh;}
@@ -115,12 +119,15 @@
     .kpi-card .sub{font-size:0.78em;color:var(--text-muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color);}
 
     /* ── CHARTS ── */
-    .charts-row{display:grid;grid-template-columns:300px 1fr;gap:16px;margin-bottom:22px;}
+    .charts-row{display:grid;grid-template-columns:280px 1fr;gap:16px;margin-bottom:22px;}
     @media(max-width:900px){.charts-row{grid-template-columns:1fr;}}
+    .charts-row-3{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;}
+    @media(max-width:900px){.charts-row-3{grid-template-columns:1fr;}}
     .chart-card{background:var(--bg-card);border-radius:14px;padding:18px;border:1px solid var(--border-color);backdrop-filter:blur(10px);}
     .chart-card-title{font-size:0.9em;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
     .chart-card-title i{color:var(--accent);}
     .chart-container{position:relative;height:220px;}
+    .chart-container.tall{height:260px;}
 
     /* ── FILTERS ── */
     .filters-bar{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;align-items:center;}
@@ -132,6 +139,8 @@
     .search-wrapper i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:0.82em;}
     .search-input{padding:8px 12px 8px 32px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text);font-size:0.83em;width:200px;}
     .search-input:focus{outline:none;border-color:var(--accent);}
+    .date-input{padding:8px 12px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text);font-size:0.83em;}
+    .date-input:focus{outline:none;border-color:var(--accent);}
 
     /* ── TABLES ── */
     .table-container{background:var(--bg-card);border-radius:14px;overflow:hidden;border:1px solid var(--border-color);margin-bottom:18px;backdrop-filter:blur(10px);}
@@ -143,16 +152,19 @@
     th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--border-color);vertical-align:top;}
     th{background:var(--table-header);font-weight:700;font-size:0.74em;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);cursor:pointer;user-select:none;}
     th:hover{color:var(--accent);}
+    th .sort-icon{margin-left:4px;opacity:0.4;font-size:0.85em;}
+    th.sort-asc .sort-icon, th.sort-desc .sort-icon{opacity:1;color:var(--accent);}
     tr:hover{background:rgba(0,212,255,0.04);}
     [data-theme="light"] tr:hover,[data-theme="professional"] tr:hover{background:rgba(2,132,199,0.04);}
     td{font-size:0.85em;}
     .table-toolbar{padding:13px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--border-color);}
     .table-toolbar-title{font-size:0.9em;font-weight:700;color:var(--text);flex:1;min-width:100px;}
     .table-pagination{padding:11px 16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border-color);font-size:0.8em;color:var(--text-muted);flex-wrap:wrap;gap:8px;}
-    .pagination-btns{display:flex;gap:4px;}
+    .pagination-btns{display:flex;gap:4px;align-items:center;}
     .page-btn{width:28px;height:28px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-card);color:var(--text);font-size:0.8em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all 0.15s;}
     .page-btn:hover{border-color:var(--accent);color:var(--accent);}
     .page-btn.active{background:var(--accent);color:white;border-color:var(--accent);}
+    .page-size-select{padding:4px 8px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-card);color:var(--text);font-size:0.8em;cursor:pointer;}
 
     /* ── PROGRESS BAR ── */
     .progress-bar{display:flex;align-items:center;gap:8px;}
@@ -205,6 +217,8 @@
     .btn-action{padding:6px 12px;border:none;border-radius:7px;cursor:pointer;font-size:0.78em;transition:all 0.2s;display:inline-flex;align-items:center;gap:5px;}
     .btn-primary{background:var(--primary);color:white;}
     .btn-primary:hover{background:var(--primary-light);}
+    .btn-warning{background:#f59e0b;color:white;}
+    .btn-warning:hover{opacity:0.88;}
     .btn-danger{background:#ef4444;color:white;}
     .btn-danger:hover{opacity:0.88;}
     .btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border-color);}
@@ -212,17 +226,35 @@
     .log-success{color:var(--success);font-weight:600;}
     .log-failure{color:var(--danger);font-weight:600;}
 
-    /* ── LOADING & TOAST ── */
+    /* ── MODAL ── */
+    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;justify-content:center;align-items:center;z-index:9000;backdrop-filter:blur(4px);}
+    .modal-overlay.active{display:flex;}
+    .modal-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:28px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,0.4);}
+    .modal-title{font-size:1.1em;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:9px;color:var(--text);}
+    .modal-field{margin-bottom:13px;}
+    .modal-field label{display:block;font-size:0.82em;color:var(--text-muted);margin-bottom:5px;font-weight:600;}
+    .modal-field input,.modal-field select{width:100%;padding:9px 12px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-dark);color:var(--text);font-size:0.88em;}
+    [data-theme="light"] .modal-field input,[data-theme="professional"] .modal-field input,
+    [data-theme="light"] .modal-field select,[data-theme="professional"] .modal-field select{background:white;}
+    .modal-field input:focus,.modal-field select:focus{outline:none;border-color:var(--accent);}
+    .modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;}
+
+    /* ── TOAST (succès / confirm) ── */
+    .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:13px 28px;border-radius:10px;z-index:9999;font-size:0.93em;box-shadow:0 5px 20px rgba(0,0,0,0.35);display:none;max-width:92vw;text-align:center;transition:opacity 0.3s;}
+    .toast.active{display:block;}
+    .toast.error{background:#dc2626;color:white;}
+    .toast.success{background:#059669;color:white;}
+    .toast.warning{background:#f59e0b;color:white;}
+
+    /* ── LOADING ── */
     .loading-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.85);display:none;justify-content:center;align-items:center;flex-direction:column;gap:16px;z-index:9998;}
     .loading-overlay.active{display:flex;}
     .spinner{width:46px;height:46px;border:4px solid var(--border-color);border-top-color:var(--accent);border-radius:50%;animation:spin 0.9s linear infinite;}
     @keyframes spin{to{transform:rotate(360deg)}}
-    .error-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#dc2626;color:white;padding:13px 28px;border-radius:10px;z-index:9999;font-size:0.93em;box-shadow:0 5px 20px rgba(0,0,0,0.35);display:none;max-width:92vw;text-align:center;}
-    .error-toast.active{display:block;}
 
     /* ── FOOTER ── */
     .footer{text-align:center;padding:22px;color:var(--text-muted);font-size:0.83em;border-top:1px solid var(--border-color);margin-top:28px;}
-    .footer img{width:42px;height:42px;border-radius:50%;border:2px solid var(--accent);margin-bottom:7px;object-fit:cover;}
+    .footer-avatar{width:42px;height:42px;border-radius:50%;border:2px solid var(--accent);margin-bottom:7px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:var(--accent);font-size:1.1em;font-weight:700;}
 
     @media(max-width:768px){
       .header{flex-direction:column;padding:11px;}
@@ -240,7 +272,9 @@
 <!-- ── LOGIN ── -->
 <div class="login-container" id="loginPage">
   <div class="login-box">
-    <img src="logo-TT.png" alt="Tunisie Telecom" class="login-logo">
+    <div class="login-logo-wrap">
+      <img src="logo-RLA.svg" alt="RLA Zone Sud" onerror="this.style.display='none'">
+    </div>
     <h2>Marchés RLA</h2>
     <p>Zone Sud — Tableau de Bord</p>
     <div class="login-error" id="loginError"><i class="fas fa-exclamation-circle"></i> Identifiants incorrects</div>
@@ -254,12 +288,38 @@
 <!-- ── APP CONTENT ── -->
 <div class="app-content" id="appContent">
   <div class="loading-overlay" id="loadingOverlay"><div class="spinner"></div><div style="color:var(--accent);font-size:1.05em;">Chargement des données...</div></div>
-  <div class="error-toast" id="errorToast"></div>
+  <div class="toast" id="appToast"></div>
+
+  <!-- MODAL EDITION UTILISATEUR -->
+  <div class="modal-overlay" id="editUserModal">
+    <div class="modal-box">
+      <div class="modal-title"><i class="fas fa-user-edit" style="color:var(--accent)"></i> Modifier l'utilisateur</div>
+      <input type="hidden" id="editUserId">
+      <div class="modal-field"><label>Identifiant</label><input type="text" id="editUsername" readonly style="opacity:0.6"></div>
+      <div class="modal-field"><label>Nouveau mot de passe <span style="color:var(--text-muted);font-weight:400">(laisser vide = inchangé)</span></label><input type="password" id="editPassword" placeholder="••••••••"></div>
+      <div class="modal-field"><label>Rôle</label>
+        <select id="editRole">
+          <option value="user">user</option>
+          <option value="admin">admin</option>
+          <option value="superadmin">superadmin</option>
+        </select>
+      </div>
+      <div class="modal-field"><label>Région</label>
+        <select id="editRegion">
+          <option value="all">Toutes régions</option>
+        </select>
+      </div>
+      <div class="modal-actions">
+        <button class="btn-action btn-secondary" onclick="closeEditModal()">Annuler</button>
+        <button class="btn-action btn-primary" onclick="saveEditUser()"><i class="fas fa-save"></i> Enregistrer</button>
+      </div>
+    </div>
+  </div>
 
   <!-- HEADER -->
   <header class="header">
     <div class="logo-section">
-      <img src="logo-TT.png" alt="Tunisie Telecom">
+      <img src="logo-RLA.svg" alt="RLA Zone Sud" onerror="this.style.display='none'">
       <div>
         <h1>Marchés RLA</h1>
         <div class="sub">Zone Sud — Tableau de Bord</div>
@@ -267,7 +327,7 @@
     </div>
     <div class="header-controls">
       <div class="theme-selector">
-        <button class="theme-btn active" data-theme="" onclick="setTheme('')" title="Sombre"><i class="fas fa-moon"></i></button>
+        <button class="theme-btn" data-theme="" onclick="setTheme('')" title="Sombre"><i class="fas fa-moon"></i></button>
         <button class="theme-btn" data-theme="light" onclick="setTheme('light')" title="Clair"><i class="fas fa-sun"></i></button>
         <button class="theme-btn" data-theme="professional" onclick="setTheme('professional')" title="Professionnel"><i class="fas fa-briefcase"></i></button>
       </div>
@@ -327,6 +387,16 @@
           <div class="alert-list" id="alertesPreview"><p style="color:var(--text-muted);font-size:0.85em;padding:8px 0;">Chargement...</p></div>
         </div>
       </div>
+      <div class="charts-row-3">
+        <div class="chart-card">
+          <div class="chart-card-title"><i class="fas fa-map-marker-alt"></i> Avancement moyen par région</div>
+          <div class="chart-container tall"><canvas id="chartRegion"></canvas></div>
+        </div>
+        <div class="chart-card">
+          <div class="chart-card-title"><i class="fas fa-chart-bar"></i> Marchés actifs par région</div>
+          <div class="chart-container tall"><canvas id="chartRegionCount"></canvas></div>
+        </div>
+      </div>
     </section>
 
     <!-- ── SLIDE 1 : ALERTES ── -->
@@ -339,12 +409,14 @@
         </div>
         <div class="table-wrapper">
           <table>
-            <thead><tr><th>Référence</th><th>Entrepreneur</th><th>Projet</th><th>Région</th><th>Avt. Phy.</th><th>Délai Rest.</th><th>Niveau</th></tr></thead>
+            <thead><tr>
+              <th>Référence</th><th>Entrepreneur</th><th>Projet</th><th>Région</th>
+              <th>Avt. Phy.</th><th>Délai Rest.</th><th>Niveau</th>
+            </tr></thead>
             <tbody id="alertes-table"><tr><td colspan="7" style="text-align:center;color:var(--text-muted);padding:28px;">Chargement...</td></tr></tbody>
           </table>
         </div>
       </div>
-      <div class="alert-list" id="alertesList" style="display:none"></div>
     </section>
 
     <!-- ── SLIDE 2 : EN SERVICE ── -->
@@ -352,10 +424,8 @@
       <h2 class="section-title"><i class="fas fa-check-circle" style="color:var(--success)"></i> Marchés En Service</h2>
       <div class="filters-bar">
         <div class="filter-group"><label><i class="fas fa-map-marker-alt"></i> Région</label>
-          <select class="filter-select" id="serviceFilterRegion" onchange="renderService()">
+          <select class="filter-select" id="serviceFilterRegion" onchange="onServiceRegionChange()">
             <option value="">Toutes régions</option>
-            <option>Gabes</option><option>Gafsa</option><option>Kebili</option>
-            <option>Medenine</option><option>Sfax</option><option>Tataouine</option><option>Tozeur</option>
           </select>
         </div>
         <div class="filter-group"><label><i class="fas fa-hard-hat"></i> Entrepreneur</label>
@@ -369,7 +439,10 @@
         </div>
         <div class="table-wrapper">
           <table>
-            <thead><tr><th>Référence</th><th>Projet</th><th>Région</th><th>Entrepreneur</th><th>Montant Max</th><th>Période</th><th>Avt. Phy.</th><th>Délai Rest.</th></tr></thead>
+            <thead><tr>
+              <th>Référence</th><th>Projet</th><th>Région</th><th>Entrepreneur</th>
+              <th>Montant Max</th><th>Période</th><th>Avt. Phy.</th><th>Délai Rest.</th>
+            </tr></thead>
             <tbody id="service-table"><tr><td colspan="8" style="text-align:center;color:var(--text-muted);padding:28px;">Chargement...</td></tr></tbody>
           </table>
         </div>
@@ -385,6 +458,20 @@
         <div class="kpi-card proactif-depasse"><div class="icon" style="color:#D97706;"><i class="fas fa-arrow-up"></i></div><div class="value" id="proactif-kpi-depasse" style="color:#D97706;">—</div><div class="label">Dépassement</div><div class="sub">Avt. physique ≥ critique (90%)</div></div>
         <div class="kpi-card proactif-none"><div class="icon" style="color:#64748B;"><i class="fas fa-question-circle"></i></div><div class="value" id="proactif-kpi-none" style="color:#64748B;">—</div><div class="label">Non déterminé</div><div class="sub">Données insuffisantes</div></div>
       </div>
+      <div class="filters-bar">
+        <div class="filter-group"><label><i class="fas fa-map-marker-alt"></i> Région</label>
+          <select class="filter-select" id="proactifFilterRegion" onchange="renderProactif()"><option value="">Toutes régions</option></select>
+        </div>
+        <div class="filter-group"><label><i class="fas fa-tachometer-alt"></i> État</label>
+          <select class="filter-select" id="proactifFilterEtat" onchange="renderProactif()">
+            <option value="">Tous états</option>
+            <option value="Normal">Normal</option>
+            <option value="Sous Avancement">Sous Avancement</option>
+            <option value="Dépassement">Dépassement</option>
+            <option value="Non déterminé">Non déterminé</option>
+          </select>
+        </div>
+      </div>
       <div class="table-container">
         <div class="table-header" style="background:linear-gradient(90deg,#4f46e5,#6366f1);">
           <h3><i class="fas fa-th"></i> Détail par marché</h3>
@@ -392,7 +479,10 @@
         </div>
         <div class="table-wrapper">
           <table>
-            <thead><tr><th>Référence</th><th>Entrepreneur</th><th>Projet</th><th>Région</th><th>Avt. Phy.</th><th>Délai Rest.</th><th>Résultat</th></tr></thead>
+            <thead><tr>
+              <th>Référence</th><th>Entrepreneur</th><th>Projet</th><th>Région</th>
+              <th>Avt. Phy.</th><th>Délai Rest.</th><th>Résultat</th>
+            </tr></thead>
             <tbody id="proactif-table"><tr><td colspan="7" style="text-align:center;color:var(--text-muted);padding:28px;">Chargement...</td></tr></tbody>
           </table>
         </div>
@@ -407,7 +497,7 @@
       </div>
     </section>
 
-    <!-- ── SLIDE 5 : MARCHÉS / EN COURS ── -->
+    <!-- ── SLIDE 5 : MARCHÉS ── -->
     <section class="slide" id="slide-5">
       <h2 class="section-title"><i class="fas fa-list-alt" style="color:var(--accent)"></i> Liste des Marchés</h2>
       <div class="table-container">
@@ -419,24 +509,31 @@
           </div>
           <select class="filter-select" id="filterRegion" onchange="filterMarches()">
             <option value="">Toutes régions</option>
-            <option>Gabes</option><option>Gafsa</option><option>Kebili</option>
-            <option>Medenine</option><option>Sfax</option><option>Tataouine</option><option>Tozeur</option>
           </select>
           <select class="filter-select" id="filterEntrepreneur" onchange="filterMarches()"><option value="">Tous entrepreneurs</option></select>
           <select class="filter-select" id="filterStatut" onchange="filterMarches()"><option value="">Tous statuts</option></select>
+          <div class="filter-group">
+            <label><i class="fas fa-calendar"></i> Du</label>
+            <input type="date" class="date-input" id="filterDateDebut" onchange="filterMarches()">
+          </div>
+          <div class="filter-group">
+            <label>Au</label>
+            <input type="date" class="date-input" id="filterDateFin" onchange="filterMarches()">
+          </div>
+          <button class="btn-action btn-secondary" onclick="resetFilters()" title="Réinitialiser filtres"><i class="fas fa-times"></i></button>
         </div>
         <div class="table-wrapper">
           <table>
             <thead>
               <tr>
-                <th onclick="sortTable('id_marche')">Référence <i class="fas fa-sort"></i></th>
-                <th onclick="sortTable('region')">Région <i class="fas fa-sort"></i></th>
-                <th onclick="sortTable('entrepreneur')">Entrepreneur <i class="fas fa-sort"></i></th>
-                <th onclick="sortTable('projet')">Projet <i class="fas fa-sort"></i></th>
-                <th onclick="sortTable('observation')">Statut <i class="fas fa-sort"></i></th>
-                <th onclick="sortTable('taux_phy')">Avt. Phy. <i class="fas fa-sort"></i></th>
-                <th onclick="sortTable('date_fin')">Période <i class="fas fa-sort"></i></th>
-                <th onclick="sortTable('tot_marche')">Montant <i class="fas fa-sort"></i></th>
+                <th onclick="sortTable('id_marche')">Référence <i class="fas fa-sort sort-icon"></i></th>
+                <th onclick="sortTable('region')">Région <i class="fas fa-sort sort-icon"></i></th>
+                <th onclick="sortTable('entrepreneur')">Entrepreneur <i class="fas fa-sort sort-icon"></i></th>
+                <th onclick="sortTable('projet')">Projet <i class="fas fa-sort sort-icon"></i></th>
+                <th onclick="sortTable('observation')">Statut <i class="fas fa-sort sort-icon"></i></th>
+                <th onclick="sortTable('taux_phy')">Avt. Phy. <i class="fas fa-sort sort-icon"></i></th>
+                <th onclick="sortTable('date_fin')">Période <i class="fas fa-sort sort-icon"></i></th>
+                <th onclick="sortTable('tot_marche')">Montant <i class="fas fa-sort sort-icon"></i></th>
               </tr>
             </thead>
             <tbody id="marchesBody"><tr><td colspan="8" style="text-align:center;color:var(--text-muted);padding:28px;">Chargement...</td></tr></tbody>
@@ -456,7 +553,10 @@
         </div>
         <div class="table-wrapper">
           <table>
-            <thead><tr><th>Description du projet</th><th>Régions</th><th>Estimation (DT)</th><th>Durée (mois)</th><th>Date prévisionnelle DCA</th></tr></thead>
+            <thead><tr>
+              <th>Description du projet</th><th>Régions</th><th>Estimation (DT)</th>
+              <th>Durée (mois)</th><th>Date prévisionnelle DCA</th>
+            </tr></thead>
             <tbody id="pipelineBody"><tr><td colspan="5" style="text-align:center;color:var(--text-muted);padding:28px;">Chargement...</td></tr></tbody>
           </table>
         </div>
@@ -475,7 +575,7 @@
           <input type="text" id="newUsername" placeholder="Identifiant">
           <input type="password" id="newPassword" placeholder="Mot de passe">
           <select id="newRole"><option value="user">user</option><option value="admin">admin</option><option value="superadmin">superadmin</option></select>
-          <select id="newRegion"><option value="all">Toutes régions</option><option>Gabes</option><option>Gafsa</option><option>Kebili</option><option>Medenine</option><option>Sfax</option><option>Tataouine</option><option>Tozeur</option></select>
+          <select id="newRegion"><option value="all">Toutes régions</option></select>
           <button class="btn-action btn-primary" onclick="saveNewUser()"><i class="fas fa-save"></i> Créer</button>
           <button class="btn-action btn-secondary" onclick="toggleAddUserForm()">Annuler</button>
         </div>
@@ -501,10 +601,10 @@
       </div>
     </section>
 
-  </main><!-- .slides-container -->
+  </main>
 
   <footer class="footer">
-    <img src="Nabil.Derouiche.jpg" alt="Nabil Derouiche">
+    <div class="footer-avatar">ND</div>
     <div><strong style="color:var(--accent);">Nabil Derouiche</strong></div>
     <div>Responsable Achats Zone Sud — Tunisie Telecom</div>
     <div style="margin-top:7px;font-size:0.8em;">
@@ -513,25 +613,31 @@
       </a>
     </div>
   </footer>
-</div><!-- #appContent -->
+</div>
 
 <script>
+/* ── CONFIG HELPERS ── */
+const CFG = (typeof CONFIG !== 'undefined') ? CONFIG : {};
+const ALL_REGIONS   = CFG.ALL_REGIONS   || ['Gabes','Gafsa','Kebili','Medenine','Sfax','Tataouine','Tozeur'];
+const REGION_COLORS = CFG.REGION_COLORS || {};
+
 /* ── THEME ── */
 function setTheme(theme) {
   document.body.setAttribute('data-theme', theme);
   document.querySelectorAll('.theme-btn').forEach(b => b.classList.toggle('active', b.dataset.theme === theme));
   localStorage.setItem('rla_theme', theme);
 }
-function loadTheme() { setTheme(localStorage.getItem('rla_theme') || ''); }
+function loadTheme() { setTheme(localStorage.getItem('rla_theme') ?? (CFG.DEFAULT_THEME || 'light')); }
 
 /* ── SLIDE NAVIGATION ── */
 let currentSlide = 0;
 function showSlide(n) {
   document.querySelectorAll('.slide').forEach((s, i) => s.classList.toggle('active', i === n));
-  document.querySelectorAll('.slide-nav button').forEach((b, i) => {
-    if (b.id && b.id.startsWith('btn-slide-')) b.classList.toggle('active', i === n);
+  // Only toggle btn-slide-N buttons to avoid mis-indexing export buttons
+  document.querySelectorAll('[id^="btn-slide-"]').forEach(b => {
+    const idx = parseInt(b.id.replace('btn-slide-', ''), 10);
+    b.classList.toggle('active', idx === n);
   });
-  // Reload on-demand sections
   if (n === 7) renderAdminUsers();
   if (n === 8) renderAdminLogs();
   currentSlide = n;
@@ -539,10 +645,10 @@ function showSlide(n) {
 
 /* ── UTILITIES ── */
 function showLoading(show) { document.getElementById('loadingOverlay').classList.toggle('active', !!show); }
-function showError(msg) {
-  const t = document.getElementById('errorToast');
-  t.textContent = msg || 'Erreur'; t.classList.add('active');
-  setTimeout(() => t.classList.remove('active'), 5000);
+function showToast(msg, type = 'error') {
+  const t = document.getElementById('appToast');
+  t.textContent = msg; t.className = `toast ${type} active`;
+  setTimeout(() => t.classList.remove('active'), 4500);
 }
 function parseNum(v) {
   const n = parseFloat(String(v ?? '').replace(/\s/g, '').replace(',', '.'));
@@ -562,13 +668,32 @@ function getProgressBar(pct) {
   const c = pct >= 90 ? 'red' : pct >= 70 ? 'orange' : 'green';
   return `<div class="progress-bar"><div class="progress-track"><div class="progress-fill ${c}" style="width:${Math.min(100,pct)}%"></div></div><span class="progress-value">${pct}%</span></div>`;
 }
-function obsVal(r) { return typeof r.observation === 'object' ? (r.observation?.value || '') : String(r.observation || ''); }
-function isCloture(r) { const o = obsVal(r).toLowerCase(); return o.includes('clôtur') || o.includes('clotur') || !!r.date_cloture; }
+function buildRegionOptions(selectId, includeAll = true) {
+  const sel = document.getElementById(selectId);
+  if (!sel) return;
+  sel.innerHTML = (includeAll ? '<option value="">Toutes régions</option>' : '') +
+    ALL_REGIONS.map(r => `<option>${escapeHtml(r)}</option>`).join('');
+}
+
+/* ── NORMALIZE API FIELDS ── */
+function normalizeMarche(r) {
+  return {
+    ...r,
+    id_marche:   r.id_marche   || r.reference   || '',
+    region:      r.region      || r.region_csc  || '',
+    taux_phy:    parseNum(r.taux_phy ?? r.avt_phy ?? 0),
+    tot_marche:  parseNum(r.tot_marche ?? r.m_max ?? r.totmarche ?? 0),
+    date_debut:  r.date_debut  || r.debut_marche || '',
+    date_fin:    r.date_fin    || r.date_fin_marche || r.datefin || '',
+    observation: typeof r.observation === 'object' ? (r.observation?.value || '') : String(r.observation || ''),
+  };
+}
+function obsVal(r)   { return r.observation || ''; }
+function isCloture(r){ const o = obsVal(r).toLowerCase(); return o.includes('clôtur') || o.includes('clotur') || !!r.date_cloture; }
 function getDelaiRestant(r) {
   if (r.delai_restant != null) return parseInt(r.delai_restant, 10);
-  const fin = r.date_fin || r.datefin;
-  if (!fin) return null;
-  const d = new Date(fin);
+  if (!r.date_fin) return null;
+  const d = new Date(r.date_fin);
   if (isNaN(d.getTime())) return null;
   return Math.ceil((d - new Date()) / 86400000);
 }
@@ -593,7 +718,7 @@ async function handleLogin() {
     localStorage.setItem('rla_jwt', jwtToken);
     currentUser = decodeJwt(jwtToken);
     showApp(); loadData();
-  } catch (e) { errorEl.classList.add('visible'); }
+  } catch { errorEl.classList.add('visible'); }
 }
 function handleLogout() {
   jwtToken = null; currentUser = null;
@@ -602,13 +727,19 @@ function handleLogout() {
   document.getElementById('loginPage').style.display = 'flex';
   document.getElementById('username').value = '';
   document.getElementById('password').value = '';
+  document.title = 'Marchés RLA - Zone Sud | Tunisie Telecom';
 }
 function showApp() {
   document.getElementById('loginPage').style.display = 'none';
   document.getElementById('appContent').classList.add('active');
-  const u = currentUser?.username || '?';
-  document.getElementById('currentUser').textContent = u;
-  const now = new Date();
+  document.getElementById('currentUser').textContent = currentUser?.username || '?';
+  buildRegionOptions('filterRegion');
+  buildRegionOptions('serviceFilterRegion');
+  buildRegionOptions('proactifFilterRegion');
+  buildRegionOptions('newRegion', false);
+  buildRegionOptions('editRegion', false);
+  document.getElementById('newRegion').insertAdjacentHTML('afterbegin','<option value="all">Toutes régions</option>');
+  document.getElementById('editRegion').insertAdjacentHTML('afterbegin','<option value="all">Toutes régions</option>');
   applyRoleUI();
 }
 function applyRoleUI() {
@@ -618,11 +749,9 @@ function applyRoleUI() {
   const roleEl = document.getElementById('userRole');
   roleEl.textContent = roleLabels[role] || role;
   roleEl.className = `user-badge ${role}`;
-  // Admin button
   document.getElementById('adminBtn').style.display = role === 'superadmin' ? 'inline-flex' : 'none';
-  // Nav items
-  const showAdmin  = role !== 'user';
-  const showSuper  = role === 'superadmin';
+  const showAdmin = role !== 'user';
+  const showSuper = role === 'superadmin';
   document.getElementById('btn-slide-6').classList.toggle('nav-hidden', !showAdmin);
   document.getElementById('btn-slide-7').classList.toggle('nav-hidden', !showSuper);
   document.getElementById('btn-slide-8').classList.toggle('nav-hidden', !showSuper);
@@ -634,7 +763,7 @@ function decodeJwt(token) {
   try {
     const payload = JSON.parse(atob(token.split('.')[1]));
     return { username: payload.sub||payload.username||'?', role: payload.role||'user', region: payload.region||'all', id: payload.id||null, exp: payload.exp||null };
-  } catch (_) { return null; }
+  } catch { return null; }
 }
 function checkSession() {
   const saved = localStorage.getItem('rla_jwt');
@@ -646,44 +775,46 @@ function checkSession() {
   showApp(); loadData();
 }
 function apiHeaders() { return {'Authorization':`Bearer ${jwtToken}`,'Content-Type':'application/json'}; }
+function handle401() {
+  showToast('Session expirée — veuillez vous reconnecter', 'warning');
+  setTimeout(handleLogout, 1500);
+}
 
 /* ── DATA ── */
 let allData = [], filteredData = [], pipelineData = [], proactifData = null, statsData = null;
-let sortField = null, sortAsc = true, currentPage = 1;
-const PAGE_SIZE = 25;
+let sortField = null, sortAsc = true, currentPage = 1, pageSize = 25;
 
 async function loadData() {
   showLoading(true);
   try {
     const isUser = currentUser?.role === 'user';
-    const reqs = [
+    const [rMarches, rStats, rPilotage, rPipeline] = await Promise.all([
       fetch(`${API_BASE}/marches`,           { headers: apiHeaders() }),
       fetch(`${API_BASE}/stats`,             { headers: apiHeaders() }),
       fetch(`${API_BASE}/pilotage-proactif`, { headers: apiHeaders() }),
       isUser ? null : fetch(`${API_BASE}/pipeline`, { headers: apiHeaders() }),
-    ];
-    const [rMarches, rStats, rPilotage, rPipeline] = await Promise.all(reqs);
-    if (rMarches.status === 401) { handleLogout(); return; }
+    ]);
+    if (rMarches.status === 401) { handle401(); return; }
     if (!rMarches.ok) throw new Error('Erreur marchés ' + rMarches.status);
     const marchesJson  = await rMarches.json();
-    statsData          = rStats?.ok  ? await rStats.json()    : null;
-    proactifData       = rPilotage?.ok ? await rPilotage.json() : null;
+    statsData    = rStats?.ok   ? await rStats.json()    : null;
+    proactifData = rPilotage?.ok ? await rPilotage.json() : null;
     const pipelineJson = (!isUser && rPipeline?.ok) ? await rPipeline.json() : { results: [] };
-    allData      = marchesJson.results || marchesJson;
+    allData      = (marchesJson.results || marchesJson).map(normalizeMarche);
     filteredData = [...allData];
     pipelineData = pipelineJson.results || pipelineJson;
     document.getElementById('lastUpdate').textContent =
       new Date().toLocaleTimeString('fr-FR', { hour:'2-digit', minute:'2-digit' });
     renderAll();
   } catch (e) {
-    showError('Erreur chargement : ' + e.message); console.error(e);
+    showToast('Erreur chargement : ' + e.message, 'error'); console.error(e);
   } finally { showLoading(false); }
 }
 
 function renderAll() {
   renderKPIs(); renderAlertes(); renderService(); renderProactif();
   renderRegions(); renderMarches(); renderPipeline();
-  renderChartStatut(); updateBadges();
+  renderChartStatut(); renderChartRegion(); updateBadges();
 }
 
 /* ── KPIs ── */
@@ -700,36 +831,33 @@ function renderKPIs() {
 /* ── ALERTES ── */
 function alerteRowHTML(r, delai) {
   const niveau = delai <= 45 ? 'critique' : 'attention';
-  const pct = parseNum(r.taux_phy || r.avt_phy);
   return `<tr>
-    <td><strong>${escapeHtml(r.ref||r.id_marche||'—')}</strong></td>
+    <td><strong>${escapeHtml(r.id_marche||'—')}</strong></td>
     <td>${escapeHtml(r.entrepreneur||'—')}</td>
     <td>${escapeHtml(r.projet||'—')}</td>
-    <td>${escapeHtml(r.region||r.region_csc||'—')}</td>
-    <td>${getProgressBar(pct)}</td>
+    <td>${escapeHtml(r.region||'—')}</td>
+    <td>${getProgressBar(r.taux_phy)}</td>
     <td><strong>${delai}j</strong></td>
     <td><span class="status-badge ${niveau}">${niveau === 'critique' ? 'Critique' : 'Attention'}</span></td>
   </tr>`;
 }
 function alerteCardHTML(r, delai) {
   const niveau = delai <= 45 ? 'critique' : 'attention';
-  const pct = parseNum(r.taux_phy || r.avt_phy);
   return `<div class="alert-card ${niveau}">
     <div class="alert-days">${delai}<div class="alert-days-label">jours</div></div>
     <div class="alert-info">
-      <div class="alert-ref">${escapeHtml(r.ref||r.id_marche||'—')}</div>
-      <div class="alert-meta">${escapeHtml(r.entrepreneur||'—')} • ${escapeHtml(r.region||'—')} • Avt. phy: ${pct}%</div>
+      <div class="alert-ref">${escapeHtml(r.id_marche||'—')}</div>
+      <div class="alert-meta">${escapeHtml(r.entrepreneur||'—')} • ${escapeHtml(r.region||'—')} • Avt. phy: ${r.taux_phy}%</div>
     </div>
     <span class="status-badge ${niveau}">${niveau === 'critique' ? 'Critique' : 'Attention'}</span>
   </div>`;
 }
 function renderAlertes() {
-  const actifs = allData.filter(r => !isCloture(r));
-  const alertes = actifs
+  const alertes = allData
+    .filter(r => !isCloture(r))
     .map(r => ({ r, delai: getDelaiRestant(r) }))
     .filter(x => x.delai !== null && x.delai <= 90)
     .sort((a, b) => a.delai - b.delai);
-
   document.getElementById('alertes-count').textContent = `${alertes.length} alertes`;
   document.getElementById('alertes-table').innerHTML = alertes.length
     ? alertes.map(x => alerteRowHTML(x.r, x.delai)).join('')
@@ -740,24 +868,23 @@ function renderAlertes() {
 }
 
 /* ── EN SERVICE ── */
+function onServiceRegionChange() {
+  // Reset entrepreneur filter then re-populate
+  document.getElementById('serviceFilterEntrepreneur').innerHTML = '<option value="">Tous entrepreneurs</option>';
+  renderService();
+}
 function renderService() {
-  const reg    = document.getElementById('serviceFilterRegion')?.value || '';
-  const entr   = document.getElementById('serviceFilterEntrepreneur')?.value || '';
-  let rows = allData.filter(r => {
-    if (isCloture(r)) return false;
-    const o = obsVal(r).toLowerCase();
-    return o.includes('en service');
-  });
-  if (reg)  rows = rows.filter(r => (r.region || r.region_csc || '') === reg);
+  const reg  = document.getElementById('serviceFilterRegion')?.value  || '';
+  const entr = document.getElementById('serviceFilterEntrepreneur')?.value || '';
+  let rows = allData.filter(r => !isCloture(r) && obsVal(r).toLowerCase().includes('en service'));
+  const allEnService = [...rows];
+  if (reg)  rows = rows.filter(r => r.region === reg);
   if (entr) rows = rows.filter(r => (r.entrepreneur || '') === entr);
 
-  // Populate entrepreneurs filter
-  const entrs = [...new Set(allData.filter(r => {
-    if (isCloture(r)) return false;
-    return obsVal(r).toLowerCase().includes('en service');
-  }).map(r => r.entrepreneur).filter(Boolean))].sort();
   const entrSel = document.getElementById('serviceFilterEntrepreneur');
   if (entrSel && entrSel.options.length <= 1) {
+    const pool = reg ? allEnService.filter(r => r.region === reg) : allEnService;
+    const entrs = [...new Set(pool.map(r => r.entrepreneur).filter(Boolean))].sort();
     entrSel.innerHTML = '<option value="">Tous entrepreneurs</option>' +
       entrs.map(e => `<option>${escapeHtml(e)}</option>`).join('');
   }
@@ -765,21 +892,16 @@ function renderService() {
   document.getElementById('service-count').textContent = `${rows.length} marchés`;
   document.getElementById('service-table').innerHTML = rows.length
     ? rows.map(r => {
-        const pct   = parseNum(r.taux_phy || r.avt_phy);
         const delai = getDelaiRestant(r);
-        const delaiTxt = delai === null ? '—' : `${delai}j`;
-        const dateDebut = formatDateFR(r.date_debut || r.debut_marche);
-        const dateFin   = formatDateFR(r.date_fin || r.date_fin_marche);
-        const montant   = parseNum(r.tot_marche || r.m_max || r.totmarche);
         return `<tr>
-          <td><strong>${escapeHtml(r.id_marche||r.reference||'—')}</strong></td>
+          <td><strong>${escapeHtml(r.id_marche||'—')}</strong></td>
           <td>${escapeHtml(r.projet||'—')}</td>
-          <td>${escapeHtml(r.region||r.region_csc||'—')}</td>
+          <td>${escapeHtml(r.region||'—')}</td>
           <td>${escapeHtml(r.entrepreneur||'—')}</td>
-          <td style="white-space:nowrap">${montant > 0 ? formatMontant(montant) : '—'}</td>
-          <td style="white-space:nowrap;font-size:0.82em">${dateDebut} → ${dateFin}</td>
-          <td>${getProgressBar(pct)}</td>
-          <td><strong>${delaiTxt}</strong></td>
+          <td style="white-space:nowrap">${r.tot_marche > 0 ? formatMontant(r.tot_marche) : '—'}</td>
+          <td style="white-space:nowrap;font-size:0.82em">${formatDateFR(r.date_debut)} → ${formatDateFR(r.date_fin)}</td>
+          <td>${getProgressBar(r.taux_phy)}</td>
+          <td><strong>${delai !== null ? delai + 'j' : '—'}</strong></td>
         </tr>`;
       }).join('')
     : '<tr><td colspan="8" style="text-align:center;color:var(--text-muted);padding:28px;">Aucun marché en service.</td></tr>';
@@ -790,32 +912,38 @@ function renderProactif() {
   const resume = proactifData?.resume || {};
   const items  = proactifData?.items  || [];
 
-  document.getElementById('proactif-kpi-normal').textContent   = resume.normal ?? 0;
-  document.getElementById('proactif-kpi-sous').textContent     = resume.sous_avancement ?? resume.sous_min ?? 0;
-  document.getElementById('proactif-kpi-depasse').textContent  = resume.depassement ?? 0;
-  document.getElementById('proactif-kpi-none').textContent     = resume.non_determine ?? 0;
-  document.getElementById('proactif-count').textContent        = `${items.length} marchés`;
+  document.getElementById('proactif-kpi-normal').textContent  = resume.normal ?? 0;
+  document.getElementById('proactif-kpi-sous').textContent    = resume.sous_avancement ?? resume.sous_min ?? 0;
+  document.getElementById('proactif-kpi-depasse').textContent = resume.depassement ?? 0;
+  document.getElementById('proactif-kpi-none').textContent    = resume.non_determine ?? 0;
+
+  const filterReg  = document.getElementById('proactifFilterRegion')?.value  || '';
+  const filterEtat = document.getElementById('proactifFilterEtat')?.value || '';
+
+  let filtered = items;
+  if (filterReg)  filtered = filtered.filter(r => (r.region||'') === filterReg);
+  if (filterEtat) filtered = filtered.filter(r => (r.resultat||'') === filterEtat);
+
+  document.getElementById('proactif-count').textContent = `${filtered.length} marchés`;
 
   const badges = {
-    'Normal':          ['ok', 'Normal'],
+    'Normal':          ['ok',       'Normal'],
     'Sous Avancement': ['critique', 'Sous Avancement'],
-    'Dépassement':     ['attention', 'Dépassement'],
-    'Non déterminé':   ['muted', 'Non déterminé'],
-    // compat ancienne API
+    'Dépassement':     ['attention','Dépassement'],
+    'Non déterminé':   ['muted',    'Non déterminé'],
     'Sous Min':        ['critique', 'Sous Min'],
   };
-  document.getElementById('proactif-table').innerHTML = items.length
-    ? items.map(r => {
+  document.getElementById('proactif-table').innerHTML = filtered.length
+    ? filtered.map(r => {
         const [bc, bl] = badges[r.resultat] || ['info', r.resultat || '—'];
-        const pct   = parseNum(r.taux_phy_raw ?? r.taux_phy);
-        const delai = r.delai_restant;
+        const pct = parseNum(r.taux_phy_raw ?? r.taux_phy);
         return `<tr>
           <td><strong>${escapeHtml(r.ref||'—')}</strong></td>
           <td>${escapeHtml(r.entrepreneur||'—')}</td>
           <td>${escapeHtml(r.projet||'—')}</td>
           <td>${escapeHtml(r.region||'—')}</td>
           <td>${getProgressBar(pct)}</td>
-          <td>${delai !== null && delai !== undefined ? `<strong>${delai}j</strong>` : '—'}</td>
+          <td>${r.delai_restant != null ? `<strong>${r.delai_restant}j</strong>` : '—'}</td>
           <td><span class="status-badge ${bc}">${escapeHtml(bl)}</span></td>
         </tr>`;
       }).join('')
@@ -823,19 +951,13 @@ function renderProactif() {
 }
 
 /* ── PAR RÉGION ── */
-const REGION_COLORS = (typeof CONFIG !== 'undefined' && CONFIG?.REGION_COLORS) || {
-  Gabes:'#17A2B8',Gafsa:'#22C55E',Kebili:'#9333EA',
-  Medenine:'#0EA5E9',Sfax:'#002855',Tataouine:'#14B8A6',Tozeur:'#818CF8'
-};
-const ALL_REGIONS = ['Gabes','Gafsa','Kebili','Medenine','Sfax','Tataouine','Tozeur'];
-
 function renderRegions() {
   const actifs = allData.filter(r => !isCloture(r));
-  const html = ALL_REGIONS.map(reg => {
-    const rows   = actifs.filter(r => (r.region || r.region_csc || '') === reg);
-    const avts   = rows.map(r => parseNum(r.taux_phy || r.avt_phy)).filter(v => v > 0);
-    const avg    = avts.length ? Math.round(avts.reduce((a, b) => a + b, 0) / avts.length) : 0;
-    const budget = rows.reduce((s, r) => s + parseNum(r.tot_marche || r.m_max || r.totmarche), 0);
+  document.getElementById('regions-grid').innerHTML = ALL_REGIONS.map(reg => {
+    const rows   = actifs.filter(r => r.region === reg);
+    const avts   = rows.map(r => r.taux_phy).filter(v => v > 0);
+    const avg    = avts.length ? Math.round(avts.reduce((a,b) => a+b,0) / avts.length) : 0;
+    const budget = rows.reduce((s,r) => s + r.tot_marche, 0);
     const alertes = rows.filter(r => { const d = getDelaiRestant(r); return d !== null && d <= 90; });
     const color  = REGION_COLORS[reg] || '#888';
     return `<div class="region-card">
@@ -848,32 +970,57 @@ function renderRegions() {
         <div class="region-stat"><div class="value" style="color:${color}">${avg}%</div><div class="label">Avt. moy. phy.</div></div>
         <div class="region-stat"><div class="value">${budget > 0 ? (budget/1000000).toFixed(1) + 'M' : '—'}</div><div class="label">Budget (MDT)</div></div>
         <div class="region-stat"><div class="value" style="color:var(--danger)">${alertes.length}</div><div class="label">Alertes délais</div></div>
-        <div class="region-stat"><div class="value">${allData.filter(r => isCloture(r) && (r.region||'') === reg).length}</div><div class="label">Clôturés</div></div>
+        <div class="region-stat"><div class="value">${allData.filter(r => isCloture(r) && r.region === reg).length}</div><div class="label">Clôturés</div></div>
       </div>
     </div>`;
   }).join('');
-  document.getElementById('regions-grid').innerHTML = html || '<p style="color:var(--text-muted)">Aucune donnée.</p>';
 }
 
 /* ── MARCHÉS TABLE ── */
+function resetFilters() {
+  document.getElementById('searchMarches').value = '';
+  document.getElementById('filterRegion').value = '';
+  document.getElementById('filterEntrepreneur').value = '';
+  document.getElementById('filterStatut').value = '';
+  document.getElementById('filterDateDebut').value = '';
+  document.getElementById('filterDateFin').value = '';
+  filterMarches();
+}
 function filterMarches() {
-  const search      = document.getElementById('searchMarches').value.toLowerCase();
-  const region      = document.getElementById('filterRegion').value;
+  const search = document.getElementById('searchMarches').value.toLowerCase();
+  const region = document.getElementById('filterRegion').value;
   const entrepreneur = document.getElementById('filterEntrepreneur').value;
-  const statut      = document.getElementById('filterStatut').value;
+  const statut = document.getElementById('filterStatut').value;
+  const dateDebut = document.getElementById('filterDateDebut').value;
+  const dateFin   = document.getElementById('filterDateFin').value;
   filteredData = allData.filter(r => {
-    const reg  = r.region || r.region_csc || '';
-    const text = `${r.id_marche||''} ${reg} ${r.entrepreneur||''} ${r.projet||''}`.toLowerCase();
+    const text = `${r.id_marche} ${r.region} ${r.entrepreneur||''} ${r.projet||''}`.toLowerCase();
     if (search && !text.includes(search)) return false;
-    if (region && reg !== region) return false;
-    if (entrepreneur && (r.entrepreneur || '') !== entrepreneur) return false;
+    if (region && r.region !== region) return false;
+    if (entrepreneur && (r.entrepreneur||'') !== entrepreneur) return false;
     if (statut && obsVal(r) !== statut) return false;
+    if (dateDebut && r.date_fin && r.date_fin < dateDebut) return false;
+    if (dateFin   && r.date_debut && r.date_debut > dateFin) return false;
     return true;
   });
   currentPage = 1; renderMarchesTable();
 }
 function sortTable(field) {
+  // Update sort icons
+  document.querySelectorAll('#slide-5 th').forEach(th => {
+    th.classList.remove('sort-asc','sort-desc');
+    const icon = th.querySelector('.sort-icon');
+    if (icon) { icon.className = 'fas fa-sort sort-icon'; }
+  });
+  const colMap = { id_marche:0, region:1, entrepreneur:2, projet:3, observation:4, taux_phy:5, date_fin:6, tot_marche:7 };
+  const idx = colMap[field];
+  const th  = document.querySelectorAll('#slide-5 th')[idx];
   if (sortField === field) { sortAsc = !sortAsc; } else { sortField = field; sortAsc = true; }
+  if (th) {
+    th.classList.add(sortAsc ? 'sort-asc' : 'sort-desc');
+    const icon = th.querySelector('.sort-icon');
+    if (icon) icon.className = `fas fa-sort-${sortAsc ? 'up' : 'down'} sort-icon`;
+  }
   filteredData.sort((a, b) => {
     const va = a[field] ?? '', vb = b[field] ?? '';
     const na = parseFloat(va), nb = parseFloat(vb);
@@ -893,42 +1040,49 @@ function renderMarches() {
 }
 function renderMarchesTable() {
   const total = filteredData.length;
-  const pages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  const pages = Math.max(1, Math.ceil(total / pageSize));
   if (currentPage > pages) currentPage = pages;
-  const slice = filteredData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+  const slice = filteredData.slice((currentPage-1)*pageSize, currentPage*pageSize);
   document.getElementById('marchesCount').textContent = `(${total})`;
   document.getElementById('marchesBody').innerHTML = slice.length
     ? slice.map(r => {
-        const pct    = parseNum(r.taux_phy || r.avt_phy);
-        const delai  = getDelaiRestant(r);
         const statut = obsVal(r);
-        const region = r.region || r.region_csc || '—';
-        const periode = `${formatDateFR(r.date_debut)} → ${formatDateFR(r.date_fin || r.date_fin_marche)}`;
+        const delai  = getDelaiRestant(r);
         const delaiBadge = delai === null ? '' :
-          `<br><span class="status-badge ${delai <= 45 ? 'critique' : delai <= 90 ? 'attention' : 'ok'}">${delai}j</span>`;
+          `<br><span class="status-badge ${delai<=45?'critique':delai<=90?'attention':'ok'}">${delai}j</span>`;
         return `<tr>
           <td><strong>${escapeHtml(r.id_marche||'—')}</strong></td>
-          <td>${escapeHtml(region)}</td>
+          <td>${escapeHtml(r.region||'—')}</td>
           <td>${escapeHtml(r.entrepreneur||'—')}</td>
           <td>${escapeHtml(r.projet||'—')}</td>
           <td>${statut ? `<span class="status-badge info">${escapeHtml(statut)}</span>` : '—'}</td>
-          <td>${getProgressBar(pct)}</td>
-          <td style="white-space:nowrap;font-size:0.82em">${periode}${delaiBadge}</td>
-          <td>${formatMontant(r.tot_marche ?? r.totmarche)}</td>
+          <td>${getProgressBar(r.taux_phy)}</td>
+          <td style="white-space:nowrap;font-size:0.82em">${formatDateFR(r.date_debut)} → ${formatDateFR(r.date_fin)}${delaiBadge}</td>
+          <td>${formatMontant(r.tot_marche)}</td>
         </tr>`;
       }).join('')
     : '<tr><td colspan="8" style="text-align:center;color:var(--text-muted);padding:28px;">Aucun résultat.</td></tr>';
-  const pag = document.getElementById('marchesPagination');
+
+  // Pagination
   let btns = '';
   for (let i = 1; i <= pages; i++) {
-    if (i === 1 || i === pages || Math.abs(i - currentPage) <= 2)
-      btns += `<button class="page-btn ${i === currentPage ? 'active' : ''}" onclick="goPage(${i})">${i}</button>`;
-    else if (Math.abs(i - currentPage) === 3)
+    if (i === 1 || i === pages || Math.abs(i-currentPage) <= 2)
+      btns += `<button class="page-btn ${i===currentPage?'active':''}" onclick="goPage(${i})">${i}</button>`;
+    else if (Math.abs(i-currentPage) === 3)
       btns += `<span style="padding:0 4px;color:var(--text-muted)">…</span>`;
   }
-  pag.innerHTML = `<span>${(currentPage-1)*PAGE_SIZE+1}–${Math.min(currentPage*PAGE_SIZE,total)} sur ${total}</span><div class="pagination-btns">${btns}</div>`;
+  const pag = document.getElementById('marchesPagination');
+  pag.innerHTML = `
+    <span>${(currentPage-1)*pageSize+1}–${Math.min(currentPage*pageSize,total)} sur ${total}</span>
+    <div class="pagination-btns">
+      ${btns}
+      <select class="page-size-select" onchange="changePageSize(this.value)" title="Lignes par page">
+        ${[10,25,50,100].map(n=>`<option value="${n}"${n===pageSize?' selected':''}>${n}/page</option>`).join('')}
+      </select>
+    </div>`;
 }
 function goPage(p) { currentPage = p; renderMarchesTable(); }
+function changePageSize(n) { pageSize = parseInt(n,10); currentPage = 1; renderMarchesTable(); }
 
 /* ── PIPELINE ── */
 function pipelineRegions(r) {
@@ -956,13 +1110,15 @@ function renderPipeline() {
     : '<tr><td colspan="5" style="text-align:center;color:var(--text-muted);padding:28px;">Pipeline vide.</td></tr>';
 }
 
-/* ── CHART STATUT ── */
-let chartStatutInstance = null;
+/* ── CHARTS ── */
+let chartStatutInstance = null, chartRegionInstance = null, chartRegionCountInstance = null;
+
 function renderChartStatut() {
   if (!statsData?.par_statut) return;
   const labels  = Object.keys(statsData.par_statut);
   const values  = Object.values(statsData.par_statut);
   const palette = ['#002D62','#E31837','#10b981','#f59e0b','#6366f1','#06b6d4','#8b5cf6'];
+  const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text').trim() || '#f1f5f9';
   const ctx = document.getElementById('chartStatut').getContext('2d');
   if (chartStatutInstance) chartStatutInstance.destroy();
   chartStatutInstance = new Chart(ctx, {
@@ -971,7 +1127,7 @@ function renderChartStatut() {
     options: {
       responsive: true, maintainAspectRatio: false,
       plugins: {
-        legend: { position:'bottom', labels:{ color: getComputedStyle(document.documentElement).getPropertyValue('--text') || '#f1f5f9', font:{size:10}, padding:10 } },
+        legend: { position:'bottom', labels:{ color: textColor, font:{size:10}, padding:10 } },
         tooltip: { callbacks: { label: c => ` ${c.label}: ${c.parsed}` } },
       },
       cutout: '60%',
@@ -979,12 +1135,57 @@ function renderChartStatut() {
   });
 }
 
-/* ── BADGES ── */
+function renderChartRegion() {
+  const actifs = allData.filter(r => !isCloture(r));
+  const avgs   = ALL_REGIONS.map(reg => {
+    const rows = actifs.filter(r => r.region === reg);
+    const avts = rows.map(r => r.taux_phy).filter(v => v > 0);
+    return avts.length ? Math.round(avts.reduce((a,b)=>a+b,0)/avts.length) : 0;
+  });
+  const counts = ALL_REGIONS.map(reg => actifs.filter(r => r.region === reg).length);
+  const colors = ALL_REGIONS.map(reg => REGION_COLORS[reg] || '#888');
+  const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text').trim() || '#f1f5f9';
+  const gridColor = 'rgba(255,255,255,0.08)';
+
+  const commonOpts = {
+    responsive: true, maintainAspectRatio: false,
+    plugins: { legend: { display: false } },
+    scales: {
+      x: { ticks:{ color: textColor, font:{size:10} }, grid:{ color: gridColor } },
+      y: { ticks:{ color: textColor, font:{size:10} }, grid:{ color: gridColor }, beginAtZero: true },
+    },
+  };
+
+  const ctx1 = document.getElementById('chartRegion')?.getContext('2d');
+  if (ctx1) {
+    if (chartRegionInstance) chartRegionInstance.destroy();
+    chartRegionInstance = new Chart(ctx1, {
+      type: 'bar',
+      data: { labels: ALL_REGIONS, datasets: [{ label:'Avt. moy. (%)', data: avgs, backgroundColor: colors, borderRadius: 6 }] },
+      options: { ...commonOpts, plugins: { ...commonOpts.plugins, tooltip:{ callbacks:{ label: c => ` ${c.parsed.y}%` } } } },
+    });
+  }
+
+  const ctx2 = document.getElementById('chartRegionCount')?.getContext('2d');
+  if (ctx2) {
+    if (chartRegionCountInstance) chartRegionCountInstance.destroy();
+    chartRegionCountInstance = new Chart(ctx2, {
+      type: 'bar',
+      data: { labels: ALL_REGIONS, datasets: [{ label:'Marchés actifs', data: counts, backgroundColor: colors, borderRadius: 6 }] },
+      options: { ...commonOpts, plugins: { ...commonOpts.plugins, tooltip:{ callbacks:{ label: c => ` ${c.parsed.y} marchés` } } } },
+    });
+  }
+}
+
+/* ── BADGES & TITLE ── */
 function updateBadges() {
   const count = statsData?.alertes_delais?.count ?? 0;
   const badge = document.getElementById('badge-alertes');
   badge.textContent = count;
   badge.style.display = count > 0 ? 'inline-block' : 'none';
+  document.title = count > 0
+    ? `⚠️ ${count} alerte${count>1?'s':''} — Marchés RLA Zone Sud`
+    : 'Marchés RLA - Zone Sud | Tunisie Telecom';
 }
 
 /* ── ADMIN USERS ── */
@@ -997,6 +1198,7 @@ async function renderAdminUsers() {
   const tbody = document.getElementById('usersBody');
   try {
     const res = await fetch(`${API_BASE}/users`, { headers: apiHeaders() });
+    if (res.status === 401) { handle401(); return; }
     if (!res.ok) throw new Error(res.status);
     const users = await res.json();
     tbody.innerHTML = users.map(u => `<tr>
@@ -1004,7 +1206,14 @@ async function renderAdminUsers() {
       <td><strong>${escapeHtml(u.username)}</strong></td>
       <td><span class="status-badge ${u.role==='superadmin'?'superadmin':u.role==='admin'?'admin':'ok'}">${u.role}</span></td>
       <td>${escapeHtml(u.region === 'all' ? 'Toutes' : u.region)}</td>
-      <td><button class="btn-action btn-danger" onclick="deleteUser(${u.id})"><i class="fas fa-trash"></i></button></td>
+      <td style="display:flex;gap:6px">
+        <button class="btn-action btn-warning" onclick="openEditModal(${u.id},'${escapeHtml(u.username)}','${u.role}','${u.region}')">
+          <i class="fas fa-edit"></i>
+        </button>
+        <button class="btn-action btn-danger" onclick="confirmDeleteUser(${u.id},'${escapeHtml(u.username)}')">
+          <i class="fas fa-trash"></i>
+        </button>
+      </td>
     </tr>`).join('');
   } catch (e) {
     tbody.innerHTML = `<tr><td colspan="5" style="text-align:center;color:var(--danger);padding:20px;">Erreur : ${e.message}</td></tr>`;
@@ -1017,20 +1226,66 @@ async function saveNewUser() {
     role:     document.getElementById('newRole').value,
     region:   document.getElementById('newRegion').value,
   };
-  if (!body.username || !body.password) { showError('Identifiant et mot de passe requis'); return; }
+  if (!body.username || !body.password) { showToast('Identifiant et mot de passe requis', 'warning'); return; }
   try {
     const res = await fetch(`${API_BASE}/users`, { method:'POST', headers:apiHeaders(), body:JSON.stringify(body) });
     if (!res.ok) { const d = await res.json(); throw new Error(d.error || res.status); }
-    toggleAddUserForm(); renderAdminUsers();
-  } catch (e) { showError('Erreur création : ' + e.message); }
-}
-async function deleteUser(id) {
-  if (!confirm('Supprimer cet utilisateur ?')) return;
-  try {
-    const res = await fetch(`${API_BASE}/users/${id}`, { method:'DELETE', headers:apiHeaders() });
-    if (!res.ok) { const d = await res.json(); throw new Error(d.error || res.status); }
+    toggleAddUserForm();
+    document.getElementById('newUsername').value = '';
+    document.getElementById('newPassword').value = '';
+    showToast('Utilisateur créé', 'success');
     renderAdminUsers();
-  } catch (e) { showError('Erreur suppression : ' + e.message); }
+  } catch (e) { showToast('Erreur création : ' + e.message, 'error'); }
+}
+
+/* Edit user modal */
+function openEditModal(id, username, role, region) {
+  document.getElementById('editUserId').value   = id;
+  document.getElementById('editUsername').value = username;
+  document.getElementById('editPassword').value = '';
+  document.getElementById('editRole').value   = role;
+  const regSel = document.getElementById('editRegion');
+  regSel.value = region;
+  document.getElementById('editUserModal').classList.add('active');
+}
+function closeEditModal() {
+  document.getElementById('editUserModal').classList.remove('active');
+}
+async function saveEditUser() {
+  const id   = document.getElementById('editUserId').value;
+  const body = {
+    role:     document.getElementById('editRole').value,
+    region:   document.getElementById('editRegion').value,
+  };
+  const pw = document.getElementById('editPassword').value;
+  if (pw) body.password = pw;
+  try {
+    const res = await fetch(`${API_BASE}/users/${id}`, { method:'PATCH', headers:apiHeaders(), body:JSON.stringify(body) });
+    if (!res.ok) { const d = await res.json(); throw new Error(d.error || res.status); }
+    closeEditModal();
+    showToast('Utilisateur mis à jour', 'success');
+    renderAdminUsers();
+  } catch (e) { showToast('Erreur modification : ' + e.message, 'error'); }
+}
+
+/* Delete with toast confirm */
+let _pendingDeleteId = null;
+function confirmDeleteUser(id, username) {
+  _pendingDeleteId = id;
+  const t = document.getElementById('appToast');
+  t.innerHTML = `Supprimer <strong>${escapeHtml(username)}</strong> ?
+    <button onclick="executeDeleteUser()" style="margin-left:12px;padding:4px 10px;background:white;color:#dc2626;border:none;border-radius:6px;cursor:pointer;font-weight:700">Oui</button>
+    <button onclick="document.getElementById('appToast').classList.remove('active')" style="margin-left:6px;padding:4px 10px;background:rgba(255,255,255,0.3);color:white;border:none;border-radius:6px;cursor:pointer">Non</button>`;
+  t.className = 'toast error active';
+}
+async function executeDeleteUser() {
+  document.getElementById('appToast').classList.remove('active');
+  try {
+    const res = await fetch(`${API_BASE}/users/${_pendingDeleteId}`, { method:'DELETE', headers:apiHeaders() });
+    if (!res.ok) { const d = await res.json(); throw new Error(d.error || res.status); }
+    showToast('Utilisateur supprimé', 'success');
+    renderAdminUsers();
+  } catch (e) { showToast('Erreur suppression : ' + e.message, 'error'); }
 }
 
 /* ── ADMIN LOGS ── */
@@ -1038,18 +1293,19 @@ async function renderAdminLogs() {
   const tbody = document.getElementById('logsBody');
   try {
     const res = await fetch(`${API_BASE}/logs`, { headers: apiHeaders() });
+    if (res.status === 401) { handle401(); return; }
     if (!res.ok) throw new Error(res.status);
     const logs = await res.json();
     tbody.innerHTML = logs.map(l => {
-      const dt = new Date(l.timestamp);
-      const date = dt.toLocaleDateString('fr-FR', {day:'2-digit',month:'2-digit',year:'numeric'});
-      const time = dt.toLocaleTimeString('fr-FR', {hour:'2-digit',minute:'2-digit',second:'2-digit'});
+      const dt   = new Date(l.timestamp);
+      const date = dt.toLocaleDateString('fr-FR',{day:'2-digit',month:'2-digit',year:'numeric'});
+      const time = dt.toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
       return `<tr>
         <td>${date} <span style="color:var(--text-muted)">${time}</span></td>
         <td><strong>${escapeHtml(l.username)}</strong></td>
         <td>${l.role ? `<span class="status-badge info">${escapeHtml(l.role)}</span>` : '—'}</td>
         <td style="font-size:0.8em;color:var(--text-muted)">${escapeHtml(l.ip||'—')}</td>
-        <td class="${l.success ? 'log-success' : 'log-failure'}"><i class="fas fa-${l.success?'check':'times'}"></i> ${l.success?'Succès':'Échec'}</td>
+        <td class="${l.success?'log-success':'log-failure'}"><i class="fas fa-${l.success?'check':'times'}"></i> ${l.success?'Succès':'Échec'}</td>
       </tr>`;
     }).join('') || '<tr><td colspan="5" style="text-align:center;color:var(--text-muted);padding:20px;">Aucun log.</td></tr>';
   } catch (e) {
@@ -1059,31 +1315,33 @@ async function renderAdminLogs() {
 
 /* ── EXPORTS ── */
 function getCurrentView() {
-  const views = ['synthese','alertes','en-service','pilotage','par-region','en-cours','synthese','synthese','synthese'];
+  const views = {
+    0:'synthese', 1:'alertes', 2:'en-service', 3:'pilotage',
+    4:'par-region', 5:'en-cours', 6:'pipeline', 7:'synthese', 8:'synthese',
+  };
   return views[currentSlide] || 'synthese';
 }
 function getFilterParams() {
   const region = document.getElementById('filterRegion')?.value || '';
   const entrepreneur = document.getElementById('filterEntrepreneur')?.value || '';
   const params = new URLSearchParams();
-  if (region)      params.set('region', region);
+  if (region)       params.set('region', region);
   if (entrepreneur) params.set('entrepreneur', entrepreneur);
   return params.toString() ? '&' + params.toString() : '';
 }
 async function triggerExport(format) {
-  const view    = getCurrentView();
-  const filters = getFilterParams();
-  const url     = `${API_BASE}/export/${format}?view=${view}${filters}`;
+  const url = `${API_BASE}/export/${format}?view=${getCurrentView()}${getFilterParams()}`;
   try {
     const res = await fetch(url, { headers: { 'Authorization': `Bearer ${jwtToken}` } });
-    if (res.status === 403) { showError('Export réservé au SuperAdmin'); return; }
-    if (!res.ok) { const d = await res.json().catch(()=>{}); showError(d?.error || 'Erreur export ' + res.status); return; }
+    if (res.status === 401) { handle401(); return; }
+    if (res.status === 403) { showToast('Export réservé au SuperAdmin', 'warning'); return; }
+    if (!res.ok) { const d = await res.json().catch(()=>{}); showToast(d?.error || 'Erreur export ' + res.status, 'error'); return; }
     const blob = await res.blob();
     const a    = document.createElement('a');
     a.href     = URL.createObjectURL(blob);
-    a.download = `RLA_${view}_${new Date().toISOString().slice(0,10)}.${format}`;
+    a.download = `RLA_${getCurrentView()}_${new Date().toISOString().slice(0,10)}.${format}`;
     a.click(); URL.revokeObjectURL(a.href);
-  } catch (e) { showError('Erreur export : ' + e.message); }
+  } catch (e) { showToast('Erreur export : ' + e.message, 'error'); }
 }
 function downloadPDF()  { triggerExport('pdf');  }
 function exportPPTX()   { triggerExport('pptx'); }
@@ -1091,11 +1349,17 @@ function exportXLSX()   { triggerExport('xlsx'); }
 function exportDOCX()   { triggerExport('docx'); }
 
 /* ── AUTO-REFRESH ── */
-setInterval(() => { if (jwtToken) loadData(); }, (typeof CONFIG !== 'undefined' ? CONFIG.REFRESH_INTERVAL : 60) * 60 * 1000);
+setInterval(() => { if (jwtToken) loadData(); }, (CFG.REFRESH_INTERVAL || 60) * 60 * 1000);
 
 /* ── KEYBOARD ── */
 document.addEventListener('keydown', e => {
   if (e.key === 'Enter' && document.getElementById('loginPage').style.display !== 'none') handleLogin();
+  if (e.key === 'Escape') closeEditModal();
+});
+
+/* ── MODAL OUTSIDE CLICK ── */
+document.getElementById('editUserModal').addEventListener('click', e => {
+  if (e.target === e.currentTarget) closeEditModal();
 });
 
 /* ── INIT ── */
diff --git a/logo-RLA.svg b/logo-RLA.svg
new file mode 100644
index 0000000..c40293c
--- /dev/null
+++ b/logo-RLA.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- Background -->
+  <rect width="64" height="64" rx="14" fill="#0b2a55"/>
+
+  <!-- Signal arc outer left -->
+  <path d="M14,20 Q5,32 14,44" stroke="#00d4ff" stroke-width="2.2" fill="none" stroke-linecap="round" opacity="0.55"/>
+  <!-- Signal arc inner left -->
+  <path d="M19,24 Q12,32 19,40" stroke="#00d4ff" stroke-width="2.6" fill="none" stroke-linecap="round" opacity="0.85"/>
+
+  <!-- Signal arc inner right -->
+  <path d="M45,24 Q52,32 45,40" stroke="#00d4ff" stroke-width="2.6" fill="none" stroke-linecap="round" opacity="0.85"/>
+  <!-- Signal arc outer right -->
+  <path d="M50,20 Q59,32 50,44" stroke="#00d4ff" stroke-width="2.2" fill="none" stroke-linecap="round" opacity="0.55"/>
+
+  <!-- Tower pole -->
+  <rect x="29.5" y="22" width="5" height="26" rx="2.5" fill="white"/>
+
+  <!-- Tower head / triangle -->
+  <polygon points="32,7 22.5,22 41.5,22" fill="#00d4ff"/>
+
+  <!-- Base platform -->
+  <rect x="21" y="48" width="22" height="4" rx="2" fill="rgba(255,255,255,0.25)"/>
+  <rect x="26" y="48" width="12" height="4" rx="2" fill="rgba(255,255,255,0.15)"/>
+</svg>