diff --git a/assets/main.js b/assets/main.js
new file mode 100644
index 0000000..ca7d724
--- /dev/null
+++ b/assets/main.js
@@ -0,0 +1,143 @@
+/* === ANIMATION TITRE-NAV (toutes les pages) === */
+function animerTitreNav() {
+    document.querySelectorAll('.fenetre-nom').forEach(el => {
+        el.innerHTML = el.textContent.split('').map((c, i) => {
+            if (c === ' ') return ' ';
+            const delayColor = (i * 0.3).toFixed(1);
+            const delayLevite = (Math.random() * 4).toFixed(2);
+            const duree = (3 + Math.random() * 3).toFixed(2);
+            return `<span style="display:inline-block;animation:colorshift 12s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
+        }).join('');
+    });
+}
+
+/* === /NOW (index.html) === */
+function afficherNow() {
+    const phrasesNow = [
+        "/now : faut que je fasses les courses.",
+        "/now : les arbres vibrent !",
+        "/now : les mains, les jambes, avancent..",
+        "/now : lave toi le visage.",
+        "/now : il pleut, et c'est très bien comme ça.",
+        "/now : pas mal la page d'accueil !",
+        "/now : i love my computer",
+        "/now : demain je serais en cours, j'espère",
+        "/now : je resterais auprès de toi pour toujours",
+        "/now : je serais toi j'irais prendre l'air",
+        "/now : je dois vraiment aller dormir la"
+    ];
+
+    const spanNow = document.querySelector('.now');
+    if (spanNow) {
+        const indexAleatoire = Math.floor(Math.random() * phrasesNow.length);
+        spanNow.textContent = phrasesNow[indexAleatoire];
+    }
+}
+
+/* === GRILLE ALBUMS (reviews/index.html) === */
+function toSlug(titre) {
+    return titre
+        .toLowerCase()
+        .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/[^a-z0-9-]/g, '');
+}
+
+function chargerAlbums() {
+    fetch('data/albums.json')
+        .then(r => r.json())
+        .then(albums => {
+            const grille = document.getElementById('grille');
+
+            albums.forEach(album => {
+                const carte = document.createElement('div');
+                carte.className = 'carte';
+
+                const media = album.cover
+                    ? `<img src="${album.cover}" alt="${album.titre}" onerror="this.outerHTML='<div class=\\'placeholder\\'>${album.titre}</div>'">`
+                    : `<div class="placeholder">${album.titre}</div>`;
+
+                const fav = album.favoris ? '<span class="badge-fav">♥</span>' : '';
+
+                carte.innerHTML = `
+                    ${fav}
+                    ${media}
+                    <div class="nom">
+                        ${album.titre}<br>
+                        <span class="artiste">${album.artiste}</span>
+                    </div>
+                `;
+
+                carte.addEventListener('mouseenter', () => {
+                    grille.classList.add('hovering');
+                    carte.classList.add('actif');
+                });
+                carte.addEventListener('mouseleave', () => {
+                    grille.classList.remove('hovering');
+                    carte.classList.remove('actif');
+                });
+
+                carte.addEventListener('click', () => {
+                    window.location.href = `albums/${toSlug(album.titre)}.html`;
+                });
+
+                grille.appendChild(carte);
+            });
+        })
+        .catch(() => {
+            document.getElementById('grille').textContent = 'impossible de charger les albums.';
+        });
+}
+
+/* === FEED DEPECHES (depeches.html) === */
+function chargerDepeches() {
+    fetch('/api/depeches')
+        .then(r => r.json())
+        .then(depeches => {
+            const feed = document.getElementById('feed');
+            feed.innerHTML = '';
+
+            if (depeches.length === 0) {
+                feed.innerHTML = '<p class="chargement">aucune dépêche pour l\'instant.</p>';
+                return;
+            }
+
+            depeches.forEach(d => {
+                const el = document.createElement('div');
+                el.className = 'depeche';
+
+                const img = d.image
+                    ? `<img src="${d.image}" class="depeche-image" alt="">`
+                    : '';
+
+                el.innerHTML = `
+                    <div class="depeche-date">ewen - ${d.date}</div>
+                    <div class="depeche-texte">${d.texte}</div>
+                    ${img}
+                `;
+
+                feed.appendChild(el);
+            });
+        })
+        .catch(() => {
+            document.getElementById('feed').innerHTML =
+                '<p class="chargement">impossible de charger les dépêches.</p>';
+        });
+}
+
+/* === INIT === */
+document.addEventListener('DOMContentLoaded', () => {
+    animerTitreNav();
+
+    if (document.querySelector('.now')) {
+        afficherNow();
+    }
+
+    if (document.getElementById('grille')) {
+        chargerAlbums();
+    }
+
+    if (document.getElementById('feed')) {
+        chargerDepeches();
+    }
+});
diff --git a/assets/styles.css b/assets/styles.css
new file mode 100644
index 0000000..284d312
--- /dev/null
+++ b/assets/styles.css
@@ -0,0 +1,347 @@
+/* === BASE === */
+body {
+    font-family: 'IM Fell English', serif;
+    font-size: 20px;
+}
+
+/* === ANIMATIONS === */
+@keyframes colorshift {
+    0%   { color: hsl(0,   60%, 70%); }
+    25%  { color: hsl(90,  60%, 70%); }
+    50%  { color: hsl(180, 60%, 70%); }
+    75%  { color: hsl(270, 60%, 70%); }
+    100% { color: hsl(360, 60%, 70%); }
+}
+
+@keyframes levite {
+    0%   { transform: translateY(0px); }
+    50%  { transform: translateY(-5px); }
+    100% { transform: translateY(0px); }
+}
+
+/* === LAYOUT === */
+.fenetre {
+    max-width: 600px;
+    border: 1px solid black;
+    padding: 0.3rem 1.5rem 0 1.5rem;
+    padding-bottom: 0;
+    margin-top: 0px;
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: start;
+    gap: 1rem;
+    overflow-wrap: break-word;
+}
+
+.fenetre--large { max-width: 950px; }
+.fenetre--medium { max-width: 900px; }
+.fenetre--small { max-width: 550px; }
+
+.fenetre-nom {
+    margin-bottom: 1px;
+    margin-left: 2px;
+}
+
+.fenetre-contenu {
+    padding: 0 1rem 1.5rem 1rem;
+    min-width: 0;
+}
+
+/* === NAVIGATION === */
+.retour {
+    font-family: 'IM Fell English', serif;
+    font-size: 20px;
+    color: inherit;
+    display: inline-block;
+    margin-bottom: 1px;
+    margin-right: 0.4rem;
+    text-decoration: none;
+}
+
+.retour:hover {
+    text-decoration: underline;
+}
+
+/* === COMPONENTS === */
+.now {
+    font-size: 0.75rem;
+    font-style: italic;
+    color: #555;
+    padding-top: 0.6rem;
+    margin-top: 0.8rem;
+    line-height: 1.6;
+    text-align: right;
+}
+
+.index-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    max-width: 550px;
+}
+
+.index-header .now {
+    margin-right: -3rem;
+}
+
+.now-titre {
+    font-style: normal;
+    color: #999;
+    font-size: 0.7rem;
+    display: block;
+    margin-bottom: 0.2rem;
+}
+
+.soustitre {
+    font-size: medium;
+    font-style: italic;
+    color: grey;
+}
+
+.thanks {
+    width: 450px;
+}
+
+/* === REVIEWS: GRILLE === */
+.grille {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.carte {
+    width: 150px;
+    cursor: pointer;
+    transition: transform 0.2s ease, opacity 0.25s ease;
+    position: relative;
+}
+
+.carte img {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    display: block;
+    border: 1px solid #111;
+}
+
+.carte .placeholder {
+    width: 150px;
+    height: 150px;
+    background: #eee;
+    border: 1px solid #111;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-style: italic;
+    color: #999;
+    font-size: 0.8rem;
+    text-align: center;
+    padding: 0.5rem;
+}
+
+.carte .nom {
+    margin-top: 0.3rem;
+    font-size: 0.8rem;
+    line-height: 1.3;
+}
+
+.carte .nom .artiste {
+    font-style: italic;
+    color: #555;
+}
+
+.grille.hovering .carte {
+    opacity: 0.15;
+}
+
+.grille.hovering .carte.actif {
+    opacity: 1;
+    transform: scale(1.07);
+    z-index: 10;
+}
+
+.badge-fav {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    font-size: 0.7rem;
+    background: #fff;
+    border: 1px solid #111;
+    padding: 1px 4px;
+    pointer-events: none;
+}
+
+/* === REVIEWS: ALBUM PAGE === */
+.col-cover {
+    position: sticky;
+    top: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+    padding-top: 1rem;
+    padding-bottom: 1.5rem;
+}
+
+.cover {
+    height: 280px;
+    width: auto;
+    display: block;
+    border: 1px solid #111;
+    margin-top: 1rem;
+}
+
+.cover-legende {
+    font-size: 0.75rem;
+    font-style: italic;
+    color: #888;
+    text-align: center;
+}
+
+.meta-ligne {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 0.8rem;
+    font-size: 0.85rem;
+    color: #555;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 0.6rem;
+    margin-bottom: 1.2rem;
+}
+
+.note {
+    color: #111;
+    font-size: 1rem;
+}
+
+.genre-tag {
+    border: 1px solid #bbb;
+    padding: 1px 5px;
+    font-style: italic;
+}
+
+.review p {
+    margin-bottom: 1rem;
+    line-height: 1.5;
+}
+
+.review p:last-child {
+    margin-bottom: 0;
+}
+
+.nav-albums {
+    margin-top: 1.2rem;
+    padding-top: 0.6rem;
+    border-top: 1px solid #ddd;
+    display: flex;
+    gap: 1.5rem;
+    font-size: 0.9rem;
+}
+
+.nav-albums a:hover {
+    border-bottom-style: dashed;
+}
+
+/* === DEPECHES: FEED === */
+.feed {
+    margin-top: 1.2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.depeche {
+    border-top: 1px solid #ddd;
+    padding: 1rem 0;
+}
+
+.depeche:last-child {
+    border-bottom: 1px solid #ddd;
+}
+
+.depeche-date {
+    font-size: 0.75rem;
+    font-style: italic;
+    color: #999;
+    margin-bottom: 0.4rem;
+}
+
+.depeche-texte {
+    line-height: 1.6;
+    color: #111;
+}
+
+.depeche-image {
+    margin-top: 0.8rem;
+    max-height: 400px;
+    max-width: 100%;
+    width: auto;
+    border: 1px solid #ddd;
+    display: block;
+}
+
+.chargement {
+    font-style: italic;
+    color: #aaa;
+    padding: 1rem 0;
+}
+
+.rss-link {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    font-size: 1rem;
+    font-style: italic;
+    color: #aaa;
+    text-decoration: none;
+}
+
+.rss-link:hover {
+    color: #111;
+}
+
+/* === PERSO IMAGES === */
+.fenetre img.perso {
+    height: 400px;
+    width: auto;
+    display: block;
+}
+
+.fenetre img.perso--offset {
+    margin-top: 22px;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 600px) {
+    body {
+        font-size: 17px;
+    }
+
+    .fenetre {
+        grid-template-columns: 1fr;
+    }
+
+    .fenetre img.perso,
+    .fenetre img.cover,
+    .thanks {
+        width: 100%;
+        height: auto;
+    }
+
+    .col-cover {
+        position: static;
+        padding-top: 0;
+    }
+
+    .index-header {
+        flex-direction: column;
+        gap: 0.3rem;
+    }
+
+    .now {
+        text-align: left;
+    }
+}
diff --git a/blog/entries/index.html b/blog/entries/index.html
index bcdf682..cc2358a 100644
--- a/blog/entries/index.html
+++ b/blog/entries/index.html
@@ -20,69 +20,14 @@
 
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>☆</text></svg>">
 
-
-    <style>
-        body {
-            font-family: 'IM Fell English', serif;
-	    font-size: 20px;
-        }
-
-     
-    @keyframes colorshift {
-        0%   { color: hsl(0,   60%, 70%); }
-        25%  { color: hsl(90,  60%, 70%); }
-        50%  { color: hsl(180, 60%, 70%); }
-        75%  { color: hsl(270, 60%, 70%); }
-        100% { color: hsl(360, 60%, 70%); }
-    }
-
-    @keyframes levite {
-        0%   { transform: translateY(0px); }
-        50%  { transform: translateY(-5px); }
-        100% { transform: translateY(0px); }
-    }
-
-	.fenetre {
-    	    max-width: 500px;
-    	    border: 1px solid black;
-	    padding: 0.3rem 1.5rem 0 1.5rem;
-    	    padding-bottom: 0;
-   	    margin-top: 0px;
-    	    position: relative;
-    	    display: grid;
-    	    grid-template-columns: 1fr auto;
-    	    align-items: start;
-    	    gap: 1rem;
-	    overflow-wrap: break-word;
-	}
-	.fenetre-nom {
-	    margin-bottom: 1px;
-	    margin-left: 2px;
-	}
-	.fenetre-contenu {
-    	    padding: 0 1rem 1.5rem 1rem;
-	    min-width: 0;
-	}
-
-	.fenetre img {
-            height: 400px;
-            width: auto;
-           display: block;
-        }
-    
-    .soustitre {
-        font-size:medium;
-        font-style: italic;
-        color: grey;
-    }   
-    </style>
+    <link rel="stylesheet" href="../../assets/styles.css">
 </head>
 <body>
 <div>
     <a href="../../index.html">←</a>
     <span class="fenetre-nom">eweng.space &#9734;</span>
 </div>
-<div class="fenetre">
+<div class="fenetre fenetre--small">
     <div class="fenetre-contenu">
         <h1>entrées</h1>
         <details>
@@ -95,15 +40,6 @@
 </details>
     </div>
 </div>
-<script>
-    const el = document.querySelector('.fenetre-nom');
-    el.innerHTML = el.textContent.split('').map((c, i) => {
-        if (c === ' ') return ' ';
-        const delayColor = (i * 0.3).toFixed(1);
-        const delayLevite = (Math.random() * 4).toFixed(2);
-        const duree = (3 + Math.random() * 3).toFixed(2);
-        return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
-    }).join('');
-</script>
+<script src="../../assets/main.js"></script>
 </body>
 </html>
diff --git a/blog/entries/march2026/bonjour.html b/blog/entries/march2026/bonjour.html
index aca2e56..f5445cd 100644
--- a/blog/entries/march2026/bonjour.html
+++ b/blog/entries/march2026/bonjour.html
@@ -19,66 +19,14 @@
 
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>☆</text></svg>">
 
-    <style>
-        body {
-            font-family: 'IM Fell English', serif;
-	    font-size: 20px;
-        }
-
-    
-    @keyframes colorshift {
-        0%   { color: hsl(0,   60%, 70%); }
-        25%  { color: hsl(90,  60%, 70%); }
-        50%  { color: hsl(180, 60%, 70%); }
-        75%  { color: hsl(270, 60%, 70%); }
-        100% { color: hsl(360, 60%, 70%); }
-    }
-
-    @keyframes levite {
-        0%   { transform: translateY(0px); }
-        50%  { transform: translateY(-5px); }
-        100% { transform: translateY(0px); }
-    }
-    
-	.fenetre {
-    	    max-width: 500px;
-    	    border: 1px solid black;
-	    padding: 0.3rem 1.5rem 0 1.5rem;
-    	    padding-bottom: 0;
-   	    margin-top: 0px;
-    	    position: relative;
-    	    display: grid;
-    	    grid-template-columns: 1fr auto;
-    	    align-items: start;
-    	    gap: 1rem;
-	    overflow-wrap: break-word;
-	}
-	.fenetre-nom {
-	    margin-bottom: 1px;
-	    margin-left: 2px;
-	}
-	.fenetre-contenu {
-    	    padding: 0 1rem 1.5rem 1rem;
-	    min-width: 0;
-	}
-
-	.thanks {
-        width: 450px;
-    }
-
-    .soustitre {
-        font-size:medium;
-        font-style: italic;
-        color: grey;
-    }
-    </style>
+    <link rel="stylesheet" href="../../../assets/styles.css">
 </head>
 <body>
 <div>
     <a href="../index.html">←</a>
     <span class="fenetre-nom">eweng.space &#9734;</span>
 </div>
-<div class="fenetre">
+<div class="fenetre fenetre--small">
     <div class="fenetre-contenu">
         <h1>bonjour</h1>
         <p class="soustitre">21 mars - 2026</p>
@@ -91,16 +39,7 @@
         <p>bye ! &#9734</p>
         <img class="thanks" src="/assets/draws/thxforreading.png" alt="merci d'avoir lu">
     </div>
-</div> 
-<script>
-    const el = document.querySelector('.fenetre-nom');
-    el.innerHTML = el.textContent.split('').map((c, i) => {
-        if (c === ' ') return ' ';
-        const delayColor = (i * 0.3).toFixed(1);
-        const delayLevite = (Math.random() * 4).toFixed(2);
-        const duree = (3 + Math.random() * 3).toFixed(2);
-        return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
-    }).join('');
-</script>
+</div>
+<script src="../../../assets/main.js"></script>
 </body>
 </html>
diff --git a/blog/entries/march2026/multipotentiel.html b/blog/entries/march2026/multipotentiel.html
index fa0aab1..888dc60 100644
--- a/blog/entries/march2026/multipotentiel.html
+++ b/blog/entries/march2026/multipotentiel.html
@@ -19,66 +19,14 @@
 
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>☆</text></svg>">
 
-    <style>
-        body {
-            font-family: 'IM Fell English', serif;
-	    font-size: 20px;
-        }
-
-
-    @keyframes colorshift {
-        0%   { color: hsl(0,   60%, 70%); }
-        25%  { color: hsl(90,  60%, 70%); }
-        50%  { color: hsl(180, 60%, 70%); }
-        75%  { color: hsl(270, 60%, 70%); }
-        100% { color: hsl(360, 60%, 70%); }
-    }
-
-    @keyframes levite {
-        0%   { transform: translateY(0px); }
-        50%  { transform: translateY(-5px); }
-        100% { transform: translateY(0px); }
-    }
-    
-	.fenetre {
-    	    max-width: 500px;
-    	    border: 1px solid black;
-	    padding: 0.3rem 1.5rem 0 1.5rem;
-    	    padding-bottom: 0;
-   	    margin-top: 0px;
-    	    position: relative;
-    	    display: grid;
-    	    grid-template-columns: 1fr auto;
-    	    align-items: start;
-    	    gap: 1rem;
-	    overflow-wrap: break-word;
-	}
-	.fenetre-nom {
-	    margin-bottom: 1px;
-	    margin-left: 2px;
-	}
-	.fenetre-contenu {
-    	    padding: 0 1rem 1.5rem 1rem;
-	    min-width: 0;
-	}
-    
-    .thanks {
-        width: 450px;
-    }
-
-    .soustitre {
-        font-size:medium;
-        font-style: italic;
-        color: grey;
-    }
-    </style>
+    <link rel="stylesheet" href="../../../assets/styles.css">
 </head>
 <body>
 <div>
     <a href="../index.html">←</a>
     <span class="fenetre-nom">eweng.space &#9734;</span>
 </div>
-<div class="fenetre">
+<div class="fenetre fenetre--small">
     <div class="fenetre-contenu">
         <h1>multipotentiel</h1>
         <p class="soustitre">25 mars - 2026</p>
@@ -99,15 +47,6 @@
         <img class="thanks" src="/assets/draws/thxforreading.png" alt="merci d'avoir lu">
     </div>
 </div>
-<script>
-    const el = document.querySelector('.fenetre-nom');
-    el.innerHTML = el.textContent.split('').map((c, i) => {
-        if (c === ' ') return ' ';
-        const delayColor = (i * 0.3).toFixed(1);
-        const delayLevite = (Math.random() * 4).toFixed(2);
-        const duree = (3 + Math.random() * 3).toFixed(2);
-        return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
-    }).join('');
-</script>
+<script src="../../../assets/main.js"></script>
 </body>
 </html>
diff --git a/blog/entries/march2026/retransmettre.html b/blog/entries/march2026/retransmettre.html
index 1b723c1..c11e43b 100644
--- a/blog/entries/march2026/retransmettre.html
+++ b/blog/entries/march2026/retransmettre.html
@@ -19,67 +19,14 @@
 
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>☆</text></svg>">
 
-
-    <style>
-        body {
-            font-family: 'IM Fell English', serif;
-	    font-size: 20px;
-        }
-
-    @keyframes colorshift {
-        0%   { color: hsl(0,   60%, 70%); }
-        25%  { color: hsl(90,  60%, 70%); }
-        50%  { color: hsl(180, 60%, 70%); }
-        75%  { color: hsl(270, 60%, 70%); }
-        100% { color: hsl(360, 60%, 70%); }
-    }
-
-    @keyframes levite {
-        0%   { transform: translateY(0px); }
-        50%  { transform: translateY(-5px); }
-        100% { transform: translateY(0px); }
-    }
-    
-
-	.fenetre {
-    	    max-width: 500px;
-    	    border: 1px solid black;
-	    padding: 0.3rem 1.5rem 0 1.5rem;
-    	    padding-bottom: 0;
-   	    margin-top: 0px;
-    	    position: relative;
-    	    display: grid;
-    	    grid-template-columns: 1fr auto;
-    	    align-items: start;
-    	    gap: 1rem;
-	    overflow-wrap: break-word;
-	}
-	.fenetre-nom {
-	    margin-bottom: 1px;
-	    margin-left: 2px;
-	}
-	.fenetre-contenu {
-    	    padding: 0 1rem 1.5rem 1rem;
-	    min-width: 0;
-	}
-    
-    .thanks {
-        width: 450px;
-    }
-
-    .soustitre {
-        font-size:medium;
-        font-style: italic;
-        color: grey;
-    }
-    </style>
+    <link rel="stylesheet" href="../../../assets/styles.css">
 </head>
 <body>
 <div>
     <a href="../index.html">←</a>
     <span class="fenetre-nom">eweng.space &#9734;</span>
 </div>
-<div class="fenetre">
+<div class="fenetre fenetre--small">
     <div class="fenetre-contenu">
         <h1>retransmettre</h1>
         <p class="soustitre">30 mars - 2026</p>
@@ -93,15 +40,6 @@
         <img class="thanks" src="/assets/draws/thxforreading.png" alt="merci d'avoir lu">
     </div>
 </div>
-<script>
-    const el = document.querySelector('.fenetre-nom');
-    el.innerHTML = el.textContent.split('').map((c, i) => {
-        if (c === ' ') return ' ';
-        const delayColor = (i * 0.3).toFixed(1);
-        const delayLevite = (Math.random() * 4).toFixed(2);
-        const duree = (3 + Math.random() * 3).toFixed(2);
-        return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
-    }).join('');
-</script>
+<script src="../../../assets/main.js"></script>
 </body>
 </html>
diff --git a/depeches.html b/depeches.html
index 459f19f..ef2e46f 100644
--- a/depeches.html
+++ b/depeches.html
@@ -8,113 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
-    <style>
-        body {
-            font-family: 'IM Fell English', serif;
-            font-size: 20px;
-        }
-
-    @keyframes colorshift {
-        0%   { color: hsl(0,   60%, 70%); }
-        25%  { color: hsl(90,  60%, 70%); }
-        50%  { color: hsl(180, 60%, 70%); }
-        75%  { color: hsl(270, 60%, 70%); }
-        100% { color: hsl(360, 60%, 70%); }
-    }
-
-    @keyframes levite {
-        0%   { transform: translateY(0px); }
-        50%  { transform: translateY(-5px); }
-        100% { transform: translateY(0px); }
-    }
-
-        .fenetre {
-            max-width: 600px;
-            border: 1px solid black;
-            padding: 0.3rem 1.5rem 0 1.5rem;
-            padding-bottom: 0;
-            margin-top: 0px;
-            position: relative;
-            overflow-wrap: break-word;
-        }
-        .fenetre-nom {
-            margin-bottom: 1px;
-            margin-left: 2px;
-        }
-        .fenetre-contenu {
-            padding: 0 1rem 1.5rem 1rem;
-            min-width: 0;
-        }
-
-        .retour {
-            font-family: 'IM Fell English', serif;
-            font-size: 20px;
-            color: inherit;
-            display: inline-block;
-            margin-bottom: 1px;
-            margin-right: 0.4rem;
-            text-decoration: none;
-        }
-
-        /* ── feed ── */
-        .feed {
-            margin-top: 1.2rem;
-            display: flex;
-            flex-direction: column;
-            gap: 0;
-        }
-
-        .depeche {
-            border-top: 1px solid #ddd;
-            padding: 1rem 0;
-        }
-        .depeche:last-child {
-            border-bottom: 1px solid #ddd;
-        }
-
-        .depeche-date {
-            font-size: 0.75rem;
-            font-style: italic;
-            color: #999;
-            margin-bottom: 0.4rem;
-        }
-
-        .depeche-texte {
-            line-height: 1.6;
-            color: #111;
-        }
-
-        .depeche-image {
-            margin-top: 0.8rem;
-	        max-height: 400px;
-            max-width: 100%;
-	        width: auto;
-            border: 1px solid #ddd;
-            display: block;
-        }
-
-        .chargement {
-            font-style: italic;
-            color: #aaa;
-            padding: 1rem 0;
-        }
-
-        .rss-link {
-            position: absolute;
-            top: 0.5rem;
-            right: 0.5rem;
-            font-size: 1rem;
-            font-style: italic;
-            color: #aaa;
-            text-decoration: none;
-        }
-
-        .rss-link:hover { color: #111; }
-
-        @media (max-width: 600px) {
-            body { font-size: 17px; }
-        }
-    </style>
+    <link rel="stylesheet" href="assets/styles.css">
 </head>
 <body>
 
@@ -132,49 +26,6 @@
         </div>
     </div>
 </div>
-
-<script>
-fetch('/api/depeches')
-    .then(r => r.json())
-    .then(depeches => {
-        const feed = document.getElementById('feed');
-        feed.innerHTML = '';
-
-        if (depeches.length === 0) {
-            feed.innerHTML = '<p class="chargement">aucune dépêche pour l\'instant.</p>';
-            return;
-        }
-
-        depeches.forEach(d => {
-            const el = document.createElement('div');
-            el.className = 'depeche';
-
-            const img = d.image
-                ? `<img src="${d.image}" class="depeche-image" alt="">`
-                : '';
-
-            el.innerHTML = `
-                <div class="depeche-date">ewen - ${d.date}</div>
-                <div class="depeche-texte">${d.texte}</div>
-                ${img}
-            `;
-
-            feed.appendChild(el);
-        });
-    })
-    .catch(() => {
-        document.getElementById('feed').innerHTML =
-            '<p class="chargement">impossible de charger les dépêches.</p>';
-    });
-
-const el = document.getElementById('titre-nav');
-el.innerHTML = el.textContent.split('').map((c, i) => {
-    if (c === ' ') return ' ';
-    const delayColor = (i * 0.3).toFixed(1);
-    const delayLevite = (Math.random() * 4).toFixed(2);
-    const duree = (3 + Math.random() * 3).toFixed(2);
-    return `<span style="display:inline-block;animation:colorshift 12s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
-}).join('');
-</script>
+<script src="assets/main.js"></script>
 </body>
 </html>
diff --git a/index.html b/index.html
index 98e3a23..64919c2 100644
--- a/index.html
+++ b/index.html
@@ -17,97 +17,14 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap" rel="stylesheet">
-
-    <style>
-        body {
-            font-family: 'IM Fell English', serif;
-	    font-size: 20px;
-        }
-    @keyframes colorshift {
-        0%   { color: hsl(0,   60%, 70%); }
-        25%  { color: hsl(90,  60%, 70%); }
-        50%  { color: hsl(180, 60%, 70%); }
-        75%  { color: hsl(270, 60%, 70%); }
-        100% { color: hsl(360, 60%, 70%); }
-    }
-
-    @keyframes levite {
-        0%   { transform: translateY(0px); }
-        50%  { transform: translateY(-5px); }
-        100% { transform: translateY(0px); }
-    }
-    
-	.fenetre {
-    	    max-width: 550px;
-    	    border: 1px solid black;
-	    padding: 0.3rem 1.5rem 0 1.5rem;
-    	    padding-bottom: 0;
-   	    margin-top: 0px;
-    	    position: relative;
-    	    display: grid;
-    	    grid-template-columns: 1fr auto;
-    	    align-items: start;
-    	    gap: 1rem;
-	    overflow-wrap: break-word;
-	}
-	.fenetre-nom {
-	    margin-bottom: 1px;
-	    margin-left: 2px;
-	}
-	.fenetre-contenu {
-    	    padding: 0 1rem 1.5rem 1rem;
-	    min-width: 0;
-	}
-
-	.fenetre img.perso {
-            height: 400px;
-            width: auto;
-           display: block;
-    }
-    .now {
-        font-size: 0.75rem;
-        font-style: italic;
-        color: #555;
-        padding-top: 0.6rem;
-        margin-top: 0.8rem;
-        margin-right: -3rem;
-        line-height: 1.6;
-    }
-    .now-titre {
-        font-style: normal;
-        color: #999;
-        font-size: 0.7rem;
-        display: block;
-        margin-bottom: 0.2rem;
-    }
-
-    @media (max-width: 600px) {
-        body { font-size: 17px; }
-        .fenetre { grid-template-columns: 1fr; }
-        .fenetre img.perso { width: 100%; height: auto; }
-    }
-    
-    
-    @media (max-width: 600px) {
-    body {
-        font-size: 17px;
-    }
-    .fenetre {
-        grid-template-columns: 1fr;
-    }
-    .fenetre img.perso {
-        width: 100%;
-        height: auto;
-    }
-    }
-    </style>
+    <link rel="stylesheet" href="assets/styles.css">
 </head>
 <body>
-<div style="display:flex; align-items:baseline; justify-content:space-between; max-width:550px;">
-    <span class="fenetre-nom" id="titre-nav">eweng.space &#9734;</span>
+<div class="index-header">
+    <span class="fenetre-nom" id="titre-nav">eweng.space ☆</span>
     <span class="now">/now : faut que je fasses les courses.</span>
 </div>
-<div class="fenetre">
+<div class="fenetre fenetre--small">
     <div class="fenetre-contenu">
         <p>bienvenue sur mon blog personnel, j'y    artage mes états d'âme, mes pensées, mes musiques, mon art préféré, mes sentiments... bonne visite!</p>
         <ul>
@@ -124,41 +41,6 @@
     </div>
     <img src="assets/draws/ewen.png" class="perso" alt="">
 </div>
-<script>
-    const el = document.querySelector('.fenetre-nom');
-    el.innerHTML = el.textContent.split('').map((c, i) => {
-        if (c === ' ') return ' ';
-        const delayColor = (i * 0.3).toFixed(1);
-        const delayLevite = (Math.random() * 4).toFixed(2);
-        const duree = (3 + Math.random() * 3).toFixed(2);
-        return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
-    }).join('');
-
-    const phrasesNow = [
-        "/now : faut que je fasses les courses.",
-        "/now : les arbres vibrent !",
-        "/now : les mains, les jambes, avancent..",
-        "/now : lave toi le visage.",
-        "/now : il pleut, et c'est très bien comme ça.",
-        "/now : pas mal la page d'accueil !",
-        "/now : i love my computer",
-        "/now : demain je serais en cours, j'espère",
-        "/now : je resterais auprès de toi pour toujours",
-        "/now : je serais toi j'irais prendre l'air",
-        "/now : je dois vraiment aller dormir la"
-    ];
-
-    // On cible le span qui a la classe "now"
-    const spanNow = document.querySelector('.now');
-
-    // On s'assure que le span existe bien sur la page
-    if (spanNow) {
-        // On choisit une phrase au hasard
-        const indexAleatoire = Math.floor(Math.random() * phrasesNow.length);
-        
-        // On remplace le texte du span
-        spanNow.textContent = phrasesNow[indexAleatoire];
-    }
-</script>
+<script src="assets/main.js"></script>
 </body>
 </html>
diff --git a/qui.html b/qui.html
index d41dff6..7882179 100644
--- a/qui.html
+++ b/qui.html
@@ -17,63 +17,14 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap" rel="stylesheet">
-
-    <style>
-        body {
-            font-family: 'IM Fell English', serif;
-	    font-size: 20px;
-        }
-    
-    @keyframes colorshift {
-        0%   { color: hsl(0,   60%, 70%); }
-        25%  { color: hsl(90,  60%, 70%); }
-        50%  { color: hsl(180, 60%, 70%); }
-        75%  { color: hsl(270, 60%, 70%); }
-        100% { color: hsl(360, 60%, 70%); }
-    }
-
-    @keyframes levite {
-        0%   { transform: translateY(0px); }
-        50%  { transform: translateY(-5px); }
-        100% { transform: translateY(0px); }
-    }
-
-	.fenetre {
-    	    max-width: 950px;
-    	    border: 1px solid black;
-	    padding: 0.3rem 1.5rem 0 1.5rem;
-    	    padding-bottom: 0;
-   	    margin-top: 0px;
-    	    position: relative;
-    	    display: grid;
-    	    grid-template-columns: 1fr auto;
-    	    align-items: start;
-    	    gap: 1rem;
-	    overflow-wrap: break-word;
-	}
-	.fenetre-nom {
-	    margin-bottom: 1px;
-	    margin-left: 2px;
-	}
-	.fenetre-contenu {
-    	    padding: 0 1rem 1.5rem 1rem;
-	    min-width: 0;
-	}
-
-	.fenetre img.perso {
-            height: 400px;
-            margin-top: 22px;
-            width: auto;
-           display: block;
-        }
-    </style>
+    <link rel="stylesheet" href="assets/styles.css">
 </head>
 <body>
 <div>
     <a href="../../index.html">←</a>
     <span class="fenetre-nom">eweng.space &#9734;</span>
 </div>
-<div class="fenetre">
+<div class="fenetre fenetre--large">
     <div class="fenetre-contenu">
         <h1>qui suis-je</h1>
         <p>salut! si vous êtes sur ce site, c'est soit que vous me connaissez et que par la force des choses vous êtes tombés sur ce site à cause de moi et de mon larping, soit que vous êtes un complet inconnu et que vous ne me connaissez pas et inversement.</p>
@@ -99,21 +50,12 @@
         <p>enfin bref, voilà c'est à peu près tout, oui c'est un peu vague mais ça suffiras je pense, merci d'avoir lu et bonne visite du site !</p>
     </div>
     <figure style="margin: 0; text-align: center;">
-    <img src="assets/draws/rpg.png" class="perso" alt="">
+    <img src="assets/draws/rpg.png" class="perso perso--offset" alt="">
     <figcaption style="font-size: 0.75em; color: #555; margin-top: 0.3rem; font-style: italic;">
         moi en perso rpg que j'ai dessiné, basé sur <br>l'UI de <a href="https://iro.ragnarokonline.com/">Ragnarok Online</a>
     </figcaption>
 </figure>
 </div>
-<script>
-    const el = document.querySelector('.fenetre-nom');
-    el.innerHTML = el.textContent.split('').map((c, i) => {
-        if (c === ' ') return ' ';
-        const delayColor = (i * 0.3).toFixed(1);
-        const delayLevite = (Math.random() * 4).toFixed(2);
-        const duree = (3 + Math.random() * 3).toFixed(2);
-        return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
-    }).join('');
-</script>
+<script src="assets/main.js"></script>
 </body>
 </html>
diff --git a/reviews/albums/az.html b/reviews/albums/az.html
index 603c988..ac7e5fe 100644
--- a/reviews/albums/az.html
+++ b/reviews/albums/az.html
@@ -8,145 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
-    <style>
-        body {
-            font-family: 'IM Fell English', serif;
-            font-size: 20px;
-        }
-        
-        @keyframes colorshift {
-            0%   { color: hsl(0,   60%, 70%); }
-            25%  { color: hsl(90,  60%, 70%); }
-            50%  { color: hsl(180, 60%, 70%); }
-            75%  { color: hsl(270, 60%, 70%); }
-            100% { color: hsl(360, 60%, 70%); }
-        }
-
-        @keyframes levite {
-            0%   { transform: translateY(0px); }
-            50%  { transform: translateY(-5px); }
-            100% { transform: translateY(0px); }
-        }
-
-        .fenetre {
-            max-width: 900px;
-            border: 1px solid black;
-            padding: 0.3rem 1.5rem 0 1.5rem;
-            padding-bottom: 0;
-            margin-top: 0px;
-            position: relative;
-            display: grid;
-            grid-template-columns: 1fr auto;
-            align-items: start;
-            gap: 1rem;
-            overflow-wrap: break-word;
-        }
-        .fenetre-nom {
-            margin-bottom: 1px;
-            margin-left: 2px;
-        }
-        .fenetre-contenu {
-            padding: 0 1rem 1.5rem 1rem;
-            min-width: 0;
-        }
-
-        /* ── nav retour ── */
-        .retour {
-            font-family: 'IM Fell English', serif;
-            font-size: 20px;
-            color: inherit;
-            display: inline-block;
-            margin-bottom: 1px;
-            margin-right: 0.4rem;
-        }
-
-        /* ── cover à droite, comme .perso ── */
-        .fenetre img.cover {
-            height: 280px;
-            width: auto;
-            display: block;
-            border: 1px solid #111;
-            margin-top: 1rem;
-        }
-        .col-cover {
-            position: sticky;
-            top: 1rem;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.4rem;
-            padding-top: 1rem;
-            padding-bottom: 1.5rem;
-        }
-        .cover-legende {
-            font-size: 0.75rem;
-            font-style: italic;
-            color: #888;
-            text-align: center;
-        }
-
-        /* ── méta ── */
-        .meta-ligne {
-            display: flex;
-            align-items: baseline;
-            flex-wrap: wrap;
-            gap: 0.8rem;
-            font-size: 0.85rem;
-            color: #555;
-            border-bottom: 1px solid #ddd;
-            padding-bottom: 0.6rem;
-            margin-bottom: 1.2rem;
-        }
-        .note { color: #111; font-size: 1rem; }
-        .genre-tag {
-            border: 1px solid #bbb;
-            padding: 1px 5px;
-            font-style: italic;
-        }
-
-        /* ── review ── */
-        .review p {
-            margin-bottom: 1rem;
-            line-height: 1.5;
-        }
-        .review p:last-child { margin-bottom: 0; }
-
-        /* ── nav prev/next ── */
-        .nav-albums {
-            margin-top: 1.2rem;
-            padding-top: 0.6rem;
-            border-top: 1px solid #ddd;
-            display: flex;
-            gap: 1.5rem;
-            font-size: 0.9rem;
-        }
-
-        .nav-albums a:hover { border-bottom-style: dashed; }
-
-        .thanks {
-        width: 450px;
-        }
-
-        @media (max-width: 600px) {
-        body {
-            font-size: 17px;
-        }
-        .fenetre {
-            grid-template-columns: 1fr;
-        }
-        .col-cover {
-            position: static; /* désactive le sticky sur mobile */
-            padding-top: 0;
-        }
-        .fenetre img.cover {
-            width: 100%;
-            height: auto;
-        }
-        .thanks {
-            width: 100%;
-        }
-        }
-    </style>
+    <link rel="stylesheet" href="../../assets/styles.css">
 </head>
 <body>
 
@@ -154,7 +16,7 @@
     <a href="../index.html" class="retour">←</a><span class="fenetre-nom" id="titre-nav">eweng.space &#9734;</span>
 </div>
 
-<div class="fenetre">
+<div class="fenetre fenetre--medium">
     <div class="fenetre-contenu">
 
         <h1>AZ</h1>
@@ -204,16 +66,6 @@
         </figure>
     </div>
 </div>
-
-<script>
-    const el = document.querySelector('.fenetre-nom');
-    el.innerHTML = el.textContent.split('').map((c, i) => {
-        if (c === ' ') return ' ';
-        const delayColor = (i * 0.3).toFixed(1);
-        const delayLevite = (Math.random() * 4).toFixed(2);
-        const duree = (3 + Math.random() * 3).toFixed(2);
-        return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
-    }).join('');
-</script>
+<script src="../../assets/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/reviews/index.html b/reviews/index.html
index 1d16672..75a8140 100644
--- a/reviews/index.html
+++ b/reviews/index.html
@@ -8,122 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
-    <style>
-        body {
-            font-family: 'IM Fell English', serif;
-            font-size: 20px;
-        }
-
-        @keyframes colorshift {
-            0%   { color: hsl(0,   60%, 70%); }
-            25%  { color: hsl(90,  60%, 70%); }
-            50%  { color: hsl(180, 60%, 70%); }
-            75%  { color: hsl(270, 60%, 70%); }
-            100% { color: hsl(360, 60%, 70%); }
-        }
-
-        @keyframes levite {
-            0%   { transform: translateY(0px); }
-            50%  { transform: translateY(-5px); }
-            100% { transform: translateY(0px); }
-        }
-
-        .fenetre {
-            max-width: 600px;
-            border: 1px solid black;
-            padding: 0.3rem 1.5rem 0 1.5rem;
-            padding-bottom: 0;
-            margin-top: 0px;
-            position: relative;
-            overflow-wrap: break-word;
-        }
-        .fenetre-nom {
-            margin-bottom: 1px;
-            margin-left: 2px;
-        }
-        .fenetre-contenu {
-            padding: 0 1rem 1.5rem 1rem;
-            min-width: 0;
-        }
-
-        .retour {
-            font-family: 'IM Fell English', serif;
-            font-size: 20px;
-            text-decoration: none;
-            color: inherit;
-            display: inline-block;
-            margin-bottom: 1px;
-            margin-right: 0.4rem;
-        }
-        .retour:hover { text-decoration: underline; }
-
-        /* ── grille de covers ── */
-        .grille {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 1rem;
-            margin-top: 1rem;
-        }
-
-        .carte {
-            width: 150px;
-            cursor: pointer;
-            transition: transform 0.2s ease, opacity 0.25s ease;
-            position: relative;
-        }
-
-        .carte img {
-            width: 150px;
-            height: 150px;
-            object-fit: cover;
-            display: block;
-            border: 1px solid #111;
-        }
-
-        .carte .placeholder {
-            width: 150px;
-            height: 150px;
-            background: #eee;
-            border: 1px solid #111;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-style: italic;
-            color: #999;
-            font-size: 0.8rem;
-            text-align: center;
-            padding: 0.5rem;
-        }
-
-        .carte .nom {
-            margin-top: 0.3rem;
-            font-size: 0.8rem;
-            line-height: 1.3;
-        }
-        .carte .nom .artiste {
-            font-style: italic;
-            color: #555;
-        }
-
-        /* hover : assombrir les autres */
-        .grille.hovering .carte { opacity: 0.15; }
-        .grille.hovering .carte.actif {
-            opacity: 1;
-            transform: scale(1.07);
-            z-index: 10;
-        }
-
-        .badge-fav {
-            position: absolute;
-            top: 4px;
-            right: 4px;
-            font-size: 0.7rem;
-            background: #fff;
-            border: 1px solid #111;
-            padding: 1px 4px;
-            pointer-events: none;
-        }
-    </style>
+    <link rel="stylesheet" href="../assets/styles.css">
 </head>
 <body>
 
@@ -139,68 +24,6 @@
         <div class="grille" id="grille"></div>
     </div>
 </div>
-
-<script>
-function toSlug(titre) {
-    return titre
-        .toLowerCase()
-        .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
-        .replace(/\s+/g, '-')
-        .replace(/[^a-z0-9-]/g, '');
-}
-
-fetch('data/albums.json')
-    .then(r => r.json())
-    .then(albums => {
-        const grille = document.getElementById('grille');
-
-        albums.forEach(album => {
-            const carte = document.createElement('div');
-            carte.className = 'carte';
-
-            const media = album.cover
-                ? `<img src="${album.cover}" alt="${album.titre}" onerror="this.outerHTML='<div class=\\'placeholder\\'>${album.titre}</div>'">`
-                : `<div class="placeholder">${album.titre}</div>`;
-
-            const fav = album.favoris ? '<span class="badge-fav">♥</span>' : '';
-
-            carte.innerHTML = `
-                ${fav}
-                ${media}
-                <div class="nom">
-                    ${album.titre}<br>
-                    <span class="artiste">${album.artiste}</span>
-                </div>
-            `;
-
-            carte.addEventListener('mouseenter', () => {
-                grille.classList.add('hovering');
-                carte.classList.add('actif');
-            });
-            carte.addEventListener('mouseleave', () => {
-                grille.classList.remove('hovering');
-                carte.classList.remove('actif');
-            });
-
-            carte.addEventListener('click', () => {
-                window.location.href = `albums/${toSlug(album.titre)}.html`;
-            });
-
-            grille.appendChild(carte);
-        });
-    })
-    .catch(() => {
-        document.getElementById('grille').textContent = 'impossible de charger les albums.';
-    });
-
-const el = document.getElementById('titre-nav');
-el.innerHTML = el.textContent.split('').map((c, i) => {
-    if (c === ' ') return ' ';
-    const delayColor = (i * 0.3).toFixed(1);
-    const delayLevite = (Math.random() * 4).toFixed(2);
-    const duree = (3 + Math.random() * 3).toFixed(2);
-    return `<span style="display:inline-block;animation:colorshift 12s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
-}).join('');
-</script>
+<script src="../assets/main.js"></script>
 </body>
 </html>
\ No newline at end of file