diff --git a/content/articles/getting-started/en.md b/content/articles/getting-started/en.md
index 010c21d..eba8415 100644
--- a/content/articles/getting-started/en.md
+++ b/content/articles/getting-started/en.md
@@ -62,4 +62,4 @@ If Moddy doesn't respond:
 2. Check that it isn't `timeout` or `banned`
 3. Join our Discord server and open a support ticket
 
-*Welcome to the Moddy community!* 🎉
+*Welcome to the Moddy community!*
diff --git a/content/articles/getting-started/fr.md b/content/articles/getting-started/fr.md
index e16f4e5..bc6f487 100644
--- a/content/articles/getting-started/fr.md
+++ b/content/articles/getting-started/fr.md
@@ -62,4 +62,4 @@ Si Moddy ne répond pas :
 2. Vérifiez qu'il n'est pas `timeout` ou `banni`
 3. Rejoignez notre serveur Discord et ouvrez un ticket de support
 
-*Bienvenue dans la communauté Moddy !* 🎉
+*Bienvenue dans la communauté Moddy !*
diff --git a/content/articles/getting-started/meta.json b/content/articles/getting-started/meta.json
index 991bda8..14163fc 100644
--- a/content/articles/getting-started/meta.json
+++ b/content/articles/getting-started/meta.json
@@ -8,7 +8,7 @@
     "fr": "Guide complet pour inviter Moddy sur votre serveur Discord et effectuer la configuration initiale en quelques minutes.",
     "en": "Complete guide to invite Moddy to your Discord server and complete the initial setup in just a few minutes."
   },
-  "authors": ["DISCORD"],
+  "authors": ["1164597199594852395"],
   "createdAt": "2026-06-01",
   "labels": ["guide"],
   "banner": null,
diff --git a/content/articles/v1-changelog/en.md b/content/articles/v1-changelog/en.md
index 5a11a70..7371e6e 100644
--- a/content/articles/v1-changelog/en.md
+++ b/content/articles/v1-changelog/en.md
@@ -4,7 +4,7 @@ Welcome to the first public release of **Moddy**! This release marks the beginni
 
 ---
 
-## 🚀 New Features
+## New Features
 
 ### Moderation
 
@@ -35,20 +35,20 @@ Welcome to the first public release of **Moddy**! This release marks the beginni
 
 ---
 
-## 🐛 Bug Fixes
+## Bug Fixes
 
 - Improved general stability during traffic spikes
 - Fixed a crash on startup in certain Docker configurations
 
 ---
 
-## ⚠️ Notes
+## Notes
 
 > This version is a **public beta**. Changes may occur without notice. Join our Discord server to report bugs or suggest features.
 
 ---
 
-## 📦 Installation
+## Installation
 
 ```bash
 # Invite Moddy to your server
@@ -59,4 +59,4 @@ Then run `/setup` to configure Moddy in a few minutes.
 
 ---
 
-*Thank you for using Moddy — Built to let you focus on your community.* 🎉
+*Thank you for using Moddy — Built to let you focus on your community.*
diff --git a/content/articles/v1-changelog/fr.md b/content/articles/v1-changelog/fr.md
index 81334c7..188fe98 100644
--- a/content/articles/v1-changelog/fr.md
+++ b/content/articles/v1-changelog/fr.md
@@ -4,7 +4,7 @@ Bienvenue dans la première version publique de **Moddy** ! Cette release marque
 
 ---
 
-## 🚀 Nouvelles fonctionnalités
+## Nouvelles fonctionnalités
 
 ### Modération
 
@@ -35,20 +35,20 @@ Bienvenue dans la première version publique de **Moddy** ! Cette release marque
 
 ---
 
-## 🐛 Corrections
+## Corrections
 
 - Stabilité générale améliorée lors des pics de trafic
 - Correction d'un crash au démarrage sur certaines configurations Docker
 
 ---
 
-## ⚠️ Notes
+## Notes
 
 > Cette version est une **beta publique**. Des changements peuvent intervenir sans préavis. Rejoignez notre serveur Discord pour signaler des bugs ou proposer des fonctionnalités.
 
 ---
 
-## 📦 Installation
+## Installation
 
 ```bash
 # Inviter Moddy sur votre serveur
@@ -59,4 +59,4 @@ Puis lancez `/setup` pour configurer Moddy en quelques minutes.
 
 ---
 
-*Merci d'utiliser Moddy — Built to let you focus on your community.* 🎉
+*Merci d'utiliser Moddy — Built to let you focus on your community.*
diff --git a/content/authors/juthing.json b/content/authors/1164597199594852395.json
similarity index 100%
rename from content/authors/juthing.json
rename to content/authors/1164597199594852395.json
diff --git a/public/favicon.svg b/public/favicon.svg
index 44c3f4d..2716310 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="10" fill="#5B7BFA"/>
-  <path d="M8 22V12l8 6 8-6v10" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+<svg width="190" height="190" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M142.39 0H94.9335L47.4565 47.4564H0V94.9129H94.9335L142.39 47.4564V0Z" fill="#0046F8"/>
+<path d="M94.9335 94.9129L47.4568 142.39V189.846H94.9339L142.39 142.39H189.847V94.9128L94.9335 94.9129Z" fill="#0046F8"/>
 </svg>
diff --git a/src/components/ArticleCard.astro b/src/components/ArticleCard.astro
index e04543c..a050e04 100644
--- a/src/components/ArticleCard.astro
+++ b/src/components/ArticleCard.astro
@@ -23,142 +23,161 @@ const bannerSrc = article.banner
   : null;
 ---
 
-<div class="vNoZxk">
-  <a href={`/articles/${article.id}`} class="uPd4UK" tabindex="-1" aria-hidden="true">
-    {bannerSrc
-      ? <img draggable="false" src={bannerSrc} alt="" loading="lazy" />
-      : null
-    }
-  </a>
-  <div class="zv98UQ">
-    <div class="uHxFYS">
+<div class="card">
+  <!-- Banner only shown when an image actually exists -->
+  {bannerSrc && (
+    <a href={`/articles/${article.id}`} class="card-banner" tabindex="-1" aria-hidden="true">
+      <img draggable="false" src={bannerSrc} alt="" loading="lazy" />
+    </a>
+  )}
+
+  <div class="card-body">
+    <div class="card-meta">
       <span class="card-date">{dateShort}</span>
-    </div>
-    <a href={`/articles/${article.id}`}><h2>{title}</h2></a>
-    <span class="card-summary">{summary}</span>
-    <div class="uHxFYS wCqovU">
-      {primaryLabel ? (
-        <a href={`/collections/${primaryLabel.id}`} class="v2EOKK"
-          style={`background-color: color-mix(in srgb, ${primaryLabel.color} 15%, var(--md-sys-color-surface-container-highest)); color: ${primaryLabel.color}`}>
+      {primaryLabel && (
+        <a
+          href={`/collections/${primaryLabel.id}`}
+          class="label-badge"
+          style={`color: ${primaryLabel.color};`}
+        >
           <md-ripple></md-ripple>
           {primaryLabel.name}
         </a>
-      ) : <span></span>}
+      )}
+    </div>
+
+    <a href={`/articles/${article.id}`} class="card-title-link">
+      <h2>{title}</h2>
+    </a>
+
+    <p class="card-summary">{summary}</p>
+
+    <div class="card-footer">
       <md-text-button trailing-icon href={`/articles/${article.id}`}>
         <md-icon slot="icon">arrow_forward</md-icon>
-        View Article
+        Lire l'article
       </md-text-button>
     </div>
   </div>
 </div>
 
 <style>
-  .vNoZxk {
-    background-color: var(--md-sys-color-surface-container);
-    border-radius: 16px;
-    flex-direction: column;
+  .card {
+    background: var(--md-sys-color-surface);
+    border-radius: 20px;
     width: 100%;
-    height: 100%;
     display: flex;
+    flex-direction: column;
     overflow: hidden;
+    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04);
+    transition: box-shadow .2s ease, transform .2s ease;
+  }
+
+  .card:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,.10), 0 8px 32px rgba(0,0,0,.06);
+    transform: translateY(-2px);
   }
 
-  .uPd4UK {
-    user-select: none;
-    background-color: var(--md-sys-color-surface-container-high);
+  /* ── Banner — 190 px tall, hidden when no image ──────────── */
+  .card-banner {
+    display: block;
     width: 100%;
-    min-height: 180px;
-    position: relative;
+    height: 190px;
     overflow: hidden;
-    display: block;
+    position: relative;
+    flex-shrink: 0;
+    background: var(--md-sys-color-surface-container);
   }
-  .uPd4UK img {
+
+  .card-banner img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    object-position: 50% 50%;
+    object-position: center;
     display: block;
-    transition: scale .3s cubic-bezier(.2,.29,.27,1.55);
+    transition: scale .35s cubic-bezier(.2,.29,.27,1.55);
     scale: 1.01;
-    position: absolute;
-    inset: 0;
   }
-  .uPd4UK::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(transparent 40%, color-mix(in srgb, var(--md-sys-color-surface-container) 50%, transparent) 100%);
-    pointer-events: none;
-  }
-  .vNoZxk:hover .uPd4UK img { scale: 1.05; }
 
-  .zv98UQ {
-    flex-direction: column;
-    height: 100%;
-    padding: 24px;
-    display: flex;
-    gap: 6px;
-  }
+  .card:hover .card-banner img { scale: 1.06; }
 
-  .uHxFYS {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 5px;
-    margin-bottom: .5em;
+  /* ── Body — 260 px min, 10 px horizontal padding ─────────── */
+  .card-body {
     display: flex;
+    flex-direction: column;
+    min-height: 260px;
+    padding: 20px 20px 16px;
+    gap: 8px;
   }
 
-  .wCqovU {
-    margin-top: auto;
-    margin-bottom: 0;
-    padding-top: 1em;
+  /* ── Meta row ────────────────────────────────────────────── */
+  .card-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 2px;
   }
 
   .card-date {
+    font-size: .85rem;
     font-weight: 600;
-    font-size: .8rem;
     color: var(--md-sys-color-on-surface-variant);
-    letter-spacing: .03em;
+    letter-spacing: .04em;
+    text-transform: uppercase;
   }
 
-  .zv98UQ a {
+  /* ── Label badge ─────────────────────────────────────────── */
+  .label-badge {
+    font-size: .8rem;
+    font-weight: 600;
+    border-radius: 9999px;
+    border: 1.5px solid currentColor;
+    background: color-mix(in srgb, currentColor 10%, transparent);
+    padding: 3px 11px;
     text-decoration: none;
-    color: var(--md-sys-color-on-surface);
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    letter-spacing: .02em;
+    white-space: nowrap;
+    transition: background .15s;
+  }
+  .label-badge:hover {
+    text-decoration: none;
+    background: color-mix(in srgb, currentColor 18%, transparent);
   }
-  .zv98UQ a:hover h2 { text-decoration: underline; }
 
-  .zv98UQ h2 {
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.4;
+  /* ── Title ───────────────────────────────────────────────── */
+  .card-title-link {
+    text-decoration: none;
+    color: inherit;
+  }
+  .card-title-link:hover h2 { text-decoration: underline; }
+
+  .card-title-link h2 {
+    font-size: 1.2rem;
+    font-weight: 700;
+    line-height: 1.35;
     color: var(--md-sys-color-on-surface);
-    margin-bottom: .1em;
+    letter-spacing: -0.01em;
   }
 
+  /* ── Summary ─────────────────────────────────────────────── */
   .card-summary {
-    font-size: .875rem;
+    font-size: 1rem;
     color: var(--md-sys-color-on-surface-variant);
-    line-height: 1.6;
+    line-height: 1.65;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
-    max-width: 75%;
   }
 
-  .v2EOKK {
-    width: fit-content;
-    font-size: .875rem;
-    font-weight: 500;
-    border-radius: 8px;
-    user-select: none;
-    padding: 5px 11px;
-    line-height: 1.25rem;
-    text-decoration: none;
-    display: block;
-    position: relative;
-    overflow: hidden;
+  /* ── Footer ──────────────────────────────────────────────── */
+  .card-footer {
+    margin-top: auto;
+    padding-top: .5em;
   }
-  .v2EOKK:hover { text-decoration: none; }
 </style>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 550163f..1eb2c59 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -9,13 +9,9 @@ const { slug = 'home' } = Astro.props;
 <nav class="nav-bar" id="site-nav">
   <div class="nav-logo">
     <a href="/" class="nav-logo-link">
-      <svg width="26" height="26" viewBox="0 0 100 100" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <rect x="10" y="20" width="80" height="55" rx="12" ry="12"/>
-        <circle cx="35" cy="47" r="7" fill="var(--md-sys-color-surface)"/>
-        <circle cx="65" cy="47" r="7" fill="var(--md-sys-color-surface)"/>
-        <path d="M10 65 Q50 90 90 65" stroke="var(--md-sys-color-surface)" stroke-width="4" fill="none"/>
-        <rect x="30" y="75" width="8" height="12" rx="3" fill="currentColor"/>
-        <rect x="62" y="75" width="8" height="12" rx="3" fill="currentColor"/>
+      <svg width="24" height="24" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M142.39 0H94.9335L47.4565 47.4564H0V94.9129H94.9335L142.39 47.4564V0Z" fill="currentColor"/>
+        <path d="M94.9335 94.9129L47.4568 142.39V189.846H94.9339L142.39 142.39H189.847V94.9128L94.9335 94.9129Z" fill="currentColor"/>
       </svg>
       <span>Moddy Docs</span>
     </a>
@@ -51,14 +47,15 @@ const { slug = 'home' } = Astro.props;
 <style>
   .nav-bar {
     box-sizing: border-box;
-    background-color: var(--md-sys-color-background);
-    z-index: 5;
+    background-color: var(--md-sys-color-surface);
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    z-index: 100;
     flex-direction: row;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
     width: 100%;
     height: 64px;
-    padding: 0 1em;
+    padding: 0 2em;
     display: flex;
     position: fixed;
     top: 0;
@@ -69,22 +66,24 @@ const { slug = 'home' } = Astro.props;
   .nav-logo-link {
     box-sizing: border-box;
     width: fit-content;
-    color: var(--md-sys-color-on-surface);
+    color: var(--md-sys-color-primary);
     user-select: none;
     flex-direction: row;
-    gap: 8px;
+    gap: 10px;
     text-decoration: none;
     display: flex;
     align-items: center;
-    font-weight: 500;
-    font-size: 1rem;
+    font-weight: 700;
+    font-size: 1.1rem;
+    letter-spacing: -0.01em;
   }
-  .nav-logo-link:hover { text-decoration: none; }
+  .nav-logo-link:hover { text-decoration: none; opacity: 0.85; }
 
   .nav-sep {
     user-select: none;
-    color: var(--md-sys-color-on-surface-variant);
-    font-size: 1rem;
+    color: var(--md-sys-color-outline-variant);
+    font-size: 1.1rem;
+    font-weight: 300;
   }
 
   .nav-slug {
@@ -93,7 +92,7 @@ const { slug = 'home' } = Astro.props;
     font-weight: 500;
     overflow: hidden;
     color: var(--md-sys-color-on-surface-variant);
-    font-size: .9rem;
+    font-size: 1rem;
     max-width: 300px;
   }
 
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 7ae4f46..b3e7d8d 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -117,26 +117,32 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
       --md-sys-shape-corner-extra-small: 4px;
       --md-sys-shape-corner-none: 0;
 
-      /* Light theme — Moddy blue */
-      --md-sys-color-primary: #4A5FD5;
+      /* Content width token shared across pages and footer */
+      --page-max-width: min(1200px, calc(100vw - 3em));
+
+      /* Light theme — Moddy vivid blue on light gray */
+      --md-sys-color-primary: #0046F8;
       --md-sys-color-on-primary: #ffffff;
-      --md-sys-color-primary-container: #DDE1FF;
-      --md-sys-color-on-primary-container: #00105C;
-      --md-sys-color-secondary: #5A5D72;
+      --md-sys-color-primary-container: #D6E4FF;
+      --md-sys-color-on-primary-container: #001870;
+      --md-sys-color-secondary: #555E7A;
       --md-sys-color-on-secondary: #ffffff;
-      --md-sys-color-secondary-container: #DFE1F9;
-      --md-sys-color-on-secondary-container: #161B2C;
-      --md-sys-color-surface: #FBF8FF;
-      --md-sys-color-surface-container: #EDEAF4;
-      --md-sys-color-surface-container-high: #E7E4EE;
-      --md-sys-color-surface-container-highest: #E2DFE9;
-      --md-sys-color-surface-container-low: #F3F0FA;
-      --md-sys-color-on-surface: #1B1B21;
-      --md-sys-color-on-surface-variant: #45464F;
-      --md-sys-color-outline: #767680;
-      --md-sys-color-outline-variant: #C6C5D0;
-      --md-sys-color-background: #FBF8FF;
-      --md-sys-color-on-background: #1B1B21;
+      --md-sys-color-secondary-container: #DAE2FF;
+      --md-sys-color-on-secondary-container: #0F1B3C;
+      /* surface = white (cards, panels) */
+      --md-sys-color-surface: #FFFFFF;
+      /* surface-container = slightly off-white for nav/footer/chips */
+      --md-sys-color-surface-container: #EAEBF0;
+      --md-sys-color-surface-container-high: #E0E1E8;
+      --md-sys-color-surface-container-highest: #D6D7DF;
+      --md-sys-color-surface-container-low: #F0F1F6;
+      --md-sys-color-on-surface: #191A22;
+      --md-sys-color-on-surface-variant: #43454E;
+      --md-sys-color-outline: #73747E;
+      --md-sys-color-outline-variant: #C3C4CE;
+      /* background = light gray page background */
+      --md-sys-color-background: #F2F2F7;
+      --md-sys-color-on-background: #191A22;
     }
 
     [data-theme="dark"] {
@@ -166,6 +172,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
     html {
       font-family: 'Google Sans', 'Roboto', system-ui, sans-serif;
+      font-size: 17px;
       background: var(--md-sys-color-background);
       color: var(--md-sys-color-on-background);
       scroll-behavior: smooth;
@@ -206,21 +213,25 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
     <!-- Footer -->
     <footer class="site-footer">
-      <div class="footer-links">
-        <md-filled-icon-button href="https://discord.gg/moddy" target="_blank" aria-label="Discord">
-          <md-icon>forum</md-icon>
-        </md-filled-icon-button>
-        <md-filled-icon-button href="https://moddy.app" target="_blank" aria-label="moddy.app">
-          <md-icon>public</md-icon>
-        </md-filled-icon-button>
-      </div>
-      <div class="footer-brand">
-        <a href="/" class="footer-logo-link">
-          <svg width="22" height="22" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <path d="M7 1C3.69 1 1 3.69 1 7s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10.5c-2.49 0-4.5-2.01-4.5-4.5S4.51 2.5 7 2.5 11.5 4.51 11.5 7 9.49 11.5 7 11.5z"/>
-          </svg>
-          <span>Moddy Docs</span>
-        </a>
+      <div class="footer-inner">
+        <div class="footer-brand">
+          <a href="/" class="footer-logo-link">
+            <svg width="20" height="20" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+              <path d="M142.39 0H94.9335L47.4565 47.4564H0V94.9129H94.9335L142.39 47.4564V0Z" fill="currentColor"/>
+              <path d="M94.9335 94.9129L47.4568 142.39V189.846H94.9339L142.39 142.39H189.847V94.9128L94.9335 94.9129Z" fill="currentColor"/>
+            </svg>
+            <span>Moddy Docs</span>
+          </a>
+          <p class="footer-tagline">Built to let you focus on your community.</p>
+        </div>
+        <div class="footer-links">
+          <md-filled-icon-button href="https://discord.gg/moddy" target="_blank" aria-label="Discord">
+            <md-icon>forum</md-icon>
+          </md-filled-icon-button>
+          <md-filled-icon-button href="https://moddy.app" target="_blank" aria-label="moddy.app">
+            <md-icon>public</md-icon>
+          </md-filled-icon-button>
+        </div>
       </div>
     </footer>
   </div>
@@ -235,7 +246,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
     .vISiAi {
       flex-direction: column;
       align-items: center;
-      gap: 1em;
+      gap: 0;
       width: 100%;
       max-width: 100%;
       display: flex;
@@ -246,47 +257,55 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
     /* ── Footer ───────────────────────────────────────────────── */
     .site-footer {
-      background-color: var(--md-sys-color-surface-container);
-      --safe-area-max-inset-bottom: env(safe-max-area-inset-bottom, 0px);
-      height: 360px;
-      padding: 3em 3em calc(1em + env(safe-area-inset-bottom, 1em) - var(--safe-area-max-inset-bottom));
-      box-sizing: border-box;
-      border-radius: 24px 24px 0 0;
-      flex-direction: column;
-      gap: 1em;
+      background-color: var(--md-sys-color-surface);
+      border-top: 1px solid var(--md-sys-color-outline-variant);
       width: 100%;
-      max-width: 1300px;
-      margin: auto;
-      display: flex;
+      margin-top: 5em;
+      padding: 2em 0;
     }
 
-    .footer-links {
-      gap: 10px;
+    .footer-inner {
+      max-width: var(--page-max-width);
+      margin: 0 auto;
+      padding: 0 2em;
       display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 2em;
+      flex-wrap: wrap;
     }
 
     .footer-brand {
-      margin-top: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
     }
 
     .footer-logo-link {
       display: inline-flex;
       align-items: center;
-      gap: 6px;
-      color: var(--md-sys-color-on-surface-variant);
+      gap: 8px;
+      color: var(--md-sys-color-primary);
       text-decoration: none;
-      font-size: .9rem;
-      font-weight: 500;
+      font-size: 1.1rem;
+      font-weight: 700;
+      letter-spacing: -0.01em;
     }
-    .footer-logo-link:hover { text-decoration: none; color: var(--md-sys-color-on-surface); }
+    .footer-logo-link:hover { text-decoration: none; opacity: 0.85; }
 
-    @media (max-width: 1200px) {
-      .site-footer {
-        padding: 2em 2em calc(1em + env(safe-area-inset-bottom, 1em) - var(--safe-area-max-inset-bottom));
-      }
+    .footer-tagline {
+      font-size: .95rem;
+      color: var(--md-sys-color-on-surface-variant);
+      margin-left: 28px;
+    }
+
+    .footer-links {
+      display: flex;
+      gap: 8px;
     }
+
     @media (max-width: 600px) {
-      .site-footer { height: auto; min-height: 200px; }
+      .footer-inner { flex-direction: column; align-items: flex-start; }
     }
   </style>
 
diff --git a/src/pages/articles/[id].astro b/src/pages/articles/[id].astro
index cdc85a2..b38c73c 100644
--- a/src/pages/articles/[id].astro
+++ b/src/pages/articles/[id].astro
@@ -2,7 +2,7 @@
 import Base from '../../layouts/Base.astro';
 import Nav from '../../components/Nav.astro';
 import { getAllArticles, getArticle, getArticleContent, getAuthor, getLabel } from '../../utils/content.ts';
-import { fetchDiscordUser, accentColorToHex } from '../../utils/discord.ts';
+import { fetchDiscordUser } from '../../utils/discord.ts';
 import { marked } from 'marked';
 
 export async function getStaticPaths() {
@@ -63,117 +63,98 @@ const bannerUrl = meta.banner
 >
   <Nav slot="nav" slug={id} />
 
-  <div class="xTOiZi xAs6Ae">
-    <!-- Article header — height 512px like maquette -->
-    <div class="yzxB9O" style={`--z8hk0y: ${themeColor}`}>
-      <div class="voRrnK">
-        {bannerUrl && <img draggable="false" src={bannerUrl} fetchpriority="high" alt="Article Header" />}
+  <div class="page-wrapper">
+
+    <!-- Article banner -->
+    <div class="banner-section">
+      <div class="banner-card" style={`background-color: ${themeColor}`}>
+        {bannerUrl && <img draggable="false" src={bannerUrl} fetchpriority="high" alt="" />}
+        <div class="banner-gradient"></div>
       </div>
     </div>
 
     <!-- Title -->
-    <div class="v504Ku xXvHqe">
+    <div class="content-col title-block">
       <h1 data-lang="fr">{titleFr}</h1>
       <h1 data-lang="en" style="display:none">{titleEn}</h1>
     </div>
 
     <!-- Date + summary -->
-    <div class="v504Ku zR1x8w">
-      <div>
-        <span class="article-date">{dateShort}</span>
-      </div>
+    <div class="content-col meta-row">
+      <span class="article-date">{dateShort}</span>
       <span class="article-summary" data-lang="fr">{summaryFr}</span>
       <span class="article-summary" data-lang="en" style="display:none">{summaryEn}</span>
     </div>
 
-    <!-- Authors + share -->
+    <!-- Authors -->
     {authors.length > 0 && (
-      <div class="v504Ku wEaTMe">
-        <div class="wojHNc">
-          <div class="wrmXco">
-            {authors.map(author => (
-              <a href={`/authors/${author.id}`} class="wACuEA" title={author.username}>
-                <md-ripple></md-ripple>
+      <div class="content-col authors-row">
+        <div class="authors-stack">
+          {authors.map(author => (
+            <a href={`/authors/${author.id}`} class="author-avatar-wrap" title={author.username}>
+              <md-ripple></md-ripple>
+              <div class="author-avatar-clip">
                 {author.resolvedAvatarUrl
-                  ? <img draggable="false" aria-label={`${author.username}'s Avatar`} src={author.resolvedAvatarUrl} alt={`${author.username}'s Avatar`} />
+                  ? <img draggable="false" src={author.resolvedAvatarUrl} alt={`${author.username}'s avatar`} />
                   : <span class="author-fallback">{author.username.charAt(0).toUpperCase()}</span>
                 }
-                {author.resolvedAvatarDecoration && (
-                  <img class="author-deco" src={author.resolvedAvatarDecoration} alt="" aria-hidden="true" />
-                )}
-              </a>
-            ))}
-          </div>
-          {authors[0] && (
-            <div class="xSRyrW">
-              <div class="wndRmO">
-                <a href={`/authors/${authors[0].id}`}>{authors[0].username}</a>
               </div>
-              {authors[0].role?.['fr'] && <span>{authors[0].role['fr']}</span>}
-            </div>
-          )}
+              {author.resolvedAvatarDecoration && (
+                <img class="author-deco" src={author.resolvedAvatarDecoration} alt="" aria-hidden="true" />
+              )}
+            </a>
+          ))}
         </div>
+        {authors[0] && (
+          <div class="author-info">
+            <a href={`/authors/${authors[0].id}`} class="author-name">{authors[0].username}</a>
+            {authors[0].role?.['fr'] && <span class="author-role">{authors[0].role['fr']}</span>}
+          </div>
+        )}
       </div>
     )}
 
     <!-- Article content -->
-    <div class="v504Ku xkQrFg">
-      <div class="wmvtgi" data-lang="fr" set:html={frHtml}></div>
-      <div class="wmvtgi" data-lang="en" style="display:none" set:html={enHtml}></div>
+    <div class="content-col prose-block">
+      <div class="prose" data-lang="fr" set:html={frHtml}></div>
+      <div class="prose" data-lang="en" style="display:none" set:html={enHtml}></div>
     </div>
   </div>
 </Base>
 
 <style>
-  /* ── Content wrapper ──────────────────────────────────────── */
-  .xTOiZi {
-    --xs2rQG: min(1200px, calc(100vw - 2em));
+  .page-wrapper {
+    --content-w: var(--page-max-width);
+    display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-    display: flex;
-  }
-
-  .xAs6Ae {
-    --yPh9aE: 100%;
+    padding: 2em 0 0;
+    gap: 0;
   }
 
-  .v504Ku {
-    max-width: var(--xs2rQG);
+  .content-col {
+    max-width: var(--content-w);
     width: 100%;
-    overflow: hidden;
+    padding: 0 1.5em;
   }
 
-  /* ── Article header ───────────────────────────────────────── */
-  .yzxB9O {
-    --header-w: 1500px;
-    --header-h: 512px;
-    margin-top: 1em;
+  /* ── Banner ──────────────────────────────────────────────── */
+  .banner-section {
     width: 100%;
-    height: var(--header-h);
-    justify-content: center;
-    display: flex;
-    position: relative;
-  }
-
-  @media (max-width: 1650px) {
-    .yzxB9O { --header-w: min(1300px, calc(100vw - 8em)); --header-h: 445px; }
-  }
-  @media (max-width: 900px) {
-    .yzxB9O { --header-h: 300px; }
+    max-width: min(1400px, calc(100vw - 2em));
+    padding: 0 1.5em;
   }
 
-  .voRrnK {
-    max-width: min(var(--header-w), 100%);
-    background-color: var(--z8hk0y, var(--md-sys-color-surface-container-high));
+  .banner-card {
     width: 100%;
-    height: var(--header-h);
-    border-radius: 48px;
-    position: absolute;
+    height: clamp(280px, 35vw, 480px);
+    border-radius: 32px;
+    position: relative;
     overflow: hidden;
   }
 
-  .voRrnK img {
+  .banner-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -181,208 +162,201 @@ const bannerUrl = meta.banner
     display: block;
   }
 
-  /* Gradient at bottom of banner */
-  .voRrnK::after {
-    content: '';
+  .banner-gradient {
     position: absolute;
     inset: 0;
-    background: linear-gradient(transparent 50%, color-mix(in srgb, var(--md-sys-color-background) 60%, transparent) 100%);
-    pointer-events: none;
+    background: linear-gradient(transparent 45%, color-mix(in srgb, var(--md-sys-color-background) 55%, transparent) 100%);
   }
 
   /* ── Title ───────────────────────────────────────────────── */
-  .xXvHqe {
-    margin-top: 2em;
+  .title-block {
+    margin-top: 2.5em;
   }
 
-  .xXvHqe h1 {
-    font-size: clamp(2rem, 5vw, 3.5rem);
-    font-weight: 600;
-    line-height: 1.15;
+  .title-block h1 {
+    font-size: clamp(2rem, 5vw, 3.25rem);
+    font-weight: 800;
+    line-height: 1.12;
     text-wrap: balance;
     color: var(--md-sys-color-on-background);
-    letter-spacing: -.02em;
-    margin-block: .5em 0;
-    margin-inline: auto;
+    letter-spacing: -.03em;
   }
 
   /* ── Date + summary ──────────────────────────────────────── */
-  .zR1x8w {
-    flex-direction: row;
-    gap: 1em;
-    margin-top: 1em;
+  .meta-row {
     display: flex;
+    flex-direction: row;
+    gap: 1.5em;
+    margin-top: 1.25em;
+    align-items: baseline;
     flex-wrap: wrap;
   }
 
   @media (max-width: 640px) {
-    .zR1x8w { flex-direction: column; }
+    .meta-row { flex-direction: column; gap: .5em; }
   }
 
   .article-date {
     font-weight: 600;
-    font-size: .9rem;
+    font-size: .875rem;
     color: var(--md-sys-color-on-surface-variant);
     white-space: nowrap;
+    letter-spacing: .03em;
   }
 
   .article-summary {
-    font-size: .95rem;
+    font-size: 1rem;
     color: var(--md-sys-color-on-surface-variant);
-    line-height: 1.6;
+    line-height: 1.65;
   }
 
-  /* ── Authors row ─────────────────────────────────────────── */
-  .wEaTMe {
-    flex-direction: row;
-    gap: 1em;
-    margin-top: 1em;
-    margin-bottom: 2em;
-    display: flex;
-  }
-
-  .wojHNc {
-    flex-direction: row;
-    gap: 12px;
+  /* ── Authors ─────────────────────────────────────────────── */
+  .authors-row {
     display: flex;
     align-items: center;
+    gap: 14px;
+    margin-top: 1.5em;
+    margin-bottom: 2.5em;
   }
 
-  /* Stacked avatars row-reverse like maquette */
-  .wrmXco {
-    user-select: none;
+  .authors-stack {
+    display: flex;
     flex-direction: row-reverse;
     padding-right: 22px;
-    display: flex;
-    align-items: center;
   }
 
-  .wACuEA {
-    color: inherit;
-    border: 3px solid var(--md-sys-color-surface);
-    border-radius: 9999px;
-    width: 42px;
-    height: 42px;
-    max-height: 42px;
+  /* Avatar wrapper — no overflow so decoration can bleed out */
+  .author-avatar-wrap {
+    position: relative;
+    width: 44px;
+    height: 44px;
     margin-right: -22px;
+    flex-shrink: 0;
+    display: block;
     text-decoration: none;
-    position: relative;
+  }
+
+  /* The circular clip for the avatar image */
+  .author-avatar-clip {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: 3px solid var(--md-sys-color-background);
     overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     background: var(--md-sys-color-surface-container);
-    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
   }
 
-  .wACuEA img {
+  .author-avatar-clip img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 50%;
+    display: block;
   }
 
   .author-fallback {
-    font-weight: 700;
-    font-size: .9rem;
-    color: var(--md-sys-color-on-primary-container);
-    background: var(--md-sys-color-primary-container);
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    font-weight: 700;
+    font-size: .85rem;
+    color: var(--md-sys-color-on-primary-container);
+    background: var(--md-sys-color-primary-container);
   }
 
+  /* Decoration — outside the clip, overlays on top */
   .author-deco {
     position: absolute;
-    inset: -4px;
-    width: calc(100% + 8px);
-    height: calc(100% + 8px);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 140%;
+    height: 140%;
     pointer-events: none;
+    z-index: 2;
   }
 
-  .xSRyrW {
+  .author-info {
+    display: flex;
     flex-direction: column;
     justify-content: center;
-    display: flex;
   }
 
-  .wndRmO {
+  .author-name {
     font-weight: 600;
-    font-size: .95rem;
-  }
-
-  .wndRmO a {
+    font-size: 1rem;
     color: var(--md-sys-color-on-surface);
     text-decoration: none;
   }
-  .wndRmO a:hover { text-decoration: underline; }
+  .author-name:hover { text-decoration: underline; }
 
-  .xSRyrW > span {
-    font-size: .8rem;
+  .author-role {
+    font-size: .825rem;
     color: var(--md-sys-color-on-surface-variant);
   }
 
-  /* ── Article content ─────────────────────────────────────── */
-  .xkQrFg {
-    margin-bottom: 10em;
+  /* ── Prose content ───────────────────────────────────────── */
+  .prose-block {
+    margin-bottom: 8em;
+    margin-top: 0;
   }
 
-  .wmvtgi {
+  .prose {
     color: var(--md-sys-color-on-surface);
-    line-height: 1.625;
-    font-size: 1rem;
+    line-height: 1.75;
+    font-size: 1.05rem;
     word-wrap: break-word;
   }
 
-  /* Prose typography */
-  .wmvtgi :global(h1) { font-size: 2rem; font-weight: 800; margin: 2rem 0 1rem; letter-spacing: -.02em; }
-  .wmvtgi :global(h2) {
-    font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 1rem;
-    padding-bottom: .5rem; border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  .prose :global(h1) { font-size: 2rem; font-weight: 800; margin: 2.5rem 0 1rem; letter-spacing: -.025em; }
+  .prose :global(h2) {
+    font-size: 1.5rem; font-weight: 700; margin: 3rem 0 1rem;
+    padding-bottom: .6rem; border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    letter-spacing: -.015em;
   }
-  .wmvtgi :global(h3) { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 .75rem; }
-  .wmvtgi :global(h4) { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
-  .wmvtgi :global(p) { margin: 1rem 0; }
-  .wmvtgi :global(a) { color: var(--md-sys-color-primary); text-decoration: underline; text-underline-offset: 3px; }
-  .wmvtgi :global(ul), .wmvtgi :global(ol) { padding-left: 1.5rem; margin: 1rem 0; }
-  .wmvtgi :global(li) { margin: .4rem 0; }
-  .wmvtgi :global(blockquote) {
+  .prose :global(h3) { font-size: 1.2rem; font-weight: 700; margin: 2.25rem 0 .75rem; }
+  .prose :global(h4) { font-size: 1.05rem; font-weight: 600; margin: 1.75rem 0 .5rem; }
+  .prose :global(p) { margin: 1.1rem 0; }
+  .prose :global(a) { color: var(--md-sys-color-primary); text-decoration: underline; text-underline-offset: 3px; }
+  .prose :global(ul), .prose :global(ol) { padding-left: 1.75rem; margin: 1rem 0; }
+  .prose :global(li) { margin: .5rem 0; }
+  .prose :global(blockquote) {
     border-left: 3px solid var(--md-sys-color-primary);
-    padding: .75rem 1rem;
-    margin: 1.5rem 0;
+    padding: .9rem 1.25rem;
+    margin: 1.75rem 0;
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
-    border-radius: 0 8px 8px 0;
+    border-radius: 0 12px 12px 0;
   }
-  .wmvtgi :global(code) {
+  .prose :global(code) {
     font-family: 'Google Sans Code', monospace;
     font-size: .875em;
     background: var(--md-sys-color-surface-container-highest);
-    padding: .15em .4em;
-    border-radius: 4px;
+    padding: .2em .45em;
+    border-radius: 6px;
     color: var(--md-sys-color-primary);
   }
-  .wmvtgi :global(pre) {
+  .prose :global(pre) {
     background: var(--md-sys-color-surface-container-highest);
     border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 12px;
-    padding: 1.25rem 1.5rem;
+    border-radius: 16px;
+    padding: 1.5rem 1.75rem;
     overflow-x: auto;
-    margin: 1.5rem 0;
+    margin: 1.75rem 0;
   }
-  .wmvtgi :global(pre code) { background: none; padding: 0; color: var(--md-sys-color-on-surface); }
-  .wmvtgi :global(img) { max-width: 100%; border-radius: 12px; margin: 1.5rem 0; }
-  .wmvtgi :global(hr) { border: none; border-top: 1px solid var(--md-sys-color-outline-variant); margin: 2rem 0; }
-  .wmvtgi :global(table) { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9rem; }
-  .wmvtgi :global(th) {
+  .prose :global(pre code) { background: none; padding: 0; color: var(--md-sys-color-on-surface); border-radius: 0; }
+  .prose :global(img) { max-width: 100%; border-radius: 16px; margin: 1.75rem 0; }
+  .prose :global(hr) { border: none; border-top: 1px solid var(--md-sys-color-outline-variant); margin: 2.5rem 0; }
+  .prose :global(table) { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: .95rem; }
+  .prose :global(th) {
     background: var(--md-sys-color-surface-container);
-    padding: .75rem 1rem;
+    padding: .85rem 1.1rem;
     text-align: left;
     font-weight: 700;
     border-bottom: 2px solid var(--md-sys-color-outline-variant);
   }
-  .wmvtgi :global(td) { padding: .75rem 1rem; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
+  .prose :global(td) { padding: .85rem 1.1rem; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
 </style>
diff --git a/src/pages/authors/[id].astro b/src/pages/authors/[id].astro
index 19696ed..ee1aacb 100644
--- a/src/pages/authors/[id].astro
+++ b/src/pages/authors/[id].astro
@@ -21,7 +21,7 @@ if (needsDiscord && author.discordId) discord = await fetchDiscordUser(author.di
 const avatarUrl = author.avatarUrl === 'DISCORD' ? (discord?.avatar_url ?? null) : author.avatarUrl;
 const avatarDecoration = author.avatarDecorationUrl === 'DISCORD' ? (discord?.avatar_decoration_data?.asset_url ?? null) : author.avatarDecorationUrl;
 const bannerColor = author.bannerColor === 'DISCORD' ? accentColorToHex(discord?.accent_color ?? null) : author.bannerColor;
-const themeColor = bannerColor ?? '#5B7BFA';
+const themeColor = bannerColor ?? '#0046F8';
 
 const allArticles = await getArticlesByAuthor(id!);
 const publicArticles = allArticles.filter(a => a.referencing !== 3);
@@ -36,53 +36,62 @@ const roleFr = author.role?.['fr'] ?? '';
 <Base title={author.username} description={bioFr} themeColor={themeColor} lang="fr">
   <Nav slot="nav" slug={id} />
 
-  <div class="xTOiZi">
-    <div class="v504Ku">
-      <!-- Author header card — .ykKuca like maquette -->
-      <div class="ykKuca">
-        <div class="yCfcFC" style={`background-color: color-mix(in srgb, ${themeColor} 20%, var(--md-sys-color-surface-container))`}>
-          <h1>{author.username}</h1>
-        </div>
-        <div class="zMARbA">
-          <div class="yWPGoq">
+  <div class="page-wrapper">
+
+    <div class="content-col">
+
+      <!-- Profile card -->
+      <div class="profile-card">
+
+        <!-- Banner -->
+        <div
+          class="profile-banner"
+          style={`background: linear-gradient(140deg, color-mix(in srgb, ${themeColor} 80%, #000) 0%, ${themeColor} 60%, color-mix(in srgb, ${themeColor} 60%, #fff) 100%)`}
+        ></div>
+
+        <!-- Avatar overlapping banner bottom -->
+        <div class="avatar-outer">
+          <div class="avatar-circle">
             {avatarUrl
               ? <img draggable="false" src={avatarUrl} alt={author.username} />
               : <span class="avatar-fallback">{author.username.charAt(0).toUpperCase()}</span>
             }
-            {avatarDecoration && (
-              <img class="avatar-deco" src={avatarDecoration} alt="" aria-hidden="true" />
-            )}
           </div>
+          {avatarDecoration && (
+            <img class="avatar-deco" src={avatarDecoration} alt="" aria-hidden="true" />
+          )}
         </div>
-      </div>
-
-      <!-- Action links — .w1fZiO -->
-      <div class="w1fZiO">
-        {author.links?.map(link => (
-          <md-filled-tonal-icon-button href={link.url} target="_blank" aria-label={link.name}>
-            <md-icon>{link.icon ?? 'link'}</md-icon>
-          </md-filled-tonal-icon-button>
-        ))}
-      </div>
 
-      <!-- Bio + role -->
-      {(roleFr || bioFr) && (
-        <div class="author-bio-section">
-          {roleFr && <p class="author-role">{roleFr}</p>}
-          {bioFr && <p class="author-bio">{bioFr}</p>}
+        <!-- Info below banner -->
+        <div class="profile-info">
+          <div class="profile-name-row">
+            <div class="profile-text">
+              <h1>{author.username}</h1>
+              {roleFr && <p class="profile-role">{roleFr}</p>}
+            </div>
+            <div class="profile-links">
+              {author.links?.map(link => (
+                <md-filled-tonal-icon-button href={link.url} target="_blank" aria-label={link.name}>
+                  <md-icon>{link.icon ?? 'link'}</md-icon>
+                </md-filled-tonal-icon-button>
+              ))}
+            </div>
+          </div>
+          {bioFr && <p class="profile-bio">{bioFr}</p>}
         </div>
-      )}
+
+      </div>
     </div>
 
-    <!-- Articles grid — .w2Ym6Y -->
-    <div class="v504Ku">
-      <div class="xYSxXU">
+    <!-- Articles -->
+    <div class="content-col">
+      <div class="section-header">
         <md-icon aria-hidden="true">article</md-icon>
-        <h1>Articles ({publicArticles.length})</h1>
+        <h2>Articles ({publicArticles.length})</h2>
       </div>
 
       {publicArticles.length > 0 ? (
-        <div class="w2Ym6Y">
+        <div class="articles-grid">
           {publicArticles.map(article => (
             <ArticleCard
               article={article}
@@ -93,88 +102,71 @@ const roleFr = author.role?.['fr'] ?? '';
         </div>
       ) : (
         <div class="empty-state">
-          <md-icon style="font-size:48px;color:var(--md-sys-color-outline)">article</md-icon>
+          <md-icon style="font-size:56px;color:var(--md-sys-color-outline)">article</md-icon>
           <p>Aucun article publié.</p>
         </div>
       )}
     </div>
+
   </div>
 </Base>
 
 <style>
-  .xTOiZi {
-    --xs2rQG: min(1200px, calc(100vw - 2em));
+  .page-wrapper {
+    display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-    display: flex;
-    gap: 1em;
-    padding-top: 1em;
+    gap: 3em;
+    padding: 3em 0 0;
   }
 
-  .v504Ku {
-    max-width: var(--xs2rQG);
+  .content-col {
+    max-width: var(--page-max-width);
     width: 100%;
-    overflow: hidden;
+    padding: 0 2em;
   }
 
-  /* ── Author header card ──────────────────────────────────── */
-  .ykKuca {
-    width: 100%;
-    height: 300px;
-    margin-top: 1em;
-    margin-bottom: calc(1em + 75px);
+  /* ══ Profile card ══════════════════════════════════════════ */
+  .profile-card {
+    background: var(--md-sys-color-surface);
+    border-radius: 24px;
+    overflow: visible;
+    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04);
     position: relative;
   }
 
-  .yCfcFC {
-    border-radius: 48px;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    color: var(--md-sys-color-on-surface);
-    align-items: flex-end;
-    padding: 1em 1em 1em calc(4.5em + 300px);
-    display: flex;
+  /* ── Banner ──────────────────────────────────────────────── */
+  .profile-banner {
+    height: 180px;
+    border-radius: 24px 24px 0 0;
   }
 
-  .yCfcFC h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    letter-spacing: -.02em;
-    color: inherit;
-    word-break: break-word;
+  /* ── Avatar ──────────────────────────────────────────────── */
+  .avatar-outer {
+    position: absolute;
+    top: calc(180px - 50px); /* banner height - half avatar */
+    left: 28px;
+    width: 100px;
+    height: 100px;
   }
 
-  /* Avatar container — positioned outside the card at bottom-left */
-  .zMARbA {
-    aspect-ratio: 1;
-    background-color: var(--md-sys-color-outline-variant);
-    justify-content: center;
-    align-items: center;
+  .avatar-circle {
+    width: 100%;
     height: 100%;
-    display: flex;
-    position: absolute;
-    bottom: -75px;
-    left: 3em;
     border-radius: 50%;
+    border: 5px solid var(--md-sys-color-background);
     overflow: hidden;
-  }
-
-  .yWPGoq {
+    background: var(--md-sys-color-surface-container);
     position: relative;
-    inset: 10px;
-    width: calc(100% - 20px);
-    height: calc(100% - 20px);
-    border-radius: 50%;
-    overflow: hidden;
+    z-index: 1;
   }
 
-  .yWPGoq img {
+  .avatar-circle img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 50%;
+    display: block;
   }
 
   .avatar-fallback {
@@ -183,99 +175,121 @@ const roleFr = author.role?.['fr'] ?? '';
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 4rem;
+    font-size: 2.5rem;
     font-weight: 800;
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
-    border-radius: 50%;
   }
 
+  /* Decoration sits OUTSIDE avatar-circle (no overflow clip) */
   .avatar-deco {
     position: absolute;
-    inset: -8px;
-    width: calc(100% + 16px);
-    height: calc(100% + 16px);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 128%;
+    height: 128%;
     pointer-events: none;
+    z-index: 2;
   }
 
-  /* ── Action links ────────────────────────────────────────── */
-  .w1fZiO {
-    box-sizing: border-box;
-    flex-direction: row;
-    gap: 1em;
-    width: 100%;
-    margin-top: -75px;
-    margin-bottom: 75px;
-    padding-left: calc(4.5em + 300px);
+  /* ── Info section below banner ───────────────────────────── */
+  .profile-info {
+    /* top padding = avatar overlap below banner (50px) + gap */
+    padding: calc(50px + 16px) 28px 28px calc(28px + 100px + 20px);
+    border-radius: 0 0 24px 24px;
     display: flex;
+    flex-direction: column;
+    gap: 12px;
   }
 
-  /* ── Bio section ─────────────────────────────────────────── */
-  .author-bio-section {
+  .profile-name-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+
+  .profile-text {
     display: flex;
     flex-direction: column;
-    gap: 6px;
-    margin-top: 1em;
+    gap: 4px;
+  }
+
+  .profile-text h1 {
+    font-size: 1.9rem;
+    font-weight: 800;
+    color: var(--md-sys-color-on-surface);
+    letter-spacing: -0.025em;
+    line-height: 1.15;
   }
 
-  .author-role {
+  .profile-role {
     font-size: 1rem;
     font-weight: 600;
     color: var(--md-sys-color-primary);
   }
 
-  .author-bio {
-    font-size: .95rem;
+  .profile-links {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .profile-bio {
+    font-size: 1rem;
     color: var(--md-sys-color-on-surface-variant);
-    line-height: 1.6;
-    max-width: 640px;
+    line-height: 1.7;
+    max-width: 580px;
   }
 
-  /* ── Section header ──────────────────────────────────────── */
-  .xYSxXU {
+  /* ══ Articles ══════════════════════════════════════════════ */
+  .section-header {
+    display: flex;
     align-items: center;
     gap: 10px;
-    width: 100%;
-    display: flex;
-    margin-bottom: 1em;
+    margin-bottom: 1.5em;
   }
 
-  .xYSxXU h1 {
-    font-size: 1.25rem;
-    font-weight: 700;
+  .section-header md-icon {
     color: var(--md-sys-color-on-surface);
+    font-size: 1.4rem;
+    line-height: 1;
   }
 
-  .xYSxXU md-icon { color: var(--md-sys-color-primary); }
+  .section-header h2 {
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: var(--md-sys-color-on-surface);
+    letter-spacing: -0.01em;
+    line-height: 1;
+  }
 
-  /* ── Articles grid ───────────────────────────────────────── */
-  .w2Ym6Y {
-    --vczvgq: min(375px, calc(100vw - 2em));
-    grid-template-columns: repeat(auto-fill, minmax(var(--vczvgq), 1fr));
-    justify-items: center;
-    gap: 1em;
-    margin-top: 1em;
+  .articles-grid {
     display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(410px, 100%), 1fr));
+    gap: 20px;
   }
 
-  /* ── Empty state ─────────────────────────────────────────── */
   .empty-state {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 12px;
-    min-height: 200px;
+    gap: 16px;
+    min-height: 240px;
     color: var(--md-sys-color-on-surface-variant);
     text-align: center;
+    font-size: 1.05rem;
   }
 
   /* ── Responsive ──────────────────────────────────────────── */
-  @media (max-width: 768px) {
-    .yCfcFC { padding: 0; align-items: center; justify-content: center; }
-    .yCfcFC h1 { font-size: 2rem; text-align: center; }
-    .zMARbA { right: unset; left: 50%; transform: translate(-50%); }
-    .w1fZiO { justify-content: center; width: 100%; margin: 0; padding-left: 0; margin-top: -75px; margin-bottom: 75px; }
-    .ykKuca { height: 200px; margin-bottom: calc(1em + 150px); }
+  @media (max-width: 640px) {
+    .profile-info {
+      padding: calc(50px + 16px) 20px 20px 20px;
+    }
+    .avatar-outer { left: 20px; }
+    .profile-text h1 { font-size: 1.5rem; }
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d6fdf1b..d9e3273 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,26 +11,31 @@ const allLabels = await getAllLabels();
 const labelsMap = Object.fromEntries(allLabels.map(l => [l.id, l]));
 ---
 
-<Base title="Accueil" lang="fr" themeColor="#5B7BFA">
+<Base title="Accueil" lang="fr" themeColor="#0046F8">
   <Nav slot="nav" slug="home" />
 
-  <div class="xTOiZi xtspfm">
+  <div class="page-wrapper">
+
     <!-- Editorial intro -->
-    <div class="v504Ku">
-      <div class="wmvtgi">
-        <h1>Moddy Docs</h1>
-        <p>
-          Documentation officielle de Moddy, le bot Discord conçu pour votre communauté.
-          Retrouvez ici toutes les informations pour bien démarrer et tirer le meilleur parti de Moddy.
-        </p>
+    <div class="intro-section">
+      <div class="intro-logo" aria-hidden="true">
+        <svg width="48" height="48" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M142.39 0H94.9335L47.4565 47.4564H0V94.9129H94.9335L142.39 47.4564V0Z" fill="#0046F8"/>
+          <path d="M94.9335 94.9129L47.4568 142.39V189.846H94.9339L142.39 142.39H189.847V94.9128L94.9335 94.9129Z" fill="#0046F8"/>
+        </svg>
       </div>
+      <h1 class="intro-title">Moddy Docs</h1>
+      <p class="intro-desc">
+        Documentation officielle de Moddy, le bot Discord conçu pour votre communauté.
+        Retrouvez ici toutes les informations pour bien démarrer et tirer le meilleur parti de Moddy.
+      </p>
     </div>
 
     <!-- Recent articles -->
-    <div class="v504Ku">
-      <div class="xYSxXU">
+    <div class="content-section">
+      <div class="section-header">
         <md-icon aria-hidden="true">history</md-icon>
-        <h1>Articles récents</h1>
+        <h2>Articles récents</h2>
         <md-text-button trailing-icon href="/articles" style="margin-left:auto">
           <md-icon slot="icon">arrow_forward</md-icon>
           Voir tout
@@ -38,7 +43,7 @@ const labelsMap = Object.fromEntries(allLabels.map(l => [l.id, l]));
       </div>
 
       {publicArticles.length > 0 ? (
-        <div class="wUTVKK">
+        <div class="articles-grid">
           {publicArticles.slice(0, 9).map(article => (
             <ArticleCard
               article={article}
@@ -49,77 +54,87 @@ const labelsMap = Object.fromEntries(allLabels.map(l => [l.id, l]));
         </div>
       ) : (
         <div class="empty-state">
-          <md-icon style="font-size:48px;color:var(--md-sys-color-outline)">article</md-icon>
+          <md-icon style="font-size:56px;color:var(--md-sys-color-outline)">article</md-icon>
           <p>Aucun article pour le moment.</p>
         </div>
       )}
     </div>
+
   </div>
 </Base>
 
 <style>
-  /* ── Content wrapper ─────────────────────────────────────── */
-  .xTOiZi {
-    --xs2rQG: min(1200px, calc(100vw - 2em));
+  .page-wrapper {
+    display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-    display: flex;
+    gap: 3em;
+    padding: 3em 0 0;
   }
 
-  .xtspfm {
-    gap: 1em;
-    padding-top: 1em;
+  /* ── Editorial intro ─────────────────────────────────────── */
+  .intro-section {
+    width: 100%;
+    max-width: var(--page-max-width);
+    padding: 0 2em;
   }
 
-  .v504Ku {
-    max-width: var(--xs2rQG);
-    width: 100%;
-    overflow: hidden;
+  .intro-logo {
+    margin-bottom: 1.25em;
   }
 
-  /* ── Editorial intro ─────────────────────────────────────── */
-  .wmvtgi h1 {
-    font-size: 1.75rem;
-    font-weight: 700;
+  .intro-title {
+    font-size: 2.75rem;
+    font-weight: 800;
     color: var(--md-sys-color-on-surface);
-    margin-bottom: .5em;
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    margin-bottom: 0.6em;
   }
 
-  .wmvtgi p {
-    font-size: 1rem;
+  .intro-desc {
+    font-size: 1.1rem;
     color: var(--md-sys-color-on-surface-variant);
-    line-height: 1.6;
-    max-width: 640px;
+    line-height: 1.7;
+    max-width: 600px;
+  }
+
+  /* ── Content section ─────────────────────────────────────── */
+  .content-section {
+    width: 100%;
+    max-width: var(--page-max-width);
+    padding: 0 2em;
   }
 
   /* ── Section header ──────────────────────────────────────── */
-  .xYSxXU {
+  .section-header {
+    display: flex;
     align-items: center;
     gap: 10px;
-    width: 100%;
-    display: flex;
-    margin-bottom: 1em;
+    margin-bottom: 1.5em;
   }
 
-  .xYSxXU h1 {
-    font-size: 1.25rem;
-    font-weight: 700;
+  /* icon same color as title */
+  .section-header md-icon {
     color: var(--md-sys-color-on-surface);
+    font-size: 1.4rem;
+    line-height: 1;
   }
 
-  .xYSxXU md-icon {
-    color: var(--md-sys-color-primary);
+  .section-header h2 {
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: var(--md-sys-color-on-surface);
+    letter-spacing: -0.01em;
+    line-height: 1;
   }
 
   /* ── Articles grid ───────────────────────────────────────── */
-  .wUTVKK {
-    --vczvgq: min(375px, calc(100vw - 2em));
-    grid-template-columns: repeat(auto-fill, minmax(var(--vczvgq), 1fr));
-    justify-items: center;
-    gap: 1em;
-    margin-top: 1em;
+  .articles-grid {
     display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(410px, 100%), 1fr));
+    gap: 20px;
   }
 
   /* ── Empty state ─────────────────────────────────────────── */
@@ -129,8 +144,9 @@ const labelsMap = Object.fromEntries(allLabels.map(l => [l.id, l]));
     align-items: center;
     justify-content: center;
     gap: 16px;
-    min-height: 200px;
+    min-height: 240px;
     color: var(--md-sys-color-on-surface-variant);
     text-align: center;
+    font-size: 1.05rem;
   }
 </style>