diff --git a/frontend/src/styles.css b/frontend/src/styles.css
new file mode 100644
index 0000000..3b241fc
--- /dev/null
+++ b/frontend/src/styles.css
@@ -0,0 +1,298 @@
+:root {
+  --bg: #ffffff;
+  --panel: #f6f6f9;
+  --fg: #1b1b1f;
+  --muted: #6b6b76;
+  --border: #e1e1e8;
+  --accent: #6965db;
+  --accent-soft: #e3e2fe;
+  --danger: #c92a2a;
+  --ok: #2b8a3e;
+  --warn: #e67700;
+  --topbar-h: 44px;
+  --drawer-w: 300px;
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  --bg: #121212;
+  --panel: #1e1e22;
+  --fg: #e4e4ea;
+  --muted: #9a9aa6;
+  --border: #33333a;
+  --accent: #a8a5ff;
+  --accent-soft: #2e2d4d;
+  --danger: #ff6b6b;
+  --ok: #69db7c;
+  --warn: #ffa94d;
+  color-scheme: dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--fg);
+  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+
+button,
+.actions a {
+  font: inherit;
+  color: inherit;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 5px 10px;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+button:hover:not(:disabled),
+.actions a:hover {
+  border-color: var(--accent);
+}
+button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.icon-btn {
+  border: none;
+  background: transparent;
+  padding: 4px 8px;
+  font-size: 16px;
+}
+.muted {
+  color: var(--muted);
+}
+.danger {
+  color: var(--danger);
+}
+.error {
+  margin: 6px 0;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
+  cursor: pointer;
+}
+
+/* --- Mise en page ----------------------------------------------------------- */
+
+.app {
+  display: grid;
+  grid-template-rows: var(--topbar-h) 1fr;
+  grid-template-columns: 0 1fr;
+  height: 100dvh;
+  transition: grid-template-columns 0.15s ease;
+}
+.app.drawer-open {
+  grid-template-columns: var(--drawer-w) 1fr;
+}
+
+.topbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  padding-left: max(8px, env(safe-area-inset-left));
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+  min-width: 0;
+}
+.topbar .title {
+  flex: 1;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.status {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: var(--bg);
+}
+.status.saved {
+  color: var(--ok);
+}
+.status.dirty,
+.status.saving {
+  color: var(--warn);
+}
+.status.error {
+  color: var(--danger);
+}
+
+.drawer {
+  grid-area: 2 / 1;
+  overflow: hidden;
+  border-right: 1px solid var(--border);
+  background: var(--panel);
+  min-width: 0;
+}
+.backdrop {
+  display: none;
+}
+
+.canvas {
+  grid-area: 2 / 2;
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+}
+.canvas > .error {
+  position: absolute;
+  z-index: 10;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.placeholder {
+  height: 100%;
+  display: grid;
+  place-items: center;
+  padding: 16px;
+  text-align: center;
+}
+
+/* --- Explorateur ------------------------------------------------------------ */
+
+.explorer {
+  width: var(--drawer-w);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 6px;
+}
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.search {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+}
+.crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  font-size: 13px;
+}
+.crumbs button {
+  border: 1px dashed transparent;
+  background: transparent;
+  padding: 2px 4px;
+}
+.entries {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+.entries .empty {
+  padding: 12px 8px;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 6px;
+  border: 1px dashed transparent;
+}
+.row:hover {
+  background: var(--bg);
+}
+li.active > .row {
+  background: var(--accent-soft);
+}
+.row.drop,
+.crumbs button.drop {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+.row .name {
+  flex: 1;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+  text-align: left;
+  border: none;
+  background: transparent;
+  padding: 7px 6px;
+}
+.row .label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.row .meta {
+  font-size: 11px;
+  white-space: nowrap;
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  padding: 4px 6px 8px 30px;
+  font-size: 13px;
+}
+
+/* --- Mobile : l'explorateur devient un tiroir superposé -------------------- */
+
+@media (max-width: 768px) {
+  .app,
+  .app.drawer-open {
+    grid-template-columns: 0 1fr;
+  }
+  .drawer {
+    position: fixed;
+    z-index: 20;
+    top: var(--topbar-h);
+    bottom: 0;
+    left: 0;
+    width: min(var(--drawer-w), 88vw);
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    box-shadow: 2px 0 12px rgb(0 0 0 / 0.2);
+  }
+  .explorer {
+    width: 100%;
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+  }
+  .drawer-open .drawer {
+    transform: none;
+  }
+  .drawer-open .backdrop {
+    display: block;
+    position: fixed;
+    z-index: 15;
+    inset: var(--topbar-h) 0 0 0;
+    background: rgb(0 0 0 / 0.35);
+  }
+  .row .meta,
+  .topbar .status {
+    display: none;
+  }
+  .row .name {
+    padding: 10px 6px; /* cibles tactiles plus grandes */
+  }
+}