add PWA styles and offline indicator

css/styles.css

@@ -98,6 +98,64 @@ img {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
+/* PWA Install Button */
+.install-pwa-button {
+    background: var(--primary-red);
+    color: white;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    margin-right: 10px;
+}
+
+.install-pwa-button:hover {
+    background: #cc0000;
+}
+
+.install-pwa-button:active {
+    transform: scale(0.95);
+}
+
+/* PWA Styles */
+@media (display-mode: standalone) {
+    body {
+        padding-top: env(safe-area-inset-top);
+    }
+    
+    .header {
+        padding-top: env(safe-area-inset-top);
+    }
+}
+
+/* Offline indicator */
+.offline-indicator {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: #ff4444;
+    color: white;
+    text-align: center;
+    padding: 10px;
+    z-index: 1000;
+    display: none;
+}
+
+.offline-indicator.show {
+    display: block;
+}
+
+/* Enhanced mobile experience */
+@media (max-width: 768px) {
+    .install-pwa-button {
+        padding: 6px 10px;
+        font-size: 14px;
+    }
+}
+
 /* Styles pour la page active dans la sidebar */
 .nav-item.active {
     background-color: rgba(255, 0, 0, 0.08);