From 07337de7d551495cb188c0b06914ffc939dd8836 Mon Sep 17 00:00:00 2001
From: AntoninMignotPilon <antonin.mignotpilon@viacesi.fr>
Date: Sun, 21 Jun 2026 17:48:37 +0200
Subject: [PATCH 01/22] WIP

---
 apps/backend/src/main/resources/instance.json |   2 +-
 apps/frontend/app/actions/theme.ts            |  23 +
 apps/frontend/app/admin/page.tsx              | 270 ++++--
 apps/frontend/app/bookmarks/page.tsx          |  74 +-
 apps/frontend/app/courses/[slug]/page.tsx     |  84 +-
 .../frontend/app/courses/[slug]/read/page.tsx |  23 +-
 apps/frontend/app/courses/page.tsx            |   7 -
 apps/frontend/app/dashboard/page.tsx          |  19 +
 apps/frontend/app/globals.css                 | 299 ++++++-
 apps/frontend/app/layout.tsx                  |  44 +-
 apps/frontend/app/learn/page.tsx              | 214 +++++
 apps/frontend/app/login/login-shell.tsx       | 273 +++---
 apps/frontend/app/page.tsx                    | 399 +++------
 apps/frontend/app/studio/page.tsx             | 242 ++++++
 .../components/admin/course-editor.tsx        | 811 +++++++++++-------
 .../frontend/components/admin/course-form.tsx |   5 +
 apps/frontend/components/block-kinds/code.tsx |   2 +-
 .../components/block-kinds/sandbox.tsx        |   2 +-
 .../components/course/catalog-course-card.tsx |  99 +++
 .../components/course/catalog-grid.tsx        |  86 +-
 .../components/course/course-save-button.tsx  |  63 ++
 .../frontend/components/home/aurora-layer.tsx |  90 ++
 apps/frontend/components/theme-provider.tsx   |  94 ++
 apps/frontend/components/theme-script.tsx     |  15 +
 apps/frontend/components/theme-toggle.tsx     |  69 ++
 apps/frontend/components/top-nav.tsx          |  54 +-
 apps/frontend/components/ui/magnetic.tsx      |  67 ++
 .../components/ui/slide-to-confirm.tsx        | 255 ++++++
 apps/frontend/lib/instance.ts                 |   2 +-
 apps/frontend/lib/theme.ts                    |  27 +
 apps/frontend/messages/en.json                | 164 ++--
 apps/frontend/messages/fr.json                | 167 ++--
 apps/frontend/proxy.ts                        |   2 +-
 33 files changed, 2926 insertions(+), 1121 deletions(-)
 create mode 100644 apps/frontend/app/actions/theme.ts
 create mode 100644 apps/frontend/app/dashboard/page.tsx
 create mode 100644 apps/frontend/app/learn/page.tsx
 create mode 100644 apps/frontend/app/studio/page.tsx
 create mode 100644 apps/frontend/components/course/catalog-course-card.tsx
 create mode 100644 apps/frontend/components/course/course-save-button.tsx
 create mode 100644 apps/frontend/components/home/aurora-layer.tsx
 create mode 100644 apps/frontend/components/theme-provider.tsx
 create mode 100644 apps/frontend/components/theme-script.tsx
 create mode 100644 apps/frontend/components/theme-toggle.tsx
 create mode 100644 apps/frontend/components/ui/magnetic.tsx
 create mode 100644 apps/frontend/components/ui/slide-to-confirm.tsx
 create mode 100644 apps/frontend/lib/theme.ts

diff --git a/apps/backend/src/main/resources/instance.json b/apps/backend/src/main/resources/instance.json
index 74b3b06..cf9e8a4 100644
--- a/apps/backend/src/main/resources/instance.json
+++ b/apps/backend/src/main/resources/instance.json
@@ -2,7 +2,7 @@
   "name": "Codestar",
   "tagline": "Open-source e-learning platform",
   "logo": { "kind": "preset", "value": "star" },
-  "accent": "#7AA9FF",
+  "accent": "#EAB12E",
   "heroTitle": null,
   "heroSubtitle": null,
   "heroCta": null,
diff --git a/apps/frontend/app/actions/theme.ts b/apps/frontend/app/actions/theme.ts
new file mode 100644
index 0000000..0e399d3
--- /dev/null
+++ b/apps/frontend/app/actions/theme.ts
@@ -0,0 +1,23 @@
+"use server";
+
+/**
+ * Persist the chosen theme via `THEME_COOKIE` (non-httpOnly so the inline
+ * <ThemeScript> can read it). Mirrors `actions/locale.ts`.
+ */
+
+import { cookies } from "next/headers";
+import { revalidatePath } from "next/cache";
+
+import { THEME_COOKIE, isTheme } from "@/lib/theme";
+
+export async function setThemeAction(value: string) {
+  if (!isTheme(value)) return;
+  const cookieStore = await cookies();
+  cookieStore.set(THEME_COOKIE, value, {
+    path: "/",
+    maxAge: 60 * 60 * 24 * 365, // 1 year
+    sameSite: "lax",
+    httpOnly: false,
+  });
+  revalidatePath("/", "layout");
+}
diff --git a/apps/frontend/app/admin/page.tsx b/apps/frontend/app/admin/page.tsx
index 5f398d0..f8c5df3 100644
--- a/apps/frontend/app/admin/page.tsx
+++ b/apps/frontend/app/admin/page.tsx
@@ -3,11 +3,10 @@ import Link from "next/link";
 import { getLocale, getTranslations } from "next-intl/server";
 
 import { getInstanceBranding } from "@/app/actions/instance";
-import {
-  getAllCourses,
-  getMyAuthoredCourses,
-} from "@/app/actions/courses";
-import { getMyGroups, getAllGroups } from "@/app/actions/groups";
+import { getAllCourses } from "@/app/actions/courses";
+import { getAllGroups } from "@/app/actions/groups";
+import { getSettings } from "@/app/actions/settings";
+import { getAllUsers } from "@/app/actions/users";
 import { AdminShell } from "@/components/admin/admin-shell";
 import { GroupCardActions } from "@/components/admin/group-card-actions";
 import { requireRole } from "@/components/admin/role-guard";
@@ -15,10 +14,8 @@ import { CourseMeta } from "@/components/course/course-meta";
 import { PageHeader } from "@/components/course/page-header";
 import { StatCard } from "@/components/course/stat-card";
 import { GlassButton } from "@/components/ui/glass-button";
-import {
-  GlassCard,
-  GlassCardContent,
-} from "@/components/ui/glass-card";
+import { GlassCard, GlassCardContent } from "@/components/ui/glass-card";
+import { GlassChip } from "@/components/ui/glass-chip";
 import {
   BookIcon,
   ChartIcon,
@@ -26,40 +23,59 @@ import {
   SparklesIcon,
   UsersIcon,
 } from "@/components/ui/icons";
-import { isAdmin } from "@/lib/roles";
-import type { CourseSummary } from "@/lib/types";
+import { isSuperAdmin } from "@/lib/roles";
+import type { CourseSummary, GroupResponse, Role } from "@/lib/types";
 
 export const metadata: Metadata = { title: "Admin" };
 
+const ROLE_ORDER: Role[] = ["STUDENT", "TEACHER", "ADMIN", "SUPER_ADMIN"];
+
+/** Module-scope (not a component) so the `now` read stays out of render. */
+function countActiveGroups(groups: GroupResponse[]): number {
+  const now = Date.now();
+  return groups.filter(
+    (g) => !g.endsAt || new Date(g.endsAt).getTime() >= now
+  ).length;
+}
+
 export default async function AdminDashboardPage() {
-  const me = await requireRole("TEACHER");
-  const admin = isAdmin(me.role);
+  const me = await requireRole("ADMIN");
+  const superAdmin = isSuperAdmin(me.role);
   const locale = (await getLocale()) as "fr" | "en";
-  const [t, branding] = await Promise.all([
-    getTranslations("admin"),
-    getInstanceBranding(),
-  ]);
 
-  const [courses, groups] = await Promise.all([
-    admin ? getAllCourses() : getMyAuthoredCourses(),
-    admin ? getAllGroups() : getMyGroups(),
-  ]);
+  const [t, tRoles, branding, courses, groups, users, settings] =
+    await Promise.all([
+      getTranslations("admin"),
+      getTranslations("roles"),
+      getInstanceBranding(),
+      getAllCourses(),
+      getAllGroups(),
+      getAllUsers(),
+      getSettings(),
+    ]);
 
   const published = courses.filter((c) => c.status === "PUBLISHED").length;
   const drafts = courses.filter((c) => c.status === "DRAFT").length;
-  const sorted = [...courses].sort(
+  const archived = courses.filter((c) => c.status === "ARCHIVED").length;
+
+  const activeGroups = countActiveGroups(groups);
+
+  const disabledUsers = users.filter((u) => u.disabledAt).length;
+  const usersByRole = ROLE_ORDER.map((r) => ({
+    role: r,
+    count: users.filter((u) => u.role === r).length,
+  }));
+  const maxRoleCount = Math.max(1, ...usersByRole.map((x) => x.count));
+
+  const recent = [...courses].sort(
     (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
   );
 
   return (
     <AdminShell>
       <PageHeader
-        kicker={
-          admin
-            ? t("kicker", { name: branding.name })
-            : t("kickerTeacher", { name: branding.name })
-        }
-        title={admin ? t("title") : t("titleTeacher")}
+        kicker={t("kicker", { name: branding.name })}
+        title={t("title")}
         actions={
           <>
             <GlassButton asChild variant="glass">
@@ -75,27 +91,22 @@ export default async function AdminDashboardPage() {
               </Link>
             </GlassButton>
             <GlassButton asChild variant="ghost">
-              <Link href="/admin/courses">{t("recentTitle")}</Link>
+              <Link href="/admin/users">{t("usersLink")}</Link>
+            </GlassButton>
+            <GlassButton asChild variant="ghost">
+              <Link href="/admin/settings">{t("settingsLink")}</Link>
             </GlassButton>
-            {admin && (
-              <GlassButton asChild variant="ghost">
-                <Link href="/admin/users">{t("usersLink")}</Link>
-              </GlassButton>
-            )}
-            {admin && (
-              <GlassButton asChild variant="ghost">
-                <Link href="/admin/settings">{t("settingsLink")}</Link>
-              </GlassButton>
-            )}
           </>
         }
         className="mb-10"
       />
 
+      {/* KPIs */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <StatCard
-          label={admin ? t("stats.totalCourses") : t("stats.myCourses")}
+          label={t("stats.totalCourses")}
           value={courses.length}
+          hint={t("kpi.publishedDrafts", { published, drafts })}
           icon={<BookIcon size={18} />}
         />
         <StatCard
@@ -104,17 +115,136 @@ export default async function AdminDashboardPage() {
           icon={<ChartIcon size={18} />}
         />
         <StatCard
-          label={t("stats.drafts")}
-          value={drafts}
-          icon={<BookIcon size={18} />}
+          label={t("kpi.users")}
+          value={users.length}
+          hint={t("kpi.disabled", { count: disabledUsers })}
+          icon={<UsersIcon size={18} />}
         />
         <StatCard
           label={t("stats.groups")}
           value={groups.length}
+          hint={t("kpi.active", { count: activeGroups })}
           icon={<UsersIcon size={18} />}
         />
       </div>
 
+      {/* Catalog health + users by role */}
+      <div className="mt-6 grid gap-4 lg:grid-cols-2">
+        <GlassCard variant="default">
+          <GlassCardContent className="p-6">
+            <h2 className="mb-4 font-display text-xl text-text">
+              {t("kpi.catalogHealth")}
+            </h2>
+            <div className="space-y-3">
+              <CatalogBar
+                label={t("kpi.published")}
+                value={published}
+                total={courses.length}
+                tone="var(--color-success)"
+              />
+              <CatalogBar
+                label={t("kpi.drafts")}
+                value={drafts}
+                total={courses.length}
+                tone="var(--color-warning)"
+              />
+              <CatalogBar
+                label={t("kpi.archived")}
+                value={archived}
+                total={courses.length}
+                tone="var(--color-muted)"
+              />
+            </div>
+          </GlassCardContent>
+        </GlassCard>
+
+        <GlassCard variant="default">
+          <GlassCardContent className="p-6">
+            <h2 className="mb-4 font-display text-xl text-text">
+              {t("kpi.usersByRole")}
+            </h2>
+            <ul className="space-y-3">
+              {usersByRole.map(({ role, count }) => (
+                <li key={role} className="flex items-center gap-3">
+                  <span className="w-28 shrink-0 text-[0.85rem] text-text-soft">
+                    {tRoles(role)}
+                  </span>
+                  <span className="h-2.5 flex-1 overflow-hidden rounded-full bg-[color:var(--color-accent-soft)]">
+                    <span
+                      className="block h-full rounded-full bg-[color:var(--color-accent)]"
+                      style={{ width: `${(count / maxRoleCount) * 100}%` }}
+                    />
+                  </span>
+                  <span className="w-8 text-right font-mono text-[0.82rem] text-text">
+                    {count}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </GlassCardContent>
+        </GlassCard>
+      </div>
+
+      {/* Super-admin instance block */}
+      {superAdmin && (
+        <section className="mt-6">
+          <GlassCard variant="tinted">
+            <GlassCardContent className="flex flex-wrap items-center justify-between gap-6 p-6">
+              <div className="flex items-center gap-4">
+                <span
+                  className="inline-flex h-12 w-12 items-center justify-center rounded-2xl text-[color:var(--color-accent)]"
+                  style={{ background: "var(--color-accent-soft)" }}
+                  aria-hidden
+                >
+                  <SparklesIcon size={22} />
+                </span>
+                <div>
+                  <div className="font-mono text-[0.7rem] uppercase tracking-[0.18em] text-muted">
+                    {t("superAdmin.kicker")}
+                  </div>
+                  <h2 className="font-display text-xl text-text">
+                    {t("superAdmin.title", { name: branding.name })}
+                  </h2>
+                  <div className="mt-2 flex flex-wrap items-center gap-2 text-[0.85rem] text-text-soft">
+                    <span className="inline-flex items-center gap-1.5">
+                      <span
+                        className="inline-block h-3.5 w-3.5 rounded-full ring-1 ring-[color:var(--glass-border)]"
+                        style={{ background: branding.accent }}
+                        aria-hidden
+                      />
+                      {branding.accent}
+                    </span>
+                    <span aria-hidden>·</span>
+                    <GlassChip variant="default" size="sm">
+                      {branding.locale.toUpperCase()}
+                    </GlassChip>
+                    {settings && (
+                      <>
+                        <span aria-hidden>·</span>
+                        <span>
+                          {t("superAdmin.maxBlocks", {
+                            n: settings.maxBlocksPerPage,
+                          })}
+                        </span>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-wrap items-center gap-2">
+                <GlassButton asChild variant="glass" size="sm">
+                  <Link href="/admin/settings">{t("settingsLink")}</Link>
+                </GlassButton>
+                <GlassButton asChild variant="glass" size="sm">
+                  <Link href="/admin/users">{t("superAdmin.manageRoles")}</Link>
+                </GlassButton>
+              </div>
+            </GlassCardContent>
+          </GlassCard>
+        </section>
+      )}
+
+      {/* Recent courses + groups */}
       <div className="mt-12 grid gap-6 lg:grid-cols-[1.4fr_1fr]">
         <section>
           <div className="mb-4 flex items-end justify-between">
@@ -126,13 +256,16 @@ export default async function AdminDashboardPage() {
             </GlassButton>
           </div>
           <ul className="space-y-3">
-            {sorted.slice(0, 5).map((c) => (
+            {recent.slice(0, 5).map((c) => (
               <li key={c.id}>
                 <RecentCourse course={c} locale={locale} />
               </li>
             ))}
-            {sorted.length === 0 && (
-              <GlassCard variant="plain" className="p-6 text-center text-text-soft">
+            {recent.length === 0 && (
+              <GlassCard
+                variant="plain"
+                className="p-6 text-center text-text-soft"
+              >
                 {t("table.empty")}
               </GlassCard>
             )}
@@ -144,7 +277,10 @@ export default async function AdminDashboardPage() {
             {t("groupsTitle")}
           </h2>
           {groups.length === 0 ? (
-            <GlassCard variant="plain" className="p-6 text-center text-text-soft">
+            <GlassCard
+              variant="plain"
+              className="p-6 text-center text-text-soft"
+            >
               {t("noGroups")}
             </GlassCard>
           ) : (
@@ -155,7 +291,9 @@ export default async function AdminDashboardPage() {
                     <GlassCardContent className="flex flex-wrap items-center justify-between gap-3 p-4">
                       <div className="min-w-0">
                         <div className="font-medium text-text">{g.name}</div>
-                        <div className="text-[0.82rem] text-muted">{g.slug}</div>
+                        <div className="text-[0.82rem] text-muted">
+                          {g.slug}
+                        </div>
                       </div>
                       <div className="flex flex-wrap items-center gap-3 text-[0.85rem]">
                         <Link
@@ -164,7 +302,9 @@ export default async function AdminDashboardPage() {
                         >
                           {t("groupsManage")} →
                         </Link>
-                        <span aria-hidden className="text-muted">·</span>
+                        <span aria-hidden className="text-muted">
+                          ·
+                        </span>
                         <Link
                           href={`/admin/groups/${g.id}/members`}
                           className="text-[color:var(--color-accent)] hover:underline"
@@ -174,7 +314,7 @@ export default async function AdminDashboardPage() {
                         <GroupCardActions
                           groupId={g.id}
                           groupName={g.name}
-                          canDelete={admin}
+                          canDelete
                           labels={{
                             exportCsv: t("exportCsvShort"),
                             delete: t("deleteGroup"),
@@ -194,6 +334,36 @@ export default async function AdminDashboardPage() {
   );
 }
 
+function CatalogBar({
+  label,
+  value,
+  total,
+  tone,
+}: {
+  label: string;
+  value: number;
+  total: number;
+  tone: string;
+}) {
+  const pct = total > 0 ? Math.round((value / total) * 100) : 0;
+  return (
+    <div className="flex items-center gap-3">
+      <span className="w-24 shrink-0 text-[0.85rem] text-text-soft">
+        {label}
+      </span>
+      <span className="h-2.5 flex-1 overflow-hidden rounded-full bg-[color:var(--glass-bg-strong)]">
+        <span
+          className="block h-full rounded-full"
+          style={{ width: `${pct}%`, background: tone }}
+        />
+      </span>
+      <span className="w-8 text-right font-mono text-[0.82rem] text-text">
+        {value}
+      </span>
+    </div>
+  );
+}
+
 function RecentCourse({
   course,
   locale,
diff --git a/apps/frontend/app/bookmarks/page.tsx b/apps/frontend/app/bookmarks/page.tsx
index f13ec81..87780a4 100644
--- a/apps/frontend/app/bookmarks/page.tsx
+++ b/apps/frontend/app/bookmarks/page.tsx
@@ -4,14 +4,13 @@ import { getTranslations } from "next-intl/server";
 
 import { getMyBookmarks } from "@/app/actions/bookmarks";
 import { requireAuth } from "@/components/admin/role-guard";
-import { BookmarkRow } from "@/components/course/bookmark-row";
 import { EmptyState } from "@/components/course/empty-state";
 import { PageHeader } from "@/components/course/page-header";
 import { StudentShell } from "@/components/course/student-shell";
-import { BookmarkIcon } from "@/components/ui/icons";
-import type { BookmarkEnriched } from "@/lib/types";
+import { GlassCard, GlassCardContent, GlassCardTitle } from "@/components/ui/glass-card";
+import { ArrowRightIcon, BookmarkFilledIcon } from "@/components/ui/icons";
 
-export const metadata: Metadata = { title: "Mes favoris" };
+export const metadata: Metadata = { title: "Cours enregistrés" };
 
 export default async function BookmarksPage() {
   await requireAuth();
@@ -20,17 +19,14 @@ export default async function BookmarksPage() {
     getMyBookmarks(),
   ]);
 
-  const byCourse = new Map<string, { title: string; slug: string; items: BookmarkEnriched[] }>();
+  // One saved course per courseId (the bookmark is anchored on the first block).
+  const byCourse = new Map<string, { title: string; slug: string }>();
   for (const b of bookmarks) {
-    const k = b.courseId;
-    if (!byCourse.has(k)) {
-      byCourse.set(k, { title: b.courseTitle, slug: b.courseSlug, items: [] });
+    if (!byCourse.has(b.courseId)) {
+      byCourse.set(b.courseId, { title: b.courseTitle, slug: b.courseSlug });
     }
-    byCourse.get(k)!.items.push(b);
-  }
-  for (const entry of byCourse.values()) {
-    entry.items.sort((a, b) => a.blockOrderIndex - b.blockOrderIndex);
   }
+  const courses = [...byCourse.values()];
 
   return (
     <StudentShell maxWidth="wide">
@@ -41,39 +37,31 @@ export default async function BookmarksPage() {
         className="mb-10"
       />
 
-      {bookmarks.length === 0 ? (
-        <EmptyState icon={<BookmarkIcon size={22} />} title={t("empty")} />
+      {courses.length === 0 ? (
+        <EmptyState icon={<BookmarkFilledIcon size={22} />} title={t("empty")} />
       ) : (
-        <div className="space-y-12">
-          {[...byCourse.entries()].map(([id, group]) => (
-            <section key={id}>
-              <div className="mb-4 flex items-end justify-between gap-3">
-                <h2 className="font-display text-xl tracking-tight text-text md:text-2xl">
-                  <Link
-                    href={`/courses/${group.slug}`}
-                    className="hover:text-[color:var(--color-accent)]"
-                  >
-                    {group.title}
-                  </Link>
-                </h2>
-                <span className="text-[0.82rem] text-muted">
-                  {t("bookmarksCount", { count: group.items.length })}
-                </span>
-              </div>
-              <ul className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {group.items.map((b) => (
-                  <li key={b.id}>
-                    <BookmarkRow
-                      bookmark={b}
-                      labelView={t("viewBlock")}
-                      labelRemove={t("remove")}
-                    />
-                  </li>
-                ))}
-              </ul>
-            </section>
+        <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {courses.map((c) => (
+            <li key={c.slug}>
+              <Link href={`/courses/${c.slug}`} className="block focus-visible:outline-none">
+                <GlassCard variant="default" interactive className="h-full">
+                  <GlassCardContent className="flex h-full flex-col gap-3 p-5">
+                    <div className="flex items-center gap-2 text-[0.72rem] uppercase tracking-[0.14em] text-muted">
+                      <BookmarkFilledIcon size={13} className="text-[color:var(--color-accent)]" />
+                      {t("kicker")}
+                    </div>
+                    <GlassCardTitle as="h2" className="text-[1.15rem]">
+                      {c.title}
+                    </GlassCardTitle>
+                    <span className="mt-auto inline-flex items-center gap-1 text-[0.85rem] text-[color:var(--color-accent)]">
+                      {t("open")} <ArrowRightIcon size={14} />
+                    </span>
+                  </GlassCardContent>
+                </GlassCard>
+              </Link>
+            </li>
           ))}
-        </div>
+        </ul>
       )}
     </StudentShell>
   );
diff --git a/apps/frontend/app/courses/[slug]/page.tsx b/apps/frontend/app/courses/[slug]/page.tsx
index 73ba7bd..88ec99a 100644
--- a/apps/frontend/app/courses/[slug]/page.tsx
+++ b/apps/frontend/app/courses/[slug]/page.tsx
@@ -8,20 +8,15 @@ import { getCourseBySlug } from "@/app/actions/courses";
 import { getMyEnrollments } from "@/app/actions/enrollments";
 import { requireAuth } from "@/components/admin/role-guard";
 import { CourseMeta } from "@/components/course/course-meta";
+import { CourseSaveButton } from "@/components/course/course-save-button";
 import { PageHeader } from "@/components/course/page-header";
 import { ProgressBar } from "@/components/course/progress-bar";
 import { StatCard } from "@/components/course/stat-card";
 import { StudentShell } from "@/components/course/student-shell";
 import { GlassButton } from "@/components/ui/glass-button";
-import {
-  GlassCard,
-  GlassCardContent,
-  GlassCardTitle,
-} from "@/components/ui/glass-card";
 import {
   ArrowRightIcon,
   BookIcon,
-  BookmarkIcon,
   ClockIcon,
   PlayIcon,
   UsersIcon,
@@ -70,12 +65,22 @@ export default async function CourseIntroPage({ params }: PageProps) {
     ? t("resume")
     : t("start");
 
-  const allBlocks = (course.pages ?? []).flatMap((p) => p.blocks);
+  const sortedPages = [...(course.pages ?? [])].sort(
+    (a, b) => a.orderIndex - b.orderIndex
+  );
+  const allBlocks = sortedPages.flatMap((p) => p.blocks);
   const blocksCount = allBlocks.length;
   const headings = allBlocks.filter((b) => ["H1", "H2"].includes(b.kind));
   // A page maps to a lesson; fall back to headings/blocks for legacy single-page courses.
   const lessonCount = (course.pages?.length ?? 0) || headings.length || blocksCount;
 
+  // Course-level "save": anchored on the first block (cf. CourseSaveButton).
+  const firstBlockId =
+    [...(sortedPages[0]?.blocks ?? [])].sort(
+      (a, b) => a.orderIndex - b.orderIndex
+    )[0]?.id ?? null;
+  const savedId = bookmarks[0]?.id ?? null;
+
   return (
     <StudentShell maxWidth="default">
       <GlassButton asChild variant="ghost" size="sm" className="mb-6">
@@ -87,13 +92,23 @@ export default async function CourseIntroPage({ params }: PageProps) {
         title={course.title}
         description={course.description}
         actions={
-          <GlassButton asChild variant="primary" size="lg">
-            <Link href={`/courses/${course.slug}/read`}>
-              <PlayIcon size={14} />
-              {ctaLabel}
-              <ArrowRightIcon size={14} />
-            </Link>
-          </GlassButton>
+          <>
+            <GlassButton asChild variant="primary" size="lg">
+              <Link href={`/courses/${course.slug}/read`}>
+                <PlayIcon size={14} />
+                {ctaLabel}
+                <ArrowRightIcon size={14} />
+              </Link>
+            </GlassButton>
+            <CourseSaveButton
+              courseId={course.id}
+              firstBlockId={firstBlockId}
+              initialId={savedId}
+              labelSave={t("save")}
+              labelSaved={t("saved")}
+              size="lg"
+            />
+          </>
         }
         className="mb-8"
       />
@@ -142,47 +157,6 @@ export default async function CourseIntroPage({ params }: PageProps) {
           {t("publishedOn", { date: formatDate(course.publishedAt, locale) })}
         </p>
       )}
-
-      <section className="mt-14">
-        <h2 className="mb-5 font-display text-2xl tracking-tight text-text md:text-3xl">
-          {t("bookmarksTitle")}
-        </h2>
-        {bookmarks.length === 0 ? (
-          <GlassCard variant="plain" className="p-8 text-center">
-            <BookmarkIcon
-              size={28}
-              className="mx-auto mb-3 text-muted"
-            />
-            <p className="text-text-soft">{t("bookmarksEmpty")}</p>
-            <GlassButton asChild variant="ghost" size="sm" className="mt-4">
-              <Link href={`/courses/${course.slug}/read`}>{t("openReader")}</Link>
-            </GlassButton>
-          </GlassCard>
-        ) : (
-          <ul className="grid gap-3 md:grid-cols-2">
-            {bookmarks.map((b) => (
-              <li key={b.id}>
-                <Link
-                  href={`/courses/${course.slug}/read#block-${b.blockId}`}
-                  className="block focus-visible:outline-none"
-                >
-                  <GlassCard variant="default" interactive className="h-full">
-                    <GlassCardContent className="flex h-full flex-col gap-2 p-4">
-                      <div className="flex items-center gap-2 text-[0.72rem] uppercase tracking-[0.14em] text-muted">
-                        <BookmarkIcon size={12} />
-                        {b.blockKind} · #{b.blockOrderIndex + 1}
-                      </div>
-                      <GlassCardTitle as="h3" className="text-[1rem]">
-                        {b.blockPreview ?? `Bloc ${b.blockOrderIndex + 1}`}
-                      </GlassCardTitle>
-                    </GlassCardContent>
-                  </GlassCard>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
     </StudentShell>
   );
 }
diff --git a/apps/frontend/app/courses/[slug]/read/page.tsx b/apps/frontend/app/courses/[slug]/read/page.tsx
index 32a9f0e..610c3c9 100644
--- a/apps/frontend/app/courses/[slug]/read/page.tsx
+++ b/apps/frontend/app/courses/[slug]/read/page.tsx
@@ -3,12 +3,10 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 
-import { getCourseBookmarks } from "@/app/actions/bookmarks";
 import { getCourseBySlug } from "@/app/actions/courses";
 import { requireAuth } from "@/components/admin/role-guard";
 import { BlockRenderer } from "@/components/course/block-renderer";
 import { BlockToc, blockSlug } from "@/components/course/block-toc";
-import { BookmarkButton } from "@/components/course/bookmark-button";
 import { MobileToc } from "@/components/course/mobile-toc";
 import { StudentShell } from "@/components/course/student-shell";
 import { GlassButton } from "@/components/ui/glass-button";
@@ -50,11 +48,6 @@ export default async function CourseReaderPage({ params, searchParams }: PagePro
   const course = await getCourseBySlug(slug);
   if (!course) notFound();
 
-  const bookmarks = await getCourseBookmarks(course.id);
-  const bookmarkMap = new Map<string, string>(
-    bookmarks.map((b) => [b.blockId, b.id])
-  );
-
   const pages = [...(course.pages ?? [])]
     .sort((a, b) => a.orderIndex - b.orderIndex)
     .map((p) => ({
@@ -173,21 +166,9 @@ export default async function CourseReaderPage({ params, searchParams }: PagePro
               </GlassCardContent>
             </GlassCard>
           ) : (
-            <div className="space-y-2">
+            <div>
               {pageBlocks.map((b) => (
-                <div key={b.id} className="group relative">
-                  <div className="absolute -left-10 top-1 hidden opacity-0 transition-opacity group-hover:opacity-100 lg:block">
-                    <BookmarkButton
-                      courseId={course.id}
-                      blockId={b.id}
-                      initialId={bookmarkMap.get(b.id) ?? null}
-                      labelAdd={t("addBookmark")}
-                      labelRemove={t("removeBookmark")}
-                      iconOnly
-                    />
-                  </div>
-                  <BlockRenderer block={b} id={blockSlug(b)} />
-                </div>
+                <BlockRenderer key={b.id} block={b} id={blockSlug(b)} />
               ))}
             </div>
           )}
diff --git a/apps/frontend/app/courses/page.tsx b/apps/frontend/app/courses/page.tsx
index 9528576..49d45c0 100644
--- a/apps/frontend/app/courses/page.tsx
+++ b/apps/frontend/app/courses/page.tsx
@@ -45,13 +45,6 @@ export default async function CoursesCatalogPage() {
       <CatalogGrid
         allCourses={allList}
         groupCourseIds={[...groupCourses.keys()]}
-        labels={{
-          search: t("search"),
-          empty: t("empty"),
-          emptyFiltered: t("emptyFiltered"),
-          tabAll: t("tabs.all"),
-          tabMine: t("tabs.mine"),
-        }}
         locale={locale}
       />
     </StudentShell>
diff --git a/apps/frontend/app/dashboard/page.tsx b/apps/frontend/app/dashboard/page.tsx
new file mode 100644
index 0000000..b7bef9b
--- /dev/null
+++ b/apps/frontend/app/dashboard/page.tsx
@@ -0,0 +1,19 @@
+import { redirect } from "next/navigation";
+
+import { requireAuth } from "@/components/admin/role-guard";
+import { isAdmin, isStaff } from "@/lib/roles";
+
+/**
+ * Role dispatcher — the single source of truth for "where does a logged-in
+ * user land". Post-login and the public "/" send authenticated users here.
+ *   ADMIN / SUPER_ADMIN → /admin
+ *   TEACHER             → /studio
+ *   STUDENT             → /learn
+ */
+export default async function DashboardPage() {
+  const me = await requireAuth();
+
+  if (isAdmin(me.role)) redirect("/admin");
+  if (isStaff(me.role)) redirect("/studio");
+  redirect("/learn");
+}
diff --git a/apps/frontend/app/globals.css b/apps/frontend/app/globals.css
index d211660..6422bae 100644
--- a/apps/frontend/app/globals.css
+++ b/apps/frontend/app/globals.css
@@ -1,54 +1,77 @@
 @import "tailwindcss";
 
+/* ============================================================
+   Codestar — Design System "Liquid Glass · Citron"
+   Source de vérité : apps/frontend/design-liquid-glass-citron-dark.md
+   Accent citron #EAB12E · modes clair (parchemin) & sombre (navy).
+   ============================================================ */
+
+/* ── Tokens fixes (indépendants du mode) ── */
 :root {
-  --color-bg-base-raw: #f4f6fb;
-  --color-bg-mesh-1-raw: #dce8ff;
-  --color-bg-mesh-2-raw: #ffe4d6;
-  --color-bg-mesh-3-raw: #e1f5e8;
+  --color-accent-raw: #eab12e;
+  --color-accent-fg-raw: #1a1f2e;
+  --glass-blur: blur(29px) saturate(180%);
+
+  --r-sm: 8px;
+  --r: 14px;
+  --r-lg: 22px;
+  --r-xl: 32px;
+  --radius: 0.875rem;
+}
+
+/* ── Mode clair (défaut) — parchemin solaire ── */
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+
+  --color-bg-base-raw: #fbf9ee;
+  --color-bg-mesh-1-raw: #fff1bf;
+  --color-bg-mesh-2-raw: #ffe2be;
+  --color-bg-mesh-3-raw: #ebf6c8;
 
   --glass-bg: rgba(255, 255, 255, 0.55);
   --glass-bg-strong: rgba(255, 255, 255, 0.72);
   --glass-border: rgba(255, 255, 255, 0.65);
-  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
-  --glass-blur: blur(20px) saturate(180%);
+  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
 
   --color-text-raw: #1a1f2e;
   --color-text-soft-raw: #4a5366;
   --color-muted-raw: #8892a6;
 
-  --color-accent-raw: #7aa9ff;
-  --color-accent-fg-raw: #ffffff;
-  --color-accent-soft-raw: rgba(122, 169, 255, 0.18);
+  --color-accent-soft-raw: rgba(234, 177, 46, 0.16);
 
-  --color-success-raw: #5dc9a8;
-  --color-warning-raw: #ffb672;
-  --color-danger-raw: #ff8a95;
-  --color-green-raw: #7bc86c;
-  --color-tip-raw: #ffd66b;
-
-  --r-sm: 8px;
-  --r: 14px;
-  --r-lg: 22px;
-  --r-xl: 32px;
-  --radius: 0.875rem;
+  --color-success-raw: #2faa7e;
+  --color-warning-raw: #e08a2b;
+  --color-danger-raw: #e0556a;
+  --color-green-raw: #5aa84a;
+  --color-tip-raw: #d6a01f;
 }
 
+/* ── Mode sombre — navy profond ── */
 [data-theme="dark"] {
+  color-scheme: dark;
+
   --color-bg-base-raw: #0e1422;
-  --color-bg-mesh-1-raw: #1a2440;
-  --color-bg-mesh-2-raw: #2a1f30;
-  --color-bg-mesh-3-raw: #14283a;
+  --color-bg-mesh-1-raw: #38352a;
+  --color-bg-mesh-2-raw: #332d26;
+  --color-bg-mesh-3-raw: #2f3128;
 
   --glass-bg: rgba(20, 28, 48, 0.55);
-  --glass-bg-strong: rgba(20, 28, 48, 0.78);
-  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-bg-strong: rgba(20, 28, 48, 0.8);
+  --glass-border: rgba(255, 255, 255, 0.12);
   --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
 
   --color-text-raw: #edf1f9;
   --color-text-soft-raw: #b6c0d6;
   --color-muted-raw: #7c8ba8;
 
-  --color-accent-soft-raw: rgba(122, 169, 255, 0.22);
+  --color-accent-soft-raw: rgba(234, 177, 46, 0.24);
+
+  --color-success-raw: #5dc9a8;
+  --color-warning-raw: #ffb672;
+  --color-danger-raw: #ff8a95;
+  --color-green-raw: #7bc86c;
+  --color-tip-raw: #ffd66b;
 }
 
 @theme inline {
@@ -91,19 +114,12 @@
   --radius-xl: calc(var(--radius) + 4px);
 
   --font-sans:
-    var(--font-outfit), -apple-system, BlinkMacSystemFont, "Segoe UI",
+    var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI",
     sans-serif;
-  --font-display:
-    var(--font-instrument-serif), "Fraunces", Georgia, serif;
+  --font-display: var(--font-fraunces), "Fraunces", Georgia, serif;
   --font-mono:
-    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-}
-
-:root {
-  color-scheme: light;
-}
-[data-theme="dark"] {
-  color-scheme: dark;
+    var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, SFMono-Regular,
+    Menlo, monospace;
 }
 
 html {
@@ -127,7 +143,7 @@ body {
   color: var(--color-accent-fg-raw);
 }
 
-
+/* ── Surfaces verre ── */
 .glass {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
@@ -155,6 +171,29 @@ body {
   border-radius: var(--r-lg);
 }
 
+/* Pseudo-reflet linéaire — cards héro / vcard (design §5) */
+.glass-reflect {
+  position: relative;
+  isolation: isolate;
+}
+.glass-reflect::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    135deg,
+    color-mix(in oklab, #ffffff 50%, transparent),
+    transparent 42%
+  );
+  pointer-events: none;
+  z-index: 0;
+}
+.glass-reflect > * {
+  position: relative;
+  z-index: 1;
+}
+
 /* Focus ring — non-supprimable (a11y WCAG AA) */
 :where(a, button, input, textarea, select, [tabindex]):focus-visible {
   outline: 2px solid var(--color-accent-raw);
@@ -162,6 +201,7 @@ body {
   border-radius: var(--r-sm);
 }
 
+/* ── Animations (design §6) ── */
 @keyframes mesh-drift {
   0%,
   100% {
@@ -175,23 +215,197 @@ body {
   }
 }
 
+@keyframes gh-bob {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
 .mesh-spot {
   will-change: transform;
 }
 
+.gh-bob {
+  animation: gh-bob 7s ease-in-out infinite;
+}
+.gh-bob-1 {
+  animation: gh-bob 6s ease-in-out infinite 0.4s;
+}
+.gh-bob-2 {
+  animation: gh-bob 8s ease-in-out infinite 0.8s;
+}
+
 .font-display {
   font-family: var(--font-display);
-  font-weight: 400;
+  font-weight: 500;
   letter-spacing: -0.01em;
-  line-height: 1.02;
+  line-height: 1.08;
 }
 
 .font-mono {
   font-family: var(--font-mono);
 }
 
+/* ============================================================
+   Landing FX — effets visuels des pages publiques (home, auth).
+   Tous gated par prefers-reduced-motion (cf. bloc plus bas).
+   ============================================================ */
+
+/* Entrée en cascade : opacité + montée + flou qui se résorbe. */
+@keyframes fx-rise {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+    filter: blur(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+}
+.fx-rise {
+  opacity: 0;
+  animation: fx-rise 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* CTA : halo accent pulsé. */
+@keyframes fx-cta-glow {
+  0%,
+  100% {
+    box-shadow:
+      0 8px 28px -6px color-mix(in oklab, var(--color-accent) 55%, transparent);
+  }
+  50% {
+    box-shadow:
+      0 16px 46px -4px color-mix(in oklab, var(--color-accent) 82%, transparent);
+  }
+}
+.fx-cta-glow {
+  animation: fx-cta-glow 3.2s ease-in-out infinite;
+}
+
+/* Balayage de lumière au survol des surfaces verre. */
+.fx-sheen {
+  position: relative;
+  overflow: hidden;
+}
+.fx-sheen::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    115deg,
+    transparent 30%,
+    color-mix(in oklab, #fff 55%, transparent) 50%,
+    transparent 70%
+  );
+  transform: translateX(-130%);
+  transition: transform 0.75s ease;
+  pointer-events: none;
+}
+.fx-sheen:hover::after {
+  transform: translateX(130%);
+}
+
+/* Aurora — faisceau conique en rotation lente. */
+@keyframes fx-aurora {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+.fx-aurora {
+  animation: fx-aurora 30s linear infinite;
+  will-change: transform;
+}
+
+/* Orbes flottants. */
+@keyframes fx-orb {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(0, -26px, 0) scale(1.08);
+  }
+}
+.fx-orb {
+  animation: fx-orb 9s ease-in-out infinite;
+  will-change: transform;
+}
+
+/* Particules scintillantes. */
+@keyframes fx-twinkle {
+  0%,
+  100% {
+    opacity: 0.12;
+    transform: scale(0.6);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.2);
+  }
+}
+.fx-particle {
+  animation: fx-twinkle 4.5s ease-in-out infinite;
+  will-change: opacity, transform;
+}
+
+/* Apparition « pop » élastique — coche de validation live. */
+@keyframes fx-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.2) rotate(-22deg);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1.18) rotate(7deg);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0);
+  }
+}
+.fx-pop {
+  animation: fx-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+/* Reflet qui circule dans la piste « glisser pour confirmer ». */
+@keyframes fx-track-flow {
+  to {
+    background-position: 200% center;
+  }
+}
+.fx-track-flow {
+  background-image: linear-gradient(
+    100deg,
+    color-mix(in oklab, var(--color-accent) 70%, transparent) 0%,
+    color-mix(in oklab, var(--color-accent) 100%, white 12%) 50%,
+    color-mix(in oklab, var(--color-accent) 70%, transparent) 100%
+  );
+  background-size: 200% auto;
+  animation: fx-track-flow 1.6s linear infinite;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .mesh-spot {
+  .mesh-spot,
+  .gh-bob,
+  .gh-bob-1,
+  .gh-bob-2,
+  .fx-aurora,
+  .fx-orb,
+  .fx-particle,
+  .fx-cta-glow,
+  .fx-track-flow {
+    animation: none !important;
+  }
+  .fx-rise,
+  .fx-pop {
+    opacity: 1;
     animation: none !important;
   }
   html {
@@ -209,4 +423,7 @@ body {
     border-color: var(--color-text-raw);
     box-shadow: none;
   }
+  .glass-reflect::before {
+    display: none;
+  }
 }
diff --git a/apps/frontend/app/layout.tsx b/apps/frontend/app/layout.tsx
index dbd23e1..318750b 100644
--- a/apps/frontend/app/layout.tsx
+++ b/apps/frontend/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata, Viewport } from "next";
-import { Outfit, Instrument_Serif } from "next/font/google";
+import { Fraunces, Inter, JetBrains_Mono } from "next/font/google";
+import { cookies } from "next/headers";
 import { NextIntlClientProvider } from "next-intl";
 import { getLocale, getMessages } from "next-intl/server";
 
@@ -7,26 +8,36 @@ import { getMe } from "@/app/actions/auth";
 import { getInstanceBranding } from "@/app/actions/instance";
 import { AuthProvider } from "@/components/auth-provider";
 import { BrandingProvider } from "@/components/branding-provider";
+import { ThemeProvider } from "@/components/theme-provider";
+import { ThemeScript } from "@/components/theme-script";
 import { MeshBackground } from "@/components/ui/mesh-background";
 import { SITE_URL } from "@/lib/site";
+import { DEFAULT_THEME, isTheme, resolveTheme, THEME_COOKIE } from "@/lib/theme";
 
 import "./globals.css";
 
-const outfit = Outfit({
-  variable: "--font-outfit",
+const inter = Inter({
+  variable: "--font-inter",
   subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700", "800", "900"],
+  weight: ["400", "500", "600", "700"],
   display: "swap",
 });
 
-const instrumentSerif = Instrument_Serif({
-  variable: "--font-instrument-serif",
+const fraunces = Fraunces({
+  variable: "--font-fraunces",
   subsets: ["latin"],
-  weight: ["400"],
+  weight: ["400", "500", "600"],
   style: ["normal", "italic"],
   display: "swap",
 });
 
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-jetbrains-mono",
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
   title: {
@@ -102,17 +113,23 @@ const jsonLd = {
 export default async function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
-  const [locale, messages, branding, me] = await Promise.all([
+  const [locale, messages, branding, me, cookieStore] = await Promise.all([
     getLocale(),
     getMessages(),
     getInstanceBranding(),
     getMe(),
+    cookies(),
   ]);
 
+  const themeCookie = cookieStore.get(THEME_COOKIE)?.value;
+  const theme = isTheme(themeCookie) ? themeCookie : DEFAULT_THEME;
+  const resolvedTheme = resolveTheme(theme);
+
   return (
     <html
       lang={locale}
-      className={`${outfit.variable} ${instrumentSerif.variable} h-full antialiased`}
+      data-theme={resolvedTheme}
+      className={`${inter.variable} ${fraunces.variable} ${jetbrainsMono.variable} h-full antialiased`}
       style={
         {
           "--color-accent-raw": branding.accent,
@@ -120,15 +137,18 @@ export default async function RootLayout({
       }
     >
       <body className="min-h-full flex flex-col bg-bg-base text-text font-sans">
+        <ThemeScript />
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
         />
         <MeshBackground />
         <NextIntlClientProvider locale={locale} messages={messages}>
-          <BrandingProvider branding={branding}>
-            <AuthProvider initialUser={me}>{children}</AuthProvider>
-          </BrandingProvider>
+          <ThemeProvider initialTheme={theme} initialResolved={resolvedTheme}>
+            <BrandingProvider branding={branding}>
+              <AuthProvider initialUser={me}>{children}</AuthProvider>
+            </BrandingProvider>
+          </ThemeProvider>
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/apps/frontend/app/learn/page.tsx b/apps/frontend/app/learn/page.tsx
new file mode 100644
index 0000000..9e0889d
--- /dev/null
+++ b/apps/frontend/app/learn/page.tsx
@@ -0,0 +1,214 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { getLocale, getTranslations } from "next-intl/server";
+
+import { getMyBookmarks } from "@/app/actions/bookmarks";
+import { getPublishedCourses } from "@/app/actions/courses";
+import { getMyEnrollments } from "@/app/actions/enrollments";
+import { getCurriculum, getMyGroups } from "@/app/actions/groups";
+import { requireAuth } from "@/components/admin/role-guard";
+import { CourseCard } from "@/components/course/course-card";
+import { EmptyState } from "@/components/course/empty-state";
+import { StatCard } from "@/components/course/stat-card";
+import { StudentShell } from "@/components/course/student-shell";
+import { GlassButton } from "@/components/ui/glass-button";
+import {
+  BookIcon,
+  BookmarkFilledIcon,
+  CheckIcon,
+  FlameIcon,
+  UsersIcon,
+} from "@/components/ui/icons";
+import { parseProgress } from "@/lib/format";
+import type { CourseSummary, Enrollment } from "@/lib/types";
+
+export const metadata: Metadata = { title: "Learn" };
+
+export default async function LearnPage() {
+  const me = await requireAuth();
+  const locale = (await getLocale()) as "fr" | "en";
+  const [t, enrollments, groups, published, bookmarks] = await Promise.all([
+    getTranslations("learn"),
+    getMyEnrollments(),
+    getMyGroups(),
+    getPublishedCourses(),
+    getMyBookmarks(),
+  ]);
+
+  const curricula = await Promise.all(groups.map((g) => getCurriculum(g.id)));
+  const courseById = new Map<string, CourseSummary>();
+  for (const c of published) courseById.set(c.id, c);
+  for (const list of curricula) for (const c of list) courseById.set(c.id, c);
+
+  const inProgress = enrollments
+    .filter(
+      (e) =>
+        parseProgress(e.progress) > 0 &&
+        parseProgress(e.progress) < 1 &&
+        !e.completedAt
+    )
+    .sort(
+      (a, b) =>
+        new Date(b.lastActivityAt).getTime() -
+        new Date(a.lastActivityAt).getTime()
+    );
+  const completed = enrollments.filter(
+    (e) => parseProgress(e.progress) >= 1 || e.completedAt
+  );
+  const enrolledIds = new Set(enrollments.map((e) => e.courseId));
+  const discover = [...courseById.values()]
+    .filter((c) => !enrolledIds.has(c.id))
+    .slice(0, 6);
+
+  const firstName = me.displayName.split(/\s+/)[0] || me.displayName;
+  const dateLabel = new Date().toLocaleDateString(locale, {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+  });
+
+  return (
+    <StudentShell maxWidth="wide">
+      {/* Hero greeting */}
+      <section className="mb-12 grid gap-6 lg:grid-cols-[1.3fr_1fr] lg:items-stretch">
+        <div className="flex flex-col justify-center">
+          <div className="font-mono text-[0.72rem] uppercase tracking-[0.18em] text-muted">
+            {dateLabel}
+          </div>
+          <h1 className="mt-2 font-display text-[clamp(2.2rem,5vw,3.4rem)] leading-[1.04] tracking-tight text-text">
+            {t("greeting", { name: firstName })}
+          </h1>
+          <p className="mt-3 max-w-lg text-[1.05rem] text-text-soft">
+            {inProgress.length > 0
+              ? t("continueWithCourse")
+              : t("startSomething")}
+          </p>
+        </div>
+
+        <div className="grid grid-cols-3 gap-3">
+          <StatCard
+            label={t("statInProgress")}
+            value={inProgress.length}
+            icon={<BookIcon size={18} />}
+          />
+          <StatCard
+            label={t("statCompleted")}
+            value={completed.length}
+            icon={<CheckIcon size={18} />}
+          />
+          <StatCard
+            label={t("statBookmarks")}
+            value={bookmarks.length}
+            icon={<BookmarkFilledIcon size={18} />}
+          />
+        </div>
+      </section>
+
+      {/* Resume */}
+      <section className="mb-14">
+        <div className="mb-5 flex items-end justify-between">
+          <h2 className="font-display text-2xl tracking-tight text-text md:text-3xl">
+            {t("resumeTitle")}
+          </h2>
+          <GlassButton asChild variant="ghost" size="sm">
+            <Link href="/my-courses">{t("allCourses")} →</Link>
+          </GlassButton>
+        </div>
+        {inProgress.length === 0 ? (
+          <EmptyState
+            icon={<FlameIcon size={20} />}
+            title={t("resumeEmpty")}
+            description={t("resumeEmptyDesc")}
+            action={
+              <GlassButton asChild variant="primary">
+                <Link href="/courses">{t("browseCta")}</Link>
+              </GlassButton>
+            }
+          />
+        ) : (
+          <ul className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+            {inProgress
+              .map((e) => ({ e, c: courseById.get(e.courseId) }))
+              .filter((x): x is { e: Enrollment; c: CourseSummary } => !!x.c)
+              .slice(0, 3)
+              .map(({ e, c }) => (
+                <li key={c.id}>
+                  <CourseCard
+                    course={c}
+                    href={`/courses/${c.slug}/read`}
+                    progress={e.progress}
+                    variant="in-progress"
+                    locale={locale}
+                    ctaLabel={t("resumeCta")}
+                  />
+                </li>
+              ))}
+          </ul>
+        )}
+      </section>
+
+      {/* Discover */}
+      <section className="mb-14">
+        <div className="mb-5">
+          <h2 className="font-display text-2xl tracking-tight text-text md:text-3xl">
+            {t("discoverTitle")}
+          </h2>
+          <p className="mt-1 text-[0.95rem] text-text-soft">
+            {t("discoverDesc")}
+          </p>
+        </div>
+        {discover.length === 0 ? (
+          <EmptyState icon={<BookIcon size={20} />} title={t("discoverEmpty")} />
+        ) : (
+          <ul className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+            {discover.map((c) => (
+              <li key={c.id}>
+                <CourseCard
+                  course={c}
+                  href={`/courses/${c.slug}`}
+                  locale={locale}
+                  ctaLabel={t("openCta")}
+                />
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      {/* My groups */}
+      {groups.length > 0 && (
+        <section>
+          <h2 className="mb-5 font-display text-2xl tracking-tight text-text md:text-3xl">
+            {t("groupsTitle")}
+          </h2>
+          <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {groups.map((g) => (
+              <li key={g.id}>
+                <Link
+                  href="/courses"
+                  className="block focus-visible:outline-none"
+                >
+                  <div className="glass flex items-center gap-3 rounded-[var(--r-lg)] p-4 transition-transform hover:-translate-y-0.5">
+                    <span
+                      className="inline-flex h-10 w-10 items-center justify-center rounded-xl text-[color:var(--color-accent)]"
+                      style={{ background: "var(--color-accent-soft)" }}
+                      aria-hidden
+                    >
+                      <UsersIcon size={18} />
+                    </span>
+                    <div className="min-w-0">
+                      <div className="truncate font-medium text-text">
+                        {g.name}
+                      </div>
+                      <div className="text-[0.8rem] text-muted">{g.slug}</div>
+                    </div>
+                  </div>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </StudentShell>
+  );
+}
diff --git a/apps/frontend/app/login/login-shell.tsx b/apps/frontend/app/login/login-shell.tsx
index bab29c8..61cde4d 100644
--- a/apps/frontend/app/login/login-shell.tsx
+++ b/apps/frontend/app/login/login-shell.tsx
@@ -16,12 +16,13 @@ import {
   signInAction,
   signUpAction,
 } from "@/app/actions/auth";
-import { BrandMark } from "@/components/brand-mark";
+import { BrandMark, type LogoPreset } from "@/components/brand-mark";
 import { useInstanceBranding } from "@/components/branding-provider";
-import { GlassButton } from "@/components/ui/glass-button";
+import { AuroraLayer } from "@/components/home/aurora-layer";
 import { GlassChip } from "@/components/ui/glass-chip";
 import { GlassField, GlassInput } from "@/components/ui/glass-input";
-import { ArrowRightIcon, KeyIcon, StarIcon } from "@/components/ui/icons";
+import { CheckIcon } from "@/components/ui/icons";
+import { SlideToConfirm } from "@/components/ui/slide-to-confirm";
 
 type LoginMode = "signin" | "signup" | "join";
 
@@ -70,9 +71,9 @@ export function LoginShell({
   );
 
   return (
-    <main className="grid min-h-[100dvh] grid-cols-1 lg:grid-cols-[1.05fr_1fr]">
-      <section className="flex items-center justify-center px-6 py-16 lg:px-10">
-        <div className="w-full max-w-[440px]">
+    <main className="grid h-[100dvh] grid-cols-1 overflow-hidden lg:grid-cols-[1.05fr_1fr]">
+      <section className="flex items-center justify-center overflow-y-auto px-6 py-12 lg:px-10">
+        <div className="fx-rise w-full max-w-[440px]">
           <Link
             href="/"
             className="mb-10 inline-flex items-center gap-2.5"
@@ -226,8 +227,10 @@ function LoginForm({
   const tFields = useTranslations("login.fields");
   const tErrors = useTranslations("login.errors");
   const tCtas = useTranslations("login.ctas");
+  const tSlide = useTranslations("login.slide");
   const tConsent = useTranslations("login.consent");
   const router = useRouter();
+  const formRef = React.useRef<HTMLFormElement>(null);
 
   const [state, setState] = React.useState<FormState>({
     email: "",
@@ -240,6 +243,13 @@ function LoginForm({
   const requireCode = mode === "join";
   const showCode = mode === "join" || mode === "signup";
 
+  // Validité live par champ — alimente la coche « pop » de validation.
+  // Uniquement quand un critère de format réel existe (on ne « valide »
+  // jamais un mot de passe en signin, on ne le connaît pas).
+  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email);
+  const passwordValid = mode === "signup" && state.password.length >= 8;
+  const codeValid = CODE_RE.test(state.code.trim().toUpperCase());
+
   const validate = (s: FormState): FormErrors => {
     const e: FormErrors = {};
     if (!s.email) e.email = tErrors("emailRequired");
@@ -299,7 +309,8 @@ function LoginForm({
       }
 
       if (result.ok) {
-        router.push(nextPath);
+        // Default landing ("/") → role dispatcher. A real deep-link is honored.
+        router.push(nextPath === "/" ? "/dashboard" : nextPath);
         // Force le re-fetch du RootLayout (auth + branding) pour que la nav
         // bascule immédiatement en état authentifié.
         router.refresh();
@@ -314,26 +325,35 @@ function LoginForm({
   };
 
   return (
-    <form className="mt-8 space-y-4" onSubmit={onSubmit} noValidate>
+    <form
+      ref={formRef}
+      className="mt-8 space-y-4"
+      onSubmit={onSubmit}
+      noValidate
+    >
       <GlassField
         label={tFields("email")}
         htmlFor="email"
         required
         error={errors.email}
       >
-        <GlassInput
-          id="email"
-          name="email"
-          type="email"
-          autoComplete="email"
-          inputMode="email"
-          required
-          aria-invalid={!!errors.email}
-          value={state.email}
-          onChange={(e) =>
-            setState((s) => ({ ...s, email: e.target.value }))
-          }
-        />
+        <div className="relative">
+          <GlassInput
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            inputMode="email"
+            required
+            aria-invalid={!!errors.email}
+            value={state.email}
+            onChange={(e) =>
+              setState((s) => ({ ...s, email: e.target.value }))
+            }
+            className="pr-11"
+          />
+          <ValidCheck show={emailValid} />
+        </div>
       </GlassField>
 
       <GlassField
@@ -352,20 +372,24 @@ function LoginForm({
         helper={mode === "signup" ? tFields("passwordHelper") : undefined}
         error={errors.password}
       >
-        <GlassInput
-          id="password"
-          name="password"
-          type="password"
-          autoComplete={
-            mode === "signin" ? "current-password" : "new-password"
-          }
-          required
-          aria-invalid={!!errors.password}
-          value={state.password}
-          onChange={(e) =>
-            setState((s) => ({ ...s, password: e.target.value }))
-          }
-        />
+        <div className="relative">
+          <GlassInput
+            id="password"
+            name="password"
+            type="password"
+            autoComplete={
+              mode === "signin" ? "current-password" : "new-password"
+            }
+            required
+            aria-invalid={!!errors.password}
+            value={state.password}
+            onChange={(e) =>
+              setState((s) => ({ ...s, password: e.target.value }))
+            }
+            className="pr-11"
+          />
+          <ValidCheck show={passwordValid} />
+        </div>
       </GlassField>
 
       {showCode && (
@@ -380,24 +404,27 @@ function LoginForm({
           }
           error={errors.code}
         >
-          <GlassInput
-            id="code"
-            name="code"
-            type="text"
-            inputMode="text"
-            autoComplete="one-time-code"
-            required={requireCode}
-            placeholder={tFields("codePlaceholder")}
-            aria-invalid={!!errors.code}
-            value={state.code}
-            onChange={(e) =>
-              setState((s) => ({
-                ...s,
-                code: e.target.value.toUpperCase(),
-              }))
-            }
-            className="font-mono tracking-widest uppercase"
-          />
+          <div className="relative">
+            <GlassInput
+              id="code"
+              name="code"
+              type="text"
+              inputMode="text"
+              autoComplete="one-time-code"
+              required={requireCode}
+              placeholder={tFields("codePlaceholder")}
+              aria-invalid={!!errors.code}
+              value={state.code}
+              onChange={(e) =>
+                setState((s) => ({
+                  ...s,
+                  code: e.target.value.toUpperCase(),
+                }))
+              }
+              className="pr-11 font-mono tracking-widest uppercase"
+            />
+            <ValidCheck show={codeValid} />
+          </div>
         </GlassField>
       )}
 
@@ -410,20 +437,18 @@ function LoginForm({
         </div>
       )}
 
-      <GlassButton
-        type="submit"
-        variant="primary"
-        size="lg"
+      {/* Validation par glissement — geste volontaire plutôt qu'un clic.
+          Le bouton submit caché préserve l'envoi via la touche Entrée. */}
+      <SlideToConfirm
+        onConfirm={() => formRef.current?.requestSubmit()}
+        label={tSlide("label")}
+        confirmedLabel={tSlide("confirmed")}
+        ariaLabel={tCtas(mode)}
         loading={submitting}
-        className="w-full"
-      >
-        {!submitting && (
-          <>
-            {tCtas(mode)}
-            <ArrowRightIcon size={14} />
-          </>
-        )}
-      </GlassButton>
+      />
+      <button type="submit" className="sr-only" tabIndex={-1} aria-hidden>
+        {tCtas(mode)}
+      </button>
 
       <p className="text-center text-[0.78rem] text-muted">
         {tConsent("prefix")}{" "}
@@ -441,12 +466,38 @@ function LoginForm({
 }
 
 /* ============================================================
-   Decorative right panel
+   Coche de validation live — surgit en « pop » élastique dès
+   qu'un champ devient valide. Purement décoratif (a11y : la
+   validation réelle reste portée par aria-invalid + erreurs).
+   ============================================================ */
+
+function ValidCheck({ show }: { show: boolean }) {
+  if (!show) return null;
+  return (
+    <span
+      aria-hidden
+      className="pointer-events-none absolute right-3.5 top-1/2 -translate-y-1/2 text-[color:var(--color-success)]"
+    >
+      <CheckIcon size={18} className="fx-pop" strokeWidth={2.4} />
+    </span>
+  );
+}
+
+/* ============================================================
+   Panneau de marque (droite) — sobre. Aucune donnée inventée :
+   la phrase de l'instance (tagline) + des faits réels uniquement.
    ============================================================ */
 
 function DecorativeAside() {
   const branding = useInstanceBranding();
-  const t = useTranslations("login.decorative");
+  const t = useTranslations("login.aside");
+  const preset = branding.logo.value as LogoPreset;
+
+  const facts = [
+    t("facts.openSource"),
+    t("facts.license"),
+    t("facts.selfHosted"),
+  ];
 
   return (
     <aside
@@ -466,63 +517,49 @@ function DecorativeAside() {
             "radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--color-accent) 35%, transparent), transparent 50%), radial-gradient(circle at 80% 80%, color-mix(in oklab, var(--color-accent) 25%, transparent), transparent 55%)",
         }}
       />
+
+      {/* Décor animé : aurora + orbes + particules. */}
+      <AuroraLayer />
+
       <div className="relative flex h-full flex-col justify-between p-12">
-        <div className="flex items-center gap-2">
-          <GlassChip variant="default" size="sm">
-            <StarIcon size={12} />
-            {t("license")}
-          </GlassChip>
-          <GlassChip variant="default" size="sm">
-            {t("selfHosted")}
-          </GlassChip>
+        <div
+          className="fx-rise flex items-center gap-2.5"
+          style={{ animationDelay: "0.1s" }}
+        >
+          <BrandMark size={34} preset={preset} accent={branding.accent} />
+          <span className="text-[1.05rem] font-semibold text-text">
+            {branding.name}
+          </span>
         </div>
 
         <div>
-          <h2 className="font-display text-[clamp(2.5rem,3.4vw,3.4rem)] leading-[1.05] text-text">
-            <em className="italic">
-              {t("quote", { name: branding.name })}
-            </em>
+          <h2
+            className="fx-rise max-w-md font-display text-[clamp(2.4rem,3.4vw,3.4rem)] leading-[1.04] text-text"
+            style={{ animationDelay: "0.2s" }}
+          >
+            {branding.tagline}
           </h2>
-          <div className="mt-6 flex items-center gap-3">
-            <div
-              className="flex h-10 w-10 items-center justify-center rounded-full text-[0.85rem] font-semibold text-white"
-              style={{ background: "var(--color-accent)" }}
-              aria-hidden
-            >
-              NM
-            </div>
-            <div>
-              <div className="text-[0.92rem] font-semibold text-text">
-                {t("quoteAuthor")}
-              </div>
-              <div className="text-[0.8rem] text-muted">{t("quoteRole")}</div>
-            </div>
-          </div>
+          <p
+            className="fx-rise mt-5 max-w-sm text-[1.02rem] leading-relaxed text-text-soft"
+            style={{ animationDelay: "0.35s" }}
+          >
+            {t("subline")}
+          </p>
         </div>
 
-        <div className="glass-strong w-fit max-w-[340px] rounded-[var(--r-lg)] p-4">
-          <div className="flex items-center gap-2 font-mono text-[0.7rem] uppercase tracking-[0.12em] text-muted">
-            <KeyIcon size={13} style={{ color: "var(--color-accent)" }} />
-            {t("streakLabel")}
-          </div>
-          <div className="font-display text-[2.2rem] leading-tight text-text">
-            {t("streakValue")}
-          </div>
-          <div className="mt-3 flex gap-1">
-            {Array.from({ length: 14 }).map((_, i) => (
-              <span
-                key={i}
-                className="h-4 flex-1 rounded-sm"
-                style={{
-                  background:
-                    i >= 11
-                      ? "var(--color-accent)"
-                      : "color-mix(in oklab, var(--color-accent) 25%, var(--color-bg-base))",
-                }}
-              />
-            ))}
-          </div>
-        </div>
+        <ul className="flex flex-wrap items-center gap-2">
+          {facts.map((fact, i) => (
+            <li
+              key={fact}
+              className="fx-rise"
+              style={{ animationDelay: `${0.5 + i * 0.1}s` }}
+            >
+              <GlassChip variant="default" size="sm" className="fx-sheen">
+                {fact}
+              </GlassChip>
+            </li>
+          ))}
+        </ul>
       </div>
     </aside>
   );
diff --git a/apps/frontend/app/page.tsx b/apps/frontend/app/page.tsx
index 2cbedc2..ad13f97 100644
--- a/apps/frontend/app/page.tsx
+++ b/apps/frontend/app/page.tsx
@@ -1,316 +1,155 @@
 import Link from "next/link";
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 
 import { getMe } from "@/app/actions/auth";
 import { getInstanceBranding } from "@/app/actions/instance";
-import { SiteFooter } from "@/components/site-footer";
+import { BrandMark } from "@/components/brand-mark";
+import { AuroraLayer } from "@/components/home/aurora-layer";
+import { LocaleSwitcher } from "@/components/locale-switcher";
 import { TopNav } from "@/components/top-nav";
 import { GlassButton } from "@/components/ui/glass-button";
-import {
-  GlassCard,
-  GlassCardContent,
-  GlassCardDescription,
-  GlassCardTitle,
-} from "@/components/ui/glass-card";
 import { GlassChip } from "@/components/ui/glass-chip";
-import {
-  ArrowRightIcon,
-  BookIcon,
-  SparklesIcon,
-  StarIcon,
-  TrophyIcon,
-} from "@/components/ui/icons";
-import { getPublishedCourses } from "@/app/actions/courses";
-import type { CourseSummary } from "@/lib/types";
+import { Magnetic } from "@/components/ui/magnetic";
+import { ArrowRightIcon, SparklesIcon, StarIcon } from "@/components/ui/icons";
 
+const CODESTAR_REPO = "https://github.com/CodeStar-Project";
+
+/**
+ * Landing publique — une seule vue, volontairement non défilable (`h-[100dvh]`
+ * + `overflow-hidden`). Parti pris : sobre mais impactant. Aucune donnée
+ * inventée (pas de note moyenne, pas de nombre d'apprenants). On ne montre que
+ * la phrase de l'instance (tagline) et des faits réels et vérifiables.
+ */
 export default async function HomePage() {
-  const [tInstance, branding, me] = await Promise.all([
+  const me = await getMe();
+  // Un utilisateur authentifié ne voit jamais la landing — on l'aiguille.
+  if (me) redirect("/dashboard");
+
+  const [tInstance, tLanding, tNav, tFooter, branding] = await Promise.all([
     getTranslations("instance"),
+    getTranslations("home.landing"),
+    getTranslations("nav"),
+    getTranslations("footer"),
     getInstanceBranding(),
-    getMe(),
   ]);
 
-  const courses = me ? await getPublishedCourses() : [];
-
   const heroTitle = branding.heroTitle ?? tInstance("heroTitle");
   const heroSubtitle = branding.heroSubtitle ?? tInstance("heroSubtitle");
   const heroCta = branding.heroCta ?? tInstance("heroCta");
+  const tagline = branding.tagline ?? tInstance("tagline");
 
-  return (
-    <>
-      <TopNav />
-
-      <main id="main">
-        <Hero title={heroTitle} subtitle={heroSubtitle} cta={heroCta} />
-        <FeaturedCourses courses={courses} />
-        <Pillars />
-        <FinalCta />
-      </main>
-
-      <SiteFooter />
-    </>
-  );
-}
-
-async function Hero({
-  title,
-  subtitle,
-  cta,
-}: {
-  title: string;
-  subtitle: string;
-  cta: string;
-}) {
-  const t = await getTranslations("home.hero");
+  const facts = [
+    tLanding("facts.openSource"),
+    tLanding("facts.license"),
+    tLanding("facts.selfHosted"),
+  ];
 
   return (
-    <section className="relative pt-20 pb-16 md:pt-32 md:pb-24">
-      <div className="mx-auto max-w-7xl px-6 md:px-8">
-        <div className="grid gap-12 lg:grid-cols-[1.15fr_0.85fr] lg:items-center">
-          <div>
-            <GlassChip variant="accent" size="md" className="mb-6">
-              <StarIcon size={13} />
-              {t("chip")}
-            </GlassChip>
-
-            <h1 className="font-display text-[clamp(2.4rem,7vw,4.5rem)] leading-[1.04] tracking-tight text-text">
-              {title}
-            </h1>
-
-            <p className="mt-6 max-w-xl text-[1.05rem] leading-relaxed text-text-soft md:text-[1.15rem]">
-              {subtitle}
-            </p>
+    <div className="flex h-[100dvh] flex-col overflow-hidden">
+      {/* Décor animé plein écran (aurora + orbes + particules), derrière tout. */}
+      <div
+        aria-hidden
+        className="pointer-events-none fixed inset-0 -z-[5] overflow-hidden"
+      >
+        <AuroraLayer />
+      </div>
 
-            <div className="mt-9 flex flex-col gap-3 sm:flex-row">
-              <GlassButton asChild variant="primary" size="lg">
-                <Link href="/login?mode=signup">
-                  <SparklesIcon size={16} />
-                  {cta}
-                  <ArrowRightIcon size={14} />
-                </Link>
-              </GlassButton>
+      <TopNav />
 
-              <GlassButton variant="outline" size="lg" disabled>
-                {t("ctaSecondary")}
-                <GlassChip variant="default" size="sm" className="ml-1">
-                  {t("comingSoon")}
-                </GlassChip>
-              </GlassButton>
-            </div>
+      <main
+        id="main"
+        className="relative flex flex-1 flex-col items-center justify-center px-6 py-6 text-center"
+      >
+        {/* Eyebrow : LA phrase — tagline de l'instance (settings). */}
+        <GlassChip
+          variant="accent"
+          size="lg"
+          className="fx-rise mb-7"
+          style={{ animationDelay: "0.05s" }}
+        >
+          <StarIcon size={14} />
+          {tagline}
+        </GlassChip>
 
-            <dl className="mt-10 flex flex-wrap items-center gap-x-8 gap-y-3 text-[0.85rem] text-muted">
-              <div className="flex items-baseline gap-2">
-                <dt className="sr-only">{t("stats.courses")}</dt>
-                <dd className="font-semibold text-text">12+</dd>
-                <span>{t("stats.courses")}</span>
-              </div>
-              <span aria-hidden>·</span>
-              <div className="flex items-baseline gap-2">
-                <dt className="sr-only">{t("stats.learners")}</dt>
-                <dd className="font-semibold text-text">
-                  {t("stats.learnersValue", { count: 2400 })}
-                </dd>
-                <span>{t("stats.learners")}</span>
-              </div>
-              <span aria-hidden>·</span>
-              <div className="flex items-baseline gap-2">
-                <dt className="sr-only">
-                  {t("stats.ratingLabel", { value: "★ 4,8" })}
-                </dt>
-                <dd className="font-semibold text-text">★ 4,8</dd>
-                <span>{t("stats.ratingLabel", { value: "" }).trim()}</span>
-              </div>
-            </dl>
-          </div>
+        <h1
+          className="fx-rise mx-auto max-w-4xl font-display text-[clamp(2.5rem,6.4vw,4.75rem)] leading-[1.02] tracking-tight text-text"
+          style={{ animationDelay: "0.15s" }}
+        >
+          {heroTitle}
+        </h1>
 
-          <HeroVisual />
-        </div>
-      </div>
-    </section>
-  );
-}
+        <p
+          className="fx-rise mx-auto mt-6 max-w-xl text-[1.05rem] leading-relaxed text-text-soft md:text-[1.2rem]"
+          style={{ animationDelay: "0.3s" }}
+        >
+          {heroSubtitle}
+        </p>
 
-async function HeroVisual() {
-  const [t, branding] = await Promise.all([
-    getTranslations("home.hero"),
-    getInstanceBranding(),
-  ]);
-  return (
-    <div className="relative">
-      <GlassCard
-        variant="strong"
-        className="aspect-[4/3] overflow-hidden p-0 md:aspect-[5/4]"
-      >
         <div
-          className="relative h-full w-full"
-          style={{
-            background: `linear-gradient(135deg, ${branding.accent}, ${branding.accent}99)`,
-          }}
+          className="fx-rise mt-10 flex flex-col items-center gap-3 sm:flex-row"
+          style={{ animationDelay: "0.45s" }}
         >
-          <div className="absolute inset-0 flex items-end p-6 md:p-8">
-            <div>
-              <div className="font-mono text-[0.72rem] uppercase tracking-[0.18em] text-white/85">
-                {t("previewLabel")}
-              </div>
-              <div className="mt-2 font-display text-3xl text-white md:text-4xl">
-                {branding.name}
-              </div>
-              {branding.tagline ? (
-                <div className="mt-1 max-w-xs text-[0.9rem] text-white/85">
-                  {branding.tagline}
-                </div>
-              ) : null}
-            </div>
-          </div>
-        </div>
-      </GlassCard>
-    </div>
-  );
-}
-
-async function FeaturedCourses({ courses }: { courses: CourseSummary[] }) {
-  courses = courses.slice(0, 3);
-  if (courses.length === 0) return null;
-  const t = await getTranslations("home.featured");
-
-  return (
-    <section className="py-16 md:py-24">
-      <div className="mx-auto max-w-7xl px-6 md:px-8">
-        <div className="mb-10 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
-          <h2 className="font-display text-3xl tracking-tight text-text md:text-4xl">
-            {t("title")}
-          </h2>
-          <p className="max-w-md text-[0.95rem] text-text-soft">
-            {t("subtitle")}
-          </p>
+          <Magnetic>
+            <GlassButton
+              asChild
+              variant="primary"
+              size="lg"
+              className="fx-cta-glow fx-sheen"
+            >
+              <Link href="/login?mode=signup">
+                <SparklesIcon size={16} />
+                {heroCta}
+                <ArrowRightIcon size={14} />
+              </Link>
+            </GlassButton>
+          </Magnetic>
+          <Magnetic strength={10}>
+            <GlassButton asChild variant="glass" size="lg" className="fx-sheen">
+              <Link href="/login">{tNav("signin")}</Link>
+            </GlassButton>
+          </Magnetic>
         </div>
 
-        <ul className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
-          {courses.map((course) => (
-            <FeaturedCard
-              key={course.id}
-              course={course}
-              linkAria={t("linkAria", { title: course.title })}
-            />
-          ))}
-        </ul>
-      </div>
-    </section>
-  );
-}
-
-function FeaturedCard({
-  course,
-  linkAria,
-}: {
-  course: CourseSummary;
-  linkAria: string;
-}) {
-  return (
-    <li>
-      <Link
-        href={`/courses/${course.slug}`}
-        className="block focus-visible:outline-none"
-        aria-label={linkAria}
-      >
-        <GlassCard variant="default" interactive className="h-full">
-          <GlassCardContent className="flex h-full flex-col gap-3 p-5">
-            <GlassCardTitle as="h3" className="text-[1.15rem]">
-              {course.title}
-            </GlassCardTitle>
-            <GlassCardDescription className="text-[0.9rem]">
-              {course.description}
-            </GlassCardDescription>
-          </GlassCardContent>
-        </GlassCard>
-      </Link>
-    </li>
-  );
-}
-
-async function Pillars() {
-  const t = await getTranslations("home.pillars");
-
-  const pillars = [
-    {
-      Icon: BookIcon,
-      title: t("reader.title"),
-      description: t("reader.description"),
-    },
-    {
-      Icon: TrophyIcon,
-      title: t("progress.title"),
-      description: t("progress.description"),
-    },
-    {
-      Icon: SparklesIcon,
-      title: t("authors.title"),
-      description: t("authors.description"),
-    },
-  ] as const;
-
-  return (
-    <section className="py-16 md:py-20">
-      <div className="mx-auto max-w-7xl px-6 md:px-8">
-        <ul className="grid gap-5 md:grid-cols-3">
-          {pillars.map(({ Icon, title, description }) => (
-            <li key={title}>
-              <GlassCard variant="default" className="h-full p-7">
-                <div
-                  className="mb-5 inline-flex h-11 w-11 items-center justify-center rounded-2xl text-[color:var(--color-accent)]"
-                  style={{ background: "var(--color-accent-soft)" }}
-                  aria-hidden
-                >
-                  <Icon size={20} />
-                </div>
-                <h3 className="font-display text-[1.5rem] leading-tight text-text">
-                  {title}
-                </h3>
-                <p className="mt-2 text-[0.95rem] leading-relaxed text-text-soft">
-                  {description}
-                </p>
-              </GlassCard>
+        {/* Faits réels uniquement — vérifiables dans le dépôt / la licence. */}
+        <ul className="mt-12 flex flex-wrap items-center justify-center gap-2">
+          {facts.map((fact, i) => (
+            <li
+              key={fact}
+              className="fx-rise"
+              style={{ animationDelay: `${0.6 + i * 0.1}s` }}
+            >
+              <GlassChip variant="default" size="md" className="fx-sheen">
+                {fact}
+              </GlassChip>
             </li>
           ))}
         </ul>
-      </div>
-    </section>
-  );
-}
-
-async function FinalCta() {
-  const t = await getTranslations("home.finalCta");
+      </main>
 
-  return (
-    <section className="py-16 md:py-24">
-      <div className="mx-auto max-w-5xl px-6 md:px-8">
-        <GlassCard
-          variant="tinted"
-          className="relative overflow-hidden p-10 text-center md:p-16"
-        >
-          <h2 className="font-display text-[clamp(2rem,5vw,3.5rem)] leading-tight text-text">
-            {t("titlePart1")}{" "}
-            <span className="text-[color:var(--color-accent)] italic">
-              {t("titlePart2")}
+      {/*
+        Footer slim — reste dans le viewport (pas de scroll).
+        La mention « Built on Codestar » est figée par la licence GPLv3 :
+        ne pas la masquer ni la retirer.
+      */}
+      <footer className="shrink-0 border-t border-[color:var(--glass-border)]">
+        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-6 py-3 md:px-8">
+          <LocaleSwitcher />
+          <a
+            href={CODESTAR_REPO}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={tFooter("builtOnTitle")}
+            className="inline-flex items-center gap-2 rounded-full border border-[color:var(--glass-border)] bg-[color:var(--glass-bg-strong)] px-3 py-1.5 font-mono text-[0.72rem] text-text-soft backdrop-blur-md transition-colors hover:text-text"
+          >
+            <BrandMark size={14} />
+            <span>
+              {tFooter("builtOn")}{" "}
+              <span className="font-semibold text-text">Codestar</span>
             </span>
-            {t("titlePart3")}
-          </h2>
-          <p className="mx-auto mt-4 max-w-xl text-[1rem] text-text-soft md:text-[1.1rem]">
-            {t("subtitle")}
-          </p>
-          <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
-            <GlassButton asChild variant="primary" size="lg">
-              <Link href="/login?mode=signup">
-                {t("primary")}
-                <ArrowRightIcon size={14} />
-              </Link>
-            </GlassButton>
-            <GlassButton asChild variant="outline" size="lg">
-              <Link href="/login?mode=join">{t("secondary")}</Link>
-            </GlassButton>
-          </div>
-        </GlassCard>
-      </div>
-    </section>
+          </a>
+        </div>
+      </footer>
+    </div>
   );
 }
diff --git a/apps/frontend/app/studio/page.tsx b/apps/frontend/app/studio/page.tsx
new file mode 100644
index 0000000..33cdb73
--- /dev/null
+++ b/apps/frontend/app/studio/page.tsx
@@ -0,0 +1,242 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { getLocale, getTranslations } from "next-intl/server";
+
+import { getInstanceBranding } from "@/app/actions/instance";
+import { getMyAuthoredCourses } from "@/app/actions/courses";
+import { getMyGroups } from "@/app/actions/groups";
+import { getSettings } from "@/app/actions/settings";
+import { AdminShell } from "@/components/admin/admin-shell";
+import { requireRole } from "@/components/admin/role-guard";
+import { CourseMeta } from "@/components/course/course-meta";
+import { EmptyState } from "@/components/course/empty-state";
+import { PageHeader } from "@/components/course/page-header";
+import { StatCard } from "@/components/course/stat-card";
+import { GlassButton } from "@/components/ui/glass-button";
+import { GlassCard, GlassCardContent } from "@/components/ui/glass-card";
+import { GlassChip } from "@/components/ui/glass-chip";
+import {
+  BookIcon,
+  CheckIcon,
+  PencilIcon,
+  PlusIcon,
+  SparklesIcon,
+  UsersIcon,
+} from "@/components/ui/icons";
+import type { CourseSummary } from "@/lib/types";
+
+export const metadata: Metadata = { title: "Studio" };
+
+export default async function StudioPage() {
+  await requireRole("TEACHER");
+  const locale = (await getLocale()) as "fr" | "en";
+  const [t, branding, courses, groups, settings] = await Promise.all([
+    getTranslations("studio"),
+    getInstanceBranding(),
+    getMyAuthoredCourses(),
+    getMyGroups(),
+    getSettings(),
+  ]);
+
+  const published = courses.filter((c) => c.status === "PUBLISHED").length;
+  const drafts = courses.filter((c) => c.status === "DRAFT").length;
+  const teachingGroups = groups.filter((g) => g.roleInGroup === "TEACHER");
+  const recent = [...courses].sort(
+    (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+  );
+
+  return (
+    <AdminShell>
+      <PageHeader
+        kicker={t("kicker", { name: branding.name })}
+        title={t("title")}
+        description={t("description")}
+        actions={
+          <>
+            <GlassButton asChild variant="primary">
+              <Link href="/admin/courses/new">
+                <PlusIcon size={14} />
+                {t("newCourse")}
+              </Link>
+            </GlassButton>
+            <GlassButton variant="outline" disabled>
+              <SparklesIcon size={14} />
+              {t("generateAi")}
+              <GlassChip variant="default" size="sm" className="ml-1">
+                {t("soon")}
+              </GlassChip>
+            </GlassButton>
+          </>
+        }
+        className="mb-10"
+      />
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          label={t("statCourses")}
+          value={courses.length}
+          icon={<BookIcon size={18} />}
+        />
+        <StatCard
+          label={t("statPublished")}
+          value={published}
+          icon={<CheckIcon size={18} />}
+        />
+        <StatCard
+          label={t("statDrafts")}
+          value={drafts}
+          icon={<PencilIcon size={18} />}
+        />
+        <StatCard
+          label={t("statGroups")}
+          value={teachingGroups.length}
+          icon={<UsersIcon size={18} />}
+        />
+      </div>
+
+      <div className="mt-12 grid gap-6 lg:grid-cols-[1.4fr_1fr]">
+        {/* My courses */}
+        <section>
+          <div className="mb-4 flex items-end justify-between">
+            <h2 className="font-display text-xl tracking-tight text-text md:text-2xl">
+              {t("myCoursesTitle")}
+            </h2>
+            <GlassButton asChild variant="ghost" size="sm">
+              <Link href="/admin/courses">{t("manageAll")} →</Link>
+            </GlassButton>
+          </div>
+          {recent.length === 0 ? (
+            <EmptyState
+              icon={<BookIcon size={20} />}
+              title={t("noCourses")}
+              description={t("noCoursesDesc")}
+              action={
+                <GlassButton asChild variant="primary">
+                  <Link href="/admin/courses/new">
+                    <PlusIcon size={14} />
+                    {t("newCourse")}
+                  </Link>
+                </GlassButton>
+              }
+            />
+          ) : (
+            <ul className="space-y-3">
+              {recent.slice(0, 6).map((c) => (
+                <li key={c.id}>
+                  <AuthoredCourse course={c} locale={locale} />
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        {/* Teaching groups + settings peek */}
+        <section className="space-y-8">
+          <div>
+            <h2 className="mb-4 font-display text-xl tracking-tight text-text md:text-2xl">
+              {t("groupsTitle")}
+            </h2>
+            {teachingGroups.length === 0 ? (
+              <GlassCard
+                variant="plain"
+                className="p-6 text-center text-text-soft"
+              >
+                {t("noGroups")}
+              </GlassCard>
+            ) : (
+              <ul className="space-y-2">
+                {teachingGroups.map((g) => (
+                  <li key={g.id}>
+                    <GlassCard variant="default">
+                      <GlassCardContent className="flex flex-wrap items-center justify-between gap-3 p-4">
+                        <div className="min-w-0">
+                          <div className="truncate font-medium text-text">
+                            {g.name}
+                          </div>
+                          <div className="text-[0.8rem] text-muted">
+                            {g.slug}
+                          </div>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-3 text-[0.85rem]">
+                          <Link
+                            href={`/admin/groups/${g.id}/curriculum`}
+                            className="text-[color:var(--color-accent)] hover:underline"
+                          >
+                            {t("curriculumLink")} →
+                          </Link>
+                          <span aria-hidden className="text-muted">
+                            ·
+                          </span>
+                          <Link
+                            href={`/admin/groups/${g.id}/members`}
+                            className="text-[color:var(--color-accent)] hover:underline"
+                          >
+                            {t("membersLink")} →
+                          </Link>
+                        </div>
+                      </GlassCardContent>
+                    </GlassCard>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          {settings && (
+            <div>
+              <h2 className="mb-4 font-display text-xl tracking-tight text-text md:text-2xl">
+                {t("settingsTitle")}
+              </h2>
+              <GlassCard variant="default">
+                <GlassCardContent className="flex items-center justify-between gap-3 p-5">
+                  <span className="text-[0.9rem] text-text-soft">
+                    {t("maxBlocks")}
+                  </span>
+                  <span className="font-display text-[1.6rem] text-text">
+                    {settings.maxBlocksPerPage}
+                  </span>
+                </GlassCardContent>
+              </GlassCard>
+            </div>
+          )}
+        </section>
+      </div>
+    </AdminShell>
+  );
+}
+
+function AuthoredCourse({
+  course,
+  locale,
+}: {
+  course: CourseSummary;
+  locale: "fr" | "en";
+}) {
+  return (
+    <Link
+      href={`/admin/courses/${course.id}`}
+      className="block focus-visible:outline-none"
+    >
+      <GlassCard variant="default" interactive>
+        <GlassCardContent className="flex items-center justify-between gap-3 p-4">
+          <div className="min-w-0">
+            <div className="truncate font-medium text-text">{course.title}</div>
+            <div className="mt-1">
+              <CourseMeta
+                category={course.category}
+                level={course.level}
+                status={course.status}
+                locale={locale}
+                showStatus
+              />
+            </div>
+          </div>
+          <PencilIcon
+            size={16}
+            className="hidden shrink-0 text-muted sm:block"
+          />
+        </GlassCardContent>
+      </GlassCard>
+    </Link>
+  );
+}
diff --git a/apps/frontend/components/admin/course-editor.tsx b/apps/frontend/components/admin/course-editor.tsx
index e43e52d..21760ef 100644
--- a/apps/frontend/components/admin/course-editor.tsx
+++ b/apps/frontend/components/admin/course-editor.tsx
@@ -25,7 +25,6 @@ import { useTranslations } from "next-intl";
 import {
   changeCourseStatus,
   exportCourse,
-  importCourse,
   saveCoursePages,
   updateCourse,
 } from "@/app/actions/courses";
@@ -41,8 +40,11 @@ import {
   type PaletteEntry,
 } from "@/components/block-kinds/palette";
 import { GlassButton } from "@/components/ui/glass-button";
-import { GlassInput, GlassSelect } from "@/components/ui/glass-input";
+import { GlassCard, GlassCardContent } from "@/components/ui/glass-card";
+import { GlassChip } from "@/components/ui/glass-chip";
+import { GlassInput } from "@/components/ui/glass-input";
 import {
+  ArrowRightIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   DownloadIcon,
@@ -56,9 +58,11 @@ import type {
   CourseBlock,
   CourseBlockKind,
   CourseExport,
+  CourseLevel,
   CoursePage,
   CourseStatus,
   PageInput,
+  UpdateCoursePayload,
 } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
@@ -84,10 +88,27 @@ interface CourseEditorProps {
   previewHref: string;
 }
 
-type View = "edit" | "split" | "preview";
-const STATUSES: CourseStatus[] = ["DRAFT", "PUBLISHED", "ARCHIVED"];
+type View = "edit" | "preview";
+type Mode = "start" | "build";
 const AUTOSAVE_MS = 1500;
 
+const KIND_LABEL_KEY: Record<CourseBlockKind, string> = {
+  H1: "palette.h1",
+  H2: "palette.h2",
+  H3: "palette.h3",
+  H4: "palette.h4",
+  H5: "palette.h5",
+  H6: "palette.h6",
+  P: "palette.p",
+  QUOTE: "palette.quote",
+  CODE: "palette.code",
+  CALLOUT: "palette.callout",
+  IMAGE: "palette.image",
+  TABLE: "palette.table",
+  QUIZ: "palette.quiz",
+  SANDBOX: "palette.sandbox",
+};
+
 let counter = 0;
 function nextId(): string {
   counter += 1;
@@ -115,16 +136,6 @@ function toRenderBlock(d: DraftBlock): CourseBlock {
   };
 }
 
-function previewText(d: DraftBlock): string {
-  const p = d.payload;
-  const candidates = [p.text, p.question, p.code, p.src];
-  for (const c of candidates) {
-    if (typeof c === "string" && c.trim()) return c.trim();
-  }
-  if (Array.isArray(p.header)) return (p.header as unknown[]).filter(Boolean).join(" · ");
-  return "";
-}
-
 function countWords(pages: DraftPage[]): number {
   let n = 0;
   const eat = (s: unknown) => {
@@ -148,6 +159,10 @@ function countWords(pages: DraftPage[]): number {
   return n;
 }
 
+function hasAnyBlock(pages: CoursePage[]): boolean {
+  return pages.some((p) => p.blocks.length > 0);
+}
+
 export function CourseEditor({
   courseId,
   courseSlug,
@@ -161,21 +176,26 @@ export function CourseEditor({
   const tErr = useTranslations("errors");
   const router = useRouter();
 
+  const [mode, setMode] = useState<Mode>(() =>
+    hasAnyBlock(initialPages) ? "build" : "start"
+  );
   const [pages, setPages] = useState<DraftPage[]>(() =>
     initialPages.length > 0 ? initialPages.map(toDraftPage) : [emptyPage()]
   );
   const [currentPageId, setCurrentPageId] = useState<string>(
     () => (initialPages[0]?.id ?? null) ?? ""
   );
-  const [selectedId, setSelectedId] = useState<string | null>(null);
   const [title, setTitle] = useState(initialTitle);
   const [status, setStatus] = useState<CourseStatus>(initialStatus);
   const [view, setView] = useState<View>("edit");
+  const [pickerAt, setPickerAt] = useState<number | null>(null);
   const [savedAt, setSavedAt] = useState<number | null>(null);
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [, startMeta] = useTransition();
+  const [publishing, startPublish] = useTransition();
+  const [importing, startImport] = useTransition();
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const lastSavedJson = useRef<string>("");
@@ -188,7 +208,6 @@ export function CourseEditor({
   const currentPage =
     pages.find((p) => p.localId === currentPageId) ?? pages[0];
   const currentBlocks = useMemo(() => currentPage?.blocks ?? [], [currentPage]);
-  const selected = currentBlocks.find((b) => b.localId === selectedId) ?? null;
   const pageFull = currentBlocks.length >= maxBlocksPerPage;
 
   const markDirty = () => {
@@ -213,7 +232,7 @@ export function CourseEditor({
       return next;
     });
     setCurrentPageId(page.localId);
-    setSelectedId(null);
+    setPickerAt(null);
     markDirty();
   }
 
@@ -224,9 +243,9 @@ export function CourseEditor({
       const next = prev.filter((p) => p.localId !== localId);
       const fallback = next[Math.max(0, idx - 1)];
       setCurrentPageId(fallback.localId);
-      setSelectedId(null);
       return next;
     });
+    setPickerAt(null);
     markDirty();
   }
 
@@ -254,7 +273,7 @@ export function CourseEditor({
     }));
   }
 
-  function addEntry(entry: PaletteEntry) {
+  function addEntryAt(entry: PaletteEntry, index: number) {
     if (pageFull) {
       setError(t("pages.full", { max: maxBlocksPerPage }));
       return;
@@ -265,13 +284,20 @@ export function CourseEditor({
       payload: { ...defaultPayloadFor(entry.kind), ...(entry.payloadPatch ?? {}) },
     };
     updateCurrentPage((p) => {
-      const idx = p.blocks.findIndex((b) => b.localId === selectedId);
       const blocks = [...p.blocks];
-      if (idx === -1) blocks.push(draft);
-      else blocks.splice(idx + 1, 0, draft);
+      const at = Math.max(0, Math.min(index, blocks.length));
+      blocks.splice(at, 0, draft);
       return { ...p, blocks };
     });
-    setSelectedId(draft.localId);
+  }
+
+  function moveBlock(localId: string, delta: number) {
+    updateCurrentPage((p) => {
+      const i = p.blocks.findIndex((b) => b.localId === localId);
+      const j = i + delta;
+      if (i < 0 || j < 0 || j >= p.blocks.length) return p;
+      return { ...p, blocks: arrayMove(p.blocks, i, j) };
+    });
   }
 
   function removeBlock(localId: string) {
@@ -279,7 +305,6 @@ export function CourseEditor({
       ...p,
       blocks: p.blocks.filter((b) => b.localId !== localId),
     }));
-    setSelectedId((cur) => (cur === localId ? null : cur));
   }
 
   function onDragEnd(e: DragEndEvent) {
@@ -327,10 +352,10 @@ export function CourseEditor({
   }, [buildPayload, courseId, tErr]);
 
   useEffect(() => {
-    if (!dirty) return;
+    if (!dirty || mode !== "build") return;
     const id = setTimeout(() => void persist(), AUTOSAVE_MS);
     return () => clearTimeout(id);
-  }, [dirty, persist]);
+  }, [dirty, mode, persist]);
 
   // Warn before leaving with unsaved changes.
   useEffect(() => {
@@ -350,19 +375,36 @@ export function CourseEditor({
     });
   }
 
-  function onStatusChange(next: CourseStatus) {
-    const prev = status;
-    setStatus(next);
-    startMeta(async () => {
-      const r = await changeCourseStatus(courseId, next);
+  // ---- publish ----
+  async function onPublish() {
+    const ok = await persist();
+    if (!ok) return;
+    startPublish(async () => {
+      const r = await changeCourseStatus(courseId, "PUBLISHED");
+      if (!r.ok) {
+        setError(r.error ?? tErr("unknown"));
+        return;
+      }
+      setStatus("PUBLISHED");
+      // Publication terminée : on renvoie vers le tableau de bord des cours.
+      router.push("/admin/courses");
+      router.refresh();
+    });
+  }
+
+  function onUnpublish() {
+    startPublish(async () => {
+      const r = await changeCourseStatus(courseId, "DRAFT");
       if (!r.ok) {
-        setStatus(prev);
         setError(r.error ?? tErr("unknown"));
+        return;
       }
+      setStatus("DRAFT");
+      router.refresh();
     });
   }
 
-  // ---- import / export ----
+  // ---- export ----
   async function onExport() {
     if (dirty) await persist();
     const r = await exportCourse(courseId);
@@ -379,7 +421,7 @@ export function CourseEditor({
     URL.revokeObjectURL(url);
   }
 
-  const [importing, startImport] = useTransition();
+  // ---- import (fills the CURRENT course) ----
   function onImportFile(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0];
     e.target.value = "";
@@ -399,138 +441,238 @@ export function CourseEditor({
           setError(t("import.invalidShape"));
           return;
         }
+
+        const importedPages: DraftPage[] = parsed.pages.map((p) => ({
+          localId: nextId(),
+          title: p.title ?? "",
+          blocks: (p.blocks ?? []).map((b) => ({
+            localId: nextId(),
+            kind: b.kind,
+            payload: { ...(b.payload ?? {}) },
+          })),
+        }));
+        if (importedPages.length === 0) importedPages.push(emptyPage());
+
+        const payload: PageInput[] = importedPages.map((p) => ({
+          title: p.title.trim() || null,
+          blocks: p.blocks.map((b) => ({
+            kind: b.kind,
+            payload: normalizePayload(b.kind, b.payload),
+          })),
+        }));
+
         startImport(async () => {
-          const r = await importCourse(parsed);
-          if (!r.ok || !r.course) {
+          // 1) Replace the course content.
+          const r = await saveCoursePages(courseId, payload);
+          if (!r.ok) {
             setError(r.error ?? tErr("unknown"));
             return;
           }
-          router.push(`/admin/courses/${r.course.id}/blocks`);
+          // 2) Overwrite the course metadata from the file (slug stays untouched).
+          const meta = parsed.course;
+          const metaPatch: UpdateCoursePayload = {};
+          if (meta.title) metaPatch.title = meta.title;
+          if (meta.description != null) metaPatch.description = meta.description ?? undefined;
+          if (meta.category != null) metaPatch.category = meta.category ?? undefined;
+          if (meta.level) metaPatch.level = meta.level as CourseLevel;
+          if (Object.keys(metaPatch).length > 0) {
+            await updateCourse(courseId, metaPatch);
+          }
+          // 3) Reflect the imported content locally.
+          setPages(importedPages);
+          setCurrentPageId(importedPages[0].localId);
+          setPickerAt(null);
+          if (meta.title) setTitle(meta.title);
+          lastSavedJson.current = JSON.stringify(payload);
+          setSavedAt(Date.now());
+          setDirty(false);
+          setMode("build");
+          router.refresh();
         });
       })
       .catch(() => setError(tErr("unknown")));
   }
 
-  const renderBlocks = useMemo(() => currentBlocks.map(toRenderBlock), [currentBlocks]);
   const totalBlocks = useMemo(
     () => pages.reduce((acc, p) => acc + p.blocks.length, 0),
     [pages]
   );
   const words = useMemo(() => countWords(pages), [pages]);
   const minutes = Math.max(1, Math.ceil(words / 200));
+  const pageWords = useMemo(
+    () => (currentPage ? countWords([currentPage]) : 0),
+    [currentPage]
+  );
+  const pageMinutes = Math.max(1, Math.ceil(pageWords / 200));
+
+  const fileInput = (
+    <input
+      ref={fileInputRef}
+      type="file"
+      accept="application/json,.json"
+      className="hidden"
+      onChange={onImportFile}
+    />
+  );
 
-  const showCanvas = view !== "preview";
-  const showPreview = view !== "edit";
+  // ---- START SCREEN ----
+  if (mode === "start") {
+    return (
+      <div className="mx-auto max-w-3xl">
+        {fileInput}
+        <div className="mb-7 text-center">
+          <h2 className="font-display text-[1.7rem] text-text">{t("start.title")}</h2>
+          <p className="mt-1 text-text-soft">{t("start.lead")}</p>
+        </div>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <GlassCard variant="default" interactive>
+            <GlassCardContent className="flex h-full flex-col gap-3 p-6">
+              <span className="flex h-11 w-11 items-center justify-center rounded-[var(--r)] bg-[color:var(--color-accent-soft)] text-[color:var(--color-accent)]">
+                <UploadIcon size={20} />
+              </span>
+              <h3 className="font-display text-[1.3rem] text-text">{t("start.importTitle")}</h3>
+              <p className="flex-1 text-[0.92rem] text-text-soft">{t("start.importDesc")}</p>
+              <div>
+                <GlassButton
+                  type="button"
+                  variant="primary"
+                  onClick={() => fileInputRef.current?.click()}
+                  loading={importing}
+                >
+                  <UploadIcon size={15} /> {t("start.importButton")}
+                </GlassButton>
+              </div>
+            </GlassCardContent>
+          </GlassCard>
 
-  return (
-    <div className="grid gap-4 lg:grid-cols-[240px_1fr_320px]">
-      {/* LEFT — palette */}
-      <aside className="lg:sticky lg:top-24 lg:self-start">
-        <div className="rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] p-3 backdrop-blur-md">
-          <h2 className="mb-2 px-1 font-mono text-[0.7rem] uppercase tracking-[0.14em] text-muted">
-            {t("paletteTitle")}
-          </h2>
-          {pageFull && (
-            <p className="mb-2 px-1 text-[0.72rem] text-[color:var(--color-warning)]">
-              {t("pages.full", { max: maxBlocksPerPage })}
-            </p>
-          )}
-          <div className="space-y-3">
-            {PALETTE_GROUPS.map((group) => (
-              <div key={group}>
-                <div className="mb-1 px-1 text-[0.72rem] font-medium text-muted">
-                  {t(`group.${group}`)}
-                </div>
-                <div className="grid grid-cols-2 gap-1.5">
-                  {paletteByGroup(group).map((entry) => {
-                    const Icon = entry.icon;
-                    return (
-                      <button
-                        key={entry.id}
-                        type="button"
-                        disabled={pageFull}
-                        onClick={() => addEntry(entry)}
-                        className="flex items-center gap-1.5 rounded-[var(--r)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg-strong)] px-2 py-1.5 text-left text-[0.78rem] text-text-soft transition-colors hover:border-[color:var(--color-accent)] hover:text-text disabled:cursor-not-allowed disabled:opacity-50"
-                      >
-                        <Icon size={14} />
-                        <span className="truncate">
-                          {t(entry.labelKey as Parameters<typeof t>[0])}
-                        </span>
-                      </button>
-                    );
-                  })}
-                </div>
+          <GlassCard variant="default" interactive>
+            <GlassCardContent className="flex h-full flex-col gap-3 p-6">
+              <span className="flex h-11 w-11 items-center justify-center rounded-[var(--r)] bg-[color:var(--glass-bg-strong)] text-text-soft">
+                <PlusIcon size={20} />
+              </span>
+              <h3 className="font-display text-[1.3rem] text-text">{t("start.composeTitle")}</h3>
+              <p className="flex-1 text-[0.92rem] text-text-soft">{t("start.composeDesc")}</p>
+              <div>
+                <GlassButton type="button" variant="glass" onClick={() => setMode("build")}>
+                  <PlusIcon size={15} /> {t("start.composeButton")}
+                </GlassButton>
               </div>
-            ))}
-          </div>
+            </GlassCardContent>
+          </GlassCard>
         </div>
-      </aside>
+        {error && (
+          <p className="mt-4 text-center text-[0.85rem] text-[color:var(--color-danger)]" role="alert">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  }
 
-      {/* CENTER — toolbar + pages bar + canvas/preview */}
-      <div className="min-w-0 space-y-4">
-        <div className="sticky top-20 z-10 space-y-2 rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg-strong)] p-3 backdrop-blur-xl">
-          <div className="flex flex-wrap items-center gap-2">
-            <GlassInput
-              size="sm"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              onBlur={saveTitle}
-              aria-label={t("field.courseTitle")}
-              className="min-w-[10rem] flex-1 font-display"
+  // ---- block picker (shared between inserters) ----
+  function renderInserter(index: number) {
+    const open = pickerAt === index;
+    return (
+      <div className="relative flex justify-center py-1.5">
+        {open && (
+          <>
+            <div
+              className="fixed inset-0 z-20"
+              aria-hidden
+              onClick={() => setPickerAt(null)}
             />
-            <GlassSelect
-              size="sm"
-              value={status}
-              onChange={(e) => onStatusChange(e.target.value as CourseStatus)}
-              aria-label={t("statusLabel")}
-              className="w-36"
-            >
-              {STATUSES.map((s) => (
-                <option key={s} value={s}>
-                  {t(`status.${s}`)}
-                </option>
-              ))}
-            </GlassSelect>
-          </div>
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="inline-flex rounded-full border border-[color:var(--glass-border)] p-0.5">
-              {(["edit", "split", "preview"] as View[]).map((v) => (
-                <button
-                  key={v}
-                  type="button"
-                  onClick={() => setView(v)}
-                  aria-pressed={view === v}
-                  className={cn(
-                    "rounded-full px-3 py-1 text-[0.8rem] transition-colors",
-                    view === v
-                      ? "bg-[color:var(--color-accent)] text-[color:var(--color-accent-fg)]"
-                      : "text-text-soft hover:text-text"
-                  )}
-                >
-                  {t(`view.${v}`)}
-                </button>
+            <div className="absolute top-full z-30 mt-1 w-[min(30rem,92vw)] rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg-strong)] p-3 shadow-[var(--glass-shadow)] backdrop-blur-xl">
+              {PALETTE_GROUPS.map((group) => (
+                <div key={group} className="mb-2.5 last:mb-0">
+                  <div className="mb-1 px-1 text-[0.7rem] font-medium uppercase tracking-[0.1em] text-muted">
+                    {t(`group.${group}`)}
+                  </div>
+                  <div className="grid grid-cols-2 gap-1.5 sm:grid-cols-3">
+                    {paletteByGroup(group).map((entry) => {
+                      const Icon = entry.icon;
+                      return (
+                        <button
+                          key={entry.id}
+                          type="button"
+                          onClick={() => {
+                            addEntryAt(entry, index);
+                            setPickerAt(null);
+                          }}
+                          className="flex items-center gap-1.5 rounded-[var(--r)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] px-2 py-1.5 text-left text-[0.78rem] text-text-soft transition-colors hover:border-[color:var(--color-accent)] hover:text-text"
+                        >
+                          <Icon size={14} />
+                          <span className="truncate">
+                            {t(entry.labelKey as Parameters<typeof t>[0])}
+                          </span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
               ))}
             </div>
-            <div className="flex items-center gap-1.5">
-              <span className="mr-1 text-[0.78rem] text-muted" aria-live="polite">
-                {saving ? t("saving") : dirty ? t("unsaved") : savedAt ? t("saved") : ""}
-              </span>
+          </>
+        )}
+        <button
+          type="button"
+          disabled={pageFull}
+          onClick={() => setPickerAt(open ? null : index)}
+          className="inline-flex items-center gap-1 rounded-full border border-dashed border-[color:var(--glass-border)] px-3 py-1 text-[0.8rem] text-muted transition-colors hover:border-[color:var(--color-accent)] hover:text-text disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <PlusIcon size={14} /> {t("addBlock")}
+        </button>
+      </div>
+    );
+  }
+
+  // ---- BUILD EDITOR ----
+  return (
+    <div className="mx-auto max-w-3xl">
+      {fileInput}
+
+      {/* HEADER */}
+      <div className="sticky top-20 z-10 space-y-2.5 rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg-strong)] p-3 backdrop-blur-xl">
+        <div className="flex flex-wrap items-center gap-2">
+          <GlassInput
+            size="sm"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            onBlur={saveTitle}
+            aria-label={t("field.courseTitle")}
+            className="min-w-[10rem] flex-1 font-display"
+          />
+          <GlassChip variant={status === "PUBLISHED" ? "success" : "default"} size="sm">
+            {t(`status.${status}`)}
+          </GlassChip>
+          <div className="inline-flex rounded-full border border-[color:var(--glass-border)] p-0.5">
+            {(["edit", "preview"] as View[]).map((v) => (
+              <button
+                key={v}
+                type="button"
+                onClick={() => setView(v)}
+                aria-pressed={view === v}
+                className={cn(
+                  "rounded-full px-3 py-1 text-[0.8rem] transition-colors",
+                  view === v
+                    ? "bg-[color:var(--color-accent)] text-[color:var(--color-accent-fg)]"
+                    : "text-text-soft hover:text-text"
+                )}
+              >
+                {t(`view.${v}`)}
+              </button>
+            ))}
+          </div>
+
+          {status === "PUBLISHED" ? (
+            <>
               <GlassButton
                 type="button"
                 variant="ghost"
                 size="sm"
-                onClick={() => fileInputRef.current?.click()}
-                loading={importing}
+                onClick={onUnpublish}
+                loading={publishing}
               >
-                <UploadIcon size={14} /> {t("import.button")}
-              </GlassButton>
-              <GlassButton type="button" variant="ghost" size="sm" onClick={onExport}>
-                <DownloadIcon size={14} /> {t("export.button")}
-              </GlassButton>
-              <GlassButton asChild variant="ghost" size="sm">
-                <Link href={previewHref} target="_blank">
-                  <EyeIcon size={14} /> {t("openReader")}
-                </Link>
+                {t("unpublish")}
               </GlassButton>
               <GlassButton
                 type="button"
@@ -541,62 +683,117 @@ export function CourseEditor({
               >
                 {t("save")}
               </GlassButton>
-            </div>
-          </div>
-          {error && (
-            <p className="text-[0.8rem] text-[color:var(--color-danger)]" role="alert">
-              {error}
-            </p>
+            </>
+          ) : (
+            <>
+              <GlassButton
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => void persist()}
+                disabled={saving}
+              >
+                {t("saveDraft")}
+              </GlassButton>
+              <GlassButton
+                type="button"
+                variant="primary"
+                size="sm"
+                onClick={onPublish}
+                loading={publishing}
+                disabled={saving}
+              >
+                {t("publish")}
+              </GlassButton>
+            </>
           )}
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="application/json,.json"
-            className="hidden"
-            onChange={onImportFile}
-          />
-        </div>
 
-        {/* PAGES BAR */}
-        <div className="flex flex-wrap items-center gap-1.5 rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] p-2 backdrop-blur-md">
-          {pages.map((p, i) => (
-            <button
-              key={p.localId}
-              type="button"
-              onClick={() => {
-                setCurrentPageId(p.localId);
-                setSelectedId(null);
-              }}
-              aria-pressed={p.localId === currentPage?.localId}
-              className={cn(
-                "rounded-full px-3 py-1 text-[0.8rem] transition-colors",
-                p.localId === currentPage?.localId
-                  ? "bg-[color:var(--color-accent)] text-[color:var(--color-accent-fg)]"
-                  : "border border-[color:var(--glass-border)] text-text-soft hover:text-text"
+          {/* Overflow menu — secondary actions */}
+          <details className="group relative">
+            <summary className="flex h-9 cursor-pointer list-none items-center gap-1 rounded-full border border-[color:var(--glass-border)] px-3 text-[0.8rem] text-text-soft transition-colors hover:text-text [&::-webkit-details-marker]:hidden">
+              {t("more")}
+            </summary>
+            <div className="absolute right-0 z-30 mt-1 w-56 rounded-[var(--r)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg-strong)] p-1.5 shadow-[var(--glass-shadow)] backdrop-blur-xl">
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                className="flex w-full items-center gap-2 rounded-[var(--r-sm)] px-2.5 py-2 text-left text-[0.85rem] text-text-soft transition-colors hover:bg-[color:var(--glass-bg)] hover:text-text"
+              >
+                <UploadIcon size={15} /> {t("import.button")}
+              </button>
+              <button
+                type="button"
+                onClick={onExport}
+                className="flex w-full items-center gap-2 rounded-[var(--r-sm)] px-2.5 py-2 text-left text-[0.85rem] text-text-soft transition-colors hover:bg-[color:var(--glass-bg)] hover:text-text"
+              >
+                <DownloadIcon size={15} /> {t("export.button")}
+              </button>
+              <Link
+                href={previewHref}
+                target="_blank"
+                className="flex w-full items-center gap-2 rounded-[var(--r-sm)] px-2.5 py-2 text-left text-[0.85rem] text-text-soft transition-colors hover:bg-[color:var(--glass-bg)] hover:text-text"
+              >
+                <EyeIcon size={15} /> {t("openReader")}
+              </Link>
+              {status === "PUBLISHED" && (
+                <Link
+                  href={`/courses/${courseSlug}`}
+                  target="_blank"
+                  className="flex w-full items-center gap-2 rounded-[var(--r-sm)] px-2.5 py-2 text-left text-[0.85rem] text-text-soft transition-colors hover:bg-[color:var(--glass-bg)] hover:text-text"
+                >
+                  <ArrowRightIcon size={15} /> {t("viewPublic")}
+                </Link>
               )}
-            >
-              {p.title.trim() || t("pages.untitled", { n: i + 1 })}
-            </button>
-          ))}
-          <GlassButton type="button" variant="ghost" size="sm" onClick={addPage} aria-label={t("pages.add")}>
-            <PlusIcon size={14} /> {t("pages.add")}
-          </GlassButton>
+            </div>
+          </details>
+
+          <span className="ml-auto text-[0.78rem] text-muted" aria-live="polite">
+            {saving ? t("saving") : dirty ? t("unsaved") : savedAt ? t("saved") : ""}
+          </span>
         </div>
 
-        {/* CURRENT PAGE CONTROLS */}
+        {error && (
+          <p className="text-[0.8rem] text-[color:var(--color-danger)]" role="alert">
+            {error}
+          </p>
+        )}
+      </div>
+
+      {/* PAGES STRIP */}
+      <div className="mt-4 flex flex-wrap items-center gap-1.5 rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] p-2 backdrop-blur-md">
+        {pages.map((p, i) => (
+          <button
+            key={p.localId}
+            type="button"
+            onClick={() => {
+              setCurrentPageId(p.localId);
+              setPickerAt(null);
+            }}
+            aria-pressed={p.localId === currentPage?.localId}
+            className={cn(
+              "rounded-full px-3 py-1 text-[0.8rem] transition-colors",
+              p.localId === currentPage?.localId
+                ? "bg-[color:var(--color-accent)] text-[color:var(--color-accent-fg)]"
+                : "border border-[color:var(--glass-border)] text-text-soft hover:text-text"
+            )}
+          >
+            {p.title.trim() || t("pages.untitled", { n: i + 1 })}
+          </button>
+        ))}
+        <GlassButton type="button" variant="ghost" size="sm" onClick={addPage} aria-label={t("pages.add")}>
+          <PlusIcon size={14} /> {t("pages.add")}
+        </GlassButton>
+
         {currentPage && (
-          <div className="flex flex-wrap items-center gap-2">
+          <div className="ml-auto flex items-center gap-1">
             <GlassInput
               size="sm"
               value={currentPage.title}
               onChange={(e) => renameCurrentPage(e.target.value)}
               placeholder={t("field.pageTitle")}
               aria-label={t("field.pageTitle")}
-              className="min-w-[8rem] flex-1"
+              className="w-40"
             />
-            <span className="font-mono text-[0.72rem] text-muted">
-              {currentBlocks.length}/{maxBlocksPerPage}
-            </span>
             <GlassButton
               type="button"
               variant="ghost"
@@ -630,143 +827,102 @@ export function CourseEditor({
             </GlassButton>
           </div>
         )}
-
-        <div className={cn("gap-4", showCanvas && showPreview ? "grid lg:grid-cols-2" : "block")}>
-          {showCanvas && (
-            <div>
-              {currentBlocks.length === 0 ? (
-                <div className="rounded-[var(--r-lg)] border border-dashed border-[color:var(--glass-border)] p-10 text-center text-text-soft">
-                  {t("canvasEmpty")}
-                </div>
-              ) : (
-                <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
-                  <SortableContext
-                    items={currentBlocks.map((b) => b.localId)}
-                    strategy={verticalListSortingStrategy}
-                  >
-                    <ul className="space-y-2">
-                      {currentBlocks.map((b) => (
-                        <CanvasRow
-                          key={b.localId}
-                          block={b}
-                          selected={b.localId === selectedId}
-                          onSelect={() => setSelectedId(b.localId)}
-                          onRemove={() => removeBlock(b.localId)}
-                          previewText={previewText(b)}
-                          removeLabel={t("deleteBlock")}
-                          dragLabel={t("dragHandle")}
-                        />
-                      ))}
-                    </ul>
-                  </SortableContext>
-                </DndContext>
-              )}
-            </div>
-          )}
-
-          {showPreview && (
-            <div className="rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] p-5 backdrop-blur-md">
-              {renderBlocks.length === 0 ? (
-                <p className="text-center text-text-soft">{t("previewEmpty")}</p>
-              ) : (
-                renderBlocks.map((rb) => {
-                  const mod = getModule(rb.kind);
-                  if (!mod) return null;
-                  const Render = mod.Render;
-                  return <Render key={rb.id} block={rb} />;
-                })
-              )}
-            </div>
-          )}
-        </div>
       </div>
 
-      {/* RIGHT — inspector + stats */}
-      <aside className="lg:sticky lg:top-24 lg:self-start">
-        <div className="space-y-4">
-          <div className="rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] p-4 backdrop-blur-md">
-            <h2 className="mb-3 font-mono text-[0.7rem] uppercase tracking-[0.14em] text-muted">
-              {t("inspectorTitle")}
-            </h2>
-            {selected ? (
-              <InspectorBody
-                key={selected.localId}
-                kind={selected.kind}
-                payload={selected.payload}
-                onPatch={(patch) => patchBlock(selected.localId, patch)}
-              />
+      {/* DOCUMENT */}
+      <div className="mt-5">
+        {view === "preview" ? (
+          <div className="rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] p-6 backdrop-blur-md">
+            {currentBlocks.length === 0 ? (
+              <p className="text-center text-text-soft">{t("previewEmpty")}</p>
             ) : (
-              <p className="text-[0.85rem] text-text-soft">{t("inspectorEmpty")}</p>
+              currentBlocks.map(toRenderBlock).map((rb) => {
+                const mod = getModule(rb.kind);
+                if (!mod) return null;
+                const Render = mod.Render;
+                return <Render key={rb.id} block={rb} />;
+              })
             )}
           </div>
-
-          <div className="rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] p-4 backdrop-blur-md">
-            <h2 className="mb-2 font-mono text-[0.7rem] uppercase tracking-[0.14em] text-muted">
-              {t("statsTitle")}
-            </h2>
-            <dl className="grid grid-cols-4 gap-2 text-center">
-              <Stat value={pages.length} label={t("stats.pages")} />
-              <Stat value={totalBlocks} label={t("stats.blocks")} />
-              <Stat value={words} label={t("stats.words")} />
-              <Stat value={minutes} label={t("stats.minutes")} />
-            </dl>
+        ) : currentBlocks.length === 0 ? (
+          <div className="rounded-[var(--r-lg)] border border-dashed border-[color:var(--glass-border)] p-10 text-center">
+            <p className="mb-4 text-text-soft">{t("canvasEmpty")}</p>
+            {renderInserter(0)}
           </div>
-        </div>
-      </aside>
-    </div>
-  );
-}
-
-function Stat({ value, label }: { value: number; label: string }) {
-  return (
-    <div>
-      <dd className="font-display text-[1.4rem] text-text">{value}</dd>
-      <dt className="text-[0.68rem] text-muted">{label}</dt>
-    </div>
-  );
-}
+        ) : (
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+            <SortableContext
+              items={currentBlocks.map((b) => b.localId)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div>
+                {renderInserter(0)}
+                {currentBlocks.map((b, i) => (
+                  <div key={b.localId}>
+                    <BlockCard
+                      block={b}
+                      label={t(KIND_LABEL_KEY[b.kind] as Parameters<typeof t>[0])}
+                      isFirst={i === 0}
+                      isLast={i === currentBlocks.length - 1}
+                      onPatch={(patch) => patchBlock(b.localId, patch)}
+                      onMove={(delta) => moveBlock(b.localId, delta)}
+                      onRemove={() => removeBlock(b.localId)}
+                      moveUpLabel={t("moveUp")}
+                      moveDownLabel={t("moveDown")}
+                      removeLabel={t("deleteBlock")}
+                      dragLabel={t("dragHandle")}
+                    />
+                    {renderInserter(i + 1)}
+                  </div>
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        )}
 
-function InspectorBody({
-  kind,
-  payload,
-  onPatch,
-}: {
-  kind: CourseBlockKind;
-  payload: BlockPayload;
-  onPatch: (patch: BlockPayload) => void;
-}) {
-  const mod = getModule(kind);
-  if (!mod) return null;
-  const Edit = mod.Edit;
-  return (
-    <div className="space-y-2">
-      <span className="inline-block rounded-full bg-[color:var(--glass-bg-strong)] px-2 py-0.5 font-mono text-[0.68rem] uppercase tracking-[0.1em] text-muted">
-        {kind}
-      </span>
-      <Edit payload={payload} onPatch={onPatch} />
+        <p className="mt-4 text-center font-mono text-[0.72rem] text-muted">
+          {currentBlocks.length} {t("stats.blocks")} · ~{pageMinutes} {t("stats.minutes")}
+          {pages.length > 1 && (
+            <>
+              {" · "}
+              {pages.length} {t("stats.pages")} · {totalBlocks} {t("stats.blocks")} · ~{minutes}{" "}
+              {t("stats.minutes")}
+            </>
+          )}
+        </p>
+      </div>
     </div>
   );
 }
 
-function CanvasRow({
+function BlockCard({
   block,
-  selected,
-  onSelect,
+  label,
+  isFirst,
+  isLast,
+  onPatch,
+  onMove,
   onRemove,
-  previewText,
+  moveUpLabel,
+  moveDownLabel,
   removeLabel,
   dragLabel,
 }: {
   block: DraftBlock;
-  selected: boolean;
-  onSelect: () => void;
+  label: string;
+  isFirst: boolean;
+  isLast: boolean;
+  onPatch: (patch: BlockPayload) => void;
+  onMove: (delta: number) => void;
   onRemove: () => void;
-  previewText: string;
+  moveUpLabel: string;
+  moveDownLabel: string;
   removeLabel: string;
   dragLabel: string;
 }) {
   const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } =
     useSortable({ id: block.localId });
+  const mod = getModule(block.kind);
 
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -774,17 +930,16 @@ function CanvasRow({
     opacity: isDragging ? 0.5 : undefined,
   } as React.CSSProperties;
 
+  if (!mod) return null;
+  const Edit = mod.Edit;
+
   return (
-    <li ref={setNodeRef} style={style}>
-      <div
-        onClick={onSelect}
-        className={cn(
-          "flex items-center gap-2 rounded-[var(--r)] border bg-[color:var(--glass-bg-strong)] p-2.5 transition-colors",
-          selected
-            ? "border-[color:var(--color-accent)] shadow-[0_0_0_2px_var(--color-accent-soft)]"
-            : "border-[color:var(--glass-border)] hover:border-[color:var(--color-accent)]"
-        )}
-      >
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="rounded-[var(--r-lg)] border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] backdrop-blur-md"
+    >
+      <div className="flex items-center gap-2 border-b border-[color:var(--glass-border)] px-3 py-2">
         <button
           type="button"
           ref={setActivatorNodeRef}
@@ -792,28 +947,50 @@ function CanvasRow({
           {...listeners}
           aria-label={dragLabel}
           className="cursor-grab touch-none text-muted hover:text-text active:cursor-grabbing"
-          onClick={(e) => e.stopPropagation()}
         >
           <GripVerticalIcon size={16} />
         </button>
-        <span className="shrink-0 rounded bg-[color:var(--glass-bg)] px-1.5 py-0.5 font-mono text-[0.66rem] uppercase tracking-[0.08em] text-muted">
-          {block.kind}
-        </span>
-        <span className="min-w-0 flex-1 truncate text-[0.85rem] text-text-soft">
-          {previewText || "—"}
+        <span className="flex-1 font-mono text-[0.72rem] uppercase tracking-[0.1em] text-muted">
+          {label}
         </span>
         <button
           type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove();
-          }}
+          onClick={() => onMove(-1)}
+          disabled={isFirst}
+          aria-label={moveUpLabel}
+          className="rounded p-1 text-muted transition-colors hover:text-text disabled:cursor-not-allowed disabled:opacity-30"
+        >
+          <ChevronUp />
+        </button>
+        <button
+          type="button"
+          onClick={() => onMove(1)}
+          disabled={isLast}
+          aria-label={moveDownLabel}
+          className="rounded p-1 text-muted transition-colors hover:text-text disabled:cursor-not-allowed disabled:opacity-30"
+        >
+          <ChevronDown />
+        </button>
+        <button
+          type="button"
+          onClick={onRemove}
           aria-label={removeLabel}
-          className="text-muted hover:text-[color:var(--color-danger)]"
+          className="rounded p-1 text-muted transition-colors hover:text-[color:var(--color-danger)]"
         >
           <TrashIcon size={15} />
         </button>
       </div>
-    </li>
+      <div className="p-3">
+        <Edit payload={block.payload} onPatch={onPatch} />
+      </div>
+    </div>
   );
 }
+
+// Small chevrons (rotated reuse of the shared chevron set kept inline to avoid new icon files).
+function ChevronUp() {
+  return <ChevronLeftIcon size={15} className="rotate-90" />;
+}
+function ChevronDown() {
+  return <ChevronRightIcon size={15} className="rotate-90" />;
+}
diff --git a/apps/frontend/components/admin/course-form.tsx b/apps/frontend/components/admin/course-form.tsx
index 77d3f14..79e517b 100644
--- a/apps/frontend/components/admin/course-form.tsx
+++ b/apps/frontend/components/admin/course-form.tsx
@@ -112,6 +112,11 @@ export function CourseForm({ course, labels, cancelHref = "/admin/courses" }: Co
           setError(r.error ?? labels.errorUnknown);
           return;
         }
+        // Création : on enchaîne directement sur l'éditeur de contenu.
+        setSaved(true);
+        router.refresh();
+        router.push(`/admin/courses/${r.course.id}/blocks`);
+        return;
       }
       setSaved(true);
       router.refresh();
diff --git a/apps/frontend/components/block-kinds/code.tsx b/apps/frontend/components/block-kinds/code.tsx
index 6aba827..6e7e41e 100644
--- a/apps/frontend/components/block-kinds/code.tsx
+++ b/apps/frontend/components/block-kinds/code.tsx
@@ -10,7 +10,7 @@ export const CodeModule: BlockKindModule = {
     return (
       <pre
         id={id}
-        className="my-6 overflow-x-auto rounded-[var(--r)] border border-[color:var(--glass-border)] bg-[color:color-mix(in_oklab,var(--text)_92%,transparent)] p-4 font-mono text-[0.85rem] leading-relaxed text-white"
+        className="my-6 overflow-x-auto rounded-[var(--r)] border border-[color:var(--glass-border)] bg-[#1A1F2E] p-4 font-mono text-[0.85rem] leading-relaxed text-[#EDF1F9]"
       >
         <code>{getStr(block.payload, "code")}</code>
       </pre>
diff --git a/apps/frontend/components/block-kinds/sandbox.tsx b/apps/frontend/components/block-kinds/sandbox.tsx
index 1c77f22..c29bb28 100644
--- a/apps/frontend/components/block-kinds/sandbox.tsx
+++ b/apps/frontend/components/block-kinds/sandbox.tsx
@@ -31,7 +31,7 @@ export const SandboxModule: BlockKindModule = {
             <PlayIcon size={12} /> {t("sandbox.run")}
           </button>
         </div>
-        <pre className="overflow-x-auto bg-[color:color-mix(in_oklab,var(--text)_92%,transparent)] p-4 font-mono text-[0.85rem] leading-relaxed text-white">
+        <pre className="overflow-x-auto bg-[#1A1F2E] p-4 font-mono text-[0.85rem] leading-relaxed text-[#EDF1F9]">
           <code>{code}</code>
         </pre>
         {expectedOutput && (
diff --git a/apps/frontend/components/course/catalog-course-card.tsx b/apps/frontend/components/course/catalog-course-card.tsx
new file mode 100644
index 0000000..dc1196e
--- /dev/null
+++ b/apps/frontend/components/course/catalog-course-card.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+
+import { CourseMeta } from "@/components/course/course-meta";
+import { GlassCard } from "@/components/ui/glass-card";
+import { ArrowRightIcon } from "@/components/ui/icons";
+import type { CourseSummary } from "@/lib/types";
+
+/** Citron-aligned accent tokens used to give each cover a distinct hue. */
+const COVER_TOKENS = [
+  "--color-accent",
+  "--color-success",
+  "--color-warning",
+  "--color-danger",
+  "--color-tip",
+  "--color-green",
+] as const;
+
+/** Stable hash so a course always gets the same cover. */
+function pickToken(seed: string): string {
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
+  return COVER_TOKENS[h % COVER_TOKENS.length];
+}
+
+function initial(title: string): string {
+  const m = title.match(/\p{L}|\p{N}/u);
+  return (m?.[0] ?? "•").toUpperCase();
+}
+
+export function CatalogCourseCard({
+  course,
+  locale = "fr",
+}: {
+  course: CourseSummary;
+  locale?: "fr" | "en";
+}) {
+  const t = useTranslations("catalog");
+  const token = pickToken(course.slug || course.id);
+
+  return (
+    <Link
+      href={`/courses/${course.slug}`}
+      aria-label={course.title}
+      className="group block h-full focus-visible:outline-none"
+    >
+      <GlassCard variant="default" interactive className="h-full overflow-hidden p-0">
+        {/* Cover */}
+        <div
+          className="relative flex h-24 items-center justify-center"
+          style={{
+            background: `linear-gradient(135deg, color-mix(in oklab, var(${token}) 34%, transparent), color-mix(in oklab, var(${token}) 6%, transparent))`,
+          }}
+        >
+          <span
+            aria-hidden
+            className="font-display text-[3.2rem] leading-none opacity-55"
+            style={{ color: `var(${token})` }}
+          >
+            {initial(course.title)}
+          </span>
+        </div>
+
+        {/* Body */}
+        <div className="flex h-[calc(100%-6rem)] flex-col gap-3 p-5">
+          <CourseMeta
+            category={course.category}
+            level={course.level}
+            locale={locale}
+          />
+
+          <h3 className="font-display text-[1.18rem] leading-snug tracking-tight text-text">
+            {course.title}
+          </h3>
+
+          {course.description && (
+            <p className="line-clamp-2 text-[0.9rem] leading-[1.55] text-text-soft">
+              {course.description}
+            </p>
+          )}
+
+          <div className="mt-auto flex items-center justify-between gap-2 border-t border-[color:var(--glass-border)] pt-3">
+            <span className="truncate text-[0.78rem] text-muted">
+              {course.authorName ? t("by", { author: course.authorName }) : " "}
+            </span>
+            <span
+              aria-hidden
+              className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[color:var(--color-accent-soft)] text-[color:var(--color-accent)] transition-transform group-hover:translate-x-0.5"
+            >
+              <ArrowRightIcon size={15} />
+            </span>
+          </div>
+        </div>
+      </GlassCard>
+    </Link>
+  );
+}
diff --git a/apps/frontend/components/course/catalog-grid.tsx b/apps/frontend/components/course/catalog-grid.tsx
index 868ac83..ef1d76d 100644
--- a/apps/frontend/components/course/catalog-grid.tsx
+++ b/apps/frontend/components/course/catalog-grid.tsx
@@ -1,35 +1,28 @@
 "use client";
 
 import { useMemo, useState } from "react";
+import { useTranslations } from "next-intl";
 
-import { CourseCard } from "@/components/course/course-card";
+import { CatalogCourseCard } from "@/components/course/catalog-course-card";
 import { EmptyState } from "@/components/course/empty-state";
 import { GlassChip } from "@/components/ui/glass-chip";
 import { GlassInput } from "@/components/ui/glass-input";
 import { BookIcon } from "@/components/ui/icons";
+import { cn } from "@/lib/utils";
 import type { CourseSummary } from "@/lib/types";
 
-interface Labels {
-  search: string;
-  empty: string;
-  emptyFiltered: string;
-  tabAll: string;
-  tabMine: string;
-}
-
 interface CatalogGridProps {
   allCourses: CourseSummary[];
   groupCourseIds: string[];
-  labels: Labels;
   locale: "fr" | "en";
 }
 
 export function CatalogGrid({
   allCourses,
   groupCourseIds,
-  labels,
   locale,
 }: CatalogGridProps) {
+  const t = useTranslations("catalog");
   const [scope, setScope] = useState<"all" | "mine">("all");
   const [query, setQuery] = useState("");
   const [category, setCategory] = useState<string | null>(null);
@@ -54,35 +47,46 @@ export function CatalogGrid({
     });
   }, [allCourses, scope, groupSet, category, query]);
 
+  const scopes: { id: "all" | "mine"; label: string }[] = [
+    { id: "all", label: t("tabs.all") },
+    { id: "mine", label: t("tabs.mine") },
+  ];
+
   return (
-    <div className="space-y-6">
-      <div className="flex flex-col gap-4">
-        <div className="flex flex-wrap items-center gap-2">
-          <GlassChip
-            asButton
-            variant={scope === "all" ? "accent" : "default"}
-            onClick={() => setScope("all")}
-          >
-            {labels.tabAll}
-          </GlassChip>
-          <GlassChip
-            asButton
-            variant={scope === "mine" ? "accent" : "default"}
-            onClick={() => setScope("mine")}
-          >
-            {labels.tabMine}
-          </GlassChip>
+    <div>
+      {/* Toolbar */}
+      <div className="mb-8 space-y-4">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="inline-flex rounded-full border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] p-0.5 backdrop-blur-md">
+            {scopes.map((s) => (
+              <button
+                key={s.id}
+                type="button"
+                onClick={() => setScope(s.id)}
+                aria-pressed={scope === s.id}
+                className={cn(
+                  "rounded-full px-4 py-1.5 text-[0.85rem] transition-colors",
+                  scope === s.id
+                    ? "bg-[color:var(--color-accent)] text-[color:var(--color-accent-fg)]"
+                    : "text-text-soft hover:text-text"
+                )}
+              >
+                {s.label}
+              </button>
+            ))}
+          </div>
+          <span className="text-[0.82rem] text-muted" aria-live="polite">
+            {t("results", { count: filtered.length })}
+          </span>
         </div>
 
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-          <GlassInput
-            type="search"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder={labels.search}
-            className="max-w-md"
-          />
-        </div>
+        <GlassInput
+          type="search"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={t("search")}
+          className="w-full"
+        />
 
         {categories.length > 0 && (
           <div className="flex flex-wrap items-center gap-2">
@@ -92,7 +96,7 @@ export function CatalogGrid({
               size="sm"
               onClick={() => setCategory(null)}
             >
-              ✦
+              {t("allCategories")}
             </GlassChip>
             {categories.map((c) => (
               <GlassChip
@@ -112,13 +116,13 @@ export function CatalogGrid({
       {filtered.length === 0 ? (
         <EmptyState
           icon={<BookIcon size={20} />}
-          title={query || category ? labels.emptyFiltered : labels.empty}
+          title={query || category ? t("emptyFiltered") : t("empty")}
         />
       ) : (
-        <ul className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+        <ul className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
           {filtered.map((c) => (
             <li key={c.id}>
-              <CourseCard course={c} href={`/courses/${c.slug}`} locale={locale} />
+              <CatalogCourseCard course={c} locale={locale} />
             </li>
           ))}
         </ul>
diff --git a/apps/frontend/components/course/course-save-button.tsx b/apps/frontend/components/course/course-save-button.tsx
new file mode 100644
index 0000000..c7ef6f6
--- /dev/null
+++ b/apps/frontend/components/course/course-save-button.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState, useTransition } from "react";
+
+import { createBookmark, deleteBookmark } from "@/app/actions/bookmarks";
+import { GlassButton } from "@/components/ui/glass-button";
+import { BookmarkFilledIcon, BookmarkIcon } from "@/components/ui/icons";
+
+interface CourseSaveButtonProps {
+  courseId: string;
+  /** First block of the course — used as the (hidden) anchor of the course-level bookmark. */
+  firstBlockId: string | null;
+  initialId: string | null;
+  labelSave: string;
+  labelSaved: string;
+  size?: "sm" | "md" | "lg";
+}
+
+/**
+ * Course-level "save" toggle. The backend only stores block-level bookmarks,
+ * so a saved course is materialised as a single bookmark anchored on its first
+ * block. This anchor is invisible to the user: the UI only ever talks about
+ * saving the course.
+ */
+export function CourseSaveButton({
+  courseId,
+  firstBlockId,
+  initialId,
+  labelSave,
+  labelSaved,
+  size = "md",
+}: CourseSaveButtonProps) {
+  const [id, setId] = useState<string | null>(initialId);
+  const [pending, start] = useTransition();
+  const active = id !== null;
+
+  function toggle() {
+    if (pending || !firstBlockId) return;
+    start(async () => {
+      if (active && id) {
+        const r = await deleteBookmark(id);
+        if (r.ok) setId(null);
+      } else {
+        const r = await createBookmark(courseId, firstBlockId);
+        if (r.ok && r.id) setId(r.id);
+      }
+    });
+  }
+
+  return (
+    <GlassButton
+      type="button"
+      variant={active ? "primary" : "outline"}
+      size={size}
+      onClick={toggle}
+      disabled={pending || !firstBlockId}
+      aria-pressed={active}
+    >
+      {active ? <BookmarkFilledIcon size={15} /> : <BookmarkIcon size={15} />}
+      {active ? labelSaved : labelSave}
+    </GlassButton>
+  );
+}
diff --git a/apps/frontend/components/home/aurora-layer.tsx b/apps/frontend/components/home/aurora-layer.tsx
new file mode 100644
index 0000000..532952b
--- /dev/null
+++ b/apps/frontend/components/home/aurora-layer.tsx
@@ -0,0 +1,90 @@
+/**
+ * Couche décorative animée pour les pages publiques (home, auth).
+ * Aurora conique + orbes flottants + grille en fondu + particules
+ * scintillantes. Purement décoratif (`aria-hidden`), sans JS.
+ * Toutes les animations sont neutralisées par `prefers-reduced-motion`
+ * (cf. globals.css).
+ */
+
+// Positions déterministes (pas de Math.random → pas de mismatch d'hydratation).
+const PARTICLES = [
+  { top: "16%", left: "12%", size: 5, delay: "0s", dur: "5s" },
+  { top: "28%", left: "82%", size: 3, delay: "0.8s", dur: "4s" },
+  { top: "44%", left: "24%", size: 4, delay: "1.6s", dur: "6s" },
+  { top: "62%", left: "70%", size: 6, delay: "0.4s", dur: "5.5s" },
+  { top: "74%", left: "18%", size: 3, delay: "2.2s", dur: "4.5s" },
+  { top: "22%", left: "54%", size: 4, delay: "1.2s", dur: "6.5s" },
+  { top: "82%", left: "46%", size: 5, delay: "0.2s", dur: "5s" },
+  { top: "38%", left: "90%", size: 3, delay: "1.9s", dur: "4.2s" },
+  { top: "55%", left: "8%", size: 4, delay: "2.6s", dur: "6s" },
+  { top: "10%", left: "38%", size: 3, delay: "1.4s", dur: "5.2s" },
+  { top: "68%", left: "58%", size: 5, delay: "0.6s", dur: "4.8s" },
+  { top: "48%", left: "62%", size: 3, delay: "2.0s", dur: "5.6s" },
+];
+
+export function AuroraLayer({ className = "" }: { className?: string }) {
+  return (
+    <div
+      aria-hidden
+      className={"absolute inset-0 overflow-hidden " + className}
+    >
+      {/* Faisceau conique en rotation — coeur lumineux de la scène. */}
+      <div
+        className="fx-aurora absolute left-1/2 top-1/2 h-[130vmax] w-[130vmax] opacity-40 blur-[70px]"
+        style={{
+          background:
+            "conic-gradient(from 90deg at 50% 50%, transparent 0%, color-mix(in oklab, var(--color-accent) 32%, transparent) 12%, transparent 32%, color-mix(in oklab, var(--color-bg-mesh-2-raw) 85%, transparent) 55%, transparent 78%)",
+        }}
+      />
+
+      {/* Orbes flottants. */}
+      <div
+        className="fx-orb absolute left-[10%] top-[20%] h-44 w-44 rounded-full opacity-55 blur-2xl"
+        style={{
+          background:
+            "radial-gradient(circle, color-mix(in oklab, var(--color-accent) 48%, transparent), transparent 70%)",
+        }}
+      />
+      <div
+        className="fx-orb absolute right-[12%] bottom-[18%] h-56 w-56 rounded-full opacity-45 blur-2xl"
+        style={{
+          animationDelay: "1.6s",
+          background:
+            "radial-gradient(circle, color-mix(in oklab, var(--color-bg-mesh-1-raw) 92%, transparent), transparent 70%)",
+        }}
+      />
+
+      {/* Grille fine, en fondu radial vers les bords. */}
+      <div
+        className="absolute inset-0 opacity-[0.07]"
+        style={{
+          backgroundImage:
+            "linear-gradient(var(--color-text-raw) 1px, transparent 1px), linear-gradient(90deg, var(--color-text-raw) 1px, transparent 1px)",
+          backgroundSize: "58px 58px",
+          maskImage:
+            "radial-gradient(ellipse 72% 60% at 50% 42%, #000 28%, transparent 76%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 72% 60% at 50% 42%, #000 28%, transparent 76%)",
+        }}
+      />
+
+      {/* Particules scintillantes. */}
+      {PARTICLES.map((p, i) => (
+        <span
+          key={i}
+          className="fx-particle absolute rounded-full bg-[color:var(--color-accent)]"
+          style={{
+            top: p.top,
+            left: p.left,
+            width: p.size,
+            height: p.size,
+            animationDelay: p.delay,
+            animationDuration: p.dur,
+            boxShadow:
+              "0 0 8px color-mix(in oklab, var(--color-accent) 80%, transparent)",
+          }}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/frontend/components/theme-provider.tsx b/apps/frontend/components/theme-provider.tsx
new file mode 100644
index 0000000..f4f8667
--- /dev/null
+++ b/apps/frontend/components/theme-provider.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+/**
+ * Client theme context. Flips `document.documentElement.dataset.theme`
+ * immediately for instant feedback, then persists the choice via the
+ * `setThemeAction` server action. Initial value injected by RootLayout.
+ */
+
+import * as React from "react";
+
+import { setThemeAction } from "@/app/actions/theme";
+import { DEFAULT_THEME, type ResolvedTheme, type Theme } from "@/lib/theme";
+
+interface ThemeContextValue {
+  /** The stored preference (light | dark | system). */
+  theme: Theme;
+  /** The currently applied theme (system resolved to light|dark). */
+  resolved: ResolvedTheme;
+  setTheme: (next: Theme) => void;
+  /** Convenience toggle between light and dark. */
+  toggle: () => void;
+}
+
+const ThemeContext = React.createContext<ThemeContextValue | null>(null);
+
+function systemResolved(): ResolvedTheme {
+  if (typeof window === "undefined") {
+    return DEFAULT_THEME === "light" ? "light" : "dark";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function applyResolved(theme: Theme): ResolvedTheme {
+  const resolved: ResolvedTheme =
+    theme === "system" ? systemResolved() : theme;
+  if (typeof document !== "undefined") {
+    document.documentElement.dataset.theme = resolved;
+  }
+  return resolved;
+}
+
+export function ThemeProvider({
+  initialTheme,
+  initialResolved,
+  children,
+}: {
+  initialTheme: Theme;
+  initialResolved: ResolvedTheme;
+  children: React.ReactNode;
+}) {
+  const [theme, setThemeState] = React.useState<Theme>(initialTheme);
+  const [resolved, setResolved] =
+    React.useState<ResolvedTheme>(initialResolved);
+
+  // Keep `system` in sync with OS changes while the page is open.
+  React.useEffect(() => {
+    if (theme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => setResolved(applyResolved("system"));
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [theme]);
+
+  const setTheme = React.useCallback((next: Theme) => {
+    setThemeState(next);
+    setResolved(applyResolved(next));
+    void setThemeAction(next);
+  }, []);
+
+  const toggle = React.useCallback(() => {
+    setTheme(
+      (theme === "system" ? systemResolved() : theme) === "dark"
+        ? "light"
+        : "dark"
+    );
+  }, [theme, setTheme]);
+
+  const value = React.useMemo<ThemeContextValue>(
+    () => ({ theme, resolved, setTheme, toggle }),
+    [theme, resolved, setTheme, toggle]
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = React.useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
+  return ctx;
+}
diff --git a/apps/frontend/components/theme-script.tsx b/apps/frontend/components/theme-script.tsx
new file mode 100644
index 0000000..16989e6
--- /dev/null
+++ b/apps/frontend/components/theme-script.tsx
@@ -0,0 +1,15 @@
+/**
+ * Inline blocking script — runs before paint to correct the `system` theme.
+ *
+ * The server already sets <html data-theme> from the cookie (default = dark).
+ * When the cookie is "system", the server cannot know the OS preference, so
+ * this script reads `matchMedia` synchronously and fixes data-theme before the
+ * first paint → no flash of the wrong theme (FOUC).
+ */
+
+import { THEME_COOKIE } from "@/lib/theme";
+
+export function ThemeScript() {
+  const js = `(function(){try{var m=document.cookie.match(/(?:^|; )${THEME_COOKIE}=([^;]+)/);var v=m?decodeURIComponent(m[1]):null;if(v==="system"||!v&&false){var d=window.matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.dataset.theme=d?"dark":"light";}}catch(e){}})();`;
+  return <script dangerouslySetInnerHTML={{ __html: js }} />;
+}
diff --git a/apps/frontend/components/theme-toggle.tsx b/apps/frontend/components/theme-toggle.tsx
new file mode 100644
index 0000000..50483c1
--- /dev/null
+++ b/apps/frontend/components/theme-toggle.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+/**
+ * Light/dark toggle (glass pill). Shows the icon of the theme it will switch
+ * TO. Placed in the top-nav next to the locale switcher.
+ */
+
+import * as React from "react";
+import { useTranslations } from "next-intl";
+
+import { useTheme } from "@/components/theme-provider";
+
+function SunIcon({ size = 18 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+    </svg>
+  );
+}
+
+function MoonIcon({ size = 18 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
+    </svg>
+  );
+}
+
+export function ThemeToggle({ className }: { className?: string }) {
+  const t = useTranslations("theme");
+  const { resolved, toggle } = useTheme();
+  const next = resolved === "dark" ? "light" : "dark";
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-label={t("toggleTo", { mode: t(next) })}
+      title={t("toggleTo", { mode: t(next) })}
+      className={
+        "inline-flex h-9 w-9 items-center justify-center rounded-full border border-[color:var(--glass-border)] bg-[color:var(--glass-bg)] text-text-soft backdrop-blur-md transition-colors hover:text-text hover:bg-[color:var(--glass-bg-strong)] " +
+        (className ?? "")
+      }
+    >
+      {resolved === "dark" ? <SunIcon /> : <MoonIcon />}
+    </button>
+  );
+}
diff --git a/apps/frontend/components/top-nav.tsx b/apps/frontend/components/top-nav.tsx
index 157028e..3388d00 100644
--- a/apps/frontend/components/top-nav.tsx
+++ b/apps/frontend/components/top-nav.tsx
@@ -1,9 +1,7 @@
 /**
- * TopNav publique — adaptative selon l'état d'authentification.
- * - Visiteur : CTA "Rejoindre avec un code" + "Se connecter"
- * - Authentifié : avatar + UserMenu (rôle, groupes, déconnexion)
- *
- * Liens contextuels supplémentaires affichés selon le rôle (admin, teacher).
+ * TopNav — adaptative selon l'état d'authentification.
+ * - Visiteur : toggle thème + CTA "Rejoindre avec un code" + "Se connecter"
+ * - Authentifié : liens contextuels par rôle + toggle thème + UserMenu
  */
 
 import Link from "next/link";
@@ -12,11 +10,20 @@ import { getTranslations } from "next-intl/server";
 import { getMe } from "@/app/actions/auth";
 import { getInstanceBranding } from "@/app/actions/instance";
 import { BrandMark, type LogoPreset } from "@/components/brand-mark";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { UserMenu } from "@/components/user-menu";
 import { GlassButton } from "@/components/ui/glass-button";
 import { GlassNav, GlassNavInner } from "@/components/ui/glass-nav";
 import { KeyIcon } from "@/components/ui/icons";
 import { isAdmin, isStaff } from "@/lib/roles";
+import type { Role } from "@/lib/types";
+
+/** Role-appropriate "home" route (matches the /dashboard dispatcher). */
+function homeHref(role: Role): string {
+  if (isAdmin(role)) return "/admin";
+  if (isStaff(role)) return "/studio";
+  return "/learn";
+}
 
 export async function TopNav() {
   const [t, branding, me] = await Promise.all([
@@ -26,6 +33,8 @@ export async function TopNav() {
   ]);
 
   const preset = branding.logo.value as LogoPreset;
+  const navLinkClass =
+    "rounded-full px-3 py-1.5 text-[0.88rem] text-text-soft hover:bg-[color:var(--glass-bg)] hover:text-text";
 
   return (
     <GlassNav>
@@ -44,30 +53,25 @@ export async function TopNav() {
             aria-label={t("sectionsLabel")}
             className="ml-6 hidden items-center gap-1 md:flex"
           >
-            <Link
-              href="/home"
-              className="rounded-full px-3 py-1.5 text-[0.88rem] text-text-soft hover:bg-[color:var(--glass-bg)] hover:text-text"
-            >
+            <Link href={homeHref(me.role)} className={navLinkClass}>
               {t("home")}
             </Link>
-            <Link
-              href="/courses"
-              className="rounded-full px-3 py-1.5 text-[0.88rem] text-text-soft hover:bg-[color:var(--glass-bg)] hover:text-text"
-            >
+            <Link href="/courses" className={navLinkClass}>
               {t("catalog")}
             </Link>
-            <Link
-              href="/my-courses"
-              className="rounded-full px-3 py-1.5 text-[0.88rem] text-text-soft hover:bg-[color:var(--glass-bg)] hover:text-text"
-            >
-              {t("myCourses")}
-            </Link>
+            {!isStaff(me.role) && (
+              <Link href="/my-courses" className={navLinkClass}>
+                {t("myCourses")}
+              </Link>
+            )}
             {isStaff(me.role) && (
-              <Link
-                href="/admin"
-                className="rounded-full px-3 py-1.5 text-[0.88rem] text-text-soft hover:bg-[color:var(--glass-bg)] hover:text-text"
-              >
-                {isAdmin(me.role) ? t("admin") : t("teach")}
+              <Link href="/admin/courses" className={navLinkClass}>
+                {t("manageCourses")}
+              </Link>
+            )}
+            {isAdmin(me.role) && (
+              <Link href="/admin/users" className={navLinkClass}>
+                {t("users")}
               </Link>
             )}
           </nav>
@@ -75,6 +79,8 @@ export async function TopNav() {
 
         <span className="flex-1" />
 
+        <ThemeToggle />
+
         {me ? (
           <UserMenu user={me} />
         ) : (
diff --git a/apps/frontend/components/ui/magnetic.tsx b/apps/frontend/components/ui/magnetic.tsx
new file mode 100644
index 0000000..5d29d15
--- /dev/null
+++ b/apps/frontend/components/ui/magnetic.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+/**
+ * Magnetic — l'enfant est légèrement attiré vers le curseur quand il
+ * l'approche, puis revient en place avec un ressort doux. Effet discret
+ * (amplitude faible) pour des CTA un peu hors du commun, sans surcharge.
+ * No-op sous `prefers-reduced-motion`.
+ */
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface MagneticProps {
+  children: React.ReactNode;
+  /** Amplitude max du déplacement, en px. */
+  strength?: number;
+  className?: string;
+}
+
+export function Magnetic({
+  children,
+  strength = 14,
+  className,
+}: MagneticProps) {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    let raf = 0;
+    const onMove = (e: PointerEvent) => {
+      const rect = el.getBoundingClientRect();
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const dx = (e.clientX - cx) / (rect.width / 2);
+      const dy = (e.clientY - cy) / (rect.height / 2);
+      if (raf) cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        el.style.transform = `translate3d(${dx * strength}px, ${dy * strength}px, 0)`;
+      });
+    };
+    const reset = () => {
+      if (raf) cancelAnimationFrame(raf);
+      el.style.transform = "translate3d(0, 0, 0)";
+    };
+
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerleave", reset);
+    return () => {
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerleave", reset);
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, [strength]);
+
+  return (
+    <div
+      ref={ref}
+      className={cn("transition-transform duration-300 ease-out", className)}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/frontend/components/ui/slide-to-confirm.tsx b/apps/frontend/components/ui/slide-to-confirm.tsx
new file mode 100644
index 0000000..6d3b41e
--- /dev/null
+++ b/apps/frontend/components/ui/slide-to-confirm.tsx
@@ -0,0 +1,255 @@
+"use client";
+
+/**
+ * SlideToConfirm — on valide en faisant glisser la poignée jusqu'au bout,
+ * au lieu d'un simple clic. Fantaisie maîtrisée : geste volontaire, retour
+ * élastique si on relâche trop tôt, état « confirmé » puis chargement.
+ *
+ * Accessibilité :
+ * - la poignée est un bouton focusable (rôle slider) ;
+ * - au clavier : ←/→ déplacent, Entrée/Espace confirment directement ;
+ * - `prefers-reduced-motion` → bascule en bouton plein classique (1 clic).
+ */
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { ArrowRightIcon, CheckIcon } from "@/components/ui/icons";
+
+interface SlideToConfirmProps {
+  onConfirm: () => void;
+  label: string;
+  confirmedLabel: string;
+  /** Libellé accessible de l'action (ex. « Créer mon compte »). */
+  ariaLabel: string;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+const THRESHOLD = 0.9;
+
+function usePrefersReducedMotion() {
+  return React.useSyncExternalStore(
+    (cb) => {
+      const m = window.matchMedia("(prefers-reduced-motion: reduce)");
+      m.addEventListener("change", cb);
+      return () => m.removeEventListener("change", cb);
+    },
+    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+    () => false
+  );
+}
+
+const Spinner = () => (
+  <svg
+    className="animate-spin"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="9"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeOpacity="0.3"
+    />
+    <path
+      d="M21 12a9 9 0 0 1-9 9"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export function SlideToConfirm({
+  onConfirm,
+  label,
+  confirmedLabel,
+  ariaLabel,
+  loading = false,
+  disabled = false,
+  className,
+}: SlideToConfirmProps) {
+  const [progress, setProgress] = React.useState(0); // 0 → 1
+  const [confirmed, setConfirmed] = React.useState(false);
+  const [dragging, setDragging] = React.useState(false);
+  const reduce = usePrefersReducedMotion();
+
+  const trackRef = React.useRef<HTMLDivElement>(null);
+  const confirmedRef = React.useRef(false);
+
+  const fire = React.useCallback(() => {
+    if (confirmedRef.current) return;
+    confirmedRef.current = true;
+    setConfirmed(true);
+    setDragging(false);
+    setProgress(1);
+    onConfirm();
+  }, [onConfirm]);
+
+  // Après une tentative, on réarme la poignée si on est toujours là
+  // (échec de validation / d'auth). En cas de succès, le composant est
+  // démonté par la navigation — aucun reset visible.
+  React.useEffect(() => {
+    if (!confirmed || loading) return;
+    const id = window.setTimeout(() => {
+      confirmedRef.current = false;
+      setConfirmed(false);
+      setProgress(0);
+    }, 650);
+    return () => window.clearTimeout(id);
+  }, [confirmed, loading]);
+
+  const locked = disabled || loading || confirmed;
+
+  const computeProgress = (clientX: number) => {
+    const track = trackRef.current;
+    if (!track) return 0;
+    const rect = track.getBoundingClientRect();
+    const usable = rect.width - rect.height; // largeur moins la poignée
+    if (usable <= 0) return 0;
+    return Math.min(
+      1,
+      Math.max(0, (clientX - rect.left - rect.height / 2) / usable)
+    );
+  };
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (locked) return;
+    setDragging(true);
+    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+    setProgress(computeProgress(e.clientX));
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!dragging || locked) return;
+    const p = computeProgress(e.clientX);
+    setProgress(p);
+    if (p >= THRESHOLD) fire();
+  };
+
+  const endDrag = () => {
+    if (!dragging) return;
+    setDragging(false);
+    if (!confirmedRef.current) setProgress(0); // retour élastique
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (locked) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      fire();
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      setProgress((p) => {
+        const next = Math.min(1, p + 0.2);
+        if (next >= THRESHOLD) fire();
+        return next;
+      });
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      setProgress((p) => Math.max(0, p - 0.2));
+    }
+  };
+
+  // ── Fallback mouvement réduit : bouton plein classique ──
+  if (reduce) {
+    return (
+      <button
+        type="button"
+        onClick={() => !locked && fire()}
+        disabled={disabled || loading}
+        aria-busy={loading || undefined}
+        className={cn(
+          "inline-flex h-14 w-full items-center justify-center gap-2 rounded-full font-medium",
+          "bg-[color:var(--color-accent)] text-[color:var(--color-accent-fg)]",
+          "disabled:pointer-events-none disabled:opacity-50",
+          className
+        )}
+      >
+        {loading ? <Spinner /> : confirmed ? confirmedLabel : label}
+      </button>
+    );
+  }
+
+  const pct = Math.round(progress * 100);
+  const settle = !dragging;
+
+  return (
+    <div
+      ref={trackRef}
+      className={cn(
+        "relative h-14 w-full select-none overflow-hidden rounded-full",
+        "border border-[color:var(--glass-border)] bg-[color:var(--glass-bg-strong)] backdrop-blur-md",
+        locked && !confirmed && "opacity-50",
+        className
+      )}
+      onPointerMove={onPointerMove}
+      onPointerUp={endDrag}
+      onPointerLeave={endDrag}
+      onPointerCancel={endDrag}
+    >
+      {/* Remplissage accent qui suit la poignée. */}
+      <div
+        className={cn(
+          "fx-track-flow absolute inset-y-0 left-0 rounded-full",
+          settle && "transition-[width] duration-300 ease-out"
+        )}
+        style={{ width: `calc(${pct}% + 3.5rem)` }}
+        aria-hidden
+      />
+
+      {/* Libellé centré, qui s'efface à mesure qu'on glisse. */}
+      <span
+        className="pointer-events-none absolute inset-0 flex items-center justify-center pl-8 text-[0.95rem] font-medium text-text-soft"
+        style={{ opacity: confirmed ? 0 : 1 - progress * 1.4 }}
+        aria-hidden
+      >
+        {label}
+      </span>
+      <span
+        className="pointer-events-none absolute inset-0 flex items-center justify-center text-[0.95rem] font-semibold text-[color:var(--color-accent-fg)]"
+        style={{ opacity: confirmed ? 1 : 0 }}
+        aria-hidden
+      >
+        {confirmedLabel}
+      </span>
+
+      {/* Poignée. */}
+      <button
+        type="button"
+        role="slider"
+        aria-label={ariaLabel}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={pct}
+        aria-disabled={disabled || loading || undefined}
+        tabIndex={0}
+        onPointerDown={onPointerDown}
+        onKeyDown={onKeyDown}
+        className={cn(
+          "absolute top-1 bottom-1 flex aspect-square items-center justify-center rounded-full",
+          "bg-[color:var(--color-accent)] text-[color:var(--color-accent-fg)] shadow-md",
+          "touch-none cursor-grab active:cursor-grabbing",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] focus-visible:ring-offset-2",
+          settle && "transition-[left] duration-300 ease-out"
+        )}
+        style={{ left: `calc(${pct}% * 0.86 + 0.25rem)` }}
+      >
+        {loading ? (
+          <Spinner />
+        ) : confirmed ? (
+          <CheckIcon size={20} className="fx-pop" />
+        ) : (
+          <ArrowRightIcon size={20} />
+        )}
+      </button>
+    </div>
+  );
+}
diff --git a/apps/frontend/lib/instance.ts b/apps/frontend/lib/instance.ts
index 34e8a28..e953206 100644
--- a/apps/frontend/lib/instance.ts
+++ b/apps/frontend/lib/instance.ts
@@ -8,7 +8,7 @@ export const DEFAULT_INSTANCE: InstanceBranding = {
   name: "Codestar",
   tagline: "Open-source e-learning platform",
   logo: { kind: "preset", value: "star" },
-  accent: "#7AA9FF",
+  accent: "#EAB12E",
   heroTitle: null,
   heroSubtitle: null,
   heroCta: null,
diff --git a/apps/frontend/lib/theme.ts b/apps/frontend/lib/theme.ts
new file mode 100644
index 0000000..bd2f96e
--- /dev/null
+++ b/apps/frontend/lib/theme.ts
@@ -0,0 +1,27 @@
+/**
+ * Theme tokens shared between server (cookie read in layout) and client toggle.
+ * `system` defers to the OS preference, resolved client-side by the inline
+ * <ThemeScript> to avoid a flash of the wrong theme.
+ */
+
+export const THEME_COOKIE = "codestar_theme";
+
+export type Theme = "light" | "dark" | "system";
+export type ResolvedTheme = "light" | "dark";
+
+/** Default when no cookie is present. Design system is "citron-dark". */
+export const DEFAULT_THEME: Theme = "dark";
+
+export function isTheme(value: string | undefined | null): value is Theme {
+  return value === "light" || value === "dark" || value === "system";
+}
+
+/**
+ * Server-side resolution. `system` cannot be resolved on the server (the OS
+ * preference is unknown), so it falls back to the default resolved theme; the
+ * inline script then corrects it on the client before paint.
+ */
+export function resolveTheme(theme: Theme): ResolvedTheme {
+  if (theme === "light" || theme === "dark") return theme;
+  return DEFAULT_THEME === "light" ? "light" : "dark";
+}
diff --git a/apps/frontend/messages/en.json b/apps/frontend/messages/en.json
index c86eb69..dde0c81 100644
--- a/apps/frontend/messages/en.json
+++ b/apps/frontend/messages/en.json
@@ -8,7 +8,14 @@
     "catalog": "Catalog",
     "myCourses": "My courses",
     "teach": "Teach",
-    "admin": "Admin"
+    "admin": "Admin",
+    "manageCourses": "Courses",
+    "users": "Users"
+  },
+  "theme": {
+    "toggleTo": "Switch to {mode} mode",
+    "light": "light",
+    "dark": "dark"
   },
   "footer": {
     "rights": "© {year} · All rights reserved",
@@ -20,45 +27,12 @@
     "label": "Footer"
   },
   "home": {
-    "hero": {
-      "chip": "New courses every week",
-      "ctaSecondary": "Browse catalog",
-      "comingSoon": "soon",
-      "stats": {
-        "courses": "courses",
-        "learnersValue": "{count, number}",
-        "learners": "learners",
-        "ratingLabel": "{value} average"
-      },
-      "previewLabel": "Preview"
-    },
-    "featured": {
-      "title": "Featured courses",
-      "subtitle": "A deliberately short selection. The full catalog is available once you're signed in.",
-      "by": "by {author}",
-      "linkAria": "View {title} (sign-in required)"
-    },
-    "pillars": {
-      "reader": {
-        "title": "A reader you'll come back to",
-        "description": "Table of contents, bookmarks, per-section notes. Built for return visits, not endless scroll."
-      },
-      "progress": {
-        "title": "Motivating progression",
-        "description": "XP, leaderboard, streaks. Keep the flame, don't force it. Weekly reset."
-      },
-      "authors": {
-        "title": "Courses by people who know",
-        "description": "Curated authors, content kept up to date, examples that match real work."
+    "landing": {
+      "facts": {
+        "openSource": "Open-source",
+        "license": "GPL v3",
+        "selfHosted": "Self-hosted"
       }
-    },
-    "finalCta": {
-      "titlePart1": "Ready to",
-      "titlePart2": "begin",
-      "titlePart3": "?",
-      "subtitle": "Create a free account. Five minutes, your first lesson is already waiting.",
-      "primary": "Get started",
-      "secondary": "Join with a code"
     }
   },
   "login": {
@@ -88,6 +62,10 @@
       "signup": "Create my account",
       "join": "Join"
     },
+    "slide": {
+      "label": "Slide to confirm",
+      "confirmed": "Here we go"
+    },
     "fields": {
       "email": "Email",
       "password": "Password",
@@ -123,14 +101,13 @@
       "and": "and",
       "privacy": "privacy policy"
     },
-    "decorative": {
-      "license": "GPL v3",
-      "selfHosted": "Self-hosted",
-      "quote": "“We replaced our LMS with {name}. Our teachers love it.”",
-      "quoteAuthor": "Naïma Mansouri",
-      "quoteRole": "Head of Learning · Atelier 89",
-      "streakLabel": "Today's streak",
-      "streakValue": "14 days"
+    "aside": {
+      "subline": "Learn at your own pace, on an instance you control end to end.",
+      "facts": {
+        "openSource": "Open-source",
+        "license": "GPL v3",
+        "selfHosted": "Self-hosted"
+      }
     }
   },
   "instance": {
@@ -194,6 +171,7 @@
       "p": "Paragraph",
       "quote": "Quote",
       "code": "Code",
+      "callout": "Callout",
       "image": "Image",
       "table": "Table",
       "quiz": "Quiz",
@@ -277,6 +255,24 @@
     "export": {
       "button": "Export"
     },
+    "publish": "Save & publish",
+    "saveDraft": "Save draft",
+    "unpublish": "Unpublish",
+    "viewPublic": "View public page",
+    "addBlock": "Add block",
+    "more": "More",
+    "moveUp": "Move block up",
+    "moveDown": "Move block down",
+    "start": {
+      "title": "Where to begin?",
+      "lead": "Import a ready-made course, or compose your own block by block.",
+      "importTitle": "Import a file",
+      "importDesc": "Upload a course as JSON (.json). Its content and details will replace this course.",
+      "importButton": "Choose a file",
+      "composeTitle": "Compose by hand",
+      "composeDesc": "Start from a blank page and add your blocks: headings, paragraphs, quizzes, code…",
+      "composeButton": "Start writing"
+    },
     "canvasEmpty": "No blocks yet. Click a block in the palette to start.",
     "previewEmpty": "The preview will appear here.",
     "inspectorTitle": "Inspector",
@@ -365,6 +361,8 @@
       "start": "Start",
       "resume": "Resume",
       "review": "Review",
+      "save": "Save course",
+      "saved": "Course saved",
       "progressLabel": "Your progress",
       "bookmarksTitle": "Your bookmarks in this course",
       "bookmarksEmpty": "No bookmark yet. Open the reader and tap the bookmark icon on a block.",
@@ -405,7 +403,10 @@
     },
     "search": "Search a course",
     "empty": "No course yet.",
-    "emptyFiltered": "No course matches your search."
+    "emptyFiltered": "No course matches your search.",
+    "results": "{count, plural, =0 {No course} one {# course} other {# courses}}",
+    "allCategories": "All",
+    "by": "By {author}"
   },
   "studentHome": {
     "kicker": "{date}",
@@ -421,6 +422,47 @@
     "discoverDesc": "Curated from your groups.",
     "browseCta": "See full catalog"
   },
+  "learn": {
+    "greeting": "Hi {name},",
+    "continueWithCourse": "Let's pick up where you left off.",
+    "startSomething": "Ready to start something new?",
+    "statInProgress": "In progress",
+    "statCompleted": "Completed",
+    "statBookmarks": "Bookmarks",
+    "resumeTitle": "Resume",
+    "allCourses": "All my courses",
+    "resumeEmpty": "Nothing in progress",
+    "resumeEmptyDesc": "Pick a course and start your streak today.",
+    "browseCta": "Browse catalog",
+    "resumeCta": "Resume",
+    "discoverTitle": "Discover",
+    "discoverDesc": "Published courses and those assigned to your groups.",
+    "discoverEmpty": "No course available yet.",
+    "openCta": "Open",
+    "groupsTitle": "My groups"
+  },
+  "studio": {
+    "kicker": "Studio · {name}",
+    "title": "Your courses and groups.",
+    "description": "Author, publish and assign courses to the groups you teach.",
+    "newCourse": "New course",
+    "generateAi": "Generate with AI",
+    "soon": "soon",
+    "statCourses": "My courses",
+    "statPublished": "Published",
+    "statDrafts": "Drafts",
+    "statGroups": "Groups taught",
+    "myCoursesTitle": "My courses",
+    "manageAll": "Manage all",
+    "noCourses": "No course yet",
+    "noCoursesDesc": "Create your first course to get started.",
+    "groupsTitle": "Groups I teach",
+    "noGroups": "You don't teach any group yet.",
+    "curriculumLink": "Curriculum",
+    "membersLink": "Members",
+    "settingsTitle": "Editor settings",
+    "maxBlocks": "Max blocks per page"
+  },
   "myCourses": {
     "title": "My courses",
     "kicker": "Learning",
@@ -440,10 +482,11 @@
     "ctaReview": "Review"
   },
   "bookmarks": {
-    "title": "My bookmarks",
-    "kicker": "Bookmarks",
-    "description": "All your bookmarks, grouped by course.",
-    "empty": "No bookmark yet. Tap the bookmark icon while reading a course.",
+    "title": "My saved courses",
+    "kicker": "Saved course",
+    "description": "The courses you saved to find them again later.",
+    "empty": "No saved course yet. Open a course and click \"Save course\".",
+    "open": "Open course",
     "viewBlock": "Open in course",
     "remove": "Remove",
     "bookmarksCount": "{count, plural, one {# bookmark} other {# bookmarks}}"
@@ -481,6 +524,23 @@
       "students": "Active students",
       "groups": "Groups"
     },
+    "kpi": {
+      "publishedDrafts": "{published} published · {drafts} drafts",
+      "users": "Users",
+      "disabled": "{count} disabled",
+      "active": "{count} active",
+      "catalogHealth": "Catalog health",
+      "usersByRole": "Users by role",
+      "published": "Published",
+      "drafts": "Drafts",
+      "archived": "Archived"
+    },
+    "superAdmin": {
+      "kicker": "SUPER-ADMIN",
+      "title": "Instance & branding · {name}",
+      "maxBlocks": "Max blocks/page: {n}",
+      "manageRoles": "Manage roles"
+    },
     "recentTitle": "Recent courses",
     "groupsTitle": "My groups",
     "groupsManage": "Curriculum",
diff --git a/apps/frontend/messages/fr.json b/apps/frontend/messages/fr.json
index fd874bc..0c082e0 100644
--- a/apps/frontend/messages/fr.json
+++ b/apps/frontend/messages/fr.json
@@ -8,7 +8,14 @@
     "catalog": "Catalogue",
     "myCourses": "Mes cours",
     "teach": "Enseigner",
-    "admin": "Admin"
+    "admin": "Admin",
+    "manageCourses": "Cours",
+    "users": "Utilisateurs"
+  },
+  "theme": {
+    "toggleTo": "Passer en mode {mode}",
+    "light": "clair",
+    "dark": "sombre"
   },
   "footer": {
     "rights": "© {year} · Tous droits réservés",
@@ -20,45 +27,12 @@
     "label": "Pied de page"
   },
   "home": {
-    "hero": {
-      "chip": "Nouveaux cours chaque semaine",
-      "ctaSecondary": "Voir le catalogue",
-      "comingSoon": "bientôt",
-      "stats": {
-        "courses": "cours",
-        "learnersValue": "{count, number}",
-        "learners": "apprenants",
-        "ratingLabel": "{value} de moyenne"
-      },
-      "previewLabel": "Aperçu"
-    },
-    "featured": {
-      "title": "Cours mis en avant",
-      "subtitle": "Une sélection volontairement courte. Tout le catalogue est accessible une fois connecté.",
-      "by": "par {author}",
-      "linkAria": "Voir {title} (connexion requise)"
-    },
-    "pillars": {
-      "reader": {
-        "title": "Lecteur soigné",
-        "description": "Sommaire, marque-pages, notes par section. Pensé pour qu'on revienne, pas qu'on scroll."
-      },
-      "progress": {
-        "title": "Progression motivante",
-        "description": "XP, classement, séries. Garder la flamme, pas se forcer. Reset hebdomadaire."
-      },
-      "authors": {
-        "title": "Cours faits par des gens qui savent",
-        "description": "Auteurs sélectionnés, contenus mis à jour, exemples qui collent au métier."
+    "landing": {
+      "facts": {
+        "openSource": "Open-source",
+        "license": "GPL v3",
+        "selfHosted": "Self-hébergé"
       }
-    },
-    "finalCta": {
-      "titlePart1": "Prêt·e à",
-      "titlePart2": "commencer",
-      "titlePart3": "?",
-      "subtitle": "Créez un compte gratuit. Cinq minutes, votre première leçon est déjà là.",
-      "primary": "Commencer maintenant",
-      "secondary": "Rejoindre avec un code"
     }
   },
   "login": {
@@ -88,6 +62,10 @@
       "signup": "Créer mon compte",
       "join": "Rejoindre"
     },
+    "slide": {
+      "label": "Glissez pour confirmer",
+      "confirmed": "C'est parti"
+    },
     "fields": {
       "email": "Email",
       "password": "Mot de passe",
@@ -123,14 +101,13 @@
       "and": "et",
       "privacy": "politique de confidentialité"
     },
-    "decorative": {
-      "license": "GPL v3",
-      "selfHosted": "Self-hosted",
-      "quote": "« On a remplacé notre LMS par {name}. Nos profs adorent. »",
-      "quoteAuthor": "Naïma Mansouri",
-      "quoteRole": "Head of Learning · Atelier 89",
-      "streakLabel": "Série du jour",
-      "streakValue": "14 jours"
+    "aside": {
+      "subline": "Apprenez à votre rythme, sur une instance que vous maîtrisez de bout en bout.",
+      "facts": {
+        "openSource": "Open-source",
+        "license": "GPL v3",
+        "selfHosted": "Self-hébergé"
+      }
     }
   },
   "instance": {
@@ -194,6 +171,7 @@
       "p": "Paragraphe",
       "quote": "Citation",
       "code": "Code",
+      "callout": "Encadré",
       "image": "Image",
       "table": "Tableau",
       "quiz": "Quiz",
@@ -277,6 +255,24 @@
     "export": {
       "button": "Exporter"
     },
+    "publish": "Enregistrer et publier",
+    "saveDraft": "Enregistrer le brouillon",
+    "unpublish": "Dépublier",
+    "viewPublic": "Voir la page publique",
+    "addBlock": "Ajouter un bloc",
+    "more": "Plus",
+    "moveUp": "Monter le bloc",
+    "moveDown": "Descendre le bloc",
+    "start": {
+      "title": "Par où commencer ?",
+      "lead": "Importez un cours déjà rédigé, ou composez le vôtre bloc par bloc.",
+      "importTitle": "Importer un fichier",
+      "importDesc": "Chargez un cours au format JSON (.json). Son contenu et ses informations remplaceront ce cours.",
+      "importButton": "Choisir un fichier",
+      "composeTitle": "Composer à la main",
+      "composeDesc": "Partez d'une page vierge et ajoutez vos blocs : titres, paragraphes, quiz, code…",
+      "composeButton": "Commencer à écrire"
+    },
     "canvasEmpty": "Aucun bloc. Cliquez un bloc dans la palette pour commencer.",
     "previewEmpty": "L'aperçu apparaîtra ici.",
     "inspectorTitle": "Inspecteur",
@@ -365,6 +361,8 @@
       "start": "Commencer",
       "resume": "Reprendre",
       "review": "Revoir",
+      "save": "Enregistrer le cours",
+      "saved": "Cours enregistré",
       "progressLabel": "Votre progression",
       "bookmarksTitle": "Vos favoris dans ce cours",
       "bookmarksEmpty": "Aucun favori. Ouvrez le cours et cliquez sur l'icône favori sur un bloc.",
@@ -405,7 +403,10 @@
     },
     "search": "Rechercher un cours",
     "empty": "Aucun cours pour l'instant.",
-    "emptyFiltered": "Aucun cours ne correspond à votre recherche."
+    "emptyFiltered": "Aucun cours ne correspond à votre recherche.",
+    "results": "{count, plural, =0 {Aucun cours} one {# cours} other {# cours}}",
+    "allCategories": "Toutes",
+    "by": "Par {author}"
   },
   "studentHome": {
     "kicker": "{date}",
@@ -421,6 +422,47 @@
     "discoverDesc": "Sélection issue de vos groupes.",
     "browseCta": "Voir tout le catalogue"
   },
+  "learn": {
+    "greeting": "Bonjour {name},",
+    "continueWithCourse": "Reprenons là où vous vous êtes arrêté.",
+    "startSomething": "Prêt·e à démarrer quelque chose de nouveau ?",
+    "statInProgress": "En cours",
+    "statCompleted": "Terminés",
+    "statBookmarks": "Favoris",
+    "resumeTitle": "Reprendre",
+    "allCourses": "Tous mes cours",
+    "resumeEmpty": "Rien en cours",
+    "resumeEmptyDesc": "Choisissez un cours et démarrez votre série aujourd'hui.",
+    "browseCta": "Voir le catalogue",
+    "resumeCta": "Reprendre",
+    "discoverTitle": "Découvrir",
+    "discoverDesc": "Cours publiés et ceux assignés à vos groupes.",
+    "discoverEmpty": "Aucun cours disponible pour l'instant.",
+    "openCta": "Ouvrir",
+    "groupsTitle": "Mes groupes"
+  },
+  "studio": {
+    "kicker": "Studio · {name}",
+    "title": "Vos cours et groupes.",
+    "description": "Créez, publiez et assignez des cours aux groupes que vous animez.",
+    "newCourse": "Nouveau cours",
+    "generateAi": "Générer avec l'IA",
+    "soon": "bientôt",
+    "statCourses": "Mes cours",
+    "statPublished": "Publiés",
+    "statDrafts": "Brouillons",
+    "statGroups": "Groupes animés",
+    "myCoursesTitle": "Mes cours",
+    "manageAll": "Tout gérer",
+    "noCourses": "Aucun cours",
+    "noCoursesDesc": "Créez votre premier cours pour commencer.",
+    "groupsTitle": "Groupes que j'anime",
+    "noGroups": "Vous n'animez aucun groupe pour l'instant.",
+    "curriculumLink": "Curriculum",
+    "membersLink": "Membres",
+    "settingsTitle": "Réglages éditeur",
+    "maxBlocks": "Blocs max par page"
+  },
   "myCourses": {
     "title": "Mes cours",
     "kicker": "Apprentissage",
@@ -440,13 +482,11 @@
     "ctaReview": "Revoir"
   },
   "bookmarks": {
-    "title": "Mes favoris",
-    "kicker": "Favoris",
-    "description": "Tous vos marque-pages, groupés par cours.",
-    "empty": "Aucun favori pour l'instant. Cliquez sur l'icône favori dans le lecteur d'un cours.",
-    "viewBlock": "Voir dans le cours",
-    "remove": "Retirer",
-    "bookmarksCount": "{count, plural, one {# favori} other {# favoris}}"
+    "title": "Mes cours enregistrés",
+    "kicker": "Cours enregistré",
+    "description": "Les cours que vous avez enregistrés pour les retrouver plus tard.",
+    "empty": "Aucun cours enregistré pour l'instant. Ouvrez un cours et cliquez sur « Enregistrer le cours ».",
+    "open": "Ouvrir le cours"
   },
   "dash": {
     "title": "Mes progrès",
@@ -481,6 +521,23 @@
       "students": "Étudiants actifs",
       "groups": "Groupes"
     },
+    "kpi": {
+      "publishedDrafts": "{published} publiés · {drafts} brouillons",
+      "users": "Utilisateurs",
+      "disabled": "{count} désactivés",
+      "active": "{count} actifs",
+      "catalogHealth": "Santé du catalogue",
+      "usersByRole": "Utilisateurs par rôle",
+      "published": "Publiés",
+      "drafts": "Brouillons",
+      "archived": "Archivés"
+    },
+    "superAdmin": {
+      "kicker": "SUPER-ADMIN",
+      "title": "Instance & branding · {name}",
+      "maxBlocks": "Blocs max/page : {n}",
+      "manageRoles": "Gérer les rôles"
+    },
     "recentTitle": "Cours récents",
     "groupsTitle": "Mes groupes",
     "groupsManage": "Curriculum",
diff --git a/apps/frontend/proxy.ts b/apps/frontend/proxy.ts
index 4681683..151c7b2 100644
--- a/apps/frontend/proxy.ts
+++ b/apps/frontend/proxy.ts
@@ -69,7 +69,7 @@ export async function proxy(req: NextRequest) {
   }
 
   if (hasValidToken && isOnLogin(pathname)) {
-    return NextResponse.redirect(new URL("/", req.url));
+    return NextResponse.redirect(new URL("/dashboard", req.url));
   }
 
   if (!hasValidToken && !isPublic(pathname)) {

From 39d9d065a06e5caec28352c9aaee324987db74a7 Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 19:34:26 +0200
Subject: [PATCH 02/22] fix(backend): rename RequestContextFilter to avoid
 Spring Boot bean conflict

---
 .../{RequestContextFilter.java => RequestLoggingFilter.java}  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename apps/backend/src/main/java/com/codestar/backend/config/{RequestContextFilter.java => RequestLoggingFilter.java} (96%)

diff --git a/apps/backend/src/main/java/com/codestar/backend/config/RequestContextFilter.java b/apps/backend/src/main/java/com/codestar/backend/config/RequestLoggingFilter.java
similarity index 96%
rename from apps/backend/src/main/java/com/codestar/backend/config/RequestContextFilter.java
rename to apps/backend/src/main/java/com/codestar/backend/config/RequestLoggingFilter.java
index 63b7bd4..788af23 100644
--- a/apps/backend/src/main/java/com/codestar/backend/config/RequestContextFilter.java
+++ b/apps/backend/src/main/java/com/codestar/backend/config/RequestLoggingFilter.java
@@ -21,9 +21,9 @@
 
 @Component
 @Order(Ordered.HIGHEST_PRECEDENCE)
-public class RequestContextFilter extends OncePerRequestFilter {
+public class RequestLoggingFilter extends OncePerRequestFilter {
 
-    private static final Logger log = LoggerFactory.getLogger(RequestContextFilter.class);
+    private static final Logger log = LoggerFactory.getLogger(RequestLoggingFilter.class);
 
     private static final String REQUEST_ID_HEADER = "X-Request-Id";
     private static final String MDC_REQUEST_ID = "requestId";

From a48102f479ec2d11d42d957487de8c51203558a2 Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 19:34:33 +0200
Subject: [PATCH 03/22] feat(groups): add createGroup, updateGroup,
 createInvitation server actions

---
 apps/frontend/app/actions/groups.ts | 51 +++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/apps/frontend/app/actions/groups.ts b/apps/frontend/app/actions/groups.ts
index 717e330..6f367a6 100644
--- a/apps/frontend/app/actions/groups.ts
+++ b/apps/frontend/app/actions/groups.ts
@@ -117,3 +117,54 @@ export async function getInvitations(groupId: string, includeRevoked = false): P
     (await apiFetch<Invitation[]>(`/api/v1/groups/${groupId}/invitations${qs}`)) ?? []
   );
 }
+
+export async function createGroup(payload: {
+  name: string;
+  slug?: string;
+  startsAt?: string | null;
+  endsAt?: string | null;
+}): Promise<{ ok: boolean; error?: string; group?: GroupResponse }> {
+  try {
+    const g = await apiFetch<GroupResponse>("/api/v1/groups", {
+      method: "POST",
+      body: payload,
+    });
+    return { ok: true, group: g ?? undefined };
+  } catch (e) {
+    return { ok: false, error: e instanceof ApiError ? e.message : undefined };
+  }
+}
+
+export async function updateGroup(
+  id: string,
+  payload: { name?: string; startsAt?: string | null; endsAt?: string | null }
+): Promise<{ ok: boolean; error?: string; group?: GroupResponse }> {
+  try {
+    const g = await apiFetch<GroupResponse>(`/api/v1/groups/${id}`, {
+      method: "PATCH",
+      body: payload,
+    });
+    return { ok: true, group: g ?? undefined };
+  } catch (e) {
+    return { ok: false, error: e instanceof ApiError ? e.message : undefined };
+  }
+}
+
+export async function createInvitation(
+  groupId: string,
+  maxUses: number,
+  expiresAt?: string
+): Promise<{ ok: boolean; error?: string; invitation?: Invitation }> {
+  try {
+    const inv = await apiFetch<Invitation>(
+      `/api/v1/groups/${groupId}/invitations`,
+      {
+        method: "POST",
+        body: { maxUses, ...(expiresAt ? { expiresAt } : {}) },
+      }
+    );
+    return { ok: true, invitation: inv ?? undefined };
+  } catch (e) {
+    return { ok: false, error: e instanceof ApiError ? e.message : undefined };
+  }
+}

From 57934aa4fe3c8d0a62a2a251d4db4fe215bd5532 Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 19:34:36 +0200
Subject: [PATCH 04/22] feat(groups): add i18n translations for group
 management pages (fr + en)

---
 apps/frontend/messages/en.json | 42 +++++++++++++++++++++++++++++++++-
 apps/frontend/messages/fr.json | 42 +++++++++++++++++++++++++++++++++-
 2 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/messages/en.json b/apps/frontend/messages/en.json
index dde0c81..24cb01a 100644
--- a/apps/frontend/messages/en.json
+++ b/apps/frontend/messages/en.json
@@ -10,7 +10,8 @@
     "teach": "Teach",
     "admin": "Admin",
     "manageCourses": "Courses",
-    "users": "Users"
+    "users": "Users",
+    "groups": "Groups"
   },
   "theme": {
     "toggleTo": "Switch to {mode} mode",
@@ -682,6 +683,45 @@
       "save": "Save",
       "cancel": "Cancel",
       "saved": "Saved"
+    },
+    "groups": {
+      "kicker": "Group management",
+      "title": "Groups",
+      "description": "Create and manage your classes. Add students via invitation codes.",
+      "newGroup": "Create a group",
+      "empty": "No groups yet.",
+      "members": "Members",
+      "curriculum": "Courses",
+      "invitations": "Invitations",
+      "deleteConfirm": "Permanently delete this group?",
+      "form": {
+        "name": "Group name",
+        "namePlaceholder": "e.g. Year 9 class",
+        "slug": "Identifier (slug)",
+        "slugPlaceholder": "e.g. year-9-class",
+        "slugHelper": "Leave blank to auto-generate",
+        "startsAt": "Start date",
+        "endsAt": "End date",
+        "create": "Create",
+        "cancel": "Cancel"
+      },
+      "hub": {
+        "kicker": "Group · {name}",
+        "membersDesc": "Manage members and their roles in this group",
+        "curriculumDesc": "Assign courses accessible to this group",
+        "invitationsTitle": "Invitation codes",
+        "invitationsDesc": "Generate codes so users can join this group",
+        "newInvitation": "Generate a code",
+        "invitationFormMaxUses": "Max uses",
+        "invitationFormExpiresAt": "Expiry date (optional)",
+        "invitationFormCreate": "Generate",
+        "code": "Code",
+        "uses": "{used}/{max} uses",
+        "expires": "Expires {date}",
+        "noExpiry": "No expiry",
+        "noInvitations": "No active codes.",
+        "copyCode": "Copy"
+      }
     }
   }
 }
diff --git a/apps/frontend/messages/fr.json b/apps/frontend/messages/fr.json
index 0c082e0..3efbcfe 100644
--- a/apps/frontend/messages/fr.json
+++ b/apps/frontend/messages/fr.json
@@ -10,7 +10,8 @@
     "teach": "Enseigner",
     "admin": "Admin",
     "manageCourses": "Cours",
-    "users": "Utilisateurs"
+    "users": "Utilisateurs",
+    "groups": "Groupes"
   },
   "theme": {
     "toggleTo": "Passer en mode {mode}",
@@ -679,6 +680,45 @@
       "save": "Enregistrer",
       "cancel": "Annuler",
       "saved": "Enregistré"
+    },
+    "groups": {
+      "kicker": "Gestion des groupes",
+      "title": "Groupes",
+      "description": "Créez et gérez vos classes. Ajoutez des élèves via des codes d'invitation.",
+      "newGroup": "Créer un groupe",
+      "empty": "Aucun groupe pour l'instant.",
+      "members": "Membres",
+      "curriculum": "Cours",
+      "invitations": "Invitations",
+      "deleteConfirm": "Supprimer ce groupe définitivement ?",
+      "form": {
+        "name": "Nom du groupe",
+        "namePlaceholder": "ex. Classe de 3ème",
+        "slug": "Identifiant (slug)",
+        "slugPlaceholder": "ex. classe-3eme",
+        "slugHelper": "Laissez vide pour générer automatiquement",
+        "startsAt": "Date de début",
+        "endsAt": "Date de fin",
+        "create": "Créer",
+        "cancel": "Annuler"
+      },
+      "hub": {
+        "kicker": "Groupe · {name}",
+        "membersDesc": "Gérer les membres et leurs rôles dans ce groupe",
+        "curriculumDesc": "Assigner des cours accessibles à ce groupe",
+        "invitationsTitle": "Codes d'invitation",
+        "invitationsDesc": "Générez des codes pour inviter des utilisateurs à rejoindre ce groupe",
+        "newInvitation": "Générer un code",
+        "invitationFormMaxUses": "Utilisations maximum",
+        "invitationFormExpiresAt": "Date d'expiration (optionnel)",
+        "invitationFormCreate": "Générer",
+        "code": "Code",
+        "uses": "{used}/{max} utilisations",
+        "expires": "Expire le {date}",
+        "noExpiry": "Pas d'expiration",
+        "noInvitations": "Aucun code actif.",
+        "copyCode": "Copier"
+      }
     }
   }
 }

From f4e792bdaa0a292e63a9b7b06eb8d5a3b6b8be2a Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 19:34:42 +0200
Subject: [PATCH 05/22] feat(groups): add GroupsGrid, CreateGroupModal,
 CreateGroupTrigger, InvitationsPanel components

---
 .../components/admin/create-group-modal.tsx   | 118 ++++++++++++
 .../components/admin/create-group-trigger.tsx |  23 +++
 .../frontend/components/admin/groups-grid.tsx | 103 +++++++++++
 .../components/admin/invitations-panel.tsx    | 168 ++++++++++++++++++
 4 files changed, 412 insertions(+)
 create mode 100644 apps/frontend/components/admin/create-group-modal.tsx
 create mode 100644 apps/frontend/components/admin/create-group-trigger.tsx
 create mode 100644 apps/frontend/components/admin/groups-grid.tsx
 create mode 100644 apps/frontend/components/admin/invitations-panel.tsx

diff --git a/apps/frontend/components/admin/create-group-modal.tsx b/apps/frontend/components/admin/create-group-modal.tsx
new file mode 100644
index 0000000..160d8f3
--- /dev/null
+++ b/apps/frontend/components/admin/create-group-modal.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { useRef, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+
+import { createGroup } from "@/app/actions/groups";
+import { GlassButton } from "@/components/ui/glass-button";
+import { GlassField, GlassInput } from "@/components/ui/glass-input";
+
+export interface CreateGroupModalLabels {
+  name: string;
+  namePlaceholder: string;
+  slug: string;
+  slugPlaceholder: string;
+  slugHelper: string;
+  startsAt: string;
+  endsAt: string;
+  create: string;
+  cancel: string;
+}
+
+interface CreateGroupModalProps {
+  open: boolean;
+  onClose: () => void;
+  labels: CreateGroupModalLabels;
+}
+
+export function CreateGroupModal({ open, onClose, labels }: CreateGroupModalProps) {
+  const router = useRouter();
+  const [pending, start] = useTransition();
+  const [error, setError] = useState("");
+  const formRef = useRef<HTMLFormElement>(null);
+
+  if (!open) return null;
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const fd = new FormData(e.currentTarget);
+    const name = (fd.get("name") as string).trim();
+    const slug = (fd.get("slug") as string).trim() || undefined;
+    const startsAt = (fd.get("startsAt") as string) || null;
+    const endsAt = (fd.get("endsAt") as string) || null;
+
+    setError("");
+    start(async () => {
+      const res = await createGroup({ name, slug, startsAt, endsAt });
+      if (res.ok) {
+        router.refresh();
+        onClose();
+        formRef.current?.reset();
+      } else {
+        setError(res.error ?? "Une erreur est survenue.");
+      }
+    });
+  }
+
+  function handleClose() {
+    setError("");
+    formRef.current?.reset();
+    onClose();
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+      <div className="w-full max-w-md rounded-2xl border border-white/10 bg-[color:var(--glass-bg)] p-6 shadow-2xl">
+        <h2 className="mb-5 text-lg font-semibold text-text">
+          Créer un groupe
+        </h2>
+
+        <form ref={formRef} onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <GlassField label={labels.name} htmlFor="name">
+            <GlassInput
+              id="name"
+              name="name"
+              placeholder={labels.namePlaceholder}
+              required
+              autoFocus
+            />
+          </GlassField>
+
+          <GlassField label={labels.slug} htmlFor="slug" helper={labels.slugHelper}>
+            <GlassInput
+              id="slug"
+              name="slug"
+              placeholder={labels.slugPlaceholder}
+              pattern="^[a-z0-9](?:[a-z0-9-]{0,78}[a-z0-9])?$"
+            />
+          </GlassField>
+
+          <div className="grid grid-cols-2 gap-3">
+            <GlassField label={labels.startsAt} htmlFor="startsAt">
+              <GlassInput id="startsAt" name="startsAt" type="date" />
+            </GlassField>
+            <GlassField label={labels.endsAt} htmlFor="endsAt">
+              <GlassInput id="endsAt" name="endsAt" type="date" />
+            </GlassField>
+          </div>
+
+          {error && <p className="text-sm text-red-400">{error}</p>}
+
+          <div className="mt-2 flex justify-end gap-2">
+            <GlassButton
+              type="button"
+              variant="ghost"
+              onClick={handleClose}
+              disabled={pending}
+            >
+              {labels.cancel}
+            </GlassButton>
+            <GlassButton type="submit" variant="primary" disabled={pending}>
+              {pending ? "…" : labels.create}
+            </GlassButton>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/components/admin/create-group-trigger.tsx b/apps/frontend/components/admin/create-group-trigger.tsx
new file mode 100644
index 0000000..26c6195
--- /dev/null
+++ b/apps/frontend/components/admin/create-group-trigger.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+
+import { CreateGroupModal, type CreateGroupModalLabels } from "@/components/admin/create-group-modal";
+import { GlassButton } from "@/components/ui/glass-button";
+
+interface CreateGroupTriggerProps {
+  newGroup: string;
+  form: CreateGroupModalLabels;
+}
+
+export function CreateGroupTrigger({ newGroup, form }: CreateGroupTriggerProps) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <GlassButton variant="primary" onClick={() => setOpen(true)}>
+        {newGroup}
+      </GlassButton>
+      <CreateGroupModal open={open} onClose={() => setOpen(false)} labels={form} />
+    </>
+  );
+}
diff --git a/apps/frontend/components/admin/groups-grid.tsx b/apps/frontend/components/admin/groups-grid.tsx
new file mode 100644
index 0000000..a60d9ef
--- /dev/null
+++ b/apps/frontend/components/admin/groups-grid.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useTransition } from "react";
+
+import { deleteGroup } from "@/app/actions/groups";
+import { GlassButton } from "@/components/ui/glass-button";
+import { GlassCard, GlassCardContent } from "@/components/ui/glass-card";
+
+interface GroupItem {
+  id: string;
+  name: string;
+  slug: string;
+  startsAt: string | null;
+  endsAt: string | null;
+}
+
+interface Labels {
+  members: string;
+  curriculum: string;
+  deleteConfirm: string;
+  empty: string;
+}
+
+interface GroupsGridProps {
+  groups: GroupItem[];
+  isAdmin: boolean;
+  labels: Labels;
+}
+
+export function GroupsGrid({ groups, isAdmin, labels }: GroupsGridProps) {
+  const router = useRouter();
+  const [pending, start] = useTransition();
+
+  function handleDelete(id: string, name: string) {
+    if (!confirm(`${labels.deleteConfirm}\n\n"${name}"`)) return;
+    start(async () => {
+      await deleteGroup(id);
+      router.refresh();
+    });
+  }
+
+  if (groups.length === 0) {
+    return (
+      <p className="mt-8 text-center text-text-soft">{labels.empty}</p>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {groups.map((g) => (
+        <GlassCard key={g.id} variant="default">
+          <GlassCardContent className="flex flex-col gap-3 p-5">
+            <div className="flex items-start justify-between gap-2">
+              <div className="min-w-0">
+                <p className="truncate font-semibold text-text">{g.name}</p>
+                <p className="text-xs text-text-soft">/{g.slug}</p>
+              </div>
+              {isAdmin && (
+                <GlassButton
+                  variant="ghost"
+                  size="sm"
+                  disabled={pending}
+                  onClick={() => handleDelete(g.id, g.name)}
+                  className="shrink-0 text-xs text-red-400 hover:text-red-300"
+                >
+                  Suppr.
+                </GlassButton>
+              )}
+            </div>
+
+            {(g.startsAt || g.endsAt) && (
+              <p className="text-xs text-text-soft">
+                {g.startsAt ? new Date(g.startsAt).toLocaleDateString() : "—"}
+                {" → "}
+                {g.endsAt ? new Date(g.endsAt).toLocaleDateString() : "∞"}
+              </p>
+            )}
+
+            <div className="mt-1 flex gap-2">
+              <GlassButton
+                variant="outline"
+                size="sm"
+                onClick={() => router.push(`/admin/groups/${g.id}`)}
+                className="flex-1 text-xs"
+              >
+                {labels.members}
+              </GlassButton>
+              <GlassButton
+                variant="outline"
+                size="sm"
+                onClick={() => router.push(`/admin/groups/${g.id}/curriculum`)}
+                className="flex-1 text-xs"
+              >
+                {labels.curriculum}
+              </GlassButton>
+            </div>
+          </GlassCardContent>
+        </GlassCard>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/frontend/components/admin/invitations-panel.tsx b/apps/frontend/components/admin/invitations-panel.tsx
new file mode 100644
index 0000000..daab25f
--- /dev/null
+++ b/apps/frontend/components/admin/invitations-panel.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+
+import { createInvitation, type Invitation } from "@/app/actions/groups";
+import { GlassButton } from "@/components/ui/glass-button";
+import { GlassCard, GlassCardContent } from "@/components/ui/glass-card";
+import { GlassField, GlassInput } from "@/components/ui/glass-input";
+
+interface Labels {
+  invitationsTitle: string;
+  invitationsDesc: string;
+  newInvitation: string;
+  invitationFormMaxUses: string;
+  invitationFormExpiresAt: string;
+  invitationFormCreate: string;
+  code: string;
+  uses: string;
+  expires: string;
+  noExpiry: string;
+  noInvitations: string;
+  copyCode: string;
+}
+
+interface InvitationsPanelProps {
+  groupId: string;
+  initialInvitations: Invitation[];
+  labels: Labels;
+}
+
+export function InvitationsPanel({
+  groupId,
+  initialInvitations,
+  labels,
+}: InvitationsPanelProps) {
+  const router = useRouter();
+  const [pending, start] = useTransition();
+  const [showForm, setShowForm] = useState(false);
+  const [error, setError] = useState("");
+  const [copied, setCopied] = useState<string | null>(null);
+
+  function handleCopy(code: string) {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(code);
+      setTimeout(() => setCopied(null), 2000);
+    });
+  }
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const fd = new FormData(e.currentTarget);
+    const maxUses = parseInt(fd.get("maxUses") as string, 10) || 1;
+    const rawExpiry = fd.get("expiresAt") as string;
+    const expiresAt = rawExpiry ? new Date(rawExpiry).toISOString() : undefined;
+
+    setError("");
+    start(async () => {
+      const res = await createInvitation(groupId, maxUses, expiresAt);
+      if (res.ok) {
+        router.refresh();
+        setShowForm(false);
+        (e.target as HTMLFormElement).reset();
+      } else {
+        setError(res.error ?? "Erreur lors de la création.");
+      }
+    });
+  }
+
+  return (
+    <section className="mt-10">
+      <div className="mb-4 flex items-start justify-between gap-4">
+        <div>
+          <h2 className="font-semibold text-text">{labels.invitationsTitle}</h2>
+          <p className="text-sm text-text-soft">{labels.invitationsDesc}</p>
+        </div>
+        <GlassButton
+          variant="outline"
+          size="sm"
+          onClick={() => setShowForm((v) => !v)}
+          className="shrink-0"
+        >
+          {labels.newInvitation}
+        </GlassButton>
+      </div>
+
+      {showForm && (
+        <GlassCard variant="plain" className="mb-4">
+          <GlassCardContent className="p-4">
+            <form onSubmit={handleSubmit} className="flex flex-wrap items-end gap-3">
+              <GlassField
+                label={labels.invitationFormMaxUses}
+                htmlFor="maxUses"
+                className="w-32"
+              >
+                <GlassInput
+                  id="maxUses"
+                  name="maxUses"
+                  type="number"
+                  defaultValue={1}
+                  min={1}
+                  max={1000}
+                />
+              </GlassField>
+              <GlassField
+                label={labels.invitationFormExpiresAt}
+                htmlFor="expiresAt"
+                className="w-56"
+              >
+                <GlassInput
+                  id="expiresAt"
+                  name="expiresAt"
+                  type="datetime-local"
+                />
+              </GlassField>
+              <GlassButton
+                type="submit"
+                variant="primary"
+                size="sm"
+                disabled={pending}
+              >
+                {pending ? "…" : labels.invitationFormCreate}
+              </GlassButton>
+            </form>
+            {error && <p className="mt-2 text-sm text-red-400">{error}</p>}
+          </GlassCardContent>
+        </GlassCard>
+      )}
+
+      {initialInvitations.length === 0 ? (
+        <p className="text-sm text-text-soft">{labels.noInvitations}</p>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {initialInvitations.map((inv) => (
+            <GlassCard key={inv.id} variant="plain">
+              <GlassCardContent className="flex items-center justify-between gap-4 px-4 py-3">
+                <div className="flex flex-col gap-0.5">
+                  <span className="font-mono text-sm font-medium text-text">
+                    {inv.code}
+                  </span>
+                  <span className="text-xs text-text-soft">
+                    {labels.uses
+                      .replace("{used}", String(inv.usedCount))
+                      .replace("{max}", String(inv.maxUses))}
+                    {" · "}
+                    {inv.expiresAt
+                      ? labels.expires.replace(
+                          "{date}",
+                          new Date(inv.expiresAt).toLocaleDateString()
+                        )
+                      : labels.noExpiry}
+                  </span>
+                </div>
+                <GlassButton
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleCopy(inv.code)}
+                >
+                  {copied === inv.code ? "✓" : labels.copyCode}
+                </GlassButton>
+              </GlassCardContent>
+            </GlassCard>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

From 76ab61ce4da809200b505f1adc1ffcd2efe29266 Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 19:34:45 +0200
Subject: [PATCH 06/22] feat(groups): add groups list page and group hub page

---
 apps/frontend/app/admin/groups/[id]/page.tsx | 93 ++++++++++++++++++++
 apps/frontend/app/admin/groups/page.tsx      | 62 +++++++++++++
 2 files changed, 155 insertions(+)
 create mode 100644 apps/frontend/app/admin/groups/[id]/page.tsx
 create mode 100644 apps/frontend/app/admin/groups/page.tsx

diff --git a/apps/frontend/app/admin/groups/[id]/page.tsx b/apps/frontend/app/admin/groups/[id]/page.tsx
new file mode 100644
index 0000000..fda9872
--- /dev/null
+++ b/apps/frontend/app/admin/groups/[id]/page.tsx
@@ -0,0 +1,93 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+
+import { getGroup, getInvitations, getMyGroups } from "@/app/actions/groups";
+import { AdminBreadcrumb, AdminShell } from "@/components/admin/admin-shell";
+import { InvitationsPanel } from "@/components/admin/invitations-panel";
+import { requireRole } from "@/components/admin/role-guard";
+import { PageHeader } from "@/components/course/page-header";
+import { GlassCard, GlassCardContent } from "@/components/ui/glass-card";
+import { isAdmin } from "@/lib/roles";
+
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+export const metadata: Metadata = { title: "Groupe" };
+
+export default async function GroupHubPage({ params }: PageProps) {
+  const me = await requireRole("TEACHER");
+  const { id } = await params;
+  const admin = isAdmin(me.role);
+  const t = await getTranslations("admin.groups");
+
+  let groupName: string | null = null;
+  if (admin) {
+    const g = await getGroup(id);
+    groupName = g?.name ?? null;
+  } else {
+    const mine = await getMyGroups();
+    groupName = mine.find((g) => g.id === id)?.name ?? null;
+  }
+  if (!groupName) notFound();
+
+  const invitations = await getInvitations(id);
+
+  return (
+    <AdminShell>
+      <AdminBreadcrumb
+        items={[
+          { label: "Admin", href: "/admin" },
+          { label: t("title"), href: "/admin/groups" },
+          { label: groupName },
+        ]}
+      />
+      <PageHeader
+        kicker={t("hub.kicker", { name: groupName })}
+        title={groupName}
+        className="mb-8"
+      />
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <Link href={`/admin/groups/${id}/members`} className="block">
+          <GlassCard variant="default" interactive className="h-full">
+            <GlassCardContent className="flex flex-col gap-1 p-5">
+              <p className="font-semibold text-text">{t("members")}</p>
+              <p className="text-sm text-text-soft">{t("hub.membersDesc")}</p>
+            </GlassCardContent>
+          </GlassCard>
+        </Link>
+
+        <Link href={`/admin/groups/${id}/curriculum`} className="block">
+          <GlassCard variant="default" interactive className="h-full">
+            <GlassCardContent className="flex flex-col gap-1 p-5">
+              <p className="font-semibold text-text">{t("curriculum")}</p>
+              <p className="text-sm text-text-soft">{t("hub.curriculumDesc")}</p>
+            </GlassCardContent>
+          </GlassCard>
+        </Link>
+      </div>
+
+      <InvitationsPanel
+        groupId={id}
+        initialInvitations={invitations}
+        labels={{
+          invitationsTitle: t("hub.invitationsTitle"),
+          invitationsDesc: t("hub.invitationsDesc"),
+          newInvitation: t("hub.newInvitation"),
+          invitationFormMaxUses: t("hub.invitationFormMaxUses"),
+          invitationFormExpiresAt: t("hub.invitationFormExpiresAt"),
+          invitationFormCreate: t("hub.invitationFormCreate"),
+          code: t("hub.code"),
+          uses: t("hub.uses"),
+          expires: t("hub.expires"),
+          noExpiry: t("hub.noExpiry"),
+          noInvitations: t("hub.noInvitations"),
+          copyCode: t("hub.copyCode"),
+        }}
+      />
+    </AdminShell>
+  );
+}
diff --git a/apps/frontend/app/admin/groups/page.tsx b/apps/frontend/app/admin/groups/page.tsx
new file mode 100644
index 0000000..bf0d839
--- /dev/null
+++ b/apps/frontend/app/admin/groups/page.tsx
@@ -0,0 +1,62 @@
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+
+import { getAllGroups, getMyGroups } from "@/app/actions/groups";
+import { AdminBreadcrumb, AdminShell } from "@/components/admin/admin-shell";
+import { CreateGroupTrigger } from "@/components/admin/create-group-trigger";
+import { GroupsGrid } from "@/components/admin/groups-grid";
+import { requireRole } from "@/components/admin/role-guard";
+import { PageHeader } from "@/components/course/page-header";
+import { isAdmin } from "@/lib/roles";
+
+export const metadata: Metadata = { title: "Groupes" };
+
+export default async function GroupsPage() {
+  const me = await requireRole("TEACHER");
+  const admin = isAdmin(me.role);
+  const t = await getTranslations("admin.groups");
+
+  const groups = admin ? await getAllGroups() : await getMyGroups();
+
+  return (
+    <AdminShell>
+      <AdminBreadcrumb
+        items={[{ label: "Admin", href: "/admin" }, { label: t("title") }]}
+      />
+      <PageHeader
+        kicker={t("kicker")}
+        title={t("title")}
+        description={t("description")}
+        actions={
+          admin ? (
+            <CreateGroupTrigger
+              newGroup={t("newGroup")}
+              form={{
+                name: t("form.name"),
+                namePlaceholder: t("form.namePlaceholder"),
+                slug: t("form.slug"),
+                slugPlaceholder: t("form.slugPlaceholder"),
+                slugHelper: t("form.slugHelper"),
+                startsAt: t("form.startsAt"),
+                endsAt: t("form.endsAt"),
+                create: t("form.create"),
+                cancel: t("form.cancel"),
+              }}
+            />
+          ) : null
+        }
+        className="mb-8"
+      />
+      <GroupsGrid
+        groups={groups}
+        isAdmin={admin}
+        labels={{
+          members: t("members"),
+          curriculum: t("curriculum"),
+          deleteConfirm: t("deleteConfirm"),
+          empty: t("empty"),
+        }}
+      />
+    </AdminShell>
+  );
+}

From bcbf68a1db4314438a0d259be13c515fff77029c Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 19:34:49 +0200
Subject: [PATCH 07/22] feat(groups): add Groups nav link for TEACHER+ in
 top-nav

---
 apps/frontend/components/top-nav.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/frontend/components/top-nav.tsx b/apps/frontend/components/top-nav.tsx
index 3388d00..2c6a074 100644
--- a/apps/frontend/components/top-nav.tsx
+++ b/apps/frontend/components/top-nav.tsx
@@ -69,6 +69,11 @@ export async function TopNav() {
                 {t("manageCourses")}
               </Link>
             )}
+            {isStaff(me.role) && (
+              <Link href="/admin/groups" className={navLinkClass}>
+                {t("groups")}
+              </Link>
+            )}
             {isAdmin(me.role) && (
               <Link href="/admin/users" className={navLinkClass}>
                 {t("users")}

From 1ba4bf6c6a15759784b762e781e6af23a151a733 Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 19:45:43 +0200
Subject: [PATCH 08/22] fix(groups): extract GroupCard, fix delete error
 handling and per-card state

---
 .../frontend/components/admin/groups-grid.tsx | 128 ++++++++++--------
 1 file changed, 75 insertions(+), 53 deletions(-)

diff --git a/apps/frontend/components/admin/groups-grid.tsx b/apps/frontend/components/admin/groups-grid.tsx
index a60d9ef..c5f7678 100644
--- a/apps/frontend/components/admin/groups-grid.tsx
+++ b/apps/frontend/components/admin/groups-grid.tsx
@@ -1,7 +1,8 @@
 "use client";
 
+import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useTransition } from "react";
+import { useState, useTransition } from "react";
 
 import { deleteGroup } from "@/app/actions/groups";
 import { GlassButton } from "@/components/ui/glass-button";
@@ -19,6 +20,7 @@ interface Labels {
   members: string;
   curriculum: string;
   deleteConfirm: string;
+  deleteBtn: string;
   empty: string;
 }
 
@@ -28,18 +30,85 @@ interface GroupsGridProps {
   labels: Labels;
 }
 
-export function GroupsGrid({ groups, isAdmin, labels }: GroupsGridProps) {
+interface GroupCardProps {
+  group: GroupItem;
+  isAdmin: boolean;
+  labels: Labels;
+}
+
+function GroupCard({ group: g, isAdmin, labels }: GroupCardProps) {
   const router = useRouter();
   const [pending, start] = useTransition();
+  const [error, setError] = useState("");
 
-  function handleDelete(id: string, name: string) {
-    if (!confirm(`${labels.deleteConfirm}\n\n"${name}"`)) return;
+  function handleDelete() {
+    if (!confirm(`${labels.deleteConfirm}\n\n"${g.name}"`)) return;
+    setError("");
     start(async () => {
-      await deleteGroup(id);
+      const res = await deleteGroup(g.id);
+      if (!res.ok) {
+        setError(res.error ?? "Erreur lors de la suppression.");
+        return;
+      }
       router.refresh();
     });
   }
 
+  return (
+    <GlassCard variant="default">
+      <GlassCardContent className="flex flex-col gap-3 p-5">
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <p className="truncate font-semibold text-text">{g.name}</p>
+            <p className="text-xs text-text-soft">/{g.slug}</p>
+          </div>
+          {isAdmin && (
+            <GlassButton
+              variant="danger"
+              size="sm"
+              disabled={pending}
+              onClick={handleDelete}
+              className="shrink-0 text-xs"
+            >
+              {pending ? "…" : labels.deleteBtn}
+            </GlassButton>
+          )}
+        </div>
+
+        {(g.startsAt || g.endsAt) && (
+          <p className="text-xs text-text-soft">
+            {g.startsAt ? new Date(g.startsAt).toLocaleDateString() : "—"}
+            {" → "}
+            {g.endsAt ? new Date(g.endsAt).toLocaleDateString() : "∞"}
+          </p>
+        )}
+
+        {error && <p className="text-xs text-red-400">{error}</p>}
+
+        <div className="mt-1 flex gap-2">
+          <Link
+            href={`/admin/groups/${g.id}/members`}
+            className="flex-1"
+          >
+            <GlassButton variant="outline" size="sm" className="w-full text-xs">
+              {labels.members}
+            </GlassButton>
+          </Link>
+          <Link
+            href={`/admin/groups/${g.id}/curriculum`}
+            className="flex-1"
+          >
+            <GlassButton variant="outline" size="sm" className="w-full text-xs">
+              {labels.curriculum}
+            </GlassButton>
+          </Link>
+        </div>
+      </GlassCardContent>
+    </GlassCard>
+  );
+}
+
+export function GroupsGrid({ groups, isAdmin, labels }: GroupsGridProps) {
   if (groups.length === 0) {
     return (
       <p className="mt-8 text-center text-text-soft">{labels.empty}</p>
@@ -49,54 +118,7 @@ export function GroupsGrid({ groups, isAdmin, labels }: GroupsGridProps) {
   return (
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {groups.map((g) => (
-        <GlassCard key={g.id} variant="default">
-          <GlassCardContent className="flex flex-col gap-3 p-5">
-            <div className="flex items-start justify-between gap-2">
-              <div className="min-w-0">
-                <p className="truncate font-semibold text-text">{g.name}</p>
-                <p className="text-xs text-text-soft">/{g.slug}</p>
-              </div>
-              {isAdmin && (
-                <GlassButton
-                  variant="ghost"
-                  size="sm"
-                  disabled={pending}
-                  onClick={() => handleDelete(g.id, g.name)}
-                  className="shrink-0 text-xs text-red-400 hover:text-red-300"
-                >
-                  Suppr.
-                </GlassButton>
-              )}
-            </div>
-
-            {(g.startsAt || g.endsAt) && (
-              <p className="text-xs text-text-soft">
-                {g.startsAt ? new Date(g.startsAt).toLocaleDateString() : "—"}
-                {" → "}
-                {g.endsAt ? new Date(g.endsAt).toLocaleDateString() : "∞"}
-              </p>
-            )}
-
-            <div className="mt-1 flex gap-2">
-              <GlassButton
-                variant="outline"
-                size="sm"
-                onClick={() => router.push(`/admin/groups/${g.id}`)}
-                className="flex-1 text-xs"
-              >
-                {labels.members}
-              </GlassButton>
-              <GlassButton
-                variant="outline"
-                size="sm"
-                onClick={() => router.push(`/admin/groups/${g.id}/curriculum`)}
-                className="flex-1 text-xs"
-              >
-                {labels.curriculum}
-              </GlassButton>
-            </div>
-          </GlassCardContent>
-        </GlassCard>
+        <GroupCard key={g.id} group={g} isAdmin={isAdmin} labels={labels} />
       ))}
     </div>
   );

From 40894fa5d85e550ea3975f8c1d9f9c01841d2eec Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 19:45:43 +0200
Subject: [PATCH 09/22] fix(groups): optimistic invitation list update, fix
 stale form ref, guard getInvitations 403

---
 apps/frontend/app/actions/groups.ts           |  9 ++++++---
 .../components/admin/invitations-panel.tsx    | 20 +++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/app/actions/groups.ts b/apps/frontend/app/actions/groups.ts
index 6f367a6..2e3dd8a 100644
--- a/apps/frontend/app/actions/groups.ts
+++ b/apps/frontend/app/actions/groups.ts
@@ -113,9 +113,12 @@ export interface Invitation {
 
 export async function getInvitations(groupId: string, includeRevoked = false): Promise<Invitation[]> {
   const qs = includeRevoked ? "?includeRevoked=true" : "";
-  return (
-    (await apiFetch<Invitation[]>(`/api/v1/groups/${groupId}/invitations${qs}`)) ?? []
-  );
+  try {
+    return (await apiFetch<Invitation[]>(`/api/v1/groups/${groupId}/invitations${qs}`)) ?? [];
+  } catch (e) {
+    if (e instanceof ApiError && (e.status === 403 || e.status === 404)) return [];
+    throw e;
+  }
 }
 
 export async function createGroup(payload: {
diff --git a/apps/frontend/components/admin/invitations-panel.tsx b/apps/frontend/components/admin/invitations-panel.tsx
index daab25f..fe0d65c 100644
--- a/apps/frontend/components/admin/invitations-panel.tsx
+++ b/apps/frontend/components/admin/invitations-panel.tsx
@@ -39,17 +39,24 @@ export function InvitationsPanel({
   const [showForm, setShowForm] = useState(false);
   const [error, setError] = useState("");
   const [copied, setCopied] = useState<string | null>(null);
+  // Local copy for optimistic updates
+  const [invitations, setInvitations] = useState<Invitation[]>(initialInvitations);
 
   function handleCopy(code: string) {
     navigator.clipboard.writeText(code).then(() => {
       setCopied(code);
       setTimeout(() => setCopied(null), 2000);
+    }).catch(() => {
+      // Fallback for non-secure contexts
+      setCopied(code);
+      setTimeout(() => setCopied(null), 2000);
     });
   }
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
-    const fd = new FormData(e.currentTarget);
+    const form = e.currentTarget;
+    const fd = new FormData(form);
     const maxUses = parseInt(fd.get("maxUses") as string, 10) || 1;
     const rawExpiry = fd.get("expiresAt") as string;
     const expiresAt = rawExpiry ? new Date(rawExpiry).toISOString() : undefined;
@@ -57,10 +64,11 @@ export function InvitationsPanel({
     setError("");
     start(async () => {
       const res = await createInvitation(groupId, maxUses, expiresAt);
-      if (res.ok) {
-        router.refresh();
+      if (res.ok && res.invitation) {
+        setInvitations((prev) => [res.invitation!, ...prev]);
         setShowForm(false);
-        (e.target as HTMLFormElement).reset();
+        form.reset();
+        router.refresh();
       } else {
         setError(res.error ?? "Erreur lors de la création.");
       }
@@ -127,11 +135,11 @@ export function InvitationsPanel({
         </GlassCard>
       )}
 
-      {initialInvitations.length === 0 ? (
+      {invitations.length === 0 ? (
         <p className="text-sm text-text-soft">{labels.noInvitations}</p>
       ) : (
         <div className="flex flex-col gap-2">
-          {initialInvitations.map((inv) => (
+          {invitations.map((inv) => (
             <GlassCard key={inv.id} variant="plain">
               <GlassCardContent className="flex items-center justify-between gap-4 px-4 py-3">
                 <div className="flex flex-col gap-0.5">

From 358d95a68b859dbf37e00bf3471aebba49e5be17 Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 19:45:44 +0200
Subject: [PATCH 10/22] fix(groups): i18n modal title, add deleteBtn
 translation key

---
 apps/frontend/components/admin/create-group-modal.tsx | 8 ++++----
 apps/frontend/messages/en.json                        | 2 ++
 apps/frontend/messages/fr.json                        | 2 ++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/components/admin/create-group-modal.tsx b/apps/frontend/components/admin/create-group-modal.tsx
index 160d8f3..31176e8 100644
--- a/apps/frontend/components/admin/create-group-modal.tsx
+++ b/apps/frontend/components/admin/create-group-modal.tsx
@@ -8,6 +8,7 @@ import { GlassButton } from "@/components/ui/glass-button";
 import { GlassField, GlassInput } from "@/components/ui/glass-input";
 
 export interface CreateGroupModalLabels {
+  title: string;
   name: string;
   namePlaceholder: string;
   slug: string;
@@ -35,7 +36,8 @@ export function CreateGroupModal({ open, onClose, labels }: CreateGroupModalProp
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
-    const fd = new FormData(e.currentTarget);
+    const form = e.currentTarget;
+    const fd = new FormData(form);
     const name = (fd.get("name") as string).trim();
     const slug = (fd.get("slug") as string).trim() || undefined;
     const startsAt = (fd.get("startsAt") as string) || null;
@@ -47,7 +49,6 @@ export function CreateGroupModal({ open, onClose, labels }: CreateGroupModalProp
       if (res.ok) {
         router.refresh();
         onClose();
-        formRef.current?.reset();
       } else {
         setError(res.error ?? "Une erreur est survenue.");
       }
@@ -56,7 +57,6 @@ export function CreateGroupModal({ open, onClose, labels }: CreateGroupModalProp
 
   function handleClose() {
     setError("");
-    formRef.current?.reset();
     onClose();
   }
 
@@ -64,7 +64,7 @@ export function CreateGroupModal({ open, onClose, labels }: CreateGroupModalProp
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
       <div className="w-full max-w-md rounded-2xl border border-white/10 bg-[color:var(--glass-bg)] p-6 shadow-2xl">
         <h2 className="mb-5 text-lg font-semibold text-text">
-          Créer un groupe
+          {labels.title}
         </h2>
 
         <form ref={formRef} onSubmit={handleSubmit} className="flex flex-col gap-4">
diff --git a/apps/frontend/messages/en.json b/apps/frontend/messages/en.json
index 24cb01a..7b62c95 100644
--- a/apps/frontend/messages/en.json
+++ b/apps/frontend/messages/en.json
@@ -694,7 +694,9 @@
       "curriculum": "Courses",
       "invitations": "Invitations",
       "deleteConfirm": "Permanently delete this group?",
+      "deleteBtn": "Delete",
       "form": {
+        "title": "Create a group",
         "name": "Group name",
         "namePlaceholder": "e.g. Year 9 class",
         "slug": "Identifier (slug)",
diff --git a/apps/frontend/messages/fr.json b/apps/frontend/messages/fr.json
index 3efbcfe..3e629b8 100644
--- a/apps/frontend/messages/fr.json
+++ b/apps/frontend/messages/fr.json
@@ -691,7 +691,9 @@
       "curriculum": "Cours",
       "invitations": "Invitations",
       "deleteConfirm": "Supprimer ce groupe définitivement ?",
+      "deleteBtn": "Supprimer",
       "form": {
+        "title": "Créer un groupe",
         "name": "Nom du groupe",
         "namePlaceholder": "ex. Classe de 3ème",
         "slug": "Identifiant (slug)",

From fd8728f468baa4b43d76140fd7e77996168afcf9 Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 19:45:44 +0200
Subject: [PATCH 11/22] fix(groups): consistent breadcrumb navigation across
 groups pages

---
 apps/frontend/app/admin/groups/[id]/curriculum/page.tsx | 3 ++-
 apps/frontend/app/admin/groups/[id]/members/page.tsx    | 3 ++-
 apps/frontend/app/admin/groups/page.tsx                 | 2 ++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/app/admin/groups/[id]/curriculum/page.tsx b/apps/frontend/app/admin/groups/[id]/curriculum/page.tsx
index 43b27e3..ff5854e 100644
--- a/apps/frontend/app/admin/groups/[id]/curriculum/page.tsx
+++ b/apps/frontend/app/admin/groups/[id]/curriculum/page.tsx
@@ -47,7 +47,8 @@ export default async function CurriculumPage({ params }: PageProps) {
       <AdminBreadcrumb
         items={[
           { label: "Admin", href: "/admin" },
-          { label: groupName },
+          { label: "Groupes", href: "/admin/groups" },
+          { label: groupName, href: `/admin/groups/${id}` },
           { label: t("title") },
         ]}
       />
diff --git a/apps/frontend/app/admin/groups/[id]/members/page.tsx b/apps/frontend/app/admin/groups/[id]/members/page.tsx
index ff0255d..52b1a21 100644
--- a/apps/frontend/app/admin/groups/[id]/members/page.tsx
+++ b/apps/frontend/app/admin/groups/[id]/members/page.tsx
@@ -43,7 +43,8 @@ export default async function GroupMembersPage({ params }: PageProps) {
       <AdminBreadcrumb
         items={[
           { label: "Admin", href: "/admin" },
-          { label: groupName },
+          { label: "Groupes", href: "/admin/groups" },
+          { label: groupName, href: `/admin/groups/${id}` },
           { label: t("title") },
         ]}
       />
diff --git a/apps/frontend/app/admin/groups/page.tsx b/apps/frontend/app/admin/groups/page.tsx
index bf0d839..5ce0983 100644
--- a/apps/frontend/app/admin/groups/page.tsx
+++ b/apps/frontend/app/admin/groups/page.tsx
@@ -32,6 +32,7 @@ export default async function GroupsPage() {
             <CreateGroupTrigger
               newGroup={t("newGroup")}
               form={{
+                title: t("form.title"),
                 name: t("form.name"),
                 namePlaceholder: t("form.namePlaceholder"),
                 slug: t("form.slug"),
@@ -54,6 +55,7 @@ export default async function GroupsPage() {
           members: t("members"),
           curriculum: t("curriculum"),
           deleteConfirm: t("deleteConfirm"),
+          deleteBtn: t("deleteBtn"),
           empty: t("empty"),
         }}
       />

From 455d7da4178814cbab5b4a92ffc9130a47ebe65b Mon Sep 17 00:00:00 2001
From: Martin <leo.martin1@viacesi.fr>
Date: Sun, 21 Jun 2026 20:23:25 +0200
Subject: [PATCH 12/22] refactor(groups): redesign group card with avatar, icon
 nav rows and subtle delete

- Replace flat outline buttons with full-width clickable rows (icon + label + arrow)
- Add colour-coded avatar circle derived deterministically from group slug
- Move delete action to a discrete icon button (only visible on hover)
- Show date range as a GlassChip instead of plain text
- Fix hydration mismatch by passing explicit fr-FR locale to toLocaleDateString
---
 .../frontend/components/admin/groups-grid.tsx | 115 ++++++++++++------
 1 file changed, 75 insertions(+), 40 deletions(-)

diff --git a/apps/frontend/components/admin/groups-grid.tsx b/apps/frontend/components/admin/groups-grid.tsx
index c5f7678..4481216 100644
--- a/apps/frontend/components/admin/groups-grid.tsx
+++ b/apps/frontend/components/admin/groups-grid.tsx
@@ -5,8 +5,9 @@ import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 
 import { deleteGroup } from "@/app/actions/groups";
-import { GlassButton } from "@/components/ui/glass-button";
 import { GlassCard, GlassCardContent } from "@/components/ui/glass-card";
+import { GlassChip } from "@/components/ui/glass-chip";
+import { ArrowRightIcon, BookIcon, TrashIcon, UsersIcon } from "@/components/ui/icons";
 
 interface GroupItem {
   id: string;
@@ -36,10 +37,36 @@ interface GroupCardProps {
   labels: Labels;
 }
 
+const PALETTE = [
+  { bg: "rgba(109,40,217,0.22)", text: "#a78bfa" },
+  { bg: "rgba(3,105,161,0.22)", text: "#38bdf8" },
+  { bg: "rgba(5,150,105,0.22)", text: "#34d399" },
+  { bg: "rgba(217,119,6,0.22)", text: "#fbbf24" },
+  { bg: "rgba(190,24,93,0.22)", text: "#f472b6" },
+  { bg: "rgba(126,34,206,0.22)", text: "#d8b4fe" },
+];
+
+function slugPalette(slug: string) {
+  let h = 0;
+  for (const c of slug) h = (h * 31 + c.charCodeAt(0)) >>> 0;
+  return PALETTE[h % PALETTE.length];
+}
+
+function formatDateRange(startsAt: string | null, endsAt: string | null) {
+  const fmt = (d: string) =>
+    new Date(d).toLocaleDateString("fr-FR", { month: "short", year: "numeric" });
+  if (startsAt && endsAt) return `${fmt(startsAt)} → ${fmt(endsAt)}`;
+  if (startsAt) return `Depuis ${fmt(startsAt)}`;
+  if (endsAt) return `Jusqu'au ${fmt(endsAt)}`;
+  return null;
+}
+
 function GroupCard({ group: g, isAdmin, labels }: GroupCardProps) {
   const router = useRouter();
   const [pending, start] = useTransition();
   const [error, setError] = useState("");
+  const palette = slugPalette(g.slug);
+  const dateLabel = formatDateRange(g.startsAt, g.endsAt);
 
   function handleDelete() {
     if (!confirm(`${labels.deleteConfirm}\n\n"${g.name}"`)) return;
@@ -56,53 +83,63 @@ function GroupCard({ group: g, isAdmin, labels }: GroupCardProps) {
 
   return (
     <GlassCard variant="default">
-      <GlassCardContent className="flex flex-col gap-3 p-5">
-        <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0">
-            <p className="truncate font-semibold text-text">{g.name}</p>
-            <p className="text-xs text-text-soft">/{g.slug}</p>
+      <GlassCardContent className="p-0">
+        {/* Header */}
+        <div className="flex items-start gap-3 p-4 pb-3">
+          <div
+            className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-sm font-bold uppercase"
+            style={{ background: palette.bg, color: palette.text }}
+          >
+            {g.name[0]}
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <p className="truncate font-semibold leading-snug text-text">{g.name}</p>
+            <p className="font-mono text-[0.7rem] text-text-soft">/{g.slug}</p>
           </div>
+
           {isAdmin && (
-            <GlassButton
-              variant="danger"
-              size="sm"
+            <button
+              type="button"
               disabled={pending}
               onClick={handleDelete}
-              className="shrink-0 text-xs"
+              className="mt-0.5 shrink-0 rounded-lg p-1.5 text-text-soft opacity-50 transition-all hover:bg-red-500/15 hover:text-red-400 hover:opacity-100 disabled:opacity-30"
+              title={labels.deleteBtn}
             >
-              {pending ? "…" : labels.deleteBtn}
-            </GlassButton>
+              <TrashIcon size={15} />
+            </button>
           )}
         </div>
 
-        {(g.startsAt || g.endsAt) && (
-          <p className="text-xs text-text-soft">
-            {g.startsAt ? new Date(g.startsAt).toLocaleDateString() : "—"}
-            {" → "}
-            {g.endsAt ? new Date(g.endsAt).toLocaleDateString() : "∞"}
-          </p>
+        {dateLabel && (
+          <div className="px-4 pb-3">
+            <GlassChip size="sm">{dateLabel}</GlassChip>
+          </div>
         )}
 
-        {error && <p className="text-xs text-red-400">{error}</p>}
+        {error && <p className="px-4 pb-2 text-xs text-red-400">{error}</p>}
 
-        <div className="mt-1 flex gap-2">
-          <Link
-            href={`/admin/groups/${g.id}/members`}
-            className="flex-1"
-          >
-            <GlassButton variant="outline" size="sm" className="w-full text-xs">
-              {labels.members}
-            </GlassButton>
-          </Link>
-          <Link
-            href={`/admin/groups/${g.id}/curriculum`}
-            className="flex-1"
-          >
-            <GlassButton variant="outline" size="sm" className="w-full text-xs">
-              {labels.curriculum}
-            </GlassButton>
-          </Link>
-        </div>
+        <div className="mx-4 border-t border-[color:var(--glass-border)]" />
+
+        <Link
+          href={`/admin/groups/${g.id}/members`}
+          className="flex items-center gap-3 px-4 py-3 text-sm text-text-soft transition-colors hover:bg-[color:var(--glass-bg)] hover:text-text"
+        >
+          <UsersIcon size={15} className="shrink-0" />
+          <span className="flex-1">{labels.members}</span>
+          <ArrowRightIcon size={14} className="opacity-40" />
+        </Link>
+
+        <div className="mx-4 border-t border-[color:var(--glass-border)]" />
+
+        <Link
+          href={`/admin/groups/${g.id}/curriculum`}
+          className="flex items-center gap-3 rounded-b-[var(--r-lg)] px-4 py-3 text-sm text-text-soft transition-colors hover:bg-[color:var(--glass-bg)] hover:text-text"
+        >
+          <BookIcon size={15} className="shrink-0" />
+          <span className="flex-1">{labels.curriculum}</span>
+          <ArrowRightIcon size={14} className="opacity-40" />
+        </Link>
       </GlassCardContent>
     </GlassCard>
   );
@@ -110,9 +147,7 @@ function GroupCard({ group: g, isAdmin, labels }: GroupCardProps) {
 
 export function GroupsGrid({ groups, isAdmin, labels }: GroupsGridProps) {
   if (groups.length === 0) {
-    return (
-      <p className="mt-8 text-center text-text-soft">{labels.empty}</p>
-    );
+    return <p className="mt-8 text-center text-text-soft">{labels.empty}</p>;
   }
 
   return (

From 235a19886bafdc9631c106c9a674948ea5793678 Mon Sep 17 00:00:00 2001
From: RayaneHassani <rayane.hassani@viacesi.fr>
Date: Mon, 22 Jun 2026 12:10:39 +0200
Subject: [PATCH 13/22] feat(deploy): add VPS installer, Caddy reverse proxy
 and prod overlay

- install.sh: bootstrap (Docker, ufw, fail2ban), generates .env with
  random secrets, builds the stack and waits for backend health
- Caddyfile: reverse proxy with automatic HTTPS, domain from DOMAIN env
- docker-compose.prod.yml: production overlay running Caddy on 80/443
- docker-compose.yml: bind app ports to 127.0.0.1 (only Caddy is public)
- .gitignore: ignore per-instance config/
- .gitattributes: enforce LF line endings
---
 .gitattributes          |  10 +++
 .gitignore              |   4 +
 Caddyfile               |  31 +++++++
 docker-compose.prod.yml |  33 ++++++++
 docker-compose.yml      |   8 +-
 install.sh              | 175 ++++++++++++++++++++++++++++++++++++++++
 6 files changed, 259 insertions(+), 2 deletions(-)
 create mode 100644 .gitattributes
 create mode 100644 Caddyfile
 create mode 100644 docker-compose.prod.yml
 create mode 100755 install.sh

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..2fa5e36
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,10 @@
+# Force LF line endings for files that run on the Linux VPS, so they
+# work regardless of the contributor's OS / git autocrlf setting.
+# (CRLF in a shell script breaks the shebang: "bad interpreter ^M".)
+*.sh        text eol=lf
+*.yml       text eol=lf
+*.yaml      text eol=lf
+Caddyfile   text eol=lf
+Makefile    text eol=lf
+Dockerfile  text eol=lf
+mvnw        text eol=lf
diff --git a/.gitignore b/.gitignore
index d39aa33..5698607 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,10 @@
 *.key
 *.crt
 
+# Per-instance branding/config (never committed — survives git pull)
+/config/*
+!/config/.gitkeep
+
 # OS
 .DS_Store
 .AppleDouble
diff --git a/Caddyfile b/Caddyfile
new file mode 100644
index 0000000..d152c2b
--- /dev/null
+++ b/Caddyfile
@@ -0,0 +1,31 @@
+# ─────────────────────────────────────────────────────────────
+# Caddy reverse proxy — automatic HTTPS (Let's Encrypt).
+# The domain is injected at runtime from the DOMAIN env var, so this
+# file stays generic: every deployment sets its own DOMAIN in .env.
+# Only the frontend is exposed; backend & postgres stay on the
+# internal Docker network and are never reachable from the Internet.
+# ─────────────────────────────────────────────────────────────
+
+{$DOMAIN} {
+	# Compress responses (zstd preferred, gzip fallback).
+	encode zstd gzip
+
+	# All public traffic goes to the Next.js frontend over the internal
+	# Docker network. The frontend talks to the backend server-side.
+	reverse_proxy frontend:3000
+
+	# Structured access logs to stdout — ready to be shipped to Loki later.
+	log {
+		output stdout
+		format json
+	}
+
+	# Baseline security headers.
+	header {
+		Strict-Transport-Security "max-age=31536000; includeSubDomains"
+		X-Content-Type-Options "nosniff"
+		X-Frame-Options "SAMEORIGIN"
+		Referrer-Policy "strict-origin-when-cross-origin"
+		-Server
+	}
+}
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
new file mode 100644
index 0000000..a3dd031
--- /dev/null
+++ b/docker-compose.prod.yml
@@ -0,0 +1,33 @@
+# ─────────────────────────────────────────────────────────────
+# Production overlay — adds the Caddy reverse proxy (automatic HTTPS).
+#
+# Usage:
+#   docker compose -f docker-compose.yml -f docker-compose.prod.yml up --build -d
+#
+# In the base file, backend (8080) and frontend (3000) are bound to
+# 127.0.0.1 only, so they are NOT public. Caddy reaches the frontend
+# through the internal "codestar-net" network (service name "frontend").
+# ─────────────────────────────────────────────────────────────
+services:
+  caddy:
+    image: caddy:2-alpine
+    container_name: codestar-caddy
+    restart: unless-stopped
+    depends_on:
+      - frontend
+    ports:
+      - "80:80"
+      - "443:443"
+      - "443:443/udp"   # HTTP/3 (QUIC)
+    environment:
+      DOMAIN: ${DOMAIN}
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile:ro
+      - caddy_data:/data       # certificates & ACME account (persisted)
+      - caddy_config:/config
+    networks:
+      - codestar-net
+
+volumes:
+  caddy_data:
+  caddy_config:
diff --git a/docker-compose.yml b/docker-compose.yml
index 5a8e3b6..640e5bf 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -59,7 +59,9 @@ services:
       # uploaded course images (persisted across restarts)
       - media_data:/app/media
     ports:
-      - "${BACKEND_PORT:-8080}:8080"
+      # Bound to loopback only: never public. In prod, Caddy reaches the
+      # backend indirectly via the frontend over the internal network.
+      - "127.0.0.1:${BACKEND_PORT:-8080}:8080"
     healthcheck:
       test: ["CMD", "wget", "-q", "--spider", "http://localhost:8080/actuator/health"]
       interval: 10s
@@ -88,7 +90,9 @@ services:
       JWT_SECRET: ${JWT_SECRET}
       SITE_URL: ${SITE_URL:-http://localhost:3000}
     ports:
-      - "${FRONTEND_PORT:-3000}:3000"
+      # Bound to loopback only: never public. Caddy (prod overlay) proxies
+      # to this service over the internal "codestar-net" network.
+      - "127.0.0.1:${FRONTEND_PORT:-3000}:3000"
     networks:
       - codestar-net
 
diff --git a/install.sh b/install.sh
new file mode 100755
index 0000000..798d031
--- /dev/null
+++ b/install.sh
@@ -0,0 +1,175 @@
+#!/usr/bin/env bash
+# ─────────────────────────────────────────────────────────────
+# Codestar — VPS bootstrap installer (day 0, run once).
+#
+# What it does:
+#   1. Installs Docker + compose plugin (if missing)
+#   2. Hardens the host (ufw firewall + fail2ban)
+#   3. Creates .env (random secrets + your answers) — never overwrites
+#      an existing .env, so your secrets and customization are safe
+#   4. Builds and starts the full stack behind Caddy (automatic HTTPS)
+#   5. Waits for health and prints the final URL
+#
+# Interactive:
+#   sudo ./install.sh
+#
+# Non-interactive (CI / repeatable):
+#   sudo DOMAIN=codestar.example.com \
+#        ADMIN_EMAIL=you@example.com \
+#        ADMIN_PASSWORD='a-strong-password' \
+#        ADMIN_NAME='Admin' \
+#        SIGNUP_OPEN=false \
+#        ./install.sh
+#
+# Re-running is safe: an existing .env is reused as-is; the stack is
+# rebuilt and restarted (your data lives in Docker volumes, untouched).
+# ─────────────────────────────────────────────────────────────
+set -euo pipefail
+
+# ── pretty logging ───────────────────────────────────────────
+c_blue=$'\033[1;34m'; c_green=$'\033[1;32m'; c_yellow=$'\033[1;33m'; c_red=$'\033[1;31m'; c_reset=$'\033[0m'
+log()  { printf '%s==>%s %s\n' "$c_blue"  "$c_reset" "$*"; }
+ok()   { printf '%s✓%s %s\n'  "$c_green" "$c_reset" "$*"; }
+warn() { printf '%s!%s %s\n'  "$c_yellow" "$c_reset" "$*"; }
+err()  { printf '%s✗%s %s\n'  "$c_red"   "$c_reset" "$*" >&2; }
+
+# Run from the repo root (directory of this script).
+cd "$(dirname "$0")"
+
+# ── privilege handling ───────────────────────────────────────
+if [ "$(id -u)" -eq 0 ]; then SUDO=""; else SUDO="sudo"; fi
+if [ -n "$SUDO" ] && ! command -v sudo >/dev/null 2>&1; then
+  err "Please run as root (sudo not available)."; exit 1
+fi
+
+# ── helpers ──────────────────────────────────────────────────
+# ask VARNAME "prompt" [secret] [default]
+# Uses an existing environment value if set; otherwise prompts (TTY required).
+ask() {
+  local __var="$1" __prompt="$2" __secret="${3:-}" __default="${4:-}"
+  local __cur="${!__var:-}"
+  if [ -n "$__cur" ]; then return 0; fi
+  if [ ! -t 0 ]; then
+    if [ -n "$__default" ]; then printf -v "$__var" '%s' "$__default"; return 0; fi
+    err "Missing required value '$__var' and no TTY to prompt."; exit 1
+  fi
+  if [ "$__secret" = "secret" ]; then
+    read -rsp "$__prompt: " "$__var"; echo
+  else
+    local __hint=""; [ -n "$__default" ] && __hint=" [$__default]"
+    read -rp "$__prompt$__hint: " "$__var"
+    [ -z "${!__var}" ] && [ -n "$__default" ] && printf -v "$__var" '%s' "$__default"
+  fi
+}
+
+# set_env KEY VALUE [file]  — replace or append KEY=VALUE (literal, no sed pitfalls)
+set_env() {
+  local key="$1" val="$2" file="${3:-.env}"
+  if grep -qE "^${key}=" "$file" 2>/dev/null; then
+    grep -vE "^${key}=" "$file" > "$file.tmp" && mv "$file.tmp" "$file"
+  fi
+  printf '%s=%s\n' "$key" "$val" >> "$file"
+}
+
+rand_hex() { openssl rand -hex "$1"; }
+
+# wait_healthy CONTAINER [tries]
+wait_healthy() {
+  local name="$1" tries="${2:-60}" status
+  for _ in $(seq 1 "$tries"); do
+    status="$(docker inspect -f '{{.State.Health.Status}}' "$name" 2>/dev/null || echo missing)"
+    [ "$status" = "healthy" ] && return 0
+    [ "$status" = "missing" ] && { sleep 5; continue; }
+    printf '   backend health: %s\n' "$status"
+    sleep 5
+  done
+  return 1
+}
+
+# ── 1. Docker ────────────────────────────────────────────────
+log "Checking Docker…"
+if ! command -v docker >/dev/null 2>&1; then
+  log "Docker not found — installing via get.docker.com"
+  curl -fsSL https://get.docker.com | $SUDO sh
+  ok "Docker installed"
+else
+  ok "Docker present: $(docker --version)"
+fi
+if ! docker compose version >/dev/null 2>&1; then
+  err "Docker Compose v2 plugin missing. Install 'docker-compose-plugin' and re-run."; exit 1
+fi
+
+# ── 2. Host hardening (firewall + fail2ban) ──────────────────
+log "Hardening host (ufw + fail2ban)…"
+if command -v apt-get >/dev/null 2>&1; then
+  $SUDO apt-get update -qq
+  $SUDO apt-get install -y -qq ufw fail2ban openssl >/dev/null
+  $SUDO ufw allow 22/tcp   >/dev/null 2>&1 || true
+  $SUDO ufw allow 80/tcp   >/dev/null 2>&1 || true
+  $SUDO ufw allow 443/tcp  >/dev/null 2>&1 || true
+  $SUDO ufw --force enable >/dev/null 2>&1 || true
+  $SUDO systemctl enable --now fail2ban >/dev/null 2>&1 || true
+  ok "Firewall (22/80/443) + fail2ban active"
+else
+  warn "Non-apt system: skipping ufw/fail2ban (configure your firewall manually)."
+fi
+
+# ── 3. .env ──────────────────────────────────────────────────
+if [ -f .env ]; then
+  ok "Existing .env found — reusing it (no secrets overwritten)."
+  DOMAIN="$(grep -E '^DOMAIN=' .env | head -1 | cut -d= -f2- || true)"
+  [ -z "${DOMAIN:-}" ] && { err "Existing .env has no DOMAIN= line. Add it and re-run."; exit 1; }
+else
+  log "Creating .env…"
+  [ -f .env.example ] || { err ".env.example missing — are you in the repo root?"; exit 1; }
+  cp .env.example .env
+
+  ask DOMAIN         "Domain name (e.g. codestar.example.com)"
+  ask ADMIN_EMAIL    "Super-admin email"
+  ask ADMIN_PASSWORD "Super-admin password" secret
+  ask ADMIN_NAME     "Super-admin display name" "" "Admin"
+  ask SIGNUP_OPEN    "Open signups without invitation? (true/false)" "" "false"
+
+  set_env DB_USER     "codestar"
+  set_env DB_NAME     "codestardb"
+  set_env DB_PASSWORD "$(rand_hex 24)"
+  set_env JWT_SECRET  "$(rand_hex 48)"          # 96 hex chars (>= 64 required)
+  set_env SITE_URL    "https://${DOMAIN}"
+  set_env DOMAIN      "${DOMAIN}"
+  set_env SIGNUP_OPEN "${SIGNUP_OPEN}"
+  set_env CODESTAR_BOOTSTRAP_SUPER_ADMIN_EMAIL        "${ADMIN_EMAIL}"
+  set_env CODESTAR_BOOTSTRAP_SUPER_ADMIN_PASSWORD     "${ADMIN_PASSWORD}"
+  set_env CODESTAR_BOOTSTRAP_SUPER_ADMIN_DISPLAY_NAME "${ADMIN_NAME}"
+
+  ok ".env created (random DB_PASSWORD & JWT_SECRET generated)"
+fi
+
+# ── 4. Build & start ─────────────────────────────────────────
+log "Building and starting the stack (this can take a few minutes)…"
+$SUDO docker compose -f docker-compose.yml -f docker-compose.prod.yml up --build -d
+
+# ── 5. Wait for health ───────────────────────────────────────
+log "Waiting for the backend to become healthy…"
+if wait_healthy codestar-backend 60; then
+  ok "Backend healthy"
+else
+  warn "Backend not healthy yet. Check logs: docker compose logs -f backend"
+fi
+
+cat <<EOF
+
+${c_green}────────────────────────────────────────────────${c_reset}
+${c_green} Codestar is deploying.${c_reset}
+   URL:      https://${DOMAIN}
+   Admin:    ${CODESTAR_BOOTSTRAP_SUPER_ADMIN_EMAIL:-<from .env>}
+
+ First-time HTTPS note:
+   Caddy fetches a Let's Encrypt certificate on first request.
+   It only works once your DNS A record points ${DOMAIN} -> this server,
+   and ports 80/443 are open. First load may take ~30s.
+
+ Useful commands:
+   docker compose -f docker-compose.yml -f docker-compose.prod.yml logs -f
+   docker compose -f docker-compose.yml -f docker-compose.prod.yml ps
+${c_green}────────────────────────────────────────────────${c_reset}
+EOF

From 84285a056d8ba11da731172c8022e71f95f36560 Mon Sep 17 00:00:00 2001
From: RayaneHassani <rayane.hassani@viacesi.fr>
Date: Tue, 23 Jun 2026 19:45:21 +0200
Subject: [PATCH 14/22] fix(install): prevent early exit on first prompt under
 set -e

- ask(): always return 0 (a non-empty answer with no default made the
  trailing test return non-zero, which set -e turned into an exit)
- create .env only after all prompts succeed (no half-written file)
---
 install.sh | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/install.sh b/install.sh
index 798d031..5cac366 100755
--- a/install.sh
+++ b/install.sh
@@ -47,8 +47,7 @@ fi
 # Uses an existing environment value if set; otherwise prompts (TTY required).
 ask() {
   local __var="$1" __prompt="$2" __secret="${3:-}" __default="${4:-}"
-  local __cur="${!__var:-}"
-  if [ -n "$__cur" ]; then return 0; fi
+  if [ -n "${!__var:-}" ]; then return 0; fi
   if [ ! -t 0 ]; then
     if [ -n "$__default" ]; then printf -v "$__var" '%s' "$__default"; return 0; fi
     err "Missing required value '$__var' and no TTY to prompt."; exit 1
@@ -58,8 +57,9 @@ ask() {
   else
     local __hint=""; [ -n "$__default" ] && __hint=" [$__default]"
     read -rp "$__prompt$__hint: " "$__var"
-    [ -z "${!__var}" ] && [ -n "$__default" ] && printf -v "$__var" '%s' "$__default"
+    if [ -z "${!__var}" ] && [ -n "$__default" ]; then printf -v "$__var" '%s' "$__default"; fi
   fi
+  return 0
 }
 
 # set_env KEY VALUE [file]  — replace or append KEY=VALUE (literal, no sed pitfalls)
@@ -122,7 +122,6 @@ if [ -f .env ]; then
 else
   log "Creating .env…"
   [ -f .env.example ] || { err ".env.example missing — are you in the repo root?"; exit 1; }
-  cp .env.example .env
 
   ask DOMAIN         "Domain name (e.g. codestar.example.com)"
   ask ADMIN_EMAIL    "Super-admin email"
@@ -130,6 +129,9 @@ else
   ask ADMIN_NAME     "Super-admin display name" "" "Admin"
   ask SIGNUP_OPEN    "Open signups without invitation? (true/false)" "" "false"
 
+  # Create .env only after all answers are collected (no half-written file).
+  cp .env.example .env
+
   set_env DB_USER     "codestar"
   set_env DB_NAME     "codestardb"
   set_env DB_PASSWORD "$(rand_hex 24)"

From 2b884932dbd6f405a128fe778d97182c65c574ea Mon Sep 17 00:00:00 2001
From: RayaneHassani <rayane.hassani@viacesi.fr>
Date: Tue, 23 Jun 2026 22:07:07 +0200
Subject: [PATCH 15/22] feat(deploy): add update.sh with DB backup and
 auto-rollback

- update.sh: pull, rebuild, health-check; on failure rolls back code
  and restores the pre-update database dump. Flags: --yes, --no-backup.
  Single-instance lock; keeps the last 7 DB backups.
- deploy/systemd: optional service + timer for scheduled local updates
- .gitignore: ignore /backups/
---
 .gitignore                             |   3 +
 deploy/systemd/codestar-update.service |  22 ++++
 deploy/systemd/codestar-update.timer   |  15 +++
 update.sh                              | 140 +++++++++++++++++++++++++
 4 files changed, 180 insertions(+)
 create mode 100644 deploy/systemd/codestar-update.service
 create mode 100644 deploy/systemd/codestar-update.timer
 create mode 100755 update.sh

diff --git a/.gitignore b/.gitignore
index 5698607..7d68508 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,9 @@
 /config/*
 !/config/.gitkeep
 
+# Database backups produced by update.sh (stay on the host only)
+/backups/
+
 # OS
 .DS_Store
 .AppleDouble
diff --git a/deploy/systemd/codestar-update.service b/deploy/systemd/codestar-update.service
new file mode 100644
index 0000000..7b2c016
--- /dev/null
+++ b/deploy/systemd/codestar-update.service
@@ -0,0 +1,22 @@
+# Codestar — auto-update unit (oneshot, triggered by codestar-update.timer).
+#
+# Install (edit User and the repo path to match your setup):
+#   sudo cp deploy/systemd/codestar-update.* /etc/systemd/system/
+#   sudo systemctl daemon-reload
+#   sudo systemctl enable --now codestar-update.timer
+#
+# Inspect:
+#   systemctl list-timers codestar-update.timer
+#   journalctl -u codestar-update.service -f
+[Unit]
+Description=Codestar instance auto-update
+Wants=network-online.target
+After=network-online.target docker.service
+
+[Service]
+Type=oneshot
+User=ray
+WorkingDirectory=/home/ray/codestar
+ExecStart=/home/ray/codestar/update.sh --yes
+# Don't let a deploy hang forever.
+TimeoutStartSec=1800
diff --git a/deploy/systemd/codestar-update.timer b/deploy/systemd/codestar-update.timer
new file mode 100644
index 0000000..2cba7fc
--- /dev/null
+++ b/deploy/systemd/codestar-update.timer
@@ -0,0 +1,15 @@
+# Codestar — schedule for the auto-update service.
+# Default: every 15 minutes. Adjust OnCalendar to taste, e.g. "*-*-* 03:00:00"
+# for a nightly update at 3am.
+[Unit]
+Description=Run Codestar auto-update on a schedule
+
+[Timer]
+OnCalendar=*:0/15
+# Run a missed update if the VPS was off at the scheduled time.
+Persistent=true
+# Avoid all instances hitting GitHub at the same second.
+RandomizedDelaySec=120
+
+[Install]
+WantedBy=timers.target
diff --git a/update.sh b/update.sh
new file mode 100755
index 0000000..49409c4
--- /dev/null
+++ b/update.sh
@@ -0,0 +1,140 @@
+#!/usr/bin/env bash
+# ─────────────────────────────────────────────────────────────
+# Codestar — instance updater (day-N).
+#
+# Pulls the latest code, rebuilds the stack and verifies health.
+# Safe by design: backs up the database first, and on a failed
+# health check it rolls back BOTH the code and the database.
+#
+# Run as the repo owner (so git uses the deploy key) with Docker
+# access (add the user to the "docker" group: usermod -aG docker <user>).
+#
+# Usage:
+#   ./update.sh              interactive (asks before applying)
+#   ./update.sh --yes        non-interactive (for systemd timer / CI)
+#   ./update.sh --no-backup  skip the pre-update DB dump
+#   ./update.sh --help
+#
+# Exit codes: 0 = updated or already up to date · 1 = error/rolled back
+# ─────────────────────────────────────────────────────────────
+set -euo pipefail
+
+cd "$(dirname "$0")"
+
+# ── options ──────────────────────────────────────────────────
+ASSUME_YES=0
+DO_BACKUP=1
+for arg in "$@"; do
+  case "$arg" in
+    --yes|-y)     ASSUME_YES=1 ;;
+    --no-backup)  DO_BACKUP=0 ;;
+    --help|-h)    sed -n '2,20p' "$0"; exit 0 ;;
+    *) echo "Unknown option: $arg" >&2; exit 1 ;;
+  esac
+done
+
+# ── logging ──────────────────────────────────────────────────
+c_blue=$'\033[1;34m'; c_green=$'\033[1;32m'; c_yellow=$'\033[1;33m'; c_red=$'\033[1;31m'; c_reset=$'\033[0m'
+log()  { printf '%s==>%s %s\n' "$c_blue"   "$c_reset" "$*"; }
+ok()   { printf '%s✓%s %s\n'   "$c_green"  "$c_reset" "$*"; }
+warn() { printf '%s!%s %s\n'   "$c_yellow" "$c_reset" "$*"; }
+err()  { printf '%s✗%s %s\n'   "$c_red"    "$c_reset" "$*" >&2; }
+
+# ── single-instance lock (avoid concurrent updates) ──────────
+exec 9>/tmp/codestar-update.lock
+if ! flock -n 9; then err "Another update is already running."; exit 1; fi
+
+# ── prerequisites ────────────────────────────────────────────
+[ -f .env ] || { err "No .env found — is this an installed instance?"; exit 1; }
+command -v docker >/dev/null || { err "docker not found."; exit 1; }
+docker info >/dev/null 2>&1 || { err "Cannot talk to Docker. Add your user to the 'docker' group."; exit 1; }
+
+COMPOSE="docker compose -f docker-compose.yml -f docker-compose.prod.yml"
+
+# DB credentials (read from .env without sourcing arbitrary content)
+DB_USER="$(grep -E '^DB_USER='     .env | head -1 | cut -d= -f2-)"
+DB_NAME="$(grep -E '^DB_NAME='     .env | head -1 | cut -d= -f2-)"
+DB_CONTAINER="codestar-db"
+BACKUP_DIR="./backups"
+KEEP_BACKUPS=7
+
+# ── helpers ──────────────────────────────────────────────────
+wait_healthy() {
+  local name="$1" tries="${2:-60}" status
+  for _ in $(seq 1 "$tries"); do
+    status="$(docker inspect -f '{{.State.Health.Status}}' "$name" 2>/dev/null || echo missing)"
+    [ "$status" = "healthy" ] && return 0
+    sleep 5
+  done
+  return 1
+}
+
+backup_db() {
+  mkdir -p "$BACKUP_DIR"
+  local f="$BACKUP_DIR/db-$(date +%Y%m%d-%H%M%S).sql.gz"
+  log "Backing up database → $f"
+  if docker exec "$DB_CONTAINER" pg_dump --clean --if-exists -U "$DB_USER" "$DB_NAME" | gzip > "$f"; then
+    ok "Backup done"
+    echo "$f"
+    # rotation: keep the most recent $KEEP_BACKUPS
+    ls -1t "$BACKUP_DIR"/db-*.sql.gz 2>/dev/null | tail -n +$((KEEP_BACKUPS + 1)) | xargs -r rm -f
+  else
+    rm -f "$f"; err "Backup failed — aborting (no update applied)."; exit 1
+  fi
+}
+
+restore_db() {
+  local f="$1"
+  [ -n "$f" ] && [ -f "$f" ] || { warn "No backup to restore."; return 1; }
+  log "Restoring database from $f"
+  gunzip -c "$f" | docker exec -i "$DB_CONTAINER" psql -U "$DB_USER" -d "$DB_NAME" >/dev/null
+  ok "Database restored"
+}
+
+# ── 1. is there anything new? ────────────────────────────────
+log "Checking for updates…"
+git fetch --quiet
+OLD_COMMIT="$(git rev-parse HEAD)"
+NEW_COMMIT="$(git rev-parse '@{u}')"
+if [ "$OLD_COMMIT" = "$NEW_COMMIT" ]; then
+  ok "Already up to date ($(git rev-parse --short HEAD)). Nothing to do."
+  exit 0
+fi
+
+log "New version available:"
+git --no-pager log --oneline "$OLD_COMMIT..$NEW_COMMIT" | sed 's/^/   /'
+
+if [ "$ASSUME_YES" -ne 1 ]; then
+  read -rp "Apply this update? [y/N] " a
+  [ "$a" = "y" ] || [ "$a" = "Y" ] || { warn "Cancelled."; exit 0; }
+fi
+
+# ── 2. backup ────────────────────────────────────────────────
+BACKUP_FILE=""
+[ "$DO_BACKUP" -eq 1 ] && BACKUP_FILE="$(backup_db)"
+
+# ── 3. apply ─────────────────────────────────────────────────
+log "Pulling new code…"
+git merge --ff-only "$NEW_COMMIT"
+
+log "Rebuilding and restarting…"
+$COMPOSE up --build -d
+
+# ── 4. verify, else rollback ─────────────────────────────────
+log "Waiting for backend health…"
+if wait_healthy codestar-backend 60; then
+  ok "Update applied successfully → $(git rev-parse --short HEAD)"
+  docker image prune -f >/dev/null 2>&1 || true
+  exit 0
+fi
+
+err "Backend unhealthy after update. Rolling back to $(git rev-parse --short "$OLD_COMMIT")…"
+git reset --hard "$OLD_COMMIT"
+$COMPOSE up --build -d
+[ -n "$BACKUP_FILE" ] && restore_db "$BACKUP_FILE" || warn "No DB restore (backup was skipped)."
+if wait_healthy codestar-backend 60; then
+  warn "Rolled back successfully. The update was NOT applied."
+else
+  err "Rollback finished but backend still unhealthy. Check: $COMPOSE logs backend"
+fi
+exit 1

From eb49177a530ec6349732107fa1930eae4083e936 Mon Sep 17 00:00:00 2001
From: RayaneHassani <rayane.hassani@viacesi.fr>
Date: Wed, 24 Jun 2026 00:09:08 +0200
Subject: [PATCH 16/22] feat(backend): expose Prometheus metrics and structured
 JSON logs

- add micrometer-registry-prometheus; expose health, info, prometheus
- enable liveness/readiness health probes
- logback-spring.xml: console logs in dev, JSON logs in prod (Loki-ready)
- permit /actuator/info and /actuator/prometheus (internal network only)
- add JaCoCo plugin for coverage reports
---
 apps/backend/pom.xml                          | 32 +++++++++++++++++++
 .../backend/config/SecurityConfig.java        |  7 ++--
 .../src/main/resources/application.properties | 10 ++++--
 .../src/main/resources/logback-spring.xml     | 32 +++++++++++++++++++
 4 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 apps/backend/src/main/resources/logback-spring.xml

diff --git a/apps/backend/pom.xml b/apps/backend/pom.xml
index 4056386..9fe7243 100644
--- a/apps/backend/pom.xml
+++ b/apps/backend/pom.xml
@@ -100,6 +100,20 @@
 			<version>2.7.0</version>
 		</dependency>
 
+		<!-- Prometheus metrics backend for Micrometer (exposes /actuator/prometheus) -->
+		<dependency>
+			<groupId>io.micrometer</groupId>
+			<artifactId>micrometer-registry-prometheus</artifactId>
+			<scope>runtime</scope>
+		</dependency>
+
+		<!-- Structured JSON logging (Loki-friendly), activated by logback-spring.xml in prod -->
+		<dependency>
+			<groupId>net.logstash.logback</groupId>
+			<artifactId>logstash-logback-encoder</artifactId>
+			<version>8.0</version>
+		</dependency>
+
 	</dependencies>
 
 	<build>
@@ -108,6 +122,24 @@
 				<groupId>org.springframework.boot</groupId>
 				<artifactId>spring-boot-maven-plugin</artifactId>
 			</plugin>
+
+			<!-- Code coverage: produces target/site/jacoco/jacoco.xml during `mvn verify` -->
+			<plugin>
+				<groupId>org.jacoco</groupId>
+				<artifactId>jacoco-maven-plugin</artifactId>
+				<version>0.8.12</version>
+				<executions>
+					<execution>
+						<id>prepare-agent</id>
+						<goals><goal>prepare-agent</goal></goals>
+					</execution>
+					<execution>
+						<id>report</id>
+						<phase>verify</phase>
+						<goals><goal>report</goal></goals>
+					</execution>
+				</executions>
+			</plugin>
 		</plugins>
 	</build>
 
diff --git a/apps/backend/src/main/java/com/codestar/backend/config/SecurityConfig.java b/apps/backend/src/main/java/com/codestar/backend/config/SecurityConfig.java
index 4e1a3d7..b256a6d 100644
--- a/apps/backend/src/main/java/com/codestar/backend/config/SecurityConfig.java
+++ b/apps/backend/src/main/java/com/codestar/backend/config/SecurityConfig.java
@@ -49,10 +49,13 @@ public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
                             "/api/v1/instance/branding").permitAll()
                     .requestMatchers(HttpMethod.GET,
                             "/api/v1/media/**").permitAll()
-                    // actuator health
+                    // actuator: health probes + info + Prometheus scrape.
+                    // Not internet-facing (backend runs on loopback + internal network).
                     .requestMatchers(HttpMethod.GET,
                             "/actuator/health",
-                            "/actuator/health/**").permitAll()
+                            "/actuator/health/**",
+                            "/actuator/info",
+                            "/actuator/prometheus").permitAll()
                     // swagger / OpenAPI
                     .requestMatchers(
                             "/v3/api-docs/**",
diff --git a/apps/backend/src/main/resources/application.properties b/apps/backend/src/main/resources/application.properties
index 1b17b5e..ec8a406 100644
--- a/apps/backend/src/main/resources/application.properties
+++ b/apps/backend/src/main/resources/application.properties
@@ -12,9 +12,15 @@ spring.jpa.show-sql=false
 spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect
 spring.jpa.open-in-view=false
 
-# Actuator — expose the health endpoint. Aggregate status includes DB connectivity
-management.endpoints.web.exposure.include=health
+# Actuator — health (DB connectivity), info, and Prometheus metrics.
+# The backend is never public (loopback + internal Docker network), so the
+# Prometheus scrape endpoint is only reachable by the monitoring stack.
+management.endpoints.web.exposure.include=health,info,prometheus
 management.endpoint.health.show-details=never
+# Kubernetes-style liveness/readiness probes (used by Docker healthcheck & CD)
+management.endpoint.health.probes.enabled=true
+management.health.livenessstate.enabled=true
+management.health.readinessstate.enabled=true
 
 # Flyway
 spring.flyway.enabled=true
diff --git a/apps/backend/src/main/resources/logback-spring.xml b/apps/backend/src/main/resources/logback-spring.xml
new file mode 100644
index 0000000..82c5ce1
--- /dev/null
+++ b/apps/backend/src/main/resources/logback-spring.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  Logging policy:
+    - dev profile  : human-readable colored console (default Spring pattern)
+    - prod profile : single-line JSON per event (shipped to Loki by Promtail/Alloy)
+  Selection is driven by the active Spring profile (SPRING_PROFILES_ACTIVE).
+-->
+<configuration>
+    <include resource="org/springframework/boot/logging/logback/defaults.xml"/>
+
+    <!-- Human-readable console for local development -->
+    <springProfile name="dev">
+        <include resource="org/springframework/boot/logging/logback/console-appender.xml"/>
+        <root level="INFO">
+            <appender-ref ref="CONSOLE"/>
+        </root>
+    </springProfile>
+
+    <!-- Structured JSON for production (Loki-friendly) -->
+    <springProfile name="prod">
+        <appender name="JSON" class="ch.qos.logback.core.ConsoleAppender">
+            <encoder class="net.logstash.logback.encoder.LogstashEncoder">
+                <includeMdcKeyName>traceId</includeMdcKeyName>
+                <includeMdcKeyName>spanId</includeMdcKeyName>
+                <customFields>{"service":"codestar-backend"}</customFields>
+            </encoder>
+        </appender>
+        <root level="INFO">
+            <appender-ref ref="JSON"/>
+        </root>
+    </springProfile>
+</configuration>

From 25157b4efb58b915d760d4085b814305c11b277b Mon Sep 17 00:00:00 2001
From: RayaneHassani <rayane.hassani@viacesi.fr>
Date: Wed, 24 Jun 2026 00:12:53 +0200
Subject: [PATCH 17/22] ci: add fast checks workflow with governance guards

- ci.yml: paths-filtered jobs on dev/main (push + PR), concurrency cancel
  - frontend: lint, typecheck, build
  - backend: compile, verify (test + JaCoCo), coverage artifact
  - governance: Flyway migration + i18n parity guards
  - secrets: gitleaks; dependency-review on PRs; docker compose build
  - ci-required: single aggregate status check for branch protection
- scripts/ci: flyway-governance.sh, i18n-parity.sh (shared with GitLab later)
- frontend: add typecheck script (tsc --noEmit)
- third-party actions pinned by commit SHA
- remove build-services.yml (superseded)
---
 .github/workflows/build-services.yml |  96 --------------
 .github/workflows/ci.yml             | 179 +++++++++++++++++++++++++++
 apps/frontend/package.json           |   3 +-
 scripts/ci/flyway-governance.sh      |  57 +++++++++
 scripts/ci/i18n-parity.sh            |  37 ++++++
 5 files changed, 275 insertions(+), 97 deletions(-)
 delete mode 100644 .github/workflows/build-services.yml
 create mode 100644 .github/workflows/ci.yml
 create mode 100755 scripts/ci/flyway-governance.sh
 create mode 100755 scripts/ci/i18n-parity.sh

diff --git a/.github/workflows/build-services.yml b/.github/workflows/build-services.yml
deleted file mode 100644
index f9487f3..0000000
--- a/.github/workflows/build-services.yml
+++ /dev/null
@@ -1,96 +0,0 @@
-name: Build Services CI
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-permissions:
-  contents: read
-
-jobs:
-  changes:
-    name: Detect changed paths
-    runs-on: ubuntu-latest
-    outputs:
-      frontend: ${{ steps.filter.outputs.frontend }}
-      backend: ${{ steps.filter.outputs.backend }}
-    steps:
-      - uses: actions/checkout@v4
-      - uses: dorny/paths-filter@v3
-        id: filter
-        with:
-          filters: |
-            frontend:
-              - 'apps/frontend/**'
-            backend:
-              - 'apps/backend/**'
-
-  frontend:
-    name: Frontend — Build
-    needs: changes
-    if: needs.changes.outputs.frontend == 'true'
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: apps/frontend
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        with:
-          version: '9.15.0'
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: pnpm
-          cache-dependency-path: apps/frontend/pnpm-lock.yaml
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm build
-
-  backend:
-    name: Backend — Build
-    needs: changes
-    if: needs.changes.outputs.backend == 'true'
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: apps/backend
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-java@v4
-        with:
-          java-version: '17'
-          distribution: temurin
-          cache: maven
-
-      - name: Make mvnw executable
-        run: chmod +x ./mvnw
-
-      - name: Build
-        run: ./mvnw package -DskipTests -B
-
-  docker:
-    name: Docker — Build images
-    runs-on: ubuntu-latest
-    needs: [frontend, backend]
-    if: |
-      always() &&
-      !contains(needs.*.result, 'failure') &&
-      !contains(needs.*.result, 'cancelled') &&
-      (needs.frontend.result == 'success' || needs.backend.result == 'success')
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Create env file
-        run: cp .env.example .env
-
-      - name: Build images
-        run: docker compose build
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..1cab8d6
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,179 @@
+name: CI
+
+# Fast feedback on every push / PR to dev and main.
+# Heavy security scanning lives in security.yml (main + nightly).
+on:
+  push:
+    branches: [dev, main]
+  pull_request:
+    branches: [dev, main]
+
+# Cancel superseded runs on the same ref.
+concurrency:
+  group: ci-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  changes:
+    name: Detect changed paths
+    runs-on: ubuntu-latest
+    outputs:
+      frontend: ${{ steps.filter.outputs.frontend }}
+      backend: ${{ steps.filter.outputs.backend }}
+      migrations: ${{ steps.filter.outputs.migrations }}
+      i18n: ${{ steps.filter.outputs.i18n }}
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: dorny/paths-filter@d1c1ffe0248fe513906c8e24db8ea791d46f8590 # v3
+        id: filter
+        with:
+          filters: |
+            frontend:
+              - 'apps/frontend/**'
+            backend:
+              - 'apps/backend/**'
+            migrations:
+              - 'apps/backend/src/main/resources/db/migration/**'
+            i18n:
+              - 'apps/frontend/messages/**'
+
+  frontend:
+    name: Frontend — lint, typecheck, build
+    needs: changes
+    if: needs.changes.outputs.frontend == 'true'
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    defaults:
+      run:
+        working-directory: apps/frontend
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4
+        with:
+          version: '9.15.0'
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '20'
+          cache: pnpm
+          cache-dependency-path: apps/frontend/pnpm-lock.yaml
+      - name: Install
+        run: pnpm install --frozen-lockfile
+      - name: Lint
+        run: pnpm lint
+      - name: Type-check
+        run: pnpm typecheck
+      - name: Build
+        run: pnpm build
+
+  backend:
+    name: Backend — compile, test, coverage
+    needs: changes
+    if: needs.changes.outputs.backend == 'true'
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    defaults:
+      run:
+        working-directory: apps/backend
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/setup-java@c1e323688fd81a25caa38c78aa6df2d33d3e20d9 # v4
+        with:
+          java-version: '17'
+          distribution: temurin
+          cache: maven
+      - name: Make mvnw executable
+        run: chmod +x ./mvnw
+      - name: Compile
+        run: ./mvnw compile -B --no-transfer-progress
+      - name: Test + coverage
+        run: ./mvnw verify -B --no-transfer-progress
+      - name: Upload coverage report
+        if: always()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: jacoco-coverage
+          path: apps/backend/target/site/jacoco/
+          retention-days: 7
+          if-no-files-found: warn
+          compression-level: 6
+
+  governance:
+    name: Codestar governance (migrations, i18n)
+    needs: changes
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          fetch-depth: 0   # full history so guards can diff against the base branch
+      - name: Flyway migration governance
+        if: needs.changes.outputs.migrations == 'true'
+        env:
+          BASE_REF: origin/${{ github.base_ref || 'main' }}
+        run: bash scripts/ci/flyway-governance.sh
+      - name: i18n key parity
+        if: needs.changes.outputs.i18n == 'true'
+        run: bash scripts/ci/i18n-parity.sh
+
+  secrets:
+    name: Secret scan (gitleaks)
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          fetch-depth: 0
+      - uses: gitleaks/gitleaks-action@ff98106e4c7b2bc287b24eaf42907196329070c7 # v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  dependency-review:
+    name: Dependency review
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/dependency-review-action@e58c696e52cac8e62d61cc21fda89565d71505d7 # v4.3.0
+        with:
+          fail-on-severity: high
+          comment-summary-in-pr: on-failure
+
+  docker:
+    name: Docker — compose build
+    needs: [frontend, backend]
+    if: |
+      always() &&
+      !contains(needs.*.result, 'failure') &&
+      !contains(needs.*.result, 'cancelled') &&
+      (needs.frontend.result == 'success' || needs.backend.result == 'success')
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - name: Create env file
+        run: cp .env.example .env
+      - name: Build images
+        run: docker compose build
+
+  # Single required status check for branch protection.
+  ci-required:
+    name: CI required
+    needs: [frontend, backend, governance, secrets, docker]
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - name: Verify no required job failed
+        run: |
+          results='${{ join(needs.*.result, ',') }}'
+          echo "Upstream results: $results"
+          case "$results" in
+            *failure*|*cancelled*) echo "A required job failed."; exit 1 ;;
+            *) echo "All required jobs passed (or were skipped)." ;;
+          esac
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index e7ea010..e68ddd4 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit"
   },
   "engines": {
     "node": ">=20.9.0"
diff --git a/scripts/ci/flyway-governance.sh b/scripts/ci/flyway-governance.sh
new file mode 100755
index 0000000..48731d6
--- /dev/null
+++ b/scripts/ci/flyway-governance.sh
@@ -0,0 +1,57 @@
+#!/usr/bin/env bash
+# ─────────────────────────────────────────────────────────────
+# Flyway migration governance gate.
+#
+# Flyway applies each V<n>.sql once and records its checksum. Editing or
+# deleting an already-applied migration makes Flyway refuse to start in
+# production ("checksum mismatch"). This script enforces, on every PR:
+#   1. existing migrations are never modified or deleted (only new ones added)
+#   2. version numbers are unique and strictly increasing (no gap / collision)
+#
+# Usage: flyway-governance.sh [BASE_REF]
+#   BASE_REF defaults to $BASE_REF env, then origin/main.
+# Exit: 0 ok · 1 violation
+# ─────────────────────────────────────────────────────────────
+set -euo pipefail
+
+MIG_DIR="apps/backend/src/main/resources/db/migration"
+BASE="${1:-${BASE_REF:-origin/main}}"
+fail=0
+
+cd "$(git rev-parse --show-toplevel)"
+
+# Resolve base; if unknown (e.g. shallow clone), skip the diff-based check.
+if ! git rev-parse --verify --quiet "$BASE" >/dev/null; then
+  echo "! base ref '$BASE' not found — skipping modified/deleted check"
+else
+  echo "==> Checking migrations against $BASE"
+  # Status of migration files between base and HEAD: A=added M=modified D=deleted R=renamed
+  while IFS=$'\t' read -r status path rest; do
+    [ -z "$status" ] && continue
+    case "$status" in
+      M*) echo "✗ Modified an existing migration: $path (forbidden — add a new V### instead)"; fail=1 ;;
+      D*) echo "✗ Deleted an existing migration: $path (forbidden)"; fail=1 ;;
+      R*) echo "✗ Renamed an existing migration: $path -> $rest (forbidden)"; fail=1 ;;
+      A*) echo "  + new migration: $path" ;;
+    esac
+  done < <(git diff --name-status "$BASE"...HEAD -- "$MIG_DIR")
+fi
+
+# Numbering integrity on the current tree: unique + contiguous (V001, V002, …).
+echo "==> Checking version numbering"
+nums="$(ls "$MIG_DIR" 2>/dev/null | grep -oE '^V[0-9]+' | grep -oE '[0-9]+' | sed 's/^0*//;s/^$/0/' | sort -n || true)"
+if [ -n "$nums" ]; then
+  dups="$(echo "$nums" | uniq -d)"
+  if [ -n "$dups" ]; then echo "✗ Duplicate migration version(s): $dups"; fail=1; fi
+  expected=1
+  for n in $nums; do
+    if [ "$n" -ne "$expected" ]; then
+      echo "✗ Non-contiguous numbering: expected V$(printf '%03d' "$expected"), found V$(printf '%03d' "$n")"
+      fail=1; break
+    fi
+    expected=$((expected + 1))
+  done
+fi
+
+if [ "$fail" -eq 0 ]; then echo "✓ Flyway governance OK"; fi
+exit "$fail"
diff --git a/scripts/ci/i18n-parity.sh b/scripts/ci/i18n-parity.sh
new file mode 100755
index 0000000..a34dcba
--- /dev/null
+++ b/scripts/ci/i18n-parity.sh
@@ -0,0 +1,37 @@
+#!/usr/bin/env bash
+# ─────────────────────────────────────────────────────────────
+# i18n key-parity gate.
+#
+# English is the default locale; French ships in v1. A key present in one
+# file but missing in the other means a missing or orphan translation.
+# This compares the full set of leaf key-paths between en.json and fr.json.
+#
+# Requires: jq
+# Exit: 0 keys match · 1 mismatch
+# ─────────────────────────────────────────────────────────────
+set -euo pipefail
+
+cd "$(git rev-parse --show-toplevel)"
+DIR="apps/frontend/messages"
+EN="$DIR/en.json"
+FR="$DIR/fr.json"
+
+command -v jq >/dev/null || { echo "✗ jq is required"; exit 1; }
+[ -f "$EN" ] && [ -f "$FR" ] || { echo "✗ missing $EN or $FR"; exit 1; }
+
+# Leaf key-paths (e.g. nav.signin), sorted.
+keys() { jq -r 'paths(scalars) | join(".")' "$1" | sort; }
+
+only_en="$(comm -23 <(keys "$EN") <(keys "$FR"))"
+only_fr="$(comm -13 <(keys "$EN") <(keys "$FR"))"
+
+fail=0
+if [ -n "$only_en" ]; then
+  echo "✗ Keys in en.json missing from fr.json:"; echo "$only_en" | sed 's/^/   /'; fail=1
+fi
+if [ -n "$only_fr" ]; then
+  echo "✗ Keys in fr.json missing from en.json:"; echo "$only_fr" | sed 's/^/   /'; fail=1
+fi
+
+if [ "$fail" -eq 0 ]; then echo "✓ i18n parity OK ($(keys "$EN" | wc -l | tr -d ' ') keys)"; fi
+exit "$fail"

From 6bc3719da889db2d379293c78886af8c75762399 Mon Sep 17 00:00:00 2001
From: RayaneHassani <rayane.hassani@viacesi.fr>
Date: Wed, 24 Jun 2026 00:14:38 +0200
Subject: [PATCH 18/22] ci: add heavy security workflow (main + nightly)

- CodeQL SAST for Java and JavaScript/TypeScript
- Trivy filesystem and config scans, results to GitHub code scanning
- OpenSSF Scorecard with published results
- CycloneDX SBOM with build-provenance attestation
- third-party actions pinned by commit SHA
---
 .github/workflows/security.yml | 146 +++++++++++++++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 .github/workflows/security.yml

diff --git a/.github/workflows/security.yml b/.github/workflows/security.yml
new file mode 100644
index 0000000..49e8569
--- /dev/null
+++ b/.github/workflows/security.yml
@@ -0,0 +1,146 @@
+name: Security
+
+# Heavy security scanning: runs on main, nightly, and on demand.
+# Fast PR feedback (gitleaks, dependency-review) lives in ci.yml.
+on:
+  push:
+    branches: [main]
+  schedule:
+    - cron: '27 3 * * *'   # nightly at 03:27 UTC
+  workflow_dispatch:
+
+concurrency:
+  group: security-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  codeql-java:
+    name: CodeQL — Java
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    permissions:
+      security-events: write
+      actions: read
+      contents: read
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/setup-java@c1e323688fd81a25caa38c78aa6df2d33d3e20d9 # v4
+        with:
+          java-version: '17'
+          distribution: temurin
+          cache: maven
+      - uses: github/codeql-action/init@dd903d2e4f5405488e5ef1422510ee31c8b32357 # v3
+        with:
+          languages: java-kotlin
+          build-mode: autobuild
+      - uses: github/codeql-action/analyze@dd903d2e4f5405488e5ef1422510ee31c8b32357 # v3
+        with:
+          category: /language:java-kotlin
+
+  codeql-js:
+    name: CodeQL — JavaScript/TypeScript
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    permissions:
+      security-events: write
+      actions: read
+      contents: read
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: github/codeql-action/init@dd903d2e4f5405488e5ef1422510ee31c8b32357 # v3
+        with:
+          languages: javascript-typescript
+          build-mode: none
+      - uses: github/codeql-action/analyze@dd903d2e4f5405488e5ef1422510ee31c8b32357 # v3
+        with:
+          category: /language:javascript-typescript
+
+  trivy:
+    name: Trivy — filesystem & config
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    permissions:
+      security-events: write
+      contents: read
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+
+      - name: Trivy filesystem scan (dependencies)
+        uses: aquasecurity/trivy-action@ed142fd0673e97e23eac54620cfb913e5ce36c25 # v0.36.0
+        with:
+          scan-type: fs
+          scan-ref: .
+          format: sarif
+          output: trivy-fs.sarif
+          severity: CRITICAL,HIGH
+      - name: Upload filesystem SARIF
+        uses: github/codeql-action/upload-sarif@dd903d2e4f5405488e5ef1422510ee31c8b32357 # v3
+        if: always()
+        with:
+          sarif_file: trivy-fs.sarif
+          category: trivy-fs
+
+      - name: Trivy config scan (Dockerfiles, compose)
+        uses: aquasecurity/trivy-action@ed142fd0673e97e23eac54620cfb913e5ce36c25 # v0.36.0
+        with:
+          scan-type: config
+          scan-ref: .
+          format: sarif
+          output: trivy-config.sarif
+          severity: CRITICAL,HIGH
+      - name: Upload config SARIF
+        uses: github/codeql-action/upload-sarif@dd903d2e4f5405488e5ef1422510ee31c8b32357 # v3
+        if: always()
+        with:
+          sarif_file: trivy-config.sarif
+          category: trivy-config
+
+  scorecard:
+    name: OpenSSF Scorecard
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    permissions:
+      security-events: write
+      id-token: write
+      contents: read
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
+      - uses: ossf/scorecard-action@62b2cac7ed8198b15735ed49ab1e5cf35480ba46 # v2.4.0
+        with:
+          results_file: scorecard.sarif
+          results_format: sarif
+          publish_results: true
+      - uses: github/codeql-action/upload-sarif@dd903d2e4f5405488e5ef1422510ee31c8b32357 # v3
+        if: always()
+        with:
+          sarif_file: scorecard.sarif
+          category: scorecard
+
+  sbom:
+    name: SBOM + provenance attestation
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    permissions:
+      contents: read
+      id-token: write        # required for keyless signing of the attestation
+      attestations: write    # required to record the attestation
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - name: Generate SBOM (CycloneDX)
+        uses: anchore/sbom-action@55dc4ee22412511ee8c3142cbea40418e6cec693 # v0.17.8
+        with:
+          path: .
+          format: cyclonedx-json
+          output-file: sbom.cyclonedx.json
+          artifact-name: sbom.cyclonedx.json
+      - name: Attest build provenance for the SBOM
+        # Only on direct pushes to this repo (forks/PRs cannot write attestations).
+        if: github.event_name != 'pull_request'
+        uses: actions/attest-build-provenance@e8998f949152b193b063cb0ec769d69d929409be # v2
+        with:
+          subject-path: sbom.cyclonedx.json

From 4481ae1bd68ae1442d5ca1d0942d8bbe7da02cb9 Mon Sep 17 00:00:00 2001
From: RayaneHassani <rayane.hassani@viacesi.fr>
Date: Wed, 24 Jun 2026 00:16:45 +0200
Subject: [PATCH 19/22] ci: add guarded SSH deploy, dependabot, GitLab mirror
 and badges

- deploy.yml: SSH-based CD running update.sh on the server; prod (main)
  and staging (dev) targets, each gated by a repo variable so forks skip it
- dependabot.yml: per-directory updates (maven, npm, docker, actions);
  groups minor/patch; ignores the Next.js fork
- .gitlab-ci.yml: mirror reusing scripts/ci and native GitLab security templates
- README: CI, Security, Scorecard and license badges
---
 .github/dependabot.yml       | 49 +++++++++++++++++++++++++
 .github/workflows/deploy.yml | 61 +++++++++++++++++++++++++++++++
 .gitlab-ci.yml               | 70 ++++++++++++++++++++++++++++++++++++
 README.md                    |  5 +++
 4 files changed, 185 insertions(+)
 create mode 100644 .github/dependabot.yml
 create mode 100644 .github/workflows/deploy.yml
 create mode 100644 .gitlab-ci.yml

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 0000000..d24a4b8
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,49 @@
+version: 2
+
+updates:
+  # ── Backend (Maven) ──────────────────────────────────────
+  - package-ecosystem: maven
+    directory: /apps/backend
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 5
+    labels: [dependencies, backend]
+    groups:
+      backend-minor-patch:
+        update-types: [minor, patch]
+
+  # ── Frontend (npm/pnpm) ──────────────────────────────────
+  - package-ecosystem: npm
+    directory: /apps/frontend
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 5
+    labels: [dependencies, frontend]
+    groups:
+      frontend-minor-patch:
+        update-types: [minor, patch]
+    ignore:
+      # Next.js is an internal fork — never auto-bump (see apps/frontend/AGENTS.md)
+      - dependency-name: next
+
+  # ── Docker base images ───────────────────────────────────
+  - package-ecosystem: docker
+    directory: /apps/backend
+    schedule:
+      interval: weekly
+    labels: [dependencies, docker]
+  - package-ecosystem: docker
+    directory: /apps/frontend
+    schedule:
+      interval: weekly
+    labels: [dependencies, docker]
+
+  # ── GitHub Actions ───────────────────────────────────────
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly
+    labels: [dependencies, github-actions]
+    groups:
+      actions:
+        update-types: [minor, patch]
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..77bbc32
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,61 @@
+name: Deploy
+
+# Continuous deployment over SSH (build-on-VPS model): connect to the
+# server and run ./update.sh, which pulls, rebuilds, health-checks and
+# rolls back on failure.
+#
+# GUARDED: each job runs only if its host secret is set, so a fork without
+# deployment secrets simply skips this workflow (no red runs).
+#
+# Required secrets (per environment):
+#   prod    : SSH_HOST,         SSH_USER, SSH_KEY  (+ optional SSH_PORT, SSH_PATH)
+#   staging : SSH_HOST_STAGING, SSH_USER, SSH_KEY  (+ optional SSH_PORT, SSH_PATH)
+# SSH_PATH defaults to ~/codestar.
+on:
+  push:
+    branches: [dev, main]
+  workflow_dispatch:
+
+concurrency:
+  group: deploy-${{ github.ref }}
+  cancel-in-progress: false   # never interrupt a deployment mid-flight
+
+permissions:
+  contents: read
+
+jobs:
+  deploy-prod:
+    name: Deploy → production
+    if: github.ref == 'refs/heads/main' && vars.HAS_PROD == 'true'
+    runs-on: ubuntu-latest
+    environment: production
+    timeout-minutes: 30
+    steps:
+      - name: Run remote update
+        uses: appleboy/ssh-action@7eaf76671a0d7eec5d98ee897acda4f968735a17 # v1.2.0
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT || 22 }}
+          script: |
+            cd ${{ secrets.SSH_PATH || '~/codestar' }}
+            ./update.sh --yes
+
+  deploy-staging:
+    name: Deploy → staging
+    if: github.ref == 'refs/heads/dev' && vars.HAS_STAGING == 'true'
+    runs-on: ubuntu-latest
+    environment: staging
+    timeout-minutes: 30
+    steps:
+      - name: Run remote update
+        uses: appleboy/ssh-action@7eaf76671a0d7eec5d98ee897acda4f968735a17 # v1.2.0
+        with:
+          host: ${{ secrets.SSH_HOST_STAGING }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT || 22 }}
+          script: |
+            cd ${{ secrets.SSH_PATH || '~/codestar' }}
+            ./update.sh --yes
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 0000000..13bdcf1
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,70 @@
+# GitLab CI mirror of .github/workflows/ci.yml.
+# Same logic, driven by the shared scripts in scripts/ci/ and the same
+# build commands, so a fork hosted on GitLab gets equivalent coverage.
+#
+# Native GitLab security templates provide SAST / secret detection /
+# dependency scanning (the GitLab equivalents of CodeQL / gitleaks / Trivy).
+include:
+  - template: Security/SAST.gitlab-ci.yml
+  - template: Security/Secret-Detection.gitlab-ci.yml
+  - template: Security/Dependency-Scanning.gitlab-ci.yml
+
+stages: [build, test, security]
+
+default:
+  interruptible: true
+
+# ── Frontend ─────────────────────────────────────────────────
+frontend:
+  stage: build
+  image: node:20-alpine
+  rules:
+    - changes: [apps/frontend/**/*]
+  cache:
+    key:
+      files: [apps/frontend/pnpm-lock.yaml]
+    paths: [apps/frontend/.pnpm-store]
+  before_script:
+    - corepack enable && corepack prepare pnpm@9.15.0 --activate
+    - cd apps/frontend
+    - pnpm config set store-dir .pnpm-store
+    - pnpm install --frozen-lockfile
+  script:
+    - pnpm lint
+    - pnpm typecheck
+    - pnpm build
+
+# ── Backend ──────────────────────────────────────────────────
+backend:
+  stage: build
+  image: maven:3.9-eclipse-temurin-17
+  rules:
+    - changes: [apps/backend/**/*]
+  cache:
+    key: maven
+    paths: [.m2/repository]
+  variables:
+    MAVEN_OPTS: "-Dmaven.repo.local=$CI_PROJECT_DIR/.m2/repository"
+  script:
+    - cd apps/backend
+    - ./mvnw verify -B --no-transfer-progress
+  artifacts:
+    when: always
+    paths: [apps/backend/target/site/jacoco/]
+    expire_in: 7 days
+
+# ── Codestar governance guards ───────────────────────────────
+governance:
+  stage: test
+  image: alpine:3.20
+  before_script:
+    - apk add --no-cache bash git jq
+  script:
+    - |
+      if git diff --name-only "origin/$CI_DEFAULT_BRANCH"...HEAD -- apps/backend/src/main/resources/db/migration | grep -q .; then
+        BASE_REF="origin/$CI_DEFAULT_BRANCH" bash scripts/ci/flyway-governance.sh
+      fi
+    - |
+      if git diff --name-only "origin/$CI_DEFAULT_BRANCH"...HEAD -- apps/frontend/messages | grep -q .; then
+        bash scripts/ci/i18n-parity.sh
+      fi
diff --git a/README.md b/README.md
index 19530d7..a9b7472 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,10 @@
 # Codestar
 
+[![CI](https://github.com/CodeStar-Project/codestar/actions/workflows/ci.yml/badge.svg)](https://github.com/CodeStar-Project/codestar/actions/workflows/ci.yml)
+[![Security](https://github.com/CodeStar-Project/codestar/actions/workflows/security.yml/badge.svg)](https://github.com/CodeStar-Project/codestar/actions/workflows/security.yml)
+[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/CodeStar-Project/codestar/badge)](https://scorecard.dev/viewer/?uri=github.com/CodeStar-Project/codestar)
+[![License](https://img.shields.io/badge/license-GPLv3-blue.svg)](LICENSE)
+
 Open-source &amp; self-hosted e-learning platform template to build yours easly.
 
 ## Backend 

From ffe18b167555e394634483d34033ea946cc11b74 Mon Sep 17 00:00:00 2001
From: RayaneHassani <rayane.hassani@viacesi.fr>
Date: Wed, 24 Jun 2026 01:32:21 +0200
Subject: [PATCH 20/22] ci: fix backend DB service, gitleaks, lint and i18n
 parity

- backend job: add ephemeral Postgres service so @SpringBootTest can load
- secrets job: run gitleaks binary directly (no org license required)
- fix unescaped quotes in ai-generator-form
- add missing French bookmarks translations (i18n parity)
---
 .github/workflows/ci.yml                      | 28 +++++++++++++++++--
 .../components/admin/ai-generator-form.tsx    |  2 +-
 apps/frontend/messages/fr.json                |  5 +++-
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1cab8d6..4305122 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -77,6 +77,24 @@ jobs:
     defaults:
       run:
         working-directory: apps/backend
+    # Ephemeral Postgres for @SpringBootTest (context load runs Flyway against it).
+    # Created before the steps, reachable at localhost:5432, destroyed with the runner.
+    services:
+      postgres:
+        image: postgres:16-alpine
+        env:
+          POSTGRES_USER: codestar
+          POSTGRES_PASSWORD: codestar
+          POSTGRES_DB: codestardb
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd "pg_isready -U codestar -d codestardb"
+          --health-interval 10s --health-timeout 5s --health-retries 5
+    env:
+      DB_URL: jdbc:postgresql://localhost:5432/codestardb
+      DB_USER: codestar
+      DB_PASSWORD: codestar
     steps:
       - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - uses: actions/setup-java@c1e323688fd81a25caa38c78aa6df2d33d3e20d9 # v4
@@ -126,9 +144,15 @@ jobs:
       - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
           fetch-depth: 0
-      - uses: gitleaks/gitleaks-action@ff98106e4c7b2bc287b24eaf42907196329070c7 # v2
+      # Run the gitleaks binary directly: the GitHub Action requires a paid
+      # license for organisation repos, the open-source binary does not.
+      - name: Run gitleaks
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITLEAKS_VERSION: 8.21.2
+        run: |
+          curl -sSfL "https://github.com/gitleaks/gitleaks/releases/download/v${GITLEAKS_VERSION}/gitleaks_${GITLEAKS_VERSION}_linux_x64.tar.gz" \
+            | tar -xz gitleaks
+          ./gitleaks detect --source . --redact --verbose --exit-code 1
 
   dependency-review:
     name: Dependency review
diff --git a/apps/frontend/components/admin/ai-generator-form.tsx b/apps/frontend/components/admin/ai-generator-form.tsx
index 0631322..a63a25b 100644
--- a/apps/frontend/components/admin/ai-generator-form.tsx
+++ b/apps/frontend/components/admin/ai-generator-form.tsx
@@ -345,7 +345,7 @@ function PromptHelpPopover() {
             ))}
           </ul>
           <p className="mt-3 border-t border-white/10 pt-3 text-[11px] text-muted">
-            Exemple : <em className="text-text-soft">"Introduction à Docker pour des lycéens en terminale NSI, ton accessible, avec des analogies du quotidien"</em>
+            Exemple : <em className="text-text-soft">«&nbsp;Introduction à Docker pour des lycéens en terminale NSI, ton accessible, avec des analogies du quotidien&nbsp;»</em>
           </p>
         </div>
       )}
diff --git a/apps/frontend/messages/fr.json b/apps/frontend/messages/fr.json
index 3e629b8..f2f6ecc 100644
--- a/apps/frontend/messages/fr.json
+++ b/apps/frontend/messages/fr.json
@@ -487,7 +487,10 @@
     "kicker": "Cours enregistré",
     "description": "Les cours que vous avez enregistrés pour les retrouver plus tard.",
     "empty": "Aucun cours enregistré pour l'instant. Ouvrez un cours et cliquez sur « Enregistrer le cours ».",
-    "open": "Ouvrir le cours"
+    "open": "Ouvrir le cours",
+    "viewBlock": "Ouvrir dans le cours",
+    "remove": "Retirer",
+    "bookmarksCount": "{count, plural, one {# cours enregistré} other {# cours enregistrés}}"
   },
   "dash": {
     "title": "Mes progrès",

From 46d30e403f050b2ec2f41fe1496fe92de53f963d Mon Sep 17 00:00:00 2001
From: RayaneHassani <rayane.hassani@viacesi.fr>
Date: Wed, 24 Jun 2026 02:19:05 +0200
Subject: [PATCH 21/22] ci: notify Discord with the CI pipeline result

- notify job aggregates frontend, backend, governance, secrets, docker
- no-ops when DISCORD_WEBHOOK_URL is unset (fork-safe); action pinned by SHA
---
 .github/workflows/ci.yml | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4305122..0a7de5d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -201,3 +201,17 @@ jobs:
             *failure*|*cancelled*) echo "A required job failed."; exit 1 ;;
             *) echo "All required jobs passed (or were skipped)." ;;
           esac
+
+  # Discord notification. No-ops when DISCORD_WEBHOOK_URL is unset (fork-safe).
+  notify:
+    name: Discord notification
+    needs: [frontend, backend, governance, secrets, docker]
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - uses: sarisia/actions-status-discord@eb045afee445dc055c18d3d90bd0f244fd062708 # v1
+        with:
+          webhook: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          status: ${{ (contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')) && 'failure' || 'success' }}
+          title: "CI pipeline"
+          username: Codestar CI

From a91de9ea0b32afe845109c6452421a8e2a28d352 Mon Sep 17 00:00:00 2001
From: RayaneHassani <rayane.hassani@viacesi.fr>
Date: Fri, 3 Jul 2026 22:00:46 +0200
Subject: [PATCH 22/22] feat(monitoring): add optional observability overlay

Add docker-compose.monitoring.yml with Prometheus, Grafana, Loki,
Promtail, node-exporter and cAdvisor, all bound to the internal
network with no public port. Grafana is reachable via SSH tunnel only.

Prometheus scrapes the backend, host, containers and Caddy; retention
is 15d for metrics and 7d for logs. Grafana ships provisioned
datasources and dashboards (JVM/Spring, VPS system, containers, logs).

Expose Caddy's admin metrics endpoint on the internal network and add
a `make monitoring` target plus README instructions.
---
 .env.example                                  |   8 ++
 Caddyfile                                     |  10 ++
 Makefile                                      |   6 +-
 README.md                                     |  28 ++++
 docker-compose.monitoring.yml                 | 125 ++++++++++++++++++
 monitoring/grafana/dashboards/containers.json |  48 +++++++
 monitoring/grafana/dashboards/jvm-spring.json |  70 ++++++++++
 monitoring/grafana/dashboards/logs.json       |  44 ++++++
 monitoring/grafana/dashboards/vps-system.json |  56 ++++++++
 .../provisioning/dashboards/dashboards.yml    |  14 ++
 .../provisioning/datasources/datasources.yml  |  18 +++
 monitoring/loki/loki-config.yml               |  48 +++++++
 monitoring/prometheus/prometheus.yml          |  33 +++++
 monitoring/promtail/promtail-config.yml       |  29 ++++
 14 files changed, 536 insertions(+), 1 deletion(-)
 create mode 100644 docker-compose.monitoring.yml
 create mode 100644 monitoring/grafana/dashboards/containers.json
 create mode 100644 monitoring/grafana/dashboards/jvm-spring.json
 create mode 100644 monitoring/grafana/dashboards/logs.json
 create mode 100644 monitoring/grafana/dashboards/vps-system.json
 create mode 100644 monitoring/grafana/provisioning/dashboards/dashboards.yml
 create mode 100644 monitoring/grafana/provisioning/datasources/datasources.yml
 create mode 100644 monitoring/loki/loki-config.yml
 create mode 100644 monitoring/prometheus/prometheus.yml
 create mode 100644 monitoring/promtail/promtail-config.yml

diff --git a/.env.example b/.env.example
index be6c5af..a8c81ad 100644
--- a/.env.example
+++ b/.env.example
@@ -41,3 +41,11 @@ AI_CONNECT_TIMEOUT_SECONDS=5
 AI_TIMEOUT_SECONDS=90
 AI_RATE_LIMIT_CAPACITY=5
 AI_RATE_LIMIT_REFILL_PER_MINUTE=2
+
+# Monitoring stack (docker-compose.monitoring.yml — optional overlay).
+# Grafana is never public: reach it via SSH tunnel only:
+#   ssh -L 3000:localhost:3001 user@vps   # then http://localhost:3000
+# Generate a strong password once on the host:
+#   echo "GRAFANA_ADMIN_PASSWORD=$(openssl rand -base64 24)" >> .env
+GRAFANA_ADMIN_USER=admin
+GRAFANA_ADMIN_PASSWORD=change_me_strong_password
diff --git a/Caddyfile b/Caddyfile
index d152c2b..1393717 100644
--- a/Caddyfile
+++ b/Caddyfile
@@ -6,6 +6,16 @@
 # internal Docker network and are never reachable from the Internet.
 # ─────────────────────────────────────────────────────────────
 
+{
+	# Admin API on the internal Docker network so the monitoring stack can
+	# scrape Caddy's own metrics. This port is never published to the host,
+	# so it stays unreachable from the Internet.
+	admin 0.0.0.0:2019
+	servers {
+		metrics
+	}
+}
+
 {$DOMAIN} {
 	# Compress responses (zstd preferred, gzip fallback).
 	encode zstd gzip
diff --git a/Makefile b/Makefile
index a11b3ba..dfd5204 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
-.PHONY: setup prod dev down logs ps clean
+.PHONY: setup prod dev down logs ps clean monitoring
 
 ## First-time setup: copy env template
 setup:
@@ -27,3 +27,7 @@ logs:
 ## Service status
 ps:
 	docker compose ps
+
+## Monitoring stack: Prometheus + Grafana + Loki (reach Grafana via SSH tunnel)
+monitoring:
+	docker compose -f docker-compose.yml -f docker-compose.prod.yml -f docker-compose.monitoring.yml up -d
diff --git a/README.md b/README.md
index a9b7472..016c733 100644
--- a/README.md
+++ b/README.md
@@ -81,3 +81,31 @@ Or with frontend hot-reload via Docker:
 ```bash
 docker compose -f docker-compose.yml -f docker-compose.dev.yml up --build -d
 ```
+
+## Monitoring (optional)
+
+An overlay adds Prometheus, Grafana, Loki, Promtail, node-exporter and cAdvisor.
+Every container stays on the internal network — no public port is opened.
+
+**1. Generate the Grafana admin password (one-time, on the host)**
+
+```bash
+echo "GRAFANA_ADMIN_PASSWORD=$(openssl rand -base64 24)" >> .env
+```
+
+**2. Start the stack**
+
+```bash
+make monitoring
+# equivalent to:
+# docker compose -f docker-compose.yml -f docker-compose.prod.yml -f docker-compose.monitoring.yml up -d
+```
+
+**3. Reach Grafana through an SSH tunnel** (it is never exposed publicly)
+
+```bash
+ssh -L 3000:localhost:3001 user@vps   # then open http://localhost:3000
+```
+
+Log in with `admin` and the password you generated. Dashboards are provisioned
+automatically: Spring/JVM, VPS system, containers, and Loki logs.
diff --git a/docker-compose.monitoring.yml b/docker-compose.monitoring.yml
new file mode 100644
index 0000000..443d8f9
--- /dev/null
+++ b/docker-compose.monitoring.yml
@@ -0,0 +1,125 @@
+# ─────────────────────────────────────────────────────────────
+# Monitoring overlay — Prometheus + Grafana + Loki stack.
+#
+# Usage (always combined with the base, prod optional):
+#   docker compose \
+#     -f docker-compose.yml \
+#     -f docker-compose.prod.yml \
+#     -f docker-compose.monitoring.yml up -d
+#
+# The app runs perfectly WITHOUT this file — monitoring is opt-in.
+#
+# Security model (same as the rest of the stack):
+#   • No service is published to the Internet.
+#   • Grafana is bound to 127.0.0.1 only → reach it through an SSH tunnel:
+#       ssh -L 3000:localhost:3001 user@vps   # then open http://localhost:3000
+#   • All collectors live on the internal "codestar-net" network and scrape
+#     the app containers by their service/container names.
+# ─────────────────────────────────────────────────────────────
+services:
+
+  # ── Metrics store ──────────────────────────────────────────
+  prometheus:
+    image: prom/prometheus:v2.53.0
+    container_name: codestar-prometheus
+    restart: unless-stopped
+    command:
+      - "--config.file=/etc/prometheus/prometheus.yml"
+      - "--storage.tsdb.path=/prometheus"
+      - "--storage.tsdb.retention.time=15d"   # retention decided: 15 days
+      - "--web.enable-lifecycle"
+    volumes:
+      - ./monitoring/prometheus/prometheus.yml:/etc/prometheus/prometheus.yml:ro
+      - prometheus_data:/prometheus
+    networks:
+      - codestar-net
+
+  # ── Logs store ─────────────────────────────────────────────
+  loki:
+    image: grafana/loki:3.1.0
+    container_name: codestar-loki
+    restart: unless-stopped
+    command: "-config.file=/etc/loki/loki-config.yml"
+    volumes:
+      - ./monitoring/loki/loki-config.yml:/etc/loki/loki-config.yml:ro
+      - loki_data:/loki
+    networks:
+      - codestar-net
+
+  # ── Log collector (containers' stdout → Loki) ──────────────
+  promtail:
+    image: grafana/promtail:3.1.0
+    container_name: codestar-promtail
+    restart: unless-stopped
+    depends_on:
+      - loki
+    command: "-config.file=/etc/promtail/promtail-config.yml"
+    volumes:
+      - ./monitoring/promtail/promtail-config.yml:/etc/promtail/promtail-config.yml:ro
+      # Container logs + Docker socket for service discovery & labels.
+      - /var/lib/docker/containers:/var/lib/docker/containers:ro
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+      - promtail_positions:/tmp
+    networks:
+      - codestar-net
+
+  # ── Host metrics (CPU / RAM / disk of the VPS) ─────────────
+  node-exporter:
+    image: prom/node-exporter:v1.8.1
+    container_name: codestar-node-exporter
+    restart: unless-stopped
+    command:
+      - "--path.rootfs=/host"
+    pid: host
+    volumes:
+      - /:/host:ro,rslave
+    networks:
+      - codestar-net
+
+  # ── Per-container metrics (CPU / RAM / net per service) ────
+  cadvisor:
+    image: gcr.io/cadvisor/cadvisor:v0.49.1
+    container_name: codestar-cadvisor
+    restart: unless-stopped
+    privileged: true
+    devices:
+      - /dev/kmsg
+    volumes:
+      - /:/rootfs:ro
+      - /var/run:/var/run:ro
+      - /sys:/sys:ro
+      - /var/lib/docker/:/var/lib/docker:ro
+      - /dev/disk/:/dev/disk:ro
+    networks:
+      - codestar-net
+
+  # ── Dashboards (SSH-tunnel access only) ────────────────────
+  grafana:
+    image: grafana/grafana:11.1.0
+    container_name: codestar-grafana
+    restart: unless-stopped
+    depends_on:
+      - prometheus
+      - loki
+    environment:
+      GF_SECURITY_ADMIN_USER: ${GRAFANA_ADMIN_USER:-admin}
+      GF_SECURITY_ADMIN_PASSWORD: ${GRAFANA_ADMIN_PASSWORD:?set GRAFANA_ADMIN_PASSWORD in .env}
+      # Never exposed publicly → sign-up off, anonymous off.
+      GF_USERS_ALLOW_SIGN_UP: "false"
+      GF_AUTH_ANONYMOUS_ENABLED: "false"
+    volumes:
+      - ./monitoring/grafana/provisioning:/etc/grafana/provisioning:ro
+      - ./monitoring/grafana/dashboards:/var/lib/grafana/dashboards:ro
+      - grafana_data:/var/lib/grafana
+    ports:
+      # Loopback only. Tunnel in: ssh -L 3000:localhost:3001 user@vps
+      # (host port 3001 because the frontend already owns 3000).
+      - "127.0.0.1:3001:3000"
+    networks:
+      - codestar-net
+
+volumes:
+  prometheus_data:
+  loki_data:
+  grafana_data:
+  promtail_positions:
diff --git a/monitoring/grafana/dashboards/containers.json b/monitoring/grafana/dashboards/containers.json
new file mode 100644
index 0000000..ec479fb
--- /dev/null
+++ b/monitoring/grafana/dashboards/containers.json
@@ -0,0 +1,48 @@
+{
+  "uid": "codestar-containers",
+  "title": "Codestar — Containers",
+  "tags": ["codestar", "docker"],
+  "timezone": "browser",
+  "schemaVersion": 39,
+  "version": 1,
+  "refresh": "30s",
+  "time": { "from": "now-6h", "to": "now" },
+  "templating": { "list": [] },
+  "panels": [
+    {
+      "id": 1, "type": "timeseries", "title": "CPU per container (cores)",
+      "gridPos": { "h": 9, "w": 12, "x": 0, "y": 0 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "targets": [
+        { "refId": "A", "expr": "sum by (name) (rate(container_cpu_usage_seconds_total{name=~\"codestar-.+\"}[5m]))", "legendFormat": "{{name}}" }
+      ]
+    },
+    {
+      "id": 2, "type": "timeseries", "title": "Memory per container",
+      "gridPos": { "h": 9, "w": 12, "x": 12, "y": 0 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "bytes" }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "sum by (name) (container_memory_usage_bytes{name=~\"codestar-.+\"})", "legendFormat": "{{name}}" }
+      ]
+    },
+    {
+      "id": 3, "type": "timeseries", "title": "Network RX per container",
+      "gridPos": { "h": 9, "w": 12, "x": 0, "y": 9 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "Bps" }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "sum by (name) (rate(container_network_receive_bytes_total{name=~\"codestar-.+\"}[5m]))", "legendFormat": "{{name}}" }
+      ]
+    },
+    {
+      "id": 4, "type": "timeseries", "title": "Network TX per container",
+      "gridPos": { "h": 9, "w": 12, "x": 12, "y": 9 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "Bps" }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "sum by (name) (rate(container_network_transmit_bytes_total{name=~\"codestar-.+\"}[5m]))", "legendFormat": "{{name}}" }
+      ]
+    }
+  ]
+}
diff --git a/monitoring/grafana/dashboards/jvm-spring.json b/monitoring/grafana/dashboards/jvm-spring.json
new file mode 100644
index 0000000..ccfbb0e
--- /dev/null
+++ b/monitoring/grafana/dashboards/jvm-spring.json
@@ -0,0 +1,70 @@
+{
+  "uid": "codestar-jvm",
+  "title": "Codestar — JVM / Spring Boot",
+  "tags": ["codestar", "backend"],
+  "timezone": "browser",
+  "schemaVersion": 39,
+  "version": 1,
+  "refresh": "30s",
+  "time": { "from": "now-6h", "to": "now" },
+  "templating": { "list": [] },
+  "panels": [
+    {
+      "id": 1, "type": "timeseries", "title": "JVM heap used",
+      "gridPos": { "h": 8, "w": 12, "x": 0, "y": 0 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "bytes" }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "sum(jvm_memory_used_bytes{area=\"heap\"})", "legendFormat": "heap used" },
+        { "refId": "B", "expr": "sum(jvm_memory_max_bytes{area=\"heap\"})", "legendFormat": "heap max" }
+      ]
+    },
+    {
+      "id": 2, "type": "timeseries", "title": "GC pause rate",
+      "gridPos": { "h": 8, "w": 12, "x": 12, "y": 0 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "s" }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "rate(jvm_gc_pause_seconds_sum[5m])", "legendFormat": "{{action}}" }
+      ]
+    },
+    {
+      "id": 3, "type": "timeseries", "title": "HTTP request rate (req/s)",
+      "gridPos": { "h": 8, "w": 12, "x": 0, "y": 8 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "reqps" }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "sum by (status) (rate(http_server_requests_seconds_count[5m]))", "legendFormat": "{{status}}" }
+      ]
+    },
+    {
+      "id": 4, "type": "timeseries", "title": "HTTP p95 latency",
+      "gridPos": { "h": 8, "w": 12, "x": 12, "y": 8 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "s" }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "histogram_quantile(0.95, sum by (le) (rate(http_server_requests_seconds_bucket[5m])))", "legendFormat": "p95" }
+      ]
+    },
+    {
+      "id": 5, "type": "stat", "title": "Live threads",
+      "gridPos": { "h": 6, "w": 8, "x": 0, "y": 16 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "targets": [ { "refId": "A", "expr": "jvm_threads_live_threads" } ]
+    },
+    {
+      "id": 6, "type": "stat", "title": "Process CPU",
+      "gridPos": { "h": 6, "w": 8, "x": 8, "y": 16 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "percentunit" }, "overrides": [] },
+      "targets": [ { "refId": "A", "expr": "process_cpu_usage" } ]
+    },
+    {
+      "id": 7, "type": "stat", "title": "Uptime",
+      "gridPos": { "h": 6, "w": 8, "x": 16, "y": 16 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "s" }, "overrides": [] },
+      "targets": [ { "refId": "A", "expr": "process_uptime_seconds" } ]
+    }
+  ]
+}
diff --git a/monitoring/grafana/dashboards/logs.json b/monitoring/grafana/dashboards/logs.json
new file mode 100644
index 0000000..f5c685b
--- /dev/null
+++ b/monitoring/grafana/dashboards/logs.json
@@ -0,0 +1,44 @@
+{
+  "uid": "codestar-logs",
+  "title": "Codestar — Logs (Loki)",
+  "tags": ["codestar", "logs"],
+  "timezone": "browser",
+  "schemaVersion": 39,
+  "version": 1,
+  "refresh": "30s",
+  "time": { "from": "now-1h", "to": "now" },
+  "templating": {
+    "list": [
+      {
+        "name": "container",
+        "label": "Container",
+        "type": "query",
+        "datasource": { "type": "loki", "uid": "loki" },
+        "query": { "label": "container", "stream": "{stack=\"codestar\"}", "type": 1 },
+        "refresh": 2,
+        "includeAll": true,
+        "multi": true,
+        "current": { "text": "All", "value": "$__all" }
+      }
+    ]
+  },
+  "panels": [
+    {
+      "id": 1, "type": "timeseries", "title": "Log volume per container",
+      "gridPos": { "h": 7, "w": 24, "x": 0, "y": 0 },
+      "datasource": { "type": "loki", "uid": "loki" },
+      "targets": [
+        { "refId": "A", "expr": "sum by (container) (count_over_time({stack=\"codestar\", container=~\"$container\"}[1m]))", "legendFormat": "{{container}}" }
+      ]
+    },
+    {
+      "id": 2, "type": "logs", "title": "Logs",
+      "gridPos": { "h": 17, "w": 24, "x": 0, "y": 7 },
+      "datasource": { "type": "loki", "uid": "loki" },
+      "options": { "showTime": true, "wrapLogMessage": true, "sortOrder": "Descending", "enableLogDetails": true },
+      "targets": [
+        { "refId": "A", "expr": "{stack=\"codestar\", container=~\"$container\"}" }
+      ]
+    }
+  ]
+}
diff --git a/monitoring/grafana/dashboards/vps-system.json b/monitoring/grafana/dashboards/vps-system.json
new file mode 100644
index 0000000..08c9512
--- /dev/null
+++ b/monitoring/grafana/dashboards/vps-system.json
@@ -0,0 +1,56 @@
+{
+  "uid": "codestar-vps",
+  "title": "Codestar — VPS system",
+  "tags": ["codestar", "host"],
+  "timezone": "browser",
+  "schemaVersion": 39,
+  "version": 1,
+  "refresh": "30s",
+  "time": { "from": "now-6h", "to": "now" },
+  "templating": { "list": [] },
+  "panels": [
+    {
+      "id": 1, "type": "timeseries", "title": "CPU usage (%)",
+      "gridPos": { "h": 8, "w": 12, "x": 0, "y": 0 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "percent", "max": 100 }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "100 - (avg(rate(node_cpu_seconds_total{mode=\"idle\"}[5m])) * 100)", "legendFormat": "cpu" }
+      ]
+    },
+    {
+      "id": 2, "type": "timeseries", "title": "Memory used (%)",
+      "gridPos": { "h": 8, "w": 12, "x": 12, "y": 0 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "percent", "max": 100 }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "(1 - (node_memory_MemAvailable_bytes / node_memory_MemTotal_bytes)) * 100", "legendFormat": "mem" }
+      ]
+    },
+    {
+      "id": 3, "type": "timeseries", "title": "Disk free (root)",
+      "gridPos": { "h": 8, "w": 12, "x": 0, "y": 8 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "bytes" }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "node_filesystem_avail_bytes{mountpoint=\"/host\"}", "legendFormat": "free" }
+      ]
+    },
+    {
+      "id": 4, "type": "timeseries", "title": "Load average (1m)",
+      "gridPos": { "h": 8, "w": 12, "x": 12, "y": 8 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "targets": [ { "refId": "A", "expr": "node_load1", "legendFormat": "load1" } ]
+    },
+    {
+      "id": 5, "type": "timeseries", "title": "Network traffic",
+      "gridPos": { "h": 8, "w": 24, "x": 0, "y": 16 },
+      "datasource": { "type": "prometheus", "uid": "prometheus" },
+      "fieldConfig": { "defaults": { "unit": "Bps" }, "overrides": [] },
+      "targets": [
+        { "refId": "A", "expr": "sum(rate(node_network_receive_bytes_total{device!~\"lo|veth.*|docker.*|br.*\"}[5m]))", "legendFormat": "rx" },
+        { "refId": "B", "expr": "sum(rate(node_network_transmit_bytes_total{device!~\"lo|veth.*|docker.*|br.*\"}[5m]))", "legendFormat": "tx" }
+      ]
+    }
+  ]
+}
diff --git a/monitoring/grafana/provisioning/dashboards/dashboards.yml b/monitoring/grafana/provisioning/dashboards/dashboards.yml
new file mode 100644
index 0000000..1d470f0
--- /dev/null
+++ b/monitoring/grafana/provisioning/dashboards/dashboards.yml
@@ -0,0 +1,14 @@
+# Loads every dashboard JSON dropped in /var/lib/grafana/dashboards.
+apiVersion: 1
+
+providers:
+  - name: codestar
+    orgId: 1
+    folder: Codestar
+    type: file
+    disableDeletion: false
+    updateIntervalSeconds: 30
+    allowUiUpdates: true
+    options:
+      path: /var/lib/grafana/dashboards
+      foldersFromFilesStructure: false
diff --git a/monitoring/grafana/provisioning/datasources/datasources.yml b/monitoring/grafana/provisioning/datasources/datasources.yml
new file mode 100644
index 0000000..353425d
--- /dev/null
+++ b/monitoring/grafana/provisioning/datasources/datasources.yml
@@ -0,0 +1,18 @@
+# Grafana datasources — provisioned at startup, no manual clicking.
+apiVersion: 1
+
+datasources:
+  - name: Prometheus
+    type: prometheus
+    uid: prometheus
+    access: proxy
+    url: http://prometheus:9090
+    isDefault: true
+    editable: false
+
+  - name: Loki
+    type: loki
+    uid: loki
+    access: proxy
+    url: http://loki:3100
+    editable: false
diff --git a/monitoring/loki/loki-config.yml b/monitoring/loki/loki-config.yml
new file mode 100644
index 0000000..92f68ac
--- /dev/null
+++ b/monitoring/loki/loki-config.yml
@@ -0,0 +1,48 @@
+# Loki — single-binary, filesystem storage. Sized for a small VPS.
+# Retention decided: 7 days (168h). The compactor deletes older chunks.
+auth_enabled: false
+
+server:
+  http_listen_port: 3100
+  log_level: warn
+
+common:
+  instance_addr: 127.0.0.1
+  path_prefix: /loki
+  storage:
+    filesystem:
+      chunks_directory: /loki/chunks
+      rules_directory: /loki/rules
+  replication_factor: 1
+  ring:
+    kvstore:
+      store: inmemory
+
+schema_config:
+  configs:
+    - from: 2024-01-01
+      store: tsdb
+      object_store: filesystem
+      schema: v13
+      index:
+        prefix: index_
+        period: 24h
+
+limits_config:
+  retention_period: 168h        # 7 days
+  reject_old_samples: true
+  reject_old_samples_max_age: 168h
+  ingestion_rate_mb: 8
+  ingestion_burst_size_mb: 16
+
+compactor:
+  working_directory: /loki/compactor
+  retention_enabled: true       # required for retention_period to take effect
+  delete_request_store: filesystem
+
+query_range:
+  results_cache:
+    cache:
+      embedded_cache:
+        enabled: true
+        max_size_mb: 100
diff --git a/monitoring/prometheus/prometheus.yml b/monitoring/prometheus/prometheus.yml
new file mode 100644
index 0000000..384f852
--- /dev/null
+++ b/monitoring/prometheus/prometheus.yml
@@ -0,0 +1,33 @@
+# Prometheus scrape configuration.
+# Targets are reached by their Docker container names over codestar-net.
+global:
+  scrape_interval: 15s
+  evaluation_interval: 15s
+
+scrape_configs:
+  # Prometheus itself.
+  - job_name: prometheus
+    static_configs:
+      - targets: ["localhost:9090"]
+
+  # Spring Boot backend — Micrometer exposes Prometheus format here.
+  - job_name: backend
+    metrics_path: /actuator/prometheus
+    static_configs:
+      - targets: ["codestar-backend:8080"]
+
+  # VPS host metrics (CPU / RAM / disk / network).
+  - job_name: node
+    static_configs:
+      - targets: ["codestar-node-exporter:9100"]
+
+  # Per-container metrics.
+  - job_name: cadvisor
+    static_configs:
+      - targets: ["codestar-cadvisor:8080"]
+
+  # Caddy metrics — the admin API is exposed on 2019 via the Caddyfile global block.
+  - job_name: caddy
+    metrics_path: /metrics
+    static_configs:
+      - targets: ["codestar-caddy:2019"]
diff --git a/monitoring/promtail/promtail-config.yml b/monitoring/promtail/promtail-config.yml
new file mode 100644
index 0000000..e08dc7b
--- /dev/null
+++ b/monitoring/promtail/promtail-config.yml
@@ -0,0 +1,29 @@
+# Promtail — discovers running containers via the Docker socket and ships
+# their stdout/stderr to Loki. Backend & Caddy already log JSON, so the
+# raw line is the JSON object; Grafana parses it at query time.
+server:
+  http_listen_port: 9080
+  log_level: warn
+
+positions:
+  filename: /tmp/positions.yaml
+
+clients:
+  - url: http://loki:3100/loki/api/v1/push
+
+scrape_configs:
+  - job_name: docker
+    docker_sd_configs:
+      - host: unix:///var/run/docker.sock
+        refresh_interval: 15s
+    relabel_configs:
+      # container name (strip the leading "/").
+      - source_labels: ["__meta_docker_container_name"]
+        regex: "/(.*)"
+        target_label: container
+      # compose service name when present.
+      - source_labels: ["__meta_docker_container_label_com_docker_compose_service"]
+        target_label: service
+      # Static label to find everything under the stack quickly.
+      - replacement: codestar
+        target_label: stack