diff --git a/index.html b/index.html
index a4401c4..dcd4f71 100644
--- a/index.html
+++ b/index.html
@@ -240,13 +240,43 @@
       margin-top: 6px;
       font-size: 0.7rem;
       font-weight: 600;
-      color: #10b981;
+      color: #6366f1;
       text-transform: uppercase;
       letter-spacing: 0.8px;
-      background: rgba(16,185,129,0.1);
+      background: rgba(99,102,241,0.1);
       padding: 3px 10px;
       border-radius: 10px;
-      border: 1px solid rgba(16,185,129,0.2);
+      border: 1px solid rgba(99,102,241,0.2);
+    }
+
+    /* ===== APP OFFLINE (grisage) ===== */
+    .app-card.offline {
+      opacity: 0.42;
+      pointer-events: none;
+      cursor: not-allowed;
+      filter: grayscale(80%);
+    }
+
+    .app-card.offline .card-image-wrapper {
+      box-shadow: none;
+    }
+
+    .card-status-badge {
+      display: none;
+      margin-top: 4px;
+      font-size: 0.68rem;
+      font-weight: 700;
+      color: #ef4444;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+      background: rgba(239,68,68,0.12);
+      padding: 2px 9px;
+      border-radius: 10px;
+      border: 1px solid rgba(239,68,68,0.3);
+    }
+
+    .app-card.offline .card-status-badge {
+      display: inline-block;
     }
 
     /* ===== FOOTER ===== */
@@ -331,7 +361,7 @@
     </button>
     <button class="tab-btn" onclick="switchTab('santinova', this)">
       Applications Santinova
-      <span class="tab-count">2</span>
+      <span class="tab-count">3</span>
     </button>
   </div>
 
@@ -345,49 +375,54 @@
         <p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
       </div>
       <div class="apps-grid">
+            <!-- Gestion des Formations -->
+            <a class="app-card" data-app-id="formation-manager-itinova" href="https://formations.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+              <div class="card-image-wrapper">
+                <img src="images/formation-manager-itinova.png" alt="Gestion des Formations" />
+              </div>
+              <div class="card-name">Gestion des Formations</div>
+              <div class="card-env-badge">Production</div>
+              <div class="card-status-badge">Hors ligne</div>
+            </a>
 
         <!-- Itinova Contacts -->
-        <a class="app-card" href="https://contacts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <a class="app-card" data-app-id="itinova-contacts" href="https://contacts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
           <div class="card-image-wrapper">
             <img src="images/itinova-contacts.png" alt="Itinova Contacts" />
           </div>
           <div class="card-name">Itinova Contacts</div>
           <div class="card-env-badge">Production</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
         <!-- Itinova Podcasts -->
-        <a class="app-card" href="https://podcasts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <a class="app-card" data-app-id="itinova-podcasts" href="https://podcasts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
           <div class="card-image-wrapper">
             <img src="images/itinova-podcasts.png" alt="Itinova Podcasts" />
           </div>
           <div class="card-name">Itinova Podcasts</div>
           <div class="card-env-badge">Production</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
         <!-- Veille Stratégique -->
-        <a class="app-card" href="https://veille.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <a class="app-card" data-app-id="veille-reglementaire" href="https://veille.santinova-soft.org" target="_blank" rel="noopener noreferrer">
           <div class="card-image-wrapper">
             <img src="images/veille-reglementaire.png" alt="Veille Stratégique" />
           </div>
           <div class="card-name">Veille Stratégique</div>
           <div class="card-env-badge">Production</div>
-        </a>
-        <!-- Gestion des Formations -->
-        <a class="app-card" href="https://formations.itinova.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/formation-manager-itinova.png" alt="Gestion des Formations" />
-          </div>
-          <div class="card-name">Gestion des Formations</div>
-          <div class="card-env-badge">Production</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
         <!-- Itinova Gestion de Flotte -->
-        <a class="app-card" href="https://flotte.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <a class="app-card" data-app-id="itinova-vehicle-exchange" href="https://flotte.santinova-soft.org" target="_blank" rel="noopener noreferrer">
           <div class="card-image-wrapper">
             <img src="images/itinova-flotte.png" alt="Itinova Gestion de Flotte" />
           </div>
           <div class="card-name">Itinova Gestion de Flotte</div>
           <div class="card-env-badge">Production</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
       </div>
@@ -400,25 +435,38 @@
         <p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
       </div>
       <div class="apps-grid">
-        <!-- SONUM -->
-        <a class="app-card" href="https://sonum.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+
+        <!-- Sonum -->
+        <a class="app-card" data-app-id="sonum" href="https://sonum.santinova-soft.org" target="_blank" rel="noopener noreferrer">
           <div class="card-image-wrapper">
-            <img src="images/sonum.png" alt="SONUM" />
+            <img src="images/sonum.png" alt="Sonum" />
           </div>
-          <div class="card-name">SONUM</div>
+          <div class="card-name">Sonum</div>
           <div class="card-env-badge">Production</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
-        <!-- Démat Facturation DSI -->
-        <a class="app-card" href="https://demat-facturation.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <!-- Facturation Santinova -->
+        <a class="app-card" data-app-id="facturation-santinova" href="https://facturation.santinova-soft.org" target="_blank" rel="noopener noreferrer">
           <div class="card-image-wrapper">
-            <img src="images/demat-facturation-dsi.jpg" alt="Démat Facturation DSI" />
+            <img src="images/facturation.png" alt="Facturation Santinova" />
           </div>
-          <div class="card-name">Démat Facturation DSI</div>
+          <div class="card-name">Facturation Santinova</div>
           <div class="card-env-badge">Production</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
-      </div>
+      
+<!-- Démat Facturation DSI -->
+<a class="app-card" data-app-id="demat-facturation" href="https://demat-facturation.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+  <div class="card-image-wrapper">
+    <img src="images/demat-facturation-dsi.jpg" alt="Démat Facturation DSI" />
+  </div>
+  <div class="card-name">Démat Facturation DSI</div>
+  <div class="card-env-badge">Production</div>
+  <div class="card-status-badge">Hors ligne</div>
+</a>
+</div>
     </div>
 
   </main>
@@ -434,8 +482,10 @@
 
 
   <script>
+    // URL de l'API de statut du dashboard (même serveur, port 3001)
+    var DASHBOARD_STATUS_URL = 'https://dashboard.santinova-soft.org/api/public/status';
+
     function updateTabCounts() {
-      // Compter les app-card dans chaque panel et mettre à jour les badges
       document.querySelectorAll('.tab-btn').forEach(function(btn) {
         var onclick = btn.getAttribute('onclick') || '';
         var match = onclick.match(/switchTab\('(\w+)'/);
@@ -456,10 +506,52 @@
       document.getElementById('panel-' + tabName).classList.add('active');
     }
 
-    // Mise à jour au chargement
-    document.addEventListener('DOMContentLoaded', updateTabCounts);
+    /**
+     * Met à jour l'état visuel des tuiles en fonction des statuts reçus du dashboard.
+     * Une tuile est grisée si son statut est 'offline' ou si le conteneur n'est pas en cours d'exécution.
+     */
+    function applyStatuses(statuses) {
+      var cards = document.querySelectorAll('.app-card[data-app-id]');
+      cards.forEach(function(card) {
+        var appId = card.getAttribute('data-app-id');
+        var appStatus = statuses.find(function(s) { return s.id === appId; });
+        if (appStatus) {
+          var isOffline = appStatus.status === 'offline' || !appStatus.containerRunning;
+          if (isOffline) {
+            card.classList.add('offline');
+          } else {
+            card.classList.remove('offline');
+          }
+        }
+      });
+    }
+
+    /**
+     * Interroge le dashboard pour obtenir les statuts et met à jour les tuiles.
+     */
+    function fetchAndApplyStatuses() {
+      fetch(DASHBOARD_STATUS_URL, { cache: 'no-store' })
+        .then(function(response) {
+          if (!response.ok) throw new Error('HTTP ' + response.status);
+          return response.json();
+        })
+        .then(function(statuses) {
+          applyStatuses(statuses);
+        })
+        .catch(function(err) {
+          // En cas d'erreur (dashboard inaccessible), on ne grise rien
+          console.warn('[Portail] Impossible de récupérer les statuts:', err.message);
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+      updateTabCounts();
+      // Premier appel immédiat
+      fetchAndApplyStatuses();
+      // Polling toutes les 30 secondes
+      setInterval(fetchAndApplyStatuses, 30000);
+    });
   </script>
 
 </body>
 </html>
-