From 71cf430d3942677c90ec951f88b8822d0794eb36 Mon Sep 17 00:00:00 2001
From: jfgiraud <jfgiraud@giraud-finance.com>
Date: Thu, 20 Aug 2026 17:28:26 +0000
Subject: [PATCH] Front + gestion des utilisateurs + affichage indice, tri et
 creation action

---
 html/admin.html                    |  241 ++++--
 html/securite.html                 |   75 +-
 html/tableindice.html              |  454 ++++++++++
 js/indices.js                      | 1250 ++++++++++++++++------------
 js/tableindice.js                  |  824 ++++++++++++++++++
 php/api_create_table_indice.php    |  385 +++++++++
 php/api_list_full_table_indice.php |   75 ++
 7 files changed, 2695 insertions(+), 609 deletions(-)
 create mode 100644 html/tableindice.html
 create mode 100644 js/tableindice.js
 create mode 100644 php/api_create_table_indice.php
 create mode 100644 php/api_list_full_table_indice.php
diff --git a/html/admin.html b/html/admin.html
index 5404127..ae7099e 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -19,48 +19,58 @@
     <link rel="stylesheet" href="../css/style.css" />
   </head>
 
-  <body
-    class="bg-slate-900 text-slate-100 min-h-screen flex flex-col justify-between"
-  >
+  <body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col">
     <!-- =========================================================
-     HEADER
-     ========================================================= -->
+         HEADER
+         ========================================================= -->
 
     <header
-      class="max-w-7xl w-full mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl flex justify-between items-center"
+      class="max-w-7xl w-full mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl"
     >
-      <div class="flex items-center">
-        <img
-          src="../images/GFBlanc.png"
-          alt="Logo Giraud Finance"
-          class="h-12 w-auto object-contain"
-        />
-      </div>
+      <div class="flex flex-col md:flex-row justify-between items-center gap-5">
+        <!-- Logo -->
 
-      <div>
-        <h1 class="text-xl font-bold text-white tracking-tight">
-          Espace d'Administration
-        </h1>
-      </div>
+        <div class="flex items-center">
+          <img
+            src="../images/GFBlanc.png"
+            alt="Logo Giraud Finance"
+            class="h-12 w-auto object-contain"
+          />
+        </div>
 
-      <div>
-        <a
-          href="https://www.giraud-finance.com"
-          class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600 flex items-center space-x-2"
-        >
-          <span>← Retour au site</span>
-        </a>
+        <!-- Titre -->
+
+        <div class="text-center">
+          <h1 class="text-xl font-bold text-white tracking-tight">
+            Espace d'Administration
+          </h1>
+
+          <p class="text-xs text-slate-400 mt-1">
+            Panneau de contrôle Giraud Finance
+          </p>
+        </div>
+
+        <!-- Retour au site -->
+
+        <div>
+          <a
+            href="https://www.giraud-finance.com"
+            class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600 flex items-center"
+          >
+            <span>← Retour au site</span>
+          </a>
+        </div>
       </div>
     </header>
 
     <!-- =========================================================
-     CONTENU PRINCIPAL
-     ========================================================= -->
+         CONTENU PRINCIPAL
+         ========================================================= -->
 
     <main class="flex-grow flex items-center justify-center p-6">
       <!-- =====================================================
-         LOGIN
-         ===================================================== -->
+           LOGIN
+           ===================================================== -->
 
       <div
         id="login-box"
@@ -90,7 +100,7 @@
               id="username"
               required
               autocomplete="username"
-              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500"
+              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
               placeholder="Votre nom d'utilisateur"
             />
           </div>
@@ -110,7 +120,7 @@
               id="password"
               required
               autocomplete="current-password"
-              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500"
+              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
               placeholder="••••••••"
             />
           </div>
@@ -141,76 +151,160 @@
       </div>
 
       <!-- =====================================================
-         DASHBOARD ADMINISTRATEUR
-         ===================================================== -->
+           DASHBOARD ADMINISTRATEUR
+           ===================================================== -->
 
       <div
         id="admin-dashboard"
-        class="w-full max-w-4xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-8 space-y-6 hidden"
+        class="w-full max-w-6xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-8 space-y-6 hidden"
       >
-        <!-- Entête dashboard -->
+        <!-- En-tête dashboard -->
 
         <div
-          class="flex justify-between items-center border-b border-slate-700 pb-4"
+          class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-slate-700 pb-5"
         >
           <div>
             <h2 class="text-lg font-bold text-white">Panneau de contrôle</h2>
 
-            <p id="welcome-user" class="text-xs text-slate-400">
+            <p id="welcome-user" class="text-xs text-slate-400 mt-1">
               Bienvenue dans l'espace sécurisé Giraud Finance.
             </p>
           </div>
 
+          <!-- Déconnexion -->
+
           <button
             id="btn-logout"
             type="button"
-            class="bg-rose-600/80 hover:bg-rose-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all"
+            class="bg-rose-600/80 hover:bg-rose-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-rose-500/50"
           >
             Déconnexion
           </button>
         </div>
 
         <!-- =================================================
-             BLOCS ADMINISTRATION
+             DEUX BOX COTE A COTE
              ================================================= -->
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- Gestion indices -->
+          <!-- =================================================
+               BOX INDICES & ACTIONS
+               ================================================= -->
 
           <div
-            class="bg-slate-900/60 p-5 rounded-xl border border-slate-700/60 space-y-3"
+            class="bg-slate-900/60 p-6 rounded-2xl border border-slate-700/60 shadow-lg flex flex-col justify-between"
           >
-            <h3 class="text-sm font-bold text-white">
-              Gestion des Indices & Actions
-            </h3>
+            <div>
+              <div
+                class="w-12 h-12 flex items-center justify-center rounded-xl bg-emerald-600/20 border border-emerald-500/30 mb-4"
+              >
+                <span class="text-2xl">📈</span>
+              </div>
 
-            <p class="text-xs text-slate-400">
-              Paramétrez l'affichage des actions et le statut des indices.
-            </p>
+              <h3 class="text-base font-bold text-white">
+                Gestion des Indices & Actions
+              </h3>
+
+              <p class="text-xs text-slate-400 mt-2 leading-relaxed">
+                Gérez les indices et les actions disponibles sur le site. Vous
+                pouvez notamment contrôler leur statut et leur affichage.
+              </p>
+
+              <div class="mt-4 space-y-2">
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
+                  Gestion des indices
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
+                  Gestion des actions
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
+                  Activation / désactivation
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
+                  Affichage sur le site
+                </div>
+              </div>
+            </div>
+
+            <!-- Bouton -->
+
+            <a
+              href="./tableindice.html"
+              class="mt-6 w-full inline-flex justify-center items-center bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-sm px-5 py-3 rounded-xl transition-all shadow-lg border border-emerald-500"
+            >
+              Gérer les indices & actions
+              <span class="ml-2">→</span>
+            </a>
           </div>
 
           <!-- =================================================
-                 SECURITE DU COMPTE
-                 ================================================= -->
+               BOX SECURITE
+               ================================================= -->
 
-          <a
-            href="/html/securite.html"
-            id="btn-securite"
-            class="block bg-slate-900/60 p-5 rounded-xl border border-slate-700/60 space-y-3 hover:bg-slate-900 hover:border-emerald-500/50 transition-all"
+          <div
+            class="bg-slate-900/60 p-6 rounded-2xl border border-slate-700/60 shadow-lg flex flex-col justify-between"
           >
-            <h3 class="text-sm font-bold text-white">Sécurité du Compte</h3>
+            <div>
+              <div
+                class="w-12 h-12 flex items-center justify-center rounded-xl bg-orange-600/20 border border-orange-500/30 mb-4"
+              >
+                <span class="text-2xl">🔐</span>
+              </div>
 
-            <p class="text-xs text-slate-400">
-              Gérer les utilisateurs et les mots de passe.
-            </p>
-          </a>
+              <h3 class="text-base font-bold text-white">Sécurité du Compte</h3>
+
+              <p class="text-xs text-slate-400 mt-2 leading-relaxed">
+                Gérez les utilisateurs autorisés à accéder à l'administration de
+                Giraud Finance.
+              </p>
+
+              <div class="mt-4 space-y-2">
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
+                  Gestion des utilisateurs
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
+                  Création d'utilisateurs
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
+                  Activation / désactivation
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
+                  Modification des mots de passe
+                </div>
+              </div>
+            </div>
+
+            <!-- Bouton -->
+
+            <a
+              href="./securite.html"
+              class="mt-6 w-full inline-flex justify-center items-center bg-orange-600 hover:bg-orange-500 text-white font-semibold text-sm px-5 py-3 rounded-xl transition-all shadow-lg border border-orange-500"
+            >
+              Gérer la sécurité
+              <span class="ml-2">→</span>
+            </a>
+          </div>
         </div>
       </div>
     </main>
 
     <!-- =========================================================
-     FOOTER
-     ========================================================= -->
+         FOOTER
+         ========================================================= -->
 
     <footer
       class="h-12 bg-slate-950 flex items-center justify-center text-xs text-slate-400 tracking-wide border-t border-slate-900"
@@ -219,8 +313,8 @@
     </footer>
 
     <!-- =========================================================
-     JAVASCRIPT
-     ========================================================= -->
+         JAVASCRIPT AUTHENTIFICATION
+         ========================================================= -->
 
     <script>
       "use strict";
@@ -228,21 +322,13 @@
       const API_LOGIN = "../php/api_login.php";
 
       const formLogin = document.getElementById("form-login");
-
       const loginBox = document.getElementById("login-box");
-
       const adminDashboard = document.getElementById("admin-dashboard");
-
       const loginError = document.getElementById("login-error");
-
       const btnLogin = document.getElementById("btn-login");
-
       const btnLogout = document.getElementById("btn-logout");
-
       const username = document.getElementById("username");
-
       const password = document.getElementById("password");
-
       const welcomeUser = document.getElementById("welcome-user");
 
       /*
@@ -295,11 +381,18 @@
 
             credentials: "same-origin",
 
+            cache: "no-store",
+
             body: JSON.stringify({
               action: "check",
             }),
           });
 
+          if (!response.ok) {
+            afficherLogin();
+            return;
+          }
+
           const data = await response.json();
 
           if (data.status === "success" && data.authenticated === true) {
@@ -367,7 +460,7 @@
             password.focus();
           }
         } catch (error) {
-          console.error(error);
+          console.error("Erreur connexion :", error);
 
           loginError.textContent = "Erreur de connexion au serveur.";
 
@@ -401,7 +494,7 @@
             }),
           });
         } catch (error) {
-          console.error(error);
+          console.error("Erreur déconnexion :", error);
         }
 
         afficherLogin();
@@ -413,7 +506,9 @@
        * =========================================================
        */
 
-      verifierSession();
+      document.addEventListener("DOMContentLoaded", function () {
+        verifierSession();
+      });
     </script>
   </body>
 </html>
diff --git a/html/securite.html b/html/securite.html
index 7e26e82..8d3a55d 100644
--- a/html/securite.html
+++ b/html/securite.html
@@ -2,6 +2,7 @@
 <html lang="fr">
   <head>
     <meta charset="UTF-8" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Sécurité - Giraud Finance</title>
@@ -13,57 +14,55 @@
       href="../images/dollars.ico"
     />
 
-    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
 
-    <!-- CSS général -->
     <link rel="stylesheet" href="../css/style.css" />
   </head>
 
   <body class="bg-slate-900 text-slate-100 min-h-screen">
     <div class="max-w-7xl mx-auto p-6">
       <!-- =====================================================
-           EN-TÊTE
+           HEADER
            ===================================================== -->
 
-      <div
+      <header
         class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl p-6 mb-6"
       >
         <div
-          class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
+          class="flex flex-col md:flex-row justify-between items-center gap-5"
         >
+          <!-- Logo -->
+
+          <div class="flex items-center">
+            <img
+              src="../images/GFBlanc.png"
+              alt="Logo Giraud Finance"
+              class="h-12 w-auto object-contain"
+            />
+          </div>
+
           <!-- Titre -->
 
-          <div>
-            <h1 class="text-2xl font-bold text-white">Sécurité</h1>
+          <div class="text-center">
+            <h1 class="text-xl font-bold text-white tracking-tight">
+              Espace d'Administration
+            </h1>
 
-            <p class="text-sm text-slate-400 mt-1">Gestion des utilisateurs</p>
+            <p class="text-xs text-slate-400 mt-1">Sécurité du compte</p>
           </div>
 
           <!-- Boutons -->
 
           <div class="flex items-center gap-3">
-            <!-- Nouveau utilisateur -->
-
-            <button
-              id="btnNouvelUtilisateur"
-              type="button"
-              class="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-emerald-500"
-            >
-              + Nouvel utilisateur
-            </button>
-
-            <!-- Retour au menu -->
-
             <a
               href="./admin.html"
-              class="bg-slate-700 hover:bg-slate-600 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-slate-600"
+              class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600"
             >
               ← Retour au menu
             </a>
           </div>
         </div>
-      </div>
+      </header>
 
       <!-- =====================================================
            MESSAGE
@@ -81,10 +80,36 @@
       <div
         class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl overflow-hidden"
       >
+        <!-- En-tête tableau -->
+
+        <div
+          class="px-6 py-5 border-b border-slate-700 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
+        >
+          <div>
+            <h2 class="text-lg font-bold text-white">
+              Gestion des utilisateurs
+            </h2>
+
+            <p class="text-xs text-slate-400 mt-1">
+              Gestion des comptes administrateurs.
+            </p>
+          </div>
+
+          <!-- Nouveau utilisateur -->
+
+          <button
+            id="btnNouvelUtilisateur"
+            type="button"
+            class="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-emerald-500"
+          >
+            + Nouvel utilisateur
+          </button>
+        </div>
+
+        <!-- Tableau -->
+
         <div class="overflow-x-auto">
           <table class="w-full">
-            <!-- En-tête -->
-
             <thead class="bg-slate-950 text-slate-300">
               <tr>
                 <th
@@ -119,8 +144,6 @@
               </tr>
             </thead>
 
-            <!-- Utilisateurs -->
-
             <tbody
               id="listeUtilisateurs"
               class="divide-y divide-slate-700"
diff --git a/html/tableindice.html b/html/tableindice.html
new file mode 100644
index 0000000..8ca2e71
--- /dev/null
+++ b/html/tableindice.html
@@ -0,0 +1,454 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Indices & Actions - Giraud Finance</title>
+
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="../images/dollars.ico"
+    />
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- CSS général -->
+    <link rel="stylesheet" href="../css/style.css" />
+  </head>
+
+  <body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col">
+    <!-- =====================================================
+         HEADER
+         ===================================================== -->
+
+    <header
+      class="max-w-7xl w-full mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl"
+    >
+      <div class="flex flex-col md:flex-row justify-between items-center gap-5">
+        <!-- Logo -->
+
+        <div class="flex items-center">
+          <img
+            src="../images/GFBlanc.png"
+            alt="Logo Giraud Finance"
+            class="h-12 w-auto object-contain"
+          />
+        </div>
+
+        <!-- Titre -->
+
+        <div class="text-center">
+          <h1 class="text-xl font-bold text-white tracking-tight">
+            Gestion des Indices & Actions
+          </h1>
+
+          <p class="text-xs text-slate-400 mt-1">
+            Panneau de contrôle Giraud Finance
+          </p>
+        </div>
+
+        <!-- Retour -->
+
+        <div>
+          <a
+            href="./admin.html"
+            class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600 flex items-center space-x-2"
+          >
+            <span>← Retour au menu</span>
+          </a>
+        </div>
+      </div>
+    </header>
+
+    <!-- =====================================================
+         CONTENU PRINCIPAL
+         ===================================================== -->
+
+    <main class="flex-grow p-6">
+      <div
+        class="max-w-7xl mx-auto bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden"
+      >
+        <!-- =================================================
+             ENTÊTE TABLEAU
+             ================================================= -->
+
+        <div
+          class="px-6 py-5 border-b border-slate-700 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
+        >
+          <!-- Titre + compteur -->
+
+          <div>
+            <h2 class="text-lg font-bold text-white">Indices & Actions</h2>
+
+            <p id="compteur" class="text-xs text-slate-400 mt-1">
+              Chargement...
+            </p>
+          </div>
+
+          <!-- ===============================================
+               FILTRE + NOUVEAU + ACTUALISER
+               =============================================== -->
+
+          <div class="flex flex-wrap items-center gap-3">
+            <!-- Filtre -->
+
+            <select
+              id="filtreIndice"
+              class="bg-slate-900 border border-slate-700 text-white text-xs rounded-xl px-4 py-2 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+            >
+              <option value="tout">Tout</option>
+
+              <option value="afficher">Afficher</option>
+
+              <option value="inactif">Inactif</option>
+            </select>
+
+            <!-- Nouveau -->
+
+            <button
+              id="btnNouveau"
+              type="button"
+              class="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-emerald-500 whitespace-nowrap"
+            >
+              + Nouveau
+            </button>
+
+            <!-- Actualiser -->
+
+            <button
+              id="btnActualiser"
+              type="button"
+              class="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-emerald-500 whitespace-nowrap"
+            >
+              ↻ Actualiser
+            </button>
+          </div>
+        </div>
+
+        <!-- =================================================
+             MESSAGE
+             ================================================= -->
+
+        <div
+          id="message"
+          class="hidden mx-6 mt-5 px-4 py-3 rounded-xl text-sm font-medium"
+        ></div>
+
+        <!-- =================================================
+             TABLEAU
+             ================================================= -->
+
+        <div class="overflow-x-auto">
+          <table class="w-full min-w-[1100px]">
+            <!-- =================================================
+                 EN-TÊTE
+                 ================================================= -->
+
+            <thead class="bg-slate-950">
+              <tr>
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  ID
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Indice
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Nom
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  ISIN
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Symbole
+                </th>
+
+                <th
+                  class="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Actif
+                </th>
+
+                <th
+                  class="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Afficher
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Mis à jour
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Créé le
+                </th>
+              </tr>
+            </thead>
+
+            <!-- =================================================
+                 CORPS
+                 ================================================= -->
+
+            <tbody
+              id="tableauIndices"
+              class="divide-y divide-slate-700"
+            ></tbody>
+          </table>
+        </div>
+      </div>
+    </main>
+
+    <!-- =====================================================
+         POPUP NOUVEL ENREGISTREMENT
+         ===================================================== -->
+
+    <div
+      id="modalNouvelEnregistrement"
+      class="fixed inset-0 z-50 hidden items-center justify-center bg-black/70 backdrop-blur-sm p-4"
+    >
+      <div
+        class="w-full max-w-2xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl"
+      >
+        <!-- =================================================
+             EN-TÊTE POPUP
+             ================================================= -->
+
+        <div
+          class="px-6 py-5 border-b border-slate-700 flex justify-between items-center"
+        >
+          <div>
+            <h2 class="text-lg font-bold text-white">Nouvel enregistrement</h2>
+
+            <p class="text-xs text-slate-400 mt-1">
+              Ajouter une nouvelle action ou un indice
+            </p>
+          </div>
+
+          <!-- Fermer -->
+
+          <button
+            id="btnFermerModal"
+            type="button"
+            class="text-slate-400 hover:text-white text-2xl leading-none"
+          >
+            ×
+          </button>
+        </div>
+
+        <!-- =================================================
+             FORMULAIRE
+             ================================================= -->
+
+        <form id="formNouvelEnregistrement" class="p-6 space-y-5">
+          <!-- =================================================
+               INDICE
+               ================================================= -->
+
+          <div>
+            <label
+              for="nouvelIndice"
+              class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+            >
+              Indice
+            </label>
+
+            <input
+              type="text"
+              id="nouvelIndice"
+              required
+              autocomplete="off"
+              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+              placeholder="Exemple : CAC40"
+            />
+          </div>
+
+          <!-- =================================================
+               NOM
+               ================================================= -->
+
+          <div>
+            <label
+              for="nouveauNom"
+              class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+            >
+              Nom
+            </label>
+
+            <input
+              type="text"
+              id="nouveauNom"
+              required
+              autocomplete="off"
+              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+              placeholder="Nom de l'action"
+            />
+          </div>
+
+          <!-- =================================================
+               ISIN + SYMBOLE
+               ================================================= -->
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- ISIN -->
+
+            <div>
+              <label
+                for="nouvelIsin"
+                class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+              >
+                ISIN
+              </label>
+
+              <input
+                type="text"
+                id="nouvelIsin"
+                required
+                maxlength="12"
+                autocomplete="off"
+                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white font-mono uppercase placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+                placeholder="FR0000120404"
+              />
+            </div>
+
+            <!-- Symbole -->
+
+            <div>
+              <label
+                for="nouveauSymbole"
+                class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+              >
+                Symbole
+              </label>
+
+              <input
+                type="text"
+                id="nouveauSymbole"
+                required
+                autocomplete="off"
+                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white uppercase placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+                placeholder="AC"
+              />
+            </div>
+          </div>
+
+          <!-- =================================================
+               ACTIF + AFFICHER
+               ================================================= -->
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Actif -->
+
+            <label
+              class="flex items-center justify-between bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 cursor-pointer"
+            >
+              <div>
+                <div class="text-sm font-semibold text-white">Actif</div>
+
+                <div class="text-xs text-slate-500">Action active</div>
+              </div>
+
+              <input
+                type="checkbox"
+                id="nouvelActif"
+                checked
+                class="w-5 h-5 accent-emerald-500"
+              />
+            </label>
+
+            <!-- Afficher -->
+
+            <label
+              class="flex items-center justify-between bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 cursor-pointer"
+            >
+              <div>
+                <div class="text-sm font-semibold text-white">Afficher</div>
+
+                <div class="text-xs text-slate-500">Afficher sur le site</div>
+              </div>
+
+              <input
+                type="checkbox"
+                id="nouvelAfficher"
+                checked
+                class="w-5 h-5 accent-emerald-500"
+              />
+            </label>
+          </div>
+
+          <!-- =================================================
+               MESSAGE FORMULAIRE
+               ================================================= -->
+
+          <div
+            id="messageNouveau"
+            class="hidden px-4 py-3 rounded-xl text-sm"
+          ></div>
+
+          <!-- =================================================
+               BOUTONS
+               ================================================= -->
+
+          <div class="flex justify-end gap-3 pt-4 border-t border-slate-700">
+            <!-- Annuler -->
+
+            <button
+              id="btnAnnuler"
+              type="button"
+              class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-5 py-3 rounded-xl transition-all border border-slate-600"
+            >
+              Annuler
+            </button>
+
+            <!-- Sauvegarder -->
+
+            <button
+              id="btnSauvegarder"
+              type="submit"
+              class="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-5 py-3 rounded-xl transition-all border border-emerald-500"
+            >
+              Sauvegarder
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- =====================================================
+         FOOTER
+         ===================================================== -->
+
+    <footer
+      class="h-12 bg-slate-950 flex items-center justify-center text-xs text-slate-400 tracking-wide border-t border-slate-900"
+    >
+      Copyright Jean-Francois GIRAUD 2026
+    </footer>
+
+    <!-- =====================================================
+         JAVASCRIPT
+         ===================================================== -->
+
+    <script src="../js/tableindice.js"></script>
+  </body>
+</html>
diff --git a/js/indices.js b/js/indices.js
index f12da04..b3be4bc 100644
--- a/js/indices.js
+++ b/js/indices.js
@@ -1,564 +1,794 @@
-// =========================================================
-// Tableaux globaux
-// =========================================================
+"use strict";
 
-let configIndices = []; // Données issues de la table "indice"
-let coursActionsData = []; // Données issues de la table "cours_actions"
+/*
+ * =========================================================
+ * CONFIGURATION
+ * =========================================================
+ */
 
-// =========================================================
-// CHARGEMENT DES DONNÉES
-// =========================================================
+const API_URL = "../php/api_list_full_table_indice.php";
 
-function chargerDonnees() {
-  // Chargement en parallèle des deux API
-  Promise.all([
-    fetch("./php/api_lecture_tableindice.php").then((res) => res.json()),
-    fetch("./php/api_indices.php").then((res) => res.json()),
-  ])
+/*
+ * API de création.
+ *
+ * A créer côté PHP.
+ */
+const API_CREATE_URL = "../php/api_create_indice.php";
 
-    .then(([configResult, coursResult]) => {
-      // -----------------------------------------------------
-      // Configuration des indices
-      // -----------------------------------------------------
+const tableauIndices = document.getElementById("tableauIndices");
+const compteur = document.getElementById("compteur");
+const message = document.getElementById("message");
 
-      if (configResult.status === "success") {
-        configIndices = configResult.data;
+const btnActualiser = document.getElementById("btnActualiser");
+const btnNouveau = document.getElementById("btnNouveau");
 
-        console.log(
-          "Configuration indices chargée :",
-          configIndices.length,
-          "éléments",
-        );
-      } else {
-        console.error("Erreur API config indices :", configResult.message);
-      }
+const filtreIndice = document.getElementById("filtreIndice");
 
-      // -----------------------------------------------------
-      // Cours des actions
-      // -----------------------------------------------------
+/*
+ * =========================================================
+ * MODAL
+ * =========================================================
+ */
 
-      if (coursResult.status === "success") {
-        coursActionsData = coursResult.data;
+const modalNouvelEnregistrement = document.getElementById(
+  "modalNouvelEnregistrement",
+);
 
-        console.log(
-          "Cours actions chargés :",
-          coursActionsData.length,
-          "éléments",
-        );
-      } else {
-        console.error("Erreur API cours_actions :", coursResult.message);
-      }
+const formNouvelEnregistrement = document.getElementById(
+  "formNouvelEnregistrement",
+);
 
-      // -----------------------------------------------------
-      // Mise à jour des vues
-      // -----------------------------------------------------
+const btnFermerModal = document.getElementById("btnFermerModal");
+const btnAnnuler = document.getElementById("btnAnnuler");
+const btnSauvegarder = document.getElementById("btnSauvegarder");
 
-      afficherSyntheseCartes();
+const messageNouveau = document.getElementById("messageNouveau");
 
-      alimenterBandeauxTicker();
+/*
+ * =========================================================
+ * CHAMPS FORMULAIRE
+ * =========================================================
+ */
 
-      // -----------------------------------------------------
-      // Statut de rafraîchissement
-      // -----------------------------------------------------
+const nouvelIndice = document.getElementById("nouvelIndice");
+const nouveauNom = document.getElementById("nouveauNom");
+const nouvelIsin = document.getElementById("nouvelIsin");
+const nouveauSymbole = document.getElementById("nouveauSymbole");
+const nouvelActif = document.getElementById("nouvelActif");
+const nouvelAfficher = document.getElementById("nouvelAfficher");
 
-      const statut = document.getElementById("statut");
+/*
+ * =========================================================
+ * DONNEES
+ * =========================================================
+ */
 
-      if (statut) {
-        statut.innerText = `Dernière mise à jour : ${new Date().toLocaleTimeString()}`;
-      }
-    })
+let tousLesEnregistrements = [];
 
-    .catch((error) => {
-      console.error("Erreur réseau lors du chargement des API :", error);
-    });
-}
+/*
+ * =========================================================
+ * AFFICHER MESSAGE
+ * =========================================================
+ */
 
-// =========================================================
-// AFFICHAGE DES CARTES
-// =========================================================
+function afficherMessage(texte, type = "info") {
+  message.textContent = texte;
 
-function afficherSyntheseCartes() {
-  const container = document.getElementById("cards-container");
-
-  if (!container) return;
-
-  container.innerHTML = "";
-
-  // -------------------------------------------------------
-  // On se base STRICTEMENT sur afficher == 1
-  // -------------------------------------------------------
-
-  const actionsAffichees = configIndices.filter(
-    (item) => String(item.afficher) === "1" || item.afficher == 1,
+  message.classList.remove(
+    "hidden",
+    "bg-emerald-900/50",
+    "border-emerald-700",
+    "text-emerald-300",
+    "bg-rose-900/50",
+    "border-rose-700",
+    "text-rose-300",
+    "bg-slate-900",
+    "border-slate-700",
+    "text-slate-300",
   );
 
-  if (actionsAffichees.length > 0) {
-    actionsAffichees.forEach((conf) => {
-      // ---------------------------------------------------
-      // Croisement avec les cours en direct
-      // ---------------------------------------------------
-
-      const d =
-        coursActionsData.find(
-          (item) => item.symbole === conf.symbole || item.isin === conf.isin,
-        ) || {};
-
-      const ecartValeur = parseFloat(d.variation || 0);
-
-      const isPositive = ecartValeur >= 0;
-
-      const badgeColor = isPositive ? "text-emerald-400" : "text-rose-400";
-
-      const sign = isPositive ? "+" : "";
-
-      // ---------------------------------------------------
-      // Volume
-      // ---------------------------------------------------
-
-      const volumeFormate = d.volume
-        ? parseInt(d.volume).toLocaleString("fr-FR")
-        : "--";
-
-      // ---------------------------------------------------
-      // Carte
-      // ---------------------------------------------------
-
-      container.innerHTML += `
-
-        <div
-          class="bg-slate-800 p-4 rounded-2xl shadow-xl
-                 border border-slate-700 flex flex-col
-                 justify-between hover:border-slate-500
-                 transition-all"
-        >
-
-          <!-- En-tête -->
-
-          <div
-            class="flex justify-between
-                   items-start mb-2"
-          >
-
-            <div class="max-w-[150px]">
-
-              <h3
-                class="text-xs font-bold text-white
-                       leading-tight truncate"
-                title="${conf.nom || conf.indice}"
-              >
-
-                ${conf.nom || conf.indice}
-
-                <span
-                  class="text-[11px]
-                         font-normal text-slate-400"
-                >
-                  (${conf.symbole || "N/A"})
-                </span>
-
-              </h3>
-
-
-              <span
-                class="text-[10px]
-                       text-slate-500
-                       font-mono italic
-                       block mt-0.5"
-              >
-                ${conf.isin || "Aucun ISIN"}
-              </span>
-
-
-              <span
-                class="text-[10px]
-                       font-semibold
-                       text-slate-400
-                       uppercase
-                       tracking-wide
-                       block mt-0.5"
-              >
-                ${conf.indice || ""}
-              </span>
-
-            </div>
-
-
-            <!-- Cours -->
-
-            <div class="text-right">
-
-              <div
-                class="text-base
-                       font-extrabold
-                       text-white
-                       leading-tight"
-              >
-
-                ${
-                  d.cours
-                    ? parseFloat(d.cours).toLocaleString("fr-FR", {
-                        minimumFractionDigits: 2,
-                      })
-                    : "--"
-                }
-
-              </div>
-
-
-              <!-- Variation -->
-
-              <div
-                class="text-xs
-                       font-bold
-                       ${badgeColor}
-                       leading-tight
-                       mt-0.5"
-              >
-
-                ${sign}
-
-                ${ecartValeur.toLocaleString("fr-FR", {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 4,
-                })}
-
-                <span class="font-semibold">
-
-                  (
-                  ${sign}${parseFloat(d.variation_pct || 0).toFixed(2)}%
-                  )
-
-                </span>
-
-              </div>
-
-
-              <!-- Date -->
-
-              <div
-                class="text-[8px]
-                       text-slate-500
-                       font-mono
-                       mt-0.5"
-              >
-
-                ${d.date_cours || "--/--"}
-
-              </div>
-
-            </div>
-
-          </div>
-
-
-          <!-- Haut / Bas / Volume -->
-
-          <div
-            class="grid grid-cols-3 gap-1.5
-                   bg-slate-900/50
-                   p-1.5 rounded-xl
-                   border border-slate-700/50
-                   text-center"
-          >
-
-            <div>
-
-              <span
-                class="text-[8px]
-                       text-slate-400
-                       block uppercase"
-              >
-                Haut
-              </span>
-
-              <span
-                class="text-[10px]
-                       font-semibold
-                       text-slate-200"
-              >
-
-                ${
-                  d.plus_haut
-                    ? parseFloat(d.plus_haut).toLocaleString("fr-FR", {
-                        minimumFractionDigits: 2,
-                      })
-                    : "--"
-                }
-
-              </span>
-
-            </div>
-
-
-            <div>
-
-              <span
-                class="text-[8px]
-                       text-slate-400
-                       block uppercase"
-              >
-                Bas
-              </span>
-
-              <span
-                class="text-[10px]
-                       font-semibold
-                       text-slate-200"
-              >
-
-                ${
-                  d.plus_bas
-                    ? parseFloat(d.plus_bas).toLocaleString("fr-FR", {
-                        minimumFractionDigits: 2,
-                      })
-                    : "--"
-                }
-
-              </span>
-
-            </div>
-
-
-            <div>
-
-              <span
-                class="text-[8px]
-                       text-slate-400
-                       block uppercase"
-              >
-                Volume
-              </span>
-
-              <span
-                class="text-[10px]
-                       font-semibold
-                       text-slate-200"
-              >
-                ${volumeFormate}
-              </span>
-
-            </div>
-
-          </div>
-
-        </div>
-
-      `;
-    });
+  message.classList.add("border");
+
+  if (type === "success") {
+    message.classList.add(
+      "bg-emerald-900/50",
+      "border-emerald-700",
+      "text-emerald-300",
+    );
+  } else if (type === "error") {
+    message.classList.add("bg-rose-900/50", "border-rose-700", "text-rose-300");
   } else {
-    container.innerHTML = `
-
-      <div
-        class="col-span-3
-               text-center
-               py-10
-               bg-slate-800/30
-               rounded-2xl
-               border border-slate-800"
-      >
-
-        <span
-          class="text-slate-400
-                 text-sm"
-        >
-          Aucune action configurée à 'afficher = 1'.
-        </span>
-
-      </div>
-
-    `;
+    message.classList.add("bg-slate-900", "border-slate-700", "text-slate-300");
   }
 }
 
-// =========================================================
-// PRÉPARATION DES BANDEAUX
-// =========================================================
+/*
+ * =========================================================
+ * CACHER MESSAGE
+ * =========================================================
+ */
 
-function alimenterBandeauxTicker() {
-  const preparerDonneesTicker = (nomIndiceRecherche) => {
-    const cleanSearch = nomIndiceRecherche
-      .replace(/[^a-z0-9]/gi, "")
-      .toLowerCase();
-
-    // ---------------------------------------------------
-    // Recherche dans coursActionsData
-    // ---------------------------------------------------
-
-    let liste = coursActionsData.filter((item) => {
-      if (!item.indice) {
-        return false;
-      }
-
-      const cleanItemIndice = item.indice
-        .replace(/[^a-z0-9]/gi, "")
-        .toLowerCase();
-
-      return cleanItemIndice === cleanSearch;
-    });
-
-    // ---------------------------------------------------
-    // Si aucune donnée, utiliser configIndices
-    // ---------------------------------------------------
-
-    if (liste.length === 0) {
-      liste = configIndices.filter((item) => {
-        if (!item.indice) {
-          return false;
-        }
-
-        const cleanItemIndice = item.indice
-          .replace(/[^a-z0-9]/gi, "")
-          .toLowerCase();
-
-        return cleanItemIndice === cleanSearch;
-      });
-    }
-
-    // ---------------------------------------------------
-    // Fusion et formatage
-    // ---------------------------------------------------
-
-    let listeFinale = liste.map((conf) => {
-      const coursMatch =
-        coursActionsData.find(
-          (item) => item.symbole === conf.symbole || item.isin === conf.isin,
-        ) || conf;
-
-      return {
-        nom: conf.nom || coursMatch.nom || conf.symbole,
-
-        cours: coursMatch.cours || 0,
-
-        variation_pct: coursMatch.variation_pct || 0,
-      };
-    });
-
-    // ---------------------------------------------------
-    // Tri alphabétique
-    // ---------------------------------------------------
-
-    listeFinale.sort((a, b) => a.nom.localeCompare(b.nom));
-
-    return listeFinale;
-  };
-
-  // -------------------------------------------------------
-  // Remplissage des trois bandeaux
-  // -------------------------------------------------------
-
-  remplirUnBandeau("ticker-cac40", preparerDonneesTicker("CAC40"));
-
-  remplirUnBandeau("ticker-ibex35", preparerDonneesTicker("IBEX35"));
-
-  remplirUnBandeau("ticker-dowjones", preparerDonneesTicker("DOWJONES"));
+function cacherMessage() {
+  message.classList.add("hidden");
 }
 
-// =========================================================
-// REMPLIR UN BANDEAU
-// =========================================================
+/*
+ * =========================================================
+ * ECHAPPER HTML
+ * =========================================================
+ */
 
-function remplirUnBandeau(elementId, donneesTriees) {
-  const container = document.getElementById(elementId);
+function echapperHTML(valeur) {
+  if (valeur === null || valeur === undefined) {
+    return "";
+  }
 
-  if (!container) return;
+  return String(valeur)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
 
-  if (donneesTriees.length === 0) {
-    container.innerHTML = `<span class="px-4 text-slate-500 text-xs">
-        Aucune donnée disponible
-       </span>`;
+/*
+ * =========================================================
+ * CHECKBOX
+ * =========================================================
+ */
+
+function creerCheckbox(valeur) {
+  const checked = Number(valeur) === 1 || valeur === true || valeur === "1";
+
+  return `
+    <div class="flex justify-center items-center">
+
+      <input
+        type="checkbox"
+        ${checked ? "checked" : ""}
+        disabled
+        class="w-5 h-5 accent-emerald-500 cursor-not-allowed opacity-90"
+      />
+
+    </div>
+  `;
+}
+
+/*
+ * =========================================================
+ * CREER UNE LIGNE
+ * =========================================================
+ */
+
+function creerLigne(enregistrement) {
+  return `
+    <tr
+      class="hover:bg-slate-700/30 transition-colors"
+    >
+
+      <td
+        class="px-4 py-3 text-sm text-slate-500 whitespace-nowrap"
+      >
+        ${echapperHTML(enregistrement.id)}
+      </td>
+
+
+      <td
+        class="px-4 py-3 whitespace-nowrap"
+      >
+        <span
+          class="inline-flex items-center
+                 px-2.5 py-1
+                 rounded-lg
+                 bg-slate-700
+                 border border-slate-600
+                 text-xs font-semibold
+                 text-slate-200"
+        >
+          ${echapperHTML(enregistrement.indice)}
+        </span>
+      </td>
+
+
+      <td
+        class="px-4 py-3
+               text-sm font-medium
+               text-white
+               whitespace-nowrap"
+      >
+        ${echapperHTML(enregistrement.nom)}
+      </td>
+
+
+      <td
+        class="px-4 py-3
+               text-sm text-slate-300
+               font-mono
+               whitespace-nowrap"
+      >
+        ${echapperHTML(enregistrement.isin)}
+      </td>
+
+
+      <td
+        class="px-4 py-3
+               text-sm text-slate-300
+               font-semibold
+               whitespace-nowrap"
+      >
+        ${echapperHTML(enregistrement.symbole)}
+      </td>
+
+
+      <td class="px-4 py-3 text-center">
+        ${creerCheckbox(enregistrement.actif)}
+      </td>
+
+
+      <td class="px-4 py-3 text-center">
+        ${creerCheckbox(enregistrement.afficher)}
+      </td>
+
+
+      <td
+        class="px-4 py-3
+               text-xs text-slate-400
+               whitespace-nowrap"
+      >
+        ${echapperHTML(enregistrement.updated_at)}
+      </td>
+
+
+      <td
+        class="px-4 py-3
+               text-xs text-slate-500
+               whitespace-nowrap"
+      >
+        ${echapperHTML(enregistrement.created_at)}
+      </td>
+
+    </tr>
+  `;
+}
+
+/*
+ * =========================================================
+ * CONSTRUIRE FILTRES
+ * =========================================================
+ */
+
+function construireFiltres() {
+  const indices = [
+    ...new Set(
+      tousLesEnregistrements
+        .map(function (enregistrement) {
+          return enregistrement.indice;
+        })
+        .filter(function (indice) {
+          return (
+            indice !== null &&
+            indice !== undefined &&
+            String(indice).trim() !== ""
+          );
+        }),
+    ),
+  ];
+
+  indices.sort(function (a, b) {
+    return String(a).localeCompare(String(b), "fr", {
+      sensitivity: "base",
+    });
+  });
+
+  const filtreActuel = filtreIndice.value;
+
+  filtreIndice.innerHTML = "";
+
+  /*
+   * Tout
+   */
+
+  const optionTout = document.createElement("option");
+
+  optionTout.value = "tout";
+  optionTout.textContent = "Tout";
+
+  filtreIndice.appendChild(optionTout);
+
+  /*
+   * Afficher
+   */
+
+  const optionAfficher = document.createElement("option");
+
+  optionAfficher.value = "afficher";
+  optionAfficher.textContent = "Afficher";
+
+  filtreIndice.appendChild(optionAfficher);
+
+  /*
+   * Inactif
+   */
+
+  const optionInactif = document.createElement("option");
+
+  optionInactif.value = "inactif";
+  optionInactif.textContent = "Inactif";
+
+  filtreIndice.appendChild(optionInactif);
+
+  /*
+   * Indices
+   */
+
+  indices.forEach(function (indice) {
+    const option = document.createElement("option");
+
+    option.value = "indice:" + indice;
+    option.textContent = indice;
+
+    filtreIndice.appendChild(option);
+  });
+
+  /*
+   * Restaurer filtre
+   */
+
+  const optionExiste = Array.from(filtreIndice.options).some(function (option) {
+    return option.value === filtreActuel;
+  });
+
+  if (optionExiste) {
+    filtreIndice.value = filtreActuel;
+  } else {
+    filtreIndice.value = "tout";
+  }
+}
+
+/*
+ * =========================================================
+ * APPLIQUER FILTRE
+ * =========================================================
+ */
+
+function appliquerFiltre() {
+  const filtre = filtreIndice.value;
+
+  let enregistrementsFiltres;
+
+  /*
+   * Tout
+   */
+
+  if (filtre === "tout") {
+    enregistrementsFiltres = tousLesEnregistrements;
+  } else if (filtre === "afficher") {
+    /*
+     * Afficher
+     */
+    enregistrementsFiltres = tousLesEnregistrements.filter(
+      function (enregistrement) {
+        return (
+          Number(enregistrement.afficher) === 1 ||
+          enregistrement.afficher === true ||
+          enregistrement.afficher === "1"
+        );
+      },
+    );
+  } else if (filtre === "inactif") {
+    /*
+     * Inactif
+     */
+    enregistrementsFiltres = tousLesEnregistrements.filter(
+      function (enregistrement) {
+        return !(
+          Number(enregistrement.actif) === 1 ||
+          enregistrement.actif === true ||
+          enregistrement.actif === "1"
+        );
+      },
+    );
+  } else if (filtre.startsWith("indice:")) {
+    /*
+     * Indice
+     */
+    const indiceRecherche = filtre.substring("indice:".length);
+
+    enregistrementsFiltres = tousLesEnregistrements.filter(
+      function (enregistrement) {
+        return (
+          String(enregistrement.indice).toLowerCase() ===
+          String(indiceRecherche).toLowerCase()
+        );
+      },
+    );
+  } else {
+    enregistrementsFiltres = tousLesEnregistrements;
+  }
+
+  afficherDonneesFiltrees(enregistrementsFiltres);
+}
+
+/*
+ * =========================================================
+ * AFFICHER DONNEES FILTREES
+ * =========================================================
+ */
+
+function afficherDonneesFiltrees(enregistrements) {
+  tableauIndices.innerHTML = "";
+
+  if (!Array.isArray(enregistrements) || enregistrements.length === 0) {
+    compteur.textContent = "0 enregistrement";
+
+    tableauIndices.innerHTML = `
+      <tr>
+
+        <td
+          colspan="9"
+          class="px-6 py-10 text-center
+                 text-sm text-slate-500"
+        >
+          Aucun enregistrement correspondant
+          au filtre sélectionné.
+        </td>
+
+      </tr>
+    `;
 
     return;
   }
 
-  let blocs = "";
+  /*
+   * =======================================================
+   * TRI PAR ID CROISSANT
+   * =======================================================
+   */
 
-  donneesTriees.forEach((item) => {
-    const isPositive = parseFloat(item.variation_pct || 0) >= 0;
-
-    const colorClass = isPositive ? "text-emerald-400" : "text-rose-400";
-
-    const sign = isPositive ? "+" : "";
-
-    const coursFormate = parseFloat(item.cours || 0).toLocaleString("fr-FR", {
-      minimumFractionDigits: 2,
-    });
-
-    const variationFormatee = parseFloat(item.variation_pct || 0).toFixed(2);
-
-    blocs += `
-
-      <div
-        class="inline-flex
-               items-center
-               px-6
-               space-x-3
-               border-r
-               border-slate-800/80
-               whitespace-nowrap"
-      >
-
-        <span
-          class="font-bold text-white"
-        >
-          ${item.nom}
-        </span>
-
-        <span
-          class="text-slate-300"
-        >
-          ${coursFormate}
-        </span>
-
-        <span
-          class="${colorClass}
-                 font-semibold"
-        >
-          ${sign}${variationFormatee}%
-        </span>
-
-      </div>
-
-    `;
+  const donneesTriees = [...enregistrements].sort(function (a, b) {
+    return Number(a.id) - Number(b.id);
   });
 
-  // Triple répétition pour assurer
-  // le défilement continu
+  let html = "";
 
-  container.innerHTML = blocs + blocs + blocs;
+  donneesTriees.forEach(function (enregistrement) {
+    html += creerLigne(enregistrement);
+  });
 
-  const dureeTotale = Math.max(20, donneesTriees.length * 4);
+  tableauIndices.innerHTML = html;
 
-  container.style.animationDuration = `${dureeTotale}s`;
+  compteur.textContent =
+    donneesTriees.length +
+    (donneesTriees.length > 1 ? " enregistrements" : " enregistrement");
 }
 
-// =========================================================
-// DÉMARRAGE
-// =========================================================
+/*
+ * =========================================================
+ * AFFICHER DONNEES
+ * =========================================================
+ */
 
-// Chargement initial
-chargerDonnees();
+function afficherDonnees(data) {
+  tousLesEnregistrements = Array.isArray(data) ? data : [];
 
-// Rafraîchissement toutes les 60 secondes
-setInterval(chargerDonnees, 60000);
+  construireFiltres();
 
-// =========================================================
-// RACCOURCIS CLAVIER
-// =========================================================
+  appliquerFiltre();
+}
 
-document.addEventListener("keydown", (event) => {
-  // F1 → Administration
+/*
+ * =========================================================
+ * CHARGER DONNEES
+ * =========================================================
+ */
 
-  if (event.key === "F1") {
-    event.preventDefault();
+async function chargerDonnees() {
+  btnActualiser.disabled = true;
 
-    window.location.href = "https://www.giraud-finance.com/html/admin.html";
+  btnActualiser.textContent = "↻ Chargement...";
+
+  afficherMessage("Chargement des indices et des actions...", "info");
+
+  try {
+    const response = await fetch(API_URL, {
+      method: "GET",
+
+      credentials: "same-origin",
+
+      cache: "no-store",
+
+      headers: {
+        Accept: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error("Erreur HTTP " + response.status);
+    }
+
+    const result = await response.json();
+
+    if (!result || result.status !== "success") {
+      throw new Error(
+        result && result.message
+          ? result.message
+          : "L'API a retourné une erreur.",
+      );
+    }
+
+    afficherDonnees(result.data);
+
+    cacherMessage();
+  } catch (error) {
+    console.error("Erreur chargement indices/actions :", error);
+
+    tableauIndices.innerHTML = `
+      <tr>
+
+        <td
+          colspan="9"
+          class="px-6 py-10
+                 text-center
+                 text-rose-400"
+        >
+          Impossible de charger les données.
+        </td>
+
+      </tr>
+    `;
+
+    compteur.textContent = "Erreur de chargement";
+
+    afficherMessage(
+      "Erreur lors de la récupération des données : " + error.message,
+      "error",
+    );
+  } finally {
+    btnActualiser.disabled = false;
+
+    btnActualiser.textContent = "↻ Actualiser";
+  }
+}
+
+/*
+ * =========================================================
+ * OUVRIR MODAL
+ * =========================================================
+ */
+
+function ouvrirModal() {
+  formNouvelEnregistrement.reset();
+
+  /*
+   * Valeurs par défaut
+   */
+
+  nouvelActif.checked = true;
+  nouvelAfficher.checked = true;
+
+  messageNouveau.classList.add("hidden");
+
+  modalNouvelEnregistrement.classList.remove("hidden");
+
+  modalNouvelEnregistrement.classList.add("flex");
+
+  setTimeout(function () {
+    nouvelIndice.focus();
+  }, 50);
+}
+
+/*
+ * =========================================================
+ * FERMER MODAL
+ * =========================================================
+ */
+
+function fermerModal() {
+  modalNouvelEnregistrement.classList.add("hidden");
+
+  modalNouvelEnregistrement.classList.remove("flex");
+}
+
+/*
+ * =========================================================
+ * MESSAGE MODAL
+ * =========================================================
+ */
+
+function afficherMessageNouveau(texte, type = "error") {
+  messageNouveau.textContent = texte;
+
+  messageNouveau.classList.remove(
+    "hidden",
+    "bg-rose-900/50",
+    "border-rose-700",
+    "text-rose-300",
+    "bg-emerald-900/50",
+    "border-emerald-700",
+    "text-emerald-300",
+  );
+
+  messageNouveau.classList.add("border");
+
+  if (type === "success") {
+    messageNouveau.classList.add(
+      "bg-emerald-900/50",
+      "border-emerald-700",
+      "text-emerald-300",
+    );
+  } else {
+    messageNouveau.classList.add(
+      "bg-rose-900/50",
+      "border-rose-700",
+      "text-rose-300",
+    );
+  }
+}
+
+/*
+ * =========================================================
+ * SAUVEGARDER NOUVEL ENREGISTREMENT
+ * =========================================================
+ */
+
+async function sauvegarderNouvelEnregistrement(event) {
+  event.preventDefault();
+
+  /*
+   * Lecture des champs
+   */
+
+  const donnees = {
+    indice: nouvelIndice.value.trim(),
+
+    nom: nouveauNom.value.trim(),
+
+    isin: nouvelIsin.value.trim().toUpperCase(),
+
+    symbole: nouveauSymbole.value.trim().toUpperCase(),
+
+    actif: nouvelActif.checked ? 1 : 0,
+
+    afficher: nouvelAfficher.checked ? 1 : 0,
+  };
+
+  /*
+   * Vérification
+   */
+
+  if (!donnees.indice || !donnees.nom || !donnees.isin || !donnees.symbole) {
+    afficherMessageNouveau("Tous les champs texte sont obligatoires.");
+
+    return;
   }
 
-  // F2 → Site principal
+  /*
+   * Désactivation bouton
+   */
 
-  if (event.key === "F2") {
-    event.preventDefault();
+  btnSauvegarder.disabled = true;
 
-    window.location.href = "https://giraud-finance.com";
+  btnSauvegarder.textContent = "Sauvegarde...";
+
+  messageNouveau.classList.add("hidden");
+
+  try {
+    const response = await fetch(API_CREATE_URL, {
+      method: "POST",
+
+      credentials: "same-origin",
+
+      headers: {
+        "Content-Type": "application/json",
+
+        Accept: "application/json",
+      },
+
+      body: JSON.stringify(donnees),
+    });
+
+    if (!response.ok) {
+      throw new Error("Erreur HTTP " + response.status);
+    }
+
+    const result = await response.json();
+
+    if (!result || result.status !== "success") {
+      throw new Error(
+        result && result.message
+          ? result.message
+          : "Impossible de créer l'enregistrement.",
+      );
+    }
+
+    /*
+     * Fermeture
+     */
+
+    fermerModal();
+
+    /*
+     * Message
+     */
+
+    afficherMessage("L'enregistrement a été créé avec succès.", "success");
+
+    /*
+     * Rechargement
+     */
+
+    await chargerDonnees();
+  } catch (error) {
+    console.error("Erreur création enregistrement :", error);
+
+    afficherMessageNouveau(error.message, "error");
+  } finally {
+    btnSauvegarder.disabled = false;
+
+    btnSauvegarder.textContent = "Sauvegarder";
+  }
+}
+
+/*
+ * =========================================================
+ * EVENEMENTS
+ * =========================================================
+ */
+
+filtreIndice.addEventListener("change", function () {
+  appliquerFiltre();
+});
+
+btnActualiser.addEventListener("click", function () {
+  chargerDonnees();
+});
+
+btnNouveau.addEventListener("click", function () {
+  ouvrirModal();
+});
+
+btnFermerModal.addEventListener("click", function () {
+  fermerModal();
+});
+
+btnAnnuler.addEventListener("click", function () {
+  fermerModal();
+});
+
+formNouvelEnregistrement.addEventListener(
+  "submit",
+  sauvegarderNouvelEnregistrement,
+);
+
+/*
+ * Fermer en cliquant sur le fond
+ */
+
+modalNouvelEnregistrement.addEventListener("click", function (event) {
+  if (event.target === modalNouvelEnregistrement) {
+    fermerModal();
   }
 });
+
+/*
+ * Touche Echap
+ */
+
+document.addEventListener("keydown", function (event) {
+  if (
+    event.key === "Escape" &&
+    !modalNouvelEnregistrement.classList.contains("hidden")
+  ) {
+    fermerModal();
+  }
+});
+
+/*
+ * =========================================================
+ * INITIALISATION
+ * =========================================================
+ */
+
+document.addEventListener("DOMContentLoaded", function () {
+  chargerDonnees();
+});
diff --git a/js/tableindice.js b/js/tableindice.js
new file mode 100644
index 0000000..344edea
--- /dev/null
+++ b/js/tableindice.js
@@ -0,0 +1,824 @@
+"use strict";
+
+/*
+ * =========================================================
+ * CONFIGURATION
+ * =========================================================
+ */
+
+const API_LIST_URL = "../php/api_list_full_table_indice.php";
+const API_CREATE_URL = "../php/api_create_table_indice.php";
+
+/*
+ * =========================================================
+ * ELEMENTS DOM
+ * =========================================================
+ */
+
+const tableauIndices = document.getElementById("tableauIndices");
+const compteur = document.getElementById("compteur");
+const message = document.getElementById("message");
+
+const btnActualiser = document.getElementById("btnActualiser");
+const btnNouveau = document.getElementById("btnNouveau");
+const filtreIndice = document.getElementById("filtreIndice");
+
+const modalNouvelEnregistrement = document.getElementById(
+  "modalNouvelEnregistrement",
+);
+
+const btnFermerModal = document.getElementById("btnFermerModal");
+const btnAnnuler = document.getElementById("btnAnnuler");
+
+const formNouvelEnregistrement = document.getElementById(
+  "formNouvelEnregistrement",
+);
+
+const nouvelIndice = document.getElementById("nouvelIndice");
+const nouveauNom = document.getElementById("nouveauNom");
+const nouvelIsin = document.getElementById("nouvelIsin");
+const nouveauSymbole = document.getElementById("nouveauSymbole");
+
+const nouvelActif = document.getElementById("nouvelActif");
+const nouvelAfficher = document.getElementById("nouvelAfficher");
+
+const messageNouveau = document.getElementById("messageNouveau");
+const btnSauvegarder = document.getElementById("btnSauvegarder");
+
+/*
+ * =========================================================
+ * DONNEES
+ * =========================================================
+ */
+
+let tousLesEnregistrements = [];
+
+/*
+ * =========================================================
+ * AFFICHER MESSAGE GENERAL
+ * =========================================================
+ */
+
+function afficherMessage(texte, type = "info") {
+  message.textContent = texte;
+
+  message.classList.remove(
+    "hidden",
+    "bg-emerald-900/50",
+    "border-emerald-700",
+    "text-emerald-300",
+    "bg-rose-900/50",
+    "border-rose-700",
+    "text-rose-300",
+    "bg-slate-900",
+    "border-slate-700",
+    "text-slate-300",
+  );
+
+  message.classList.add("border");
+
+  if (type === "success") {
+    message.classList.add(
+      "bg-emerald-900/50",
+      "border-emerald-700",
+      "text-emerald-300",
+    );
+  } else if (type === "error") {
+    message.classList.add("bg-rose-900/50", "border-rose-700", "text-rose-300");
+  } else {
+    message.classList.add("bg-slate-900", "border-slate-700", "text-slate-300");
+  }
+}
+
+/*
+ * =========================================================
+ * CACHER MESSAGE GENERAL
+ * =========================================================
+ */
+
+function cacherMessage() {
+  message.classList.add("hidden");
+}
+
+/*
+ * =========================================================
+ * MESSAGE MODAL
+ * =========================================================
+ */
+
+function afficherMessageNouveau(texte, type = "info") {
+  messageNouveau.textContent = texte;
+
+  messageNouveau.classList.remove(
+    "hidden",
+    "bg-emerald-900/50",
+    "border-emerald-700",
+    "text-emerald-300",
+    "bg-rose-900/50",
+    "border-rose-700",
+    "text-rose-300",
+    "bg-slate-900",
+    "border-slate-700",
+    "text-slate-300",
+  );
+
+  messageNouveau.classList.add("border");
+
+  if (type === "success") {
+    messageNouveau.classList.add(
+      "bg-emerald-900/50",
+      "border-emerald-700",
+      "text-emerald-300",
+    );
+  } else if (type === "error") {
+    messageNouveau.classList.add(
+      "bg-rose-900/50",
+      "border-rose-700",
+      "text-rose-300",
+    );
+  } else {
+    messageNouveau.classList.add(
+      "bg-slate-900",
+      "border-slate-700",
+      "text-slate-300",
+    );
+  }
+}
+
+/*
+ * =========================================================
+ * CACHER MESSAGE MODAL
+ * =========================================================
+ */
+
+function cacherMessageNouveau() {
+  messageNouveau.classList.add("hidden");
+  messageNouveau.textContent = "";
+}
+
+/*
+ * =========================================================
+ * ECHAPPER HTML
+ * =========================================================
+ */
+
+function echapperHTML(valeur) {
+  if (valeur === null || valeur === undefined) {
+    return "";
+  }
+
+  return String(valeur)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+/*
+ * =========================================================
+ * CHECKBOX
+ * =========================================================
+ */
+
+function creerCheckbox(valeur) {
+  const checked = Number(valeur) === 1 || valeur === true || valeur === "1";
+
+  return `
+    <div class="flex justify-center items-center">
+      <input
+        type="checkbox"
+        ${checked ? "checked" : ""}
+        disabled
+        class="w-5 h-5
+               accent-emerald-500
+               cursor-not-allowed
+               opacity-90"
+      />
+    </div>
+  `;
+}
+
+/*
+ * =========================================================
+ * CREER UNE LIGNE
+ * =========================================================
+ */
+
+function creerLigne(enregistrement) {
+  return `
+    <tr class="hover:bg-slate-700/30 transition-colors">
+
+      <!-- ID -->
+
+      <td class="px-4 py-3 text-sm text-slate-500 whitespace-nowrap">
+        ${echapperHTML(enregistrement.id)}
+      </td>
+
+      <!-- Indice -->
+
+      <td class="px-4 py-3 whitespace-nowrap">
+        <span
+          class="inline-flex items-center
+                 px-2.5 py-1
+                 rounded-lg
+                 bg-slate-700
+                 border border-slate-600
+                 text-xs font-semibold
+                 text-slate-200"
+        >
+          ${echapperHTML(enregistrement.indice)}
+        </span>
+      </td>
+
+      <!-- Nom -->
+
+      <td class="px-4 py-3 text-sm font-medium text-white whitespace-nowrap">
+        ${echapperHTML(enregistrement.nom)}
+      </td>
+
+      <!-- ISIN -->
+
+      <td class="px-4 py-3 text-sm text-slate-300 font-mono whitespace-nowrap">
+        ${echapperHTML(enregistrement.isin)}
+      </td>
+
+      <!-- Symbole -->
+
+      <td class="px-4 py-3 text-sm text-slate-300 font-semibold whitespace-nowrap">
+        ${echapperHTML(enregistrement.symbole)}
+      </td>
+
+      <!-- Actif -->
+
+      <td class="px-4 py-3 text-center">
+        ${creerCheckbox(enregistrement.actif)}
+      </td>
+
+      <!-- Afficher -->
+
+      <td class="px-4 py-3 text-center">
+        ${creerCheckbox(enregistrement.afficher)}
+      </td>
+
+      <!-- Updated -->
+
+      <td class="px-4 py-3 text-xs text-slate-400 whitespace-nowrap">
+        ${echapperHTML(enregistrement.updated_at)}
+      </td>
+
+      <!-- Created -->
+
+      <td class="px-4 py-3 text-xs text-slate-500 whitespace-nowrap">
+        ${echapperHTML(enregistrement.created_at)}
+      </td>
+
+    </tr>
+  `;
+}
+
+/*
+ * =========================================================
+ * CONSTRUIRE LES FILTRES
+ * =========================================================
+ */
+
+function construireFiltres() {
+  const filtreActuel = filtreIndice.value;
+
+  const indices = [
+    ...new Set(
+      tousLesEnregistrements
+        .map(function (enregistrement) {
+          return enregistrement.indice;
+        })
+        .filter(function (indice) {
+          return (
+            indice !== null &&
+            indice !== undefined &&
+            String(indice).trim() !== ""
+          );
+        }),
+    ),
+  ];
+
+  indices.sort(function (a, b) {
+    return String(a).localeCompare(String(b), "fr", {
+      sensitivity: "base",
+    });
+  });
+
+  filtreIndice.innerHTML = "";
+
+  /*
+   * Tout
+   */
+
+  const optionTout = document.createElement("option");
+
+  optionTout.value = "tout";
+  optionTout.textContent = "Tout";
+
+  filtreIndice.appendChild(optionTout);
+
+  /*
+   * Afficher
+   */
+
+  const optionAfficher = document.createElement("option");
+
+  optionAfficher.value = "afficher";
+  optionAfficher.textContent = "Afficher";
+
+  filtreIndice.appendChild(optionAfficher);
+
+  /*
+   * Inactif
+   */
+
+  const optionInactif = document.createElement("option");
+
+  optionInactif.value = "inactif";
+  optionInactif.textContent = "Inactif";
+
+  filtreIndice.appendChild(optionInactif);
+
+  /*
+   * Indices
+   */
+
+  indices.forEach(function (indice) {
+    const option = document.createElement("option");
+
+    option.value = "indice:" + indice;
+    option.textContent = indice;
+
+    filtreIndice.appendChild(option);
+  });
+
+  /*
+   * Restaurer le filtre
+   */
+
+  const optionExiste = Array.from(filtreIndice.options).some(function (option) {
+    return option.value === filtreActuel;
+  });
+
+  filtreIndice.value = optionExiste ? filtreActuel : "tout";
+}
+
+/*
+ * =========================================================
+ * APPLIQUER LE FILTRE
+ * =========================================================
+ */
+
+function appliquerFiltre() {
+  const filtre = filtreIndice.value;
+
+  let enregistrementsFiltres;
+
+  if (filtre === "tout") {
+    enregistrementsFiltres = tousLesEnregistrements;
+  } else if (filtre === "afficher") {
+    enregistrementsFiltres = tousLesEnregistrements.filter(
+      function (enregistrement) {
+        return Number(enregistrement.afficher) === 1;
+      },
+    );
+  } else if (filtre === "inactif") {
+    enregistrementsFiltres = tousLesEnregistrements.filter(
+      function (enregistrement) {
+        return Number(enregistrement.actif) === 0;
+      },
+    );
+  } else if (filtre.startsWith("indice:")) {
+    const indiceRecherche = filtre.substring("indice:".length);
+
+    enregistrementsFiltres = tousLesEnregistrements.filter(
+      function (enregistrement) {
+        return (
+          String(enregistrement.indice).toLowerCase() ===
+          String(indiceRecherche).toLowerCase()
+        );
+      },
+    );
+  } else {
+    enregistrementsFiltres = tousLesEnregistrements;
+  }
+
+  afficherDonneesFiltrees(enregistrementsFiltres);
+}
+
+/*
+ * =========================================================
+ * AFFICHER DONNEES FILTREES
+ * =========================================================
+ */
+
+function afficherDonneesFiltrees(enregistrements) {
+  tableauIndices.innerHTML = "";
+
+  if (!Array.isArray(enregistrements) || enregistrements.length === 0) {
+    compteur.textContent = "0 enregistrement";
+
+    tableauIndices.innerHTML = `
+      <tr>
+        <td
+          colspan="9"
+          class="px-6 py-10 text-center text-sm text-slate-500"
+        >
+          Aucun enregistrement correspondant
+          au filtre sélectionné.
+        </td>
+      </tr>
+    `;
+
+    return;
+  }
+
+  /*
+   * IMPORTANT :
+   * tri systématique par ID croissant.
+   */
+
+  const donneesTriees = [...enregistrements].sort(function (a, b) {
+    return Number(a.id) - Number(b.id);
+  });
+
+  let html = "";
+
+  donneesTriees.forEach(function (enregistrement) {
+    html += creerLigne(enregistrement);
+  });
+
+  tableauIndices.innerHTML = html;
+
+  compteur.textContent =
+    donneesTriees.length +
+    (donneesTriees.length > 1 ? " enregistrements" : " enregistrement");
+}
+
+/*
+ * =========================================================
+ * AFFICHER DONNEES
+ * =========================================================
+ */
+
+function afficherDonnees(data) {
+  tousLesEnregistrements = Array.isArray(data) ? data : [];
+
+  /*
+   * Tri global par ID croissant.
+   */
+
+  tousLesEnregistrements.sort(function (a, b) {
+    return Number(a.id) - Number(b.id);
+  });
+
+  construireFiltres();
+
+  appliquerFiltre();
+}
+
+/*
+ * =========================================================
+ * CHARGER LES DONNEES
+ * =========================================================
+ */
+
+async function chargerDonnees() {
+  btnActualiser.disabled = true;
+
+  btnActualiser.textContent = "↻ Chargement...";
+
+  afficherMessage("Chargement des indices et des actions...", "info");
+
+  try {
+    const response = await fetch(API_LIST_URL, {
+      method: "GET",
+      credentials: "same-origin",
+      cache: "no-store",
+      headers: {
+        Accept: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error("Erreur HTTP " + response.status);
+    }
+
+    const result = await response.json();
+
+    if (!result || result.status !== "success") {
+      throw new Error(
+        result && result.message
+          ? result.message
+          : "L'API a retourné une erreur.",
+      );
+    }
+
+    afficherDonnees(result.data);
+
+    cacherMessage();
+  } catch (error) {
+    console.error("Erreur chargement indices/actions :", error);
+
+    tableauIndices.innerHTML = `
+      <tr>
+        <td
+          colspan="9"
+          class="px-6 py-10 text-center text-rose-400"
+        >
+          Impossible de charger les données.
+        </td>
+      </tr>
+    `;
+
+    compteur.textContent = "Erreur de chargement";
+
+    afficherMessage(
+      "Erreur lors de la récupération des données : " + error.message,
+      "error",
+    );
+  } finally {
+    btnActualiser.disabled = false;
+
+    btnActualiser.textContent = "↻ Actualiser";
+  }
+}
+
+/*
+ * =========================================================
+ * OUVRIR MODAL
+ * =========================================================
+ */
+
+function ouvrirModal() {
+  cacherMessageNouveau();
+
+  /*
+   * Valeurs par défaut
+   */
+
+  formNouvelEnregistrement.reset();
+
+  nouvelActif.checked = true;
+  nouvelAfficher.checked = true;
+
+  modalNouvelEnregistrement.classList.remove("hidden");
+
+  modalNouvelEnregistrement.classList.add("flex");
+
+  /*
+   * Focus sur Indice
+   */
+
+  setTimeout(function () {
+    nouvelIndice.focus();
+  }, 100);
+}
+
+/*
+ * =========================================================
+ * FERMER MODAL
+ * =========================================================
+ */
+
+function fermerModal() {
+  modalNouvelEnregistrement.classList.add("hidden");
+
+  modalNouvelEnregistrement.classList.remove("flex");
+
+  cacherMessageNouveau();
+}
+
+/*
+ * =========================================================
+ * SAUVEGARDER NOUVEL ENREGISTREMENT
+ * =========================================================
+ */
+
+async function sauvegarderNouvelEnregistrement() {
+  const donnees = {
+    indice: nouvelIndice.value.trim(),
+    nom: nouveauNom.value.trim(),
+    isin: nouvelIsin.value.trim().toUpperCase(),
+    symbole: nouveauSymbole.value.trim().toUpperCase(),
+    actif: nouvelActif.checked ? 1 : 0,
+    afficher: nouvelAfficher.checked ? 1 : 0,
+  };
+
+  /*
+   * Validation côté client
+   */
+
+  if (!donnees.indice) {
+    afficherMessageNouveau("Le champ Indice est obligatoire.", "error");
+
+    nouvelIndice.focus();
+
+    return;
+  }
+
+  if (!donnees.nom) {
+    afficherMessageNouveau("Le champ Nom est obligatoire.", "error");
+
+    nouveauNom.focus();
+
+    return;
+  }
+
+  if (!donnees.isin) {
+    afficherMessageNouveau("Le champ ISIN est obligatoire.", "error");
+
+    nouvelIsin.focus();
+
+    return;
+  }
+
+  if (!donnees.symbole) {
+    afficherMessageNouveau("Le champ Symbole est obligatoire.", "error");
+
+    nouveauSymbole.focus();
+
+    return;
+  }
+
+  /*
+   * Désactivation du bouton
+   */
+
+  btnSauvegarder.disabled = true;
+
+  btnSauvegarder.textContent = "Sauvegarde...";
+
+  cacherMessageNouveau();
+
+  try {
+    const response = await fetch(API_CREATE_URL, {
+      method: "POST",
+
+      credentials: "same-origin",
+
+      headers: {
+        "Content-Type": "application/json",
+
+        Accept: "application/json",
+      },
+
+      body: JSON.stringify(donnees),
+    });
+
+    const result = await response.json();
+
+    if (!response.ok || !result || result.status !== "success") {
+      throw new Error(
+        result && result.message
+          ? result.message
+          : "Impossible de créer l'enregistrement.",
+      );
+    }
+
+    /*
+     * Succès
+     */
+
+    afficherMessageNouveau("Enregistrement créé avec succès.", "success");
+
+    /*
+     * On recharge la table.
+     */
+
+    await chargerDonnees();
+
+    /*
+     * Petite pause pour laisser voir
+     * le message de succès.
+     */
+
+    setTimeout(function () {
+      fermerModal();
+    }, 500);
+  } catch (error) {
+    console.error("Erreur création enregistrement :", error);
+
+    afficherMessageNouveau("Erreur : " + error.message, "error");
+  } finally {
+    btnSauvegarder.disabled = false;
+
+    btnSauvegarder.textContent = "Sauvegarder";
+  }
+}
+
+/*
+ * =========================================================
+ * CHANGEMENT DE FILTRE
+ * =========================================================
+ */
+
+filtreIndice.addEventListener("change", function () {
+  appliquerFiltre();
+});
+
+/*
+ * =========================================================
+ * BOUTON ACTUALISER
+ * =========================================================
+ */
+
+btnActualiser.addEventListener("click", function () {
+  chargerDonnees();
+});
+
+/*
+ * =========================================================
+ * BOUTON NOUVEAU
+ * ========================================================= */
+
+btnNouveau.addEventListener("click", function () {
+  ouvrirModal();
+});
+
+/*
+ * =========================================================
+ * FERMETURE MODAL
+ * =========================================================
+ */
+
+btnFermerModal.addEventListener("click", function () {
+  fermerModal();
+});
+
+btnAnnuler.addEventListener("click", function () {
+  fermerModal();
+});
+
+/*
+ * =========================================================
+ * CLIC SUR LE FOND DU MODAL
+ * =========================================================
+ */
+
+modalNouvelEnregistrement.addEventListener("click", function (event) {
+  if (event.target === modalNouvelEnregistrement) {
+    fermerModal();
+  }
+});
+
+/*
+ * =========================================================
+ * TOUCHE ESC
+ * =========================================================
+ */
+
+document.addEventListener("keydown", function (event) {
+  if (
+    event.key === "Escape" &&
+    !modalNouvelEnregistrement.classList.contains("hidden")
+  ) {
+    fermerModal();
+  }
+});
+
+/*
+ * =========================================================
+ * SOUMISSION FORMULAIRE
+ * =========================================================
+ */
+
+formNouvelEnregistrement.addEventListener("submit", function (event) {
+  event.preventDefault();
+
+  sauvegarderNouvelEnregistrement();
+});
+
+/*
+ * =========================================================
+ * ISIN EN MAJUSCULES
+ * =========================================================
+ */
+
+nouvelIsin.addEventListener("input", function () {
+  nouvelIsin.value = nouvelIsin.value.toUpperCase();
+});
+
+/*
+ * =========================================================
+ * SYMBOLE EN MAJUSCULES
+ * =========================================================
+ */
+
+nouveauSymbole.addEventListener("input", function () {
+  nouveauSymbole.value = nouveauSymbole.value.toUpperCase();
+});
+
+/*
+ * =========================================================
+ * INITIALISATION
+ * =========================================================
+ */
+
+document.addEventListener("DOMContentLoaded", function () {
+  chargerDonnees();
+});
diff --git a/php/api_create_table_indice.php b/php/api_create_table_indice.php
new file mode 100644
index 0000000..4f5e14e
--- /dev/null
+++ b/php/api_create_table_indice.php
@@ -0,0 +1,385 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * =========================================================
+ * API : CREATION D'UN ENREGISTREMENT DANS indice
+ * =========================================================
+ *
+ * Méthode :
+ * POST
+ *
+ * Content-Type :
+ * application/json
+ *
+ * Données attendues :
+ *
+ * {
+ *     "indice": "CAC40",
+ *     "nom": "Accor",
+ *     "isin": "FR0000120404",
+ *     "symbole": "AC",
+ *     "actif": 1,
+ *     "afficher": 1
+ * }
+ *
+ * =========================================================
+ */
+
+require_once __DIR__ . '/database.php';
+
+header(
+    'Content-Type: application/json; charset=utf-8'
+);
+
+/*
+ * =========================================================
+ * FONCTION REPONSE JSON
+ * =========================================================
+ */
+
+function reponseJson(
+    array $data,
+    int $httpCode = 200
+): never {
+
+    http_response_code($httpCode);
+
+    echo json_encode(
+        $data,
+        JSON_UNESCAPED_UNICODE |
+            JSON_UNESCAPED_SLASHES
+    );
+
+    exit;
+}
+
+/*
+ * =========================================================
+ * VERIFICATION METHODE HTTP
+ * =========================================================
+ */
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Méthode HTTP non autorisée. Utilisez POST.'
+        ],
+        405
+    );
+}
+
+/*
+ * =========================================================
+ * LECTURE DU JSON
+ * =========================================================
+ */
+
+$contenu = file_get_contents('php://input');
+
+if ($contenu === false || trim($contenu) === '') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Aucune donnée reçue.'
+        ],
+        400
+    );
+}
+
+$data = json_decode(
+    $contenu,
+    true
+);
+
+/*
+ * Vérification JSON
+ */
+
+if (
+    !is_array($data) ||
+    json_last_error() !== JSON_ERROR_NONE
+) {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Les données JSON sont invalides.'
+        ],
+        400
+    );
+}
+
+/*
+ * =========================================================
+ * RECUPERATION DES CHAMPS
+ * =========================================================
+ */
+
+$indice = isset($data['indice'])
+    ? trim((string) $data['indice'])
+    : '';
+
+$nom = isset($data['nom'])
+    ? trim((string) $data['nom'])
+    : '';
+
+$isin = isset($data['isin'])
+    ? strtoupper(trim((string) $data['isin']))
+    : '';
+
+$symbole = isset($data['symbole'])
+    ? strtoupper(trim((string) $data['symbole']))
+    : '';
+
+$actif = isset($data['actif'])
+    ? (int) $data['actif']
+    : 1;
+
+$afficher = isset($data['afficher'])
+    ? (int) $data['afficher']
+    : 1;
+
+/*
+ * =========================================================
+ * VALIDATION
+ * =========================================================
+ */
+
+if ($indice === '') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le champ indice est obligatoire.'
+        ],
+        400
+    );
+}
+
+if ($nom === '') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le champ nom est obligatoire.'
+        ],
+        400
+    );
+}
+
+if ($isin === '') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le champ ISIN est obligatoire.'
+        ],
+        400
+    );
+}
+
+if ($symbole === '') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le champ symbole est obligatoire.'
+        ],
+        400
+    );
+}
+
+/*
+ * =========================================================
+ * VALIDATION ISIN
+ * =========================================================
+ *
+ * Un ISIN comporte normalement 12 caractères.
+ *
+ * =========================================================
+ */
+
+if (strlen($isin) !== 12) {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le code ISIN doit comporter exactement 12 caractères.'
+        ],
+        400
+    );
+}
+
+/*
+ * Vérification du format général :
+ *
+ * 2 lettres pays
+ * 9 caractères
+ * 1 chiffre de contrôle
+ */
+
+if (
+    !preg_match(
+        '/^[A-Z]{2}[A-Z0-9]{9}[0-9]$/',
+        $isin
+    )
+) {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le format du code ISIN est invalide.'
+        ],
+        400
+    );
+}
+
+/*
+ * =========================================================
+ * NORMALISATION DES BOOLÉENS
+ * =========================================================
+ */
+
+$actif = $actif === 1 ? 1 : 0;
+
+$afficher = $afficher === 1 ? 1 : 0;
+
+/*
+ * =========================================================
+ * INSERTION MYSQL
+ * =========================================================
+ */
+
+try {
+
+    $sql = "
+        INSERT INTO indice
+        (
+            indice,
+            nom,
+            isin,
+            symbole,
+            actif,
+            afficher
+        )
+        VALUES
+        (
+            :indice,
+            :nom,
+            :isin,
+            :symbole,
+            :actif,
+            :afficher
+        )
+    ";
+
+    $stmt = $pdo->prepare($sql);
+
+    $stmt->execute(
+        [
+            ':indice' => $indice,
+            ':nom' => $nom,
+            ':isin' => $isin,
+            ':symbole' => $symbole,
+            ':actif' => $actif,
+            ':afficher' => $afficher
+        ]
+    );
+
+    /*
+     * ID créé
+     */
+
+    $id = (int) $pdo->lastInsertId();
+
+    /*
+     * =====================================================
+     * RELIRE L'ENREGISTREMENT CREE
+     * =====================================================
+     */
+
+    $sqlLecture = "
+        SELECT
+            id,
+            indice,
+            nom,
+            isin,
+            symbole,
+            actif,
+            afficher,
+            updated_at,
+            created_at
+        FROM indice
+        WHERE id = :id
+        LIMIT 1
+    ";
+
+    $stmtLecture = $pdo->prepare(
+        $sqlLecture
+    );
+
+    $stmtLecture->execute(
+        [
+            ':id' => $id
+        ]
+    );
+
+    $enregistrement =
+        $stmtLecture->fetch();
+
+    /*
+     * =====================================================
+     * REPONSE
+     * =====================================================
+     */
+
+    reponseJson(
+        [
+            'status' => 'success',
+            'message' => 'Enregistrement créé avec succès.',
+            'id' => $id,
+            'data' => $enregistrement
+        ],
+        201
+    );
+} catch (PDOException $e) {
+
+    /*
+     * =====================================================
+     * GESTION ERREUR MYSQL
+     * =====================================================
+     */
+
+    error_log(
+        'api_create_table_indice.php : ' .
+            $e->getMessage()
+    );
+
+    /*
+     * Détection d'une contrainte UNIQUE
+     */
+
+    if ((int) $e->errorInfo[1] === 1062) {
+
+        reponseJson(
+            [
+                'status' => 'error',
+                'message' => 'Cet enregistrement existe déjà.'
+            ],
+            409
+        );
+    }
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Erreur lors de la création de l\'enregistrement.'
+        ],
+        500
+    );
+}
diff --git a/php/api_list_full_table_indice.php b/php/api_list_full_table_indice.php
new file mode 100644
index 0000000..cefc217
--- /dev/null
+++ b/php/api_list_full_table_indice.php
@@ -0,0 +1,75 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * =========================================================
+ * API : LECTURE COMPLETE DE LA TABLE indice
+ * =========================================================
+ */
+
+require_once __DIR__ . '/database.php';
+
+header(
+    'Content-Type: application/json; charset=utf-8'
+);
+
+try {
+
+    /*
+     * Lecture de toute la table
+     */
+
+    $sql = "
+        SELECT
+            id,
+            indice,
+            nom,
+            isin,
+            symbole,
+            actif,
+            afficher,
+            updated_at,
+            created_at
+        FROM indice
+        ORDER BY
+            indice ASC,
+            nom ASC
+    ";
+
+    $stmt = $pdo->prepare($sql);
+
+    $stmt->execute();
+
+    $data = $stmt->fetchAll();
+
+
+    /*
+     * Réponse JSON
+     */
+
+    echo json_encode(
+        [
+            'status' => 'success',
+            'count'  => count($data),
+            'data'   => $data
+        ],
+        JSON_UNESCAPED_UNICODE |
+            JSON_UNESCAPED_SLASHES
+    );
+} catch (PDOException $e) {
+
+    /*
+     * Erreur MySQL
+     */
+
+    http_response_code(500);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Erreur lors de la lecture de la table indice.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+}
