diff --git a/my-library/src/App.jsx b/my-library/src/App.jsx
index 93d3a43..ec7c2b3 100644
--- a/my-library/src/App.jsx
+++ b/my-library/src/App.jsx
@@ -1,14 +1,21 @@
 import { Routes, Route } from 'react-router-dom';
-import Navbar from './components/Navbar';
+import Layout from './components/Layout';
 import Home from './pages/Home';
+import Books from './pages/Books';
+import Orders from './pages/Orders';
+import Profile from './pages/Profile';
+import NotFound from './pages/NotFound';
 
 export default function App() {
   return (
-    <>
-      <Navbar />
-      <Routes>
-        <Route path="/" element={<Home />} />
-      </Routes>
-    </>
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route index element={<Home />} />
+        <Route path="books" element={<Books />} />
+        <Route path="orders" element={<Orders />} />
+        <Route path="profile" element={<Profile />} />
+        <Route path="*" element={<NotFound />} />
+      </Route>
+    </Routes>
   );
 }
\ No newline at end of file
diff --git a/my-library/src/components/Layout.jsx b/my-library/src/components/Layout.jsx
new file mode 100644
index 0000000..c510cc0
--- /dev/null
+++ b/my-library/src/components/Layout.jsx
@@ -0,0 +1,11 @@
+import { Outlet } from 'react-router-dom';
+import Navbar from './Navbar';
+
+export default function Layout() {
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/my-library/src/index.css b/my-library/src/index.css
index ec2585e..e69de29 100644
--- a/my-library/src/index.css
+++ b/my-library/src/index.css
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/my-library/src/pages/Books.jsx b/my-library/src/pages/Books.jsx
new file mode 100644
index 0000000..7ff328f
--- /dev/null
+++ b/my-library/src/pages/Books.jsx
@@ -0,0 +1,3 @@
+export default function Books() {
+  return <main><h1>Catalogue</h1></main>;
+}
\ No newline at end of file
diff --git a/my-library/src/pages/Home.jsx b/my-library/src/pages/Home.jsx
index 6639b48..09ca41a 100644
--- a/my-library/src/pages/Home.jsx
+++ b/my-library/src/pages/Home.jsx
@@ -1,91 +1,9 @@
 import { Link } from 'react-router-dom';
 import '../styles/home.css';
 
-const features = [
-  { icon: '📚', title: 'Enregistrer un livre',   desc: 'Ajoutez un nouveau titre au catalogue de la bibliothèque.', role: 'admin', path: '/books/new' },
-  { icon: '🛒', title: 'Passer une commande',     desc: 'Commandez vos livres préférés en quelques secondes.',       role: 'user',  path: '/orders/new' },
-  { icon: '🏷️', title: 'Appliquer une promotion', desc: 'Créez et gérez vos codes promotionnels.',                   role: 'admin', path: '/promotions/new' },
-  { icon: '📌', title: 'Réserver un livre',        desc: 'Réservez un exemplaire avant sa disponibilité.',            role: 'user',  path: '/reservations/new' },
-  { icon: '↩️', title: 'Retour de livre',          desc: 'Gérez les retours et remises en stock.',                   role: 'admin', path: '/returns/new' },
-  { icon: '⭐', title: 'Points de fidélité',       desc: 'Consultez et utilisez vos points cumulés.',                role: 'user',  path: '/loyalty' },
-  { icon: '💬', title: 'Laisser un avis',          desc: 'Partagez votre opinion sur vos dernières lectures.',        role: 'user',  path: '/reviews/new' },
-  { icon: '🎫', title: 'Créer un abonnement',      desc: 'Souscrivez à un abonnement mensuel ou annuel.',            role: 'user',  path: '/subscriptions/new' },
-  { icon: '🤝', title: 'Prêt entre lecteurs',      desc: "Prêtez vos livres à d'autres membres de la communauté.",   role: 'user',  path: '/loans/new' },
-  { icon: '👥', title: 'Commande groupée',         desc: 'Participez à des achats groupés avantageux.',              role: 'user',  path: '/group-orders' },
-];
-
-const stats = [
-  { value: '10 000+', label: 'Livres disponibles' },
-  { value: '5 000+',  label: 'Lecteurs actifs'    },
-  { value: '50+',     label: 'Catégories'         },
-];
-
 export default function Home() {
   return (
     <main>
-      {/* Hero */}
-      <section className="hero">
-        <p className="hero__eyebrow">Votre bibliothèque en ligne</p>
-        <h1 className="hero__title">
-          Des livres pour tous,
-          <span className="hero__title-italic">partout, toujours.</span>
-        </h1>
-        <div className="hero__rule" />
-        <p className="hero__subtitle">
-          Commandez, réservez, prêtez et partagez vos lectures.
-          Une plateforme pensée pour les vrais amoureux des livres.
-        </p>
-        <div className="hero__actions">
-          <Link to="/books">
-            <button className="hero__btn-primary">Explorer le catalogue</button>
-          </Link>
-          <button className="hero__btn-secondary">En savoir plus</button>
-        </div>
-      </section>
-
-      {/* Stats */}
-      <section className="stats">
-        {stats.map(({ value, label }) => (
-          <div key={label} className="stats__item">
-            <div className="stats__value">{value}</div>
-            <div className="stats__label">{label}</div>
-          </div>
-        ))}
-      </section>
-
-      {/* Features */}
-      <div className="section-header">
-        <p className="section-header__eyebrow">Fonctionnalités</p>
-        <h2 className="section-header__title">Tout ce dont vous avez besoin</h2>
-      </div>
-
-      <section className="features">
-        <div className="features__grid">
-          {features.map((f) => (
-            <Link to={f.path} key={f.title} className="feature-card">
-              <div className="feature-card__glyph">{f.icon}</div>
-              <span className={`badge badge--${f.role}`}>
-                {f.role === 'admin' ? 'Administrateur' : 'Utilisateur'}
-              </span>
-              <h3 className="feature-card__title">{f.title}</h3>
-              <p className="feature-card__desc">{f.desc}</p>
-              <span className="feature-card__arrow">→ Accéder</span>
-            </Link>
-          ))}
-        </div>
-      </section>
-
-      {/* Footer CTA */}
-      <section className="home-cta">
-        <div className="home-cta__rule" />
-        <h2 className="home-cta__title">
-          Prêt à commencer<br />votre aventure ?
-        </h2>
-        <p className="home-cta__sub">Rejoignez des milliers de lecteurs dès aujourd'hui.</p>
-        <Link to="/register">
-          <span className="home-cta__btn">Créer un compte gratuit</span>
-        </Link>
-      </section>
     </main>
   );
 }
\ No newline at end of file
diff --git a/my-library/src/pages/NotFound.jsx b/my-library/src/pages/NotFound.jsx
new file mode 100644
index 0000000..ffe5bb5
--- /dev/null
+++ b/my-library/src/pages/NotFound.jsx
@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <main><h1>404 Page introuvable</h1></main>;
+}
\ No newline at end of file
diff --git a/my-library/src/pages/Orders.jsx b/my-library/src/pages/Orders.jsx
new file mode 100644
index 0000000..a909337
--- /dev/null
+++ b/my-library/src/pages/Orders.jsx
@@ -0,0 +1,3 @@
+export default function Orders() {
+  return <main><h1>Mes commandes</h1></main>;
+}
\ No newline at end of file
diff --git a/my-library/src/pages/Profile.jsx b/my-library/src/pages/Profile.jsx
new file mode 100644
index 0000000..581f560
--- /dev/null
+++ b/my-library/src/pages/Profile.jsx
@@ -0,0 +1,3 @@
+export default function Profile() {
+  return <main><h1>Mon compte</h1></main>;
+}
\ No newline at end of file
diff --git a/my-library/src/styles/global.css b/my-library/src/styles/global.css
index f159411..e69de29 100644
--- a/my-library/src/styles/global.css
+++ b/my-library/src/styles/global.css
@@ -1,52 +0,0 @@
-*, *::before, *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-  
-  :root {
-    --bg:        #0d0b08;
-    --bg-raised: #111009;
-    --bg-card:   #0f0d0a;
-    --gold:      #c9a84c;
-    --gold-dim:  rgba(201, 168, 76, 0.45);
-    --gold-faint:rgba(201, 168, 76, 0.1);
-    --parchment: #f0e6d0;
-    --text:      #e8dcc8;
-    --text-muted:rgba(232, 220, 200, 0.45);
-    --text-dim:  rgba(232, 220, 200, 0.25);
-    --rust:      #c05a2a;
-    --rust-dim:  rgba(192, 90, 42, 0.4);
-    --border:    rgba(180, 150, 80, 0.15);
-    --border-hi: rgba(180, 150, 80, 0.3);
-    --font-title:'Cinzel', 'Palatino Linotype', Georgia, serif;
-    --font-body: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
-  }
-  
-  html { scroll-behavior: smooth; }
-  
-  body {
-    background-color: var(--bg);
-    color: var(--text);
-    font-family: var(--font-body);
-    font-size: 18px;
-    line-height: 1.7;
-    -webkit-font-smoothing: antialiased;
-  }
-  
-  h1, h2, h3, h4 {
-    font-family: var(--font-title);
-  }
-  
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-  
-  button {
-    cursor: pointer;
-    font-family: var(--font-title);
-    border: none;
-    outline: none;
-    background: none;
-  }
\ No newline at end of file
diff --git a/my-library/src/styles/home.css b/my-library/src/styles/home.css
index 0437172..e69de29 100644
--- a/my-library/src/styles/home.css
+++ b/my-library/src/styles/home.css
@@ -1,372 +0,0 @@
-/* ── Hero ───────────────────────────── */
-.hero {
-    padding: 110px 48px 90px;
-    text-align: center;
-    border-bottom: 1px solid var(--border);
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .hero::before {
-    content: '';
-    position: absolute;
-    top: -80px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 600px;
-    height: 400px;
-    background: radial-gradient(ellipse, rgba(180, 140, 50, 0.06) 0%, transparent 70%);
-    pointer-events: none;
-  }
-  
-  .hero__eyebrow {
-    font-family: var(--font-title);
-    font-size: 0.65rem;
-    letter-spacing: 0.28em;
-    text-transform: uppercase;
-    color: var(--gold);
-    opacity: 0.75;
-    margin-bottom: 22px;
-    opacity: 0;
-    animation: fadeUp 0.7s 0.1s ease forwards;
-  }
-  
-  .hero__title {
-    font-family: var(--font-title);
-    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    line-height: 1.1;
-    color: var(--parchment);
-    max-width: 820px;
-    margin: 0 auto 0;
-    opacity: 0;
-    animation: fadeUp 0.7s 0.2s ease forwards;
-  }
-  
-  .hero__title-italic {
-    display: block;
-    font-family: var(--font-body);
-    font-style: italic;
-    font-weight: 400;
-    font-size: clamp(2.8rem, 6vw, 5rem);
-    color: var(--gold);
-    margin-top: 4px;
-    letter-spacing: 0;
-  }
-  
-  .hero__rule {
-    width: 80px;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--gold), transparent);
-    margin: 28px auto;
-    opacity: 0;
-    animation: fadeUp 0.7s 0.3s ease forwards;
-  }
-  
-  .hero__subtitle {
-    font-family: var(--font-body);
-    font-style: italic;
-    font-size: 1.1rem;
-    color: var(--text-muted);
-    max-width: 500px;
-    margin: 0 auto 40px;
-    line-height: 1.85;
-    opacity: 0;
-    animation: fadeUp 0.7s 0.35s ease forwards;
-  }
-  
-  .hero__actions {
-    display: flex;
-    gap: 16px;
-    justify-content: center;
-    flex-wrap: wrap;
-    opacity: 0;
-    animation: fadeUp 0.7s 0.45s ease forwards;
-  }
-  
-  .hero__btn-primary {
-    font-family: var(--font-title);
-    font-size: 0.68rem;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    color: var(--gold);
-    padding: 13px 30px;
-    border: 1px solid var(--gold-dim);
-    background: var(--gold-faint);
-    transition: background 0.2s, border-color 0.2s;
-  }
-  
-  .hero__btn-primary:hover {
-    background: rgba(201, 168, 76, 0.2);
-    border-color: var(--gold);
-  }
-  
-  .hero__btn-secondary {
-    font-family: var(--font-title);
-    font-size: 0.68rem;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    padding: 13px 30px;
-    border: 1px solid rgba(232, 220, 200, 0.15);
-    transition: color 0.2s, border-color 0.2s;
-  }
-  
-  .hero__btn-secondary:hover {
-    color: var(--text);
-    border-color: rgba(232, 220, 200, 0.35);
-  }
-  
-  @keyframes fadeUp {
-    from { opacity: 0; transform: translateY(20px); }
-    to   { opacity: 1; transform: translateY(0); }
-  }
-  
-  /* ── Stats ───────────────────────────── */
-  .stats {
-    display: flex;
-    justify-content: center;
-    border-bottom: 1px solid var(--border);
-  }
-  
-  .stats__item {
-    flex: 1;
-    max-width: 240px;
-    text-align: center;
-    padding: 36px 16px;
-    border-right: 1px solid var(--border);
-  }
-  
-  .stats__item:last-child {
-    border-right: none;
-  }
-  
-  .stats__value {
-    font-family: var(--font-title);
-    font-size: 2rem;
-    font-weight: 600;
-    color: var(--gold);
-    letter-spacing: 0.04em;
-  }
-  
-  .stats__label {
-    font-family: var(--font-title);
-    font-size: 0.6rem;
-    letter-spacing: 0.18em;
-    text-transform: uppercase;
-    color: var(--text-dim);
-    margin-top: 6px;
-  }
-  
-  /* ── Section header ──────────────────── */
-  .section-header {
-    text-align: center;
-    padding: 80px 24px 0;
-  }
-  
-  .section-header__eyebrow {
-    font-family: var(--font-title);
-    font-size: 0.6rem;
-    letter-spacing: 0.28em;
-    text-transform: uppercase;
-    color: rgba(201, 168, 76, 0.55);
-    margin-bottom: 14px;
-  }
-  
-  .section-header__title {
-    font-family: var(--font-title);
-    font-size: clamp(1.4rem, 3vw, 2.2rem);
-    font-weight: 600;
-    color: var(--parchment);
-    letter-spacing: 0.04em;
-  }
-  
-  /* ── Features ────────────────────────── */
-  .features {
-    padding: 40px 0 80px;
-  }
-  
-  .features__grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 1px;
-    background: var(--border);
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-  }
-  
-  @media (max-width: 1000px) {
-    .features__grid { grid-template-columns: repeat(3, 1fr); }
-  }
-  
-  @media (max-width: 700px) {
-    .features__grid { grid-template-columns: repeat(2, 1fr); }
-    .hero { padding: 80px 24px 60px; }
-    .navbar { padding: 0 20px; }
-    .stats { flex-direction: column; align-items: center; }
-    .stats__item { border-right: none; border-bottom: 1px solid var(--border); max-width: 100%; width: 100%; }
-  }
-  
-  @media (max-width: 420px) {
-    .features__grid { grid-template-columns: 1fr; }
-  }
-  
-  /* ── Feature card ────────────────────── */
-  .feature-card {
-    background: var(--bg);
-    padding: 30px 24px 26px;
-    display: flex;
-    flex-direction: column;
-    gap: 9px;
-    text-decoration: none;
-    color: var(--text);
-    transition: background 0.25s;
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .feature-card::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--gold), transparent);
-    opacity: 0;
-    transition: opacity 0.3s;
-  }
-  
-  .feature-card:hover {
-    background: #131007;
-  }
-  
-  .feature-card:hover::after {
-    opacity: 1;
-  }
-  
-  .feature-card__glyph {
-    font-size: 1.4rem;
-    margin-bottom: 4px;
-    opacity: 0.8;
-    line-height: 1;
-  }
-  
-  .feature-card__title {
-    font-family: var(--font-title);
-    font-size: 0.8rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    color: var(--parchment);
-    line-height: 1.4;
-  }
-  
-  .feature-card__desc {
-    font-family: var(--font-body);
-    font-style: italic;
-    font-size: 0.9rem;
-    color: var(--text-muted);
-    line-height: 1.65;
-    flex: 1;
-  }
-  
-  .feature-card__arrow {
-    font-family: var(--font-title);
-    font-size: 0.65rem;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--text-dim);
-    transition: color 0.2s;
-    margin-top: 6px;
-  }
-  
-  .feature-card:hover .feature-card__arrow {
-    color: var(--gold);
-  }
-  
-  .badge {
-    display: inline-block;
-    font-family: var(--font-title);
-    font-size: 0.55rem;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    padding: 3px 9px;
-    align-self: flex-start;
-    margin-bottom: 2px;
-  }
-  
-  .badge--admin {
-    border: 1px solid var(--rust-dim);
-    color: var(--rust);
-  }
-  
-  .badge--user {
-    border: 1px solid var(--gold-dim);
-    color: rgba(201, 168, 76, 0.65);
-  }
-  
-  /* ── Footer CTA ──────────────────────── */
-  .home-cta {
-    padding: 100px 24px;
-    text-align: center;
-    border-top: 1px solid var(--border);
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .home-cta::before {
-    content: '';
-    position: absolute;
-    bottom: -60px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 500px;
-    height: 300px;
-    background: radial-gradient(ellipse, rgba(180, 140, 50, 0.05) 0%, transparent 70%);
-    pointer-events: none;
-  }
-  
-  .home-cta__rule {
-    width: 60px;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--gold), transparent);
-    margin: 0 auto 32px;
-  }
-  
-  .home-cta__title {
-    font-family: var(--font-title);
-    font-size: clamp(1.8rem, 4vw, 3rem);
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    color: var(--parchment);
-    margin-bottom: 16px;
-    line-height: 1.15;
-  }
-  
-  .home-cta__sub {
-    font-family: var(--font-body);
-    font-style: italic;
-    font-size: 1rem;
-    color: var(--text-muted);
-    margin-bottom: 40px;
-  }
-  
-  .home-cta__btn {
-    display: inline-block;
-    font-family: var(--font-title);
-    font-size: 0.68rem;
-    letter-spacing: 0.18em;
-    text-transform: uppercase;
-    color: var(--gold);
-    padding: 13px 36px;
-    border: 1px solid var(--gold-dim);
-    background: var(--gold-faint);
-    transition: background 0.2s, border-color 0.2s;
-    cursor: pointer;
-  }
-  
-  .home-cta__btn:hover {
-    background: rgba(201, 168, 76, 0.2);
-    border-color: var(--gold);
-  }
\ No newline at end of file
diff --git a/my-library/src/styles/navbar.css b/my-library/src/styles/navbar.css
index 52f8a24..e69de29 100644
--- a/my-library/src/styles/navbar.css
+++ b/my-library/src/styles/navbar.css
@@ -1,98 +0,0 @@
-.navbar {
-    position: sticky;
-    top: 0;
-    z-index: 200;
-    height: 56px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 48px;
-    background: rgba(13, 11, 8, 0.94);
-    border-bottom: 1px solid var(--border);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-  }
-  
-  .navbar__logo {
-    font-family: var(--font-title);
-    font-size: 1.05rem;
-    font-weight: 600;
-    letter-spacing: 0.22em;
-    color: var(--gold);
-    text-transform: uppercase;
-  }
-  
-  .navbar__links {
-    display: flex;
-    gap: 8px;
-    list-style: none;
-  }
-  
-  .navbar__links a {
-    font-family: var(--font-title);
-    font-size: 0.7rem;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    padding: 6px 14px;
-    transition: color 0.2s;
-    position: relative;
-  }
-  
-  .navbar__links a::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 14px;
-    right: 14px;
-    height: 1px;
-    background: var(--gold);
-    transform: scaleX(0);
-    transition: transform 0.25s ease;
-  }
-  
-  .navbar__links a:hover {
-    color: var(--gold);
-  }
-  
-  .navbar__links a:hover::after {
-    transform: scaleX(1);
-  }
-  
-  .navbar__actions {
-    display: flex;
-    gap: 10px;
-  }
-  
-  .btn-ghost {
-    font-family: var(--font-title);
-    font-size: 0.65rem;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    padding: 7px 16px;
-    border: 1px solid rgba(232, 220, 200, 0.15);
-    transition: color 0.2s, border-color 0.2s;
-  }
-  
-  .btn-ghost:hover {
-    color: var(--text);
-    border-color: rgba(232, 220, 200, 0.35);
-  }
-  
-  .btn-cta {
-    font-family: var(--font-title);
-    font-size: 0.65rem;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--gold);
-    padding: 7px 16px;
-    border: 1px solid var(--gold-dim);
-    background: var(--gold-faint);
-    transition: background 0.2s, border-color 0.2s;
-  }
-  
-  .btn-cta:hover {
-    background: rgba(201, 168, 76, 0.18);
-    border-color: var(--gold);
-  }
\ No newline at end of file