diff --git a/static/css/app.css b/static/css/app.css
index b174b2a..1def8e0 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -2476,3 +2476,26 @@ input, select, textarea { font-family: inherit; color: inherit; }
   white-space: nowrap;
 }
 .empty-toolbar-item:hover { background: var(--bg-hover); border-color: var(--text-dim); }
+
+/* ══════════ Responsive — écrans < 1024px ══════════ */
+@media (max-width: 1024px) {
+  .sidebar { width: 240px; }
+  .main-content { margin-left: 240px; }
+  .topbar { padding: 8px 12px; }
+  .page-editor-wrapper { padding: 24px 16px; }
+  .workspace-layout { padding: 24px 16px; }
+  .settings-layout { padding: 24px 16px; }
+}
+@media (max-width: 768px) {
+  .sidebar { display: none; }
+  .sidebar.mobile-open { display: block; position: fixed; z-index: 1000; top: 0; left: 0; bottom: 0; width: 280px; }
+  .main-content { margin-left: 0; }
+  .topbar-left { max-width: 200px; }
+  .topbar-right { gap: 4px; }
+  .page-topbar { flex-wrap: wrap; gap: 8px; }
+  .page-topbar-right { flex-wrap: wrap; }
+  .project-grid { grid-template-columns: 1fr; }
+  .share-dialog { width: 90vw; right: -16px; }
+  .get-started-toolbar { flex-wrap: wrap; justify-content: center; }
+  .gs-pill { font-size: 12px; padding: 6px 12px; }
+}