diff --git a/index.html b/index.html
index 2c027bc..e1d3feb 100644
--- a/index.html
+++ b/index.html
@@ -249,6 +249,36 @@
       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 ===== */
     footer {
       background: #0a0c14;
@@ -346,48 +376,53 @@
       </div>
       <div class="apps-grid">
             <!-- Gestion des Formations -->
-            <a class="app-card" href="https://formations.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+            <a class="app-card" data-app-id="formation-manager-itinova" href="https://formations.recette.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">Recette</div>
+              <div class="card-status-badge">Hors ligne</div>
             </a>
 
         <!-- Itinova Contacts -->
-        <a class="app-card" href="https://contacts.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <a class="app-card" data-app-id="itinova-contacts" href="https://contacts.recette.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">Recette</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
         <!-- Itinova Podcasts -->
-        <a class="app-card" href="https://podcasts.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <a class="app-card" data-app-id="itinova-podcasts" href="https://podcasts.recette.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">Recette</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
         <!-- Veille Stratégique -->
-        <a class="app-card" href="https://veille.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <a class="app-card" data-app-id="veille-reglementaire" href="https://veille.recette.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">Recette</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
         <!-- Itinova Gestion de Flotte -->
-        <a class="app-card" href="https://flotte.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <a class="app-card" data-app-id="itinova-vehicle-exchange" href="https://flotte.recette.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">Recette</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
       </div>
@@ -402,31 +437,34 @@
       <div class="apps-grid">
 
         <!-- Sonum -->
-        <a class="app-card" href="https://sonum.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <a class="app-card" data-app-id="sonum" href="https://sonum.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
           <div class="card-image-wrapper">
             <img src="images/sonum.png" alt="Sonum" />
           </div>
           <div class="card-name">Sonum</div>
           <div class="card-env-badge">Recette</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
         <!-- Facturation Santinova -->
-        <a class="app-card" href="https://facturation.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+        <a class="app-card" data-app-id="facturation-santinova" href="https://facturation.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
           <div class="card-image-wrapper">
             <img src="images/facturation.png" alt="Facturation Santinova" />
           </div>
           <div class="card-name">Facturation Santinova</div>
           <div class="card-env-badge">Recette</div>
+          <div class="card-status-badge">Hors ligne</div>
         </a>
 
       
 <!-- Démat Facturation DSI -->
-<a class="app-card" href="https://demat-facturation.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
+<a class="app-card" data-app-id="demat-facturation" href="https://demat-facturation.recette.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">Recette</div>
+  <div class="card-status-badge">Hors ligne</div>
 </a>
 </div>
     </div>
@@ -444,8 +482,10 @@
 
 
   <script>
+    // URL de l'API de statut du dashboard (même serveur, port 3001)
+    var DASHBOARD_STATUS_URL = 'https://dashboard.recette.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+)'/);
@@ -466,8 +506,51 @@
       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>