diff --git a/pages/home.php b/pages/home.php
index 2c31bb2..d806bad 100644
--- a/pages/home.php
+++ b/pages/home.php
@@ -13,10 +13,11 @@ require_once('./../elements/header.php');
 
 ?>
 <!-- Message d'alerte pour les utilisateurs de la démo -->
-<div class="alert-message">
-    <p>Si le CSS ou les images s'affichent mal, pensez à vider
-        le cache de votre navigateur (Ctrl + F5 ou Cmd + Shift + R) pour voir les dernières modifications. Version de développement uniquement.</p>
-</div>
+<p class="dev-cache-notice">
+    <strong>Version de développement uniquement.</strong>
+    Si le CSS ou les images s'affichent mal, pensez à vider le cache de votre navigateur
+    (Ctrl + F5 ou Cmd + Shift + R) pour voir les dernières modifications.
+</p>
 
 <!-- Section d'exploration rapide -->
 <section class="quick-links-section">
diff --git a/styles/primary_css.css b/styles/primary_css.css
index dab5dc3..9284b09 100644
--- a/styles/primary_css.css
+++ b/styles/primary_css.css
@@ -64,6 +64,39 @@ nav a:hover {
     }
 }
 
+.dev-cache-notice {
+    margin: 24px auto;
+    padding: 16px 20px;
+    max-width: 900px;
+    border-radius: 14px;
+    background: linear-gradient(135deg, rgba(255, 196, 0, 0.16), rgba(255, 140, 0, 0.10));
+    border: 1px solid rgba(255, 196, 0, 0.35);
+    color: #fff3cd;
+    font-size: 0.98rem;
+    line-height: 1.6;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
+    backdrop-filter: blur(6px);
+}
+
+.dev-cache-notice strong {
+    color: #ffd86b;
+}
+
+.dev-cache-notice::before {
+    content: "⚠️";
+    margin-right: 10px;
+    font-size: 1.1rem;
+}
+
+@media (max-width: 768px) {
+    .dev-cache-notice {
+        margin: 16px;
+        padding: 14px 16px;
+        font-size: 0.93rem;
+    }
+}
+
+
 /* ---- PAGE LOGIN ---- */
 
 /* Centre la carte au milieu de la page */