OpenCz · moustiIIon · Jul 8, 2026 · Jul 8, 2026
diff --git a/frontend/src/components/admin/AdminSidebar.tsx b/frontend/src/components/admin/AdminSidebar.tsx
@@ -35,9 +35,9 @@ export function AdminSidebar({ activeTab, onNavigate, onLogout }: {
             onClick={() => onNavigate(id)}
             style={{
               display: "flex", alignItems: "center", gap: 10,
-              background: activeTab === id ? "rgba(128,157,253,0.1)" : "none",
+              background: activeTab === id ? "var(--epi-blue)" : "none",
               border: "none",
-              color: activeTab === id ? "var(--epi-accent)" : "var(--epi-muted)",
+              color: activeTab === id ? "#fff" : "var(--epi-muted)",
               fontSize: 13, fontWeight: activeTab === id ? 700 : 500,
               padding: "9px 12px", borderRadius: 8,
               cursor: "pointer", transition: "background 0.15s, color 0.15s",

diff --git a/frontend/src/components/admin/AdminSubjectsTab.tsx b/frontend/src/components/admin/AdminSubjectsTab.tsx
@@ -466,10 +466,10 @@ export function AdminSubjectsTab({ token, onAddSubject }: {
           title="Ajouter"
           style={{
             width: 48, height: 48, borderRadius: "50%",
-            background: "var(--epi-accent)", border: "none",
+            background: "var(--epi-blue)", border: "none",
             color: "#fff", cursor: "pointer",
             display: "flex", alignItems: "center", justifyContent: "center",
-            boxShadow: "0 4px 14px rgba(128,157,253,0.35)",
+            boxShadow: "0 4px 14px rgba(1,58,251,0.4)",
             transition: "transform 0.2s",
             transform: fabOpen ? "rotate(45deg)" : "rotate(0)",
           }}
@@ -528,7 +528,7 @@ export function AdminSubjectsTab({ token, onAddSubject }: {
                     }}>Annuler</button>
                   <button type="submit" disabled={folderLoading || !folderName.trim()}
                     style={{
-                      background: folderName.trim() ? "var(--epi-accent)" : "var(--epi-bg)",
+                      background: folderName.trim() ? "var(--epi-blue)" : "var(--epi-bg)",
                       border: "1px solid var(--epi-border)", color: folderName.trim() ? "#fff" : "var(--epi-ghost)",
                       fontSize: 13, fontWeight: 700, padding: "8px 18px", borderRadius: 8,
                       cursor: folderName.trim() && !folderLoading ? "pointer" : "not-allowed",

diff --git a/frontend/src/components/admin/EditModal.tsx b/frontend/src/components/admin/EditModal.tsx
@@ -231,7 +231,7 @@ export function EditModal({ subject, token, folders, onClose, onSaved }: {
                 cursor: "pointer", fontFamily: "inherit",
               }}>Annuler</button>
               <button type="submit" disabled={loading || !name} style={{
-                background: name ? "var(--epi-accent)" : "var(--epi-bg)",
+                background: name ? "var(--epi-blue)" : "var(--epi-bg)",
                 border: "1px solid var(--epi-border)", color: name ? "#fff" : "var(--epi-ghost)",
                 fontSize: 13, fontWeight: 700, padding: "8px 18px", borderRadius: 8,
                 cursor: name && !loading ? "pointer" : "not-allowed", transition: "0.2s", fontFamily: "inherit",

diff --git a/frontend/src/components/admin/PasswordGate.tsx b/frontend/src/components/admin/PasswordGate.tsx
@@ -87,7 +87,7 @@ export function PasswordGate({ onUnlock }: { onUnlock: (token: string) => void }
                   disabled={loading || !password}
                   style={{
                     width: "100%",
-                    background: password ? "var(--epi-accent)" : "var(--epi-bg)",
+                    background: password ? "var(--epi-blue)" : "var(--epi-bg)",
                     border: "1px solid var(--epi-border)",
                     color: password ? "#fff" : "var(--epi-ghost)",
                     fontSize: 14, fontWeight: 700,

diff --git a/frontend/src/components/admin/SubjectForm.tsx b/frontend/src/components/admin/SubjectForm.tsx
@@ -97,7 +97,7 @@ export function SubjectForm({ token, defaultFolderId = null }: {
         onClick={reset}
         style={{
           display: "flex", alignItems: "center", gap: 6,
-          background: "var(--epi-accent)", color: "#fff",
+          background: "var(--epi-blue)", color: "#fff",
           border: "none", fontSize: 14, fontWeight: 700,
           padding: "10px 24px", borderRadius: 8,
           cursor: "pointer", fontFamily: "inherit",
@@ -303,7 +303,7 @@ export function SubjectForm({ token, defaultFolderId = null }: {
               type="submit"
               disabled={loading || !name}
               style={{
-                background: name ? "var(--epi-accent)" : "var(--epi-bg)",
+                background: name ? "var(--epi-blue)" : "var(--epi-bg)",
                 border: "1px solid var(--epi-border)",
                 color: name ? "#fff" : "var(--epi-ghost)",
                 fontSize: 14, fontWeight: 700,

diff --git a/frontend/src/components/admin/WhitelistTab.tsx b/frontend/src/components/admin/WhitelistTab.tsx
@@ -71,7 +71,7 @@ export function WhitelistTab({ token }: { token: string }) {
             ))}
             <button onClick={add} disabled={loading || !email.trim()} style={{
               marginLeft: "auto", padding: "6px 16px", borderRadius: 8, fontSize: 12,
-              fontWeight: 600, cursor: "pointer", background: "var(--epi-accent)",
+              fontWeight: 600, cursor: "pointer", background: "var(--epi-blue)",
               color: "#fff", border: "none", opacity: loading || !email.trim() ? 0.5 : 1,
             }}>
               <Group gap={6}><IconPlus size={12} />{loading ? "Ajout…" : "Ajouter"}</Group>

diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx
@@ -21,7 +21,11 @@ export function Layout({ children, currentPage, onNavigate }: LayoutProps) {
         <Navbar />
       </AppShell.Header>
 
-      <AppShell.Navbar style={{ border: "none", background: "var(--epi-bg)" }}>
+      <AppShell.Navbar style={{
+        border: "none",
+        borderRight: "1px solid var(--epi-border)",
+        background: "var(--epi-panel)",
+      }}>
         <Sidebar currentPage={currentPage} onNavigate={onNavigate} />
       </AppShell.Navbar>
 

diff --git a/frontend/src/components/layout/Navbar.tsx b/frontend/src/components/layout/Navbar.tsx
@@ -26,7 +26,7 @@ export function Navbar() {
       style={{
         height: 48,
         borderBottom: "1px solid var(--epi-border)",
-        background: "var(--epi-bg)",
+        background: "var(--epi-panel)",
         flexShrink: 0,
       }}
     >

diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
@@ -20,8 +20,6 @@ export function Sidebar({ currentPage, onNavigate }: SidebarProps) {
       style={{
         width: 192,
         flexShrink: 0,
-        borderRight: "1px solid var(--epi-border)",
-        background: "var(--epi-bg)",
         paddingTop: 20,
       }}
     >
@@ -44,6 +42,7 @@ export function Sidebar({ currentPage, onNavigate }: SidebarProps) {
           active={currentPage === page}
           onClick={() => onNavigate(page)}
           color="epitech"
+          style={currentPage === page ? { background: "var(--epi-blue)", color: "#fff" } : undefined}
         />
       ))}
     </Stack>

diff --git a/frontend/src/components/manta/MantaSidebar.tsx b/frontend/src/components/manta/MantaSidebar.tsx
@@ -34,9 +34,9 @@ export function MantaSidebar({ activeTab, onNavigate, onLogout }: {
             onClick={() => onNavigate(id)}
             style={{
               display: "flex", alignItems: "center", gap: 10,
-              background: activeTab === id ? "rgba(128,157,253,0.1)" : "none",
+              background: activeTab === id ? "var(--epi-blue)" : "none",
               border: "none",
-              color: activeTab === id ? "var(--epi-accent)" : "var(--epi-muted)",
+              color: activeTab === id ? "#fff" : "var(--epi-muted)",
               fontSize: 13, fontWeight: activeTab === id ? 700 : 500,
               padding: "9px 12px", borderRadius: 8,
               cursor: "pointer", transition: "background 0.15s, color 0.15s",

diff --git a/frontend/src/components/manta/ProposeTab.tsx b/frontend/src/components/manta/ProposeTab.tsx
@@ -105,7 +105,7 @@ export function ProposeTab() {
           </Stack>
           <button onClick={reset} style={{
             display: "flex", alignItems: "center", gap: 6,
-            background: "var(--epi-accent)", color: "#fff",
+            background: "var(--epi-blue)", color: "#fff",
             border: "none", fontSize: 14, fontWeight: 700,
             padding: "10px 24px", borderRadius: 8,
             cursor: "pointer", fontFamily: "inherit",
@@ -259,7 +259,7 @@ export function ProposeTab() {
                   type="submit"
                   disabled={loading || !name}
                   style={{
-                    background: name ? "var(--epi-accent)" : "var(--epi-bg)",
+                    background: name ? "var(--epi-blue)" : "var(--epi-bg)",
                     border: "1px solid var(--epi-border)",
                     color: name ? "#fff" : "var(--epi-ghost)",
                     fontSize: 14, fontWeight: 700,

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -32,6 +32,7 @@ body {
 }
 
 :root {
+  --epi-blue:         #013afb;
   --epi-accent:       #809dfd;
   --epi-accent-dark:  #6b8afc;
   --epi-beginner:     #4ade80;

diff --git a/frontend/src/pages/ResourcesPage.tsx b/frontend/src/pages/ResourcesPage.tsx
@@ -80,34 +80,32 @@ export function ResourcesPage() {
 
       <div style={{
         display: "flex", justifyContent: "space-between", alignItems: "center",
-        background: "var(--epi-surface)",
-        border: "1px solid var(--epi-border)",
-        borderLeft: "3px solid var(--epi-accent)",
+        background: "var(--epi-blue)",
         borderRadius: 10, padding: "20px 24px", gap: 20,
       }}>
         <Stack gap={6}>
-          <Text fw={700} size="lg" ff="heading">{session.title}</Text>
-          <Text size="sm" c="dimmed">{session.description}</Text>
+          <Text fw={700} size="lg" ff="heading" c="#fff">{session.title}</Text>
+          <Text size="sm" style={{ color: "rgba(255,255,255,0.8)" }}>{session.description}</Text>
         </Stack>
         <Stack gap={8} align="flex-end" style={{ flexShrink: 0 }}>
           <Group gap="xs">
-            <IconCalendar size={13} color="var(--epi-accent)" />
-            <Text size="xs" c="dimmed">{session.date}</Text>
+            <IconCalendar size={13} color="#fff" />
+            <Text size="xs" style={{ color: "rgba(255,255,255,0.9)" }}>{session.date}</Text>
           </Group>
           <Group gap="xs">
-            <IconMapPin size={13} color="var(--epi-accent)" />
-            <Text size="xs" c="dimmed">{session.location}</Text>
+            <IconMapPin size={13} color="#fff" />
+            <Text size="xs" style={{ color: "rgba(255,255,255,0.9)" }}>{session.location}</Text>
           </Group>
           <Group gap="md">
             <Group gap={6}>
-              <IconBook size={11} color="var(--epi-ghost)" />
-              <Text size="xs" style={{ color: "var(--epi-ghost)" }}>
+              <IconBook size={11} color="rgba(255,255,255,0.75)" />
+              <Text size="xs" style={{ color: "rgba(255,255,255,0.75)" }}>
                 {subjects.length} sujet{subjects.length > 1 ? "s" : ""}
               </Text>
             </Group>
             <Group gap={6}>
-              <IconFile size={11} color="var(--epi-ghost)" />
-              <Text size="xs" style={{ color: "var(--epi-ghost)" }}>
+              <IconFile size={11} color="rgba(255,255,255,0.75)" />
+              <Text size="xs" style={{ color: "rgba(255,255,255,0.75)" }}>
                 {totalFiles} fichier{totalFiles > 1 ? "s" : ""}
               </Text>
             </Group>
@@ -210,15 +208,15 @@ export function ResourcesPage() {
             const color = f === "Débutant" ? "var(--epi-beginner)"
               : f === "Intermédiaire" ? "var(--epi-intermediate)"
               : f === "Avancé" ? "var(--epi-advanced)"
-              : "var(--epi-accent)";
+              : "var(--epi-blue)";
             return (
               <button
                 key={f}
                 onClick={() => setDiffFilter(f)}
                 style={{
                   background: active ? color : "none",
                   border: `1px solid ${active ? color : "var(--epi-border)"}`,
-                  color: active ? "#111" : "var(--epi-muted)",
+                  color: active ? (f === "Tous" ? "#fff" : "#111") : "var(--epi-muted)",
                   fontSize: 12, fontWeight: 600,
                   padding: "5px 12px", borderRadius: 20,
                   cursor: "pointer", transition: "0.2s", fontFamily: "inherit",
@@ -279,7 +277,7 @@ export function ResourcesPage() {
                 key={v}
                 onClick={() => setViewMode(v)}
                 style={{
-                  background: viewMode === v ? "var(--epi-accent)" : "none",
+                  background: viewMode === v ? "var(--epi-blue)" : "none",
                   border: "none",
                   color: viewMode === v ? "#fff" : "var(--epi-ghost)",
                   padding: "6px 12px", cursor: "pointer", fontSize: 13, transition: "0.2s",