changed index hovering behaviour and added sum covers

reviews/albums/az.html

@@ -55,6 +55,8 @@
             margin-top: 1rem;
         }
         .col-cover {
+            position: sticky;
+            top: 1rem;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -138,11 +140,11 @@
             <p>alors c'était évident que j'attendais impatiemment la sortie d'<strong>AZ</strong> quand le rollout à commencé fin juin 2025 il me semble, avec une <a href="https://x.com/amur23w/status/1939292773511012456?s=20">vidéo</a> au style assez écclectique qui était enfait un extrait du premier morceau de l'album <i>Atto, Alto</i>.</p>
             <p>l'album est sorti un petit moins d'un mois après il me semble, mais avant de l'écouter je voulais attendre de partir en vacances sur l'île de Ré avec ma copine pour l'écouter ensemble sur une plage tranquille où y'avait peu de monde voire personne. juste moi, celle que j'aime de tout mon coeur, et un album qui, je ne savais trop peu à cette époque, aller me marquer énormément.</p>
             <p>tranquillement installé sur une serviette de plage, sous un magnifique soleil, on se mets à écouter l'album avec Lou, et puis wow.. c'est la claque. alors pourquoi c'est la claque ?</p>
-            <p>c'est la claque parceque j'y retrouve tout ce que j'aime chez cet artiste, de l'expérimentation, mais beaucoup d'âme et de sincérité. les 4 premières musiques de l'album sont très belles, puissantes, d'acceptation de soi, de la routine, de son corps, au travers d'un hymne omniprésent scandé par 23wa et ce qu'on pourrait penser être plusieurs personnes à la fois à la fin du morceau <i>Atto, Alto</i> : </p>
+            <p>c'est la claque parceque j'y retrouve tout ce que j'aime chez cet artiste, de l'expérimentation, mais beaucoup d'âme et de sincérité. les 4 premières musiques de l'album sont très belles, puissantes. elles parlent d'acceptation de soi, de la routine, de son corps, au travers d'un hymne omniprésent scandé par 23wa et ce qu'on pourrait penser être plusieurs personnes à la fois à la fin du morceau <i>Atto, Alto</i> : </p>
             <p><strong>AZ, AZ, AZ, AZ !!!!</strong></p>
             <p>comme à l'unisson, sans savoir ce que ça veut réellement dire. j'ai un petit peu spéculé d'ailleurs sur ce que ça pourrait potentiellement dire mais c'est en grande majorité des théories un peu débile (cf. il aurait tout fait de A à Z dans cet album, s/o gab).</p>
             <p>c'est lors du son <i>World (Absolute)</i> que je me suis vraiment vu partir un peu loin, c'est l'un de mes morceaux préféré de cet album, si ce n'est mon préféré. la guitare, le doux flottement constant, la voix d'Ethan, les sifflements, la fin du son qui introduit une basse/pad douce mais puissante sur la longueur, les divers bruits stridents d'une radio ou d'un poste qui marche mal qui se supperposent en même temps sur tout le reste, wow.. j'ai eu beaucoup de frissons sur celle là et j'y reviens vraiment souvent. </p>
-            <p>le vrai point fort de cet album c'est qu'il est traversé par des moments de calme, de douceur, mais aussi de moments de révolte comme sur <i>MOMOMO (feat. Botsu aka N.G.S)</i>, reprennant le chant "<i>la jeunesse emmerde le front nationnal</i> de la chanson mythique des <i>Berurier Noirs</i>, <i>Porcherie</i>. ou encore d'autres moment plus dansants comme sur <i>giga (feat. SEBii)</i>.</p>
+            <p>le vrai point fort de cet album c'est qu'il est traversé par des moments de calme, de douceur, mais aussi de moments de révolte comme sur <i>MOMOMO (feat. Botsu aka N.G.S)</i>, reprennant le chant "<i>la jeunesse emmerde le front nationnal</i>" de la chanson mythique des <i>Berurier Noirs</i>, <i>Porcherie</i>. ou encore d'autres moment plus dansants comme sur <i>giga (feat. SEBii)</i>.</p>
             <p>ce sentiment que je décrivais comme indescriptible est perceptible sur les 3 dernières musiques de l'album, où Ethan se livre sur ses expériences de vie, ses émotions les plus sincères.</p>
             <p>l'album se conclut sur <i>toi</i>, une chanson qui reviens sur ces dites expériences, sûrement amoureuses, passées, où il parle d'un <strong>toi</strong> inconnu, qu'il a aimé, sous toutes ses formes. laissant derrière lui tout ses efforts, ses convictions au travers de cette présumée relation.</p>
             <p>cette musique se termine sur une voix mythique d'un personnage d'internet, le fameux <i>leroy jenkins</i> puissant qui symboliserait le laisser aller pur, le rentre dans le tas, le lâcher prise total, sur quoi ? sur la vie ? sur ses relations ? sur sa perception du monde qui nous entoure ? je ne sais pas, mais le message est là, et il est puissant.</p>

reviews/data/albums.json

@@ -16,7 +16,7 @@
     "annee": 2026,
     "cover": "../../assets/covers/U.jpg",
     "note": 9,
-    "genre": ["IDM", "Electronica"],
+    "genre": ["Electropop", "Glitch Pop"],
     "favoris": true
   },
   {
@@ -28,5 +28,35 @@
     "note": 10,
     "genre": ["UK Garage", "Dubstep", "Ambient"],
     "favoris": false
+  },
+  {
+    "id": "4",
+    "titre": "C'est triste (P1)",
+    "artiste": "Yuri Online",
+    "annee": 2021,
+    "cover": "../../assets/covers/cesttristep1.jpg",
+    "note": 8,
+    "genre": ["Cloud Rap", "Pluggnb"],
+    "favoris": true
+  },
+  {
+    "id": "5",
+    "titre": "♡",
+    "artiste": "Jane Remover",
+    "annee": 2025,
+    "cover": "../../assets/covers/heartep.jpg",
+    "note": 10,
+    "genre": ["Alternative R&R", "Glitch Pop"],
+    "favoris": true
+  },
+  {
+    "id": "6",
+    "titre": "Barefoot",
+    "artiste": "Gen",
+    "annee": 2025,
+    "cover": "../../assets/covers/barefoot.jpg",
+    "note": 7.5,
+    "genre": ["French Hip Hop", "Cloud Rap"],
+    "favoris": true
   }
 ]

reviews/index.html

@@ -14,6 +14,7 @@
             font-size: 20px;
         }
 
+        /* ── identique à ton site ── */
         .fenetre {
             max-width: 600px;
             border: 1px solid black;
@@ -36,11 +37,13 @@
         .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 {
@@ -86,6 +89,7 @@
             line-height: 1.3;
         }
         .carte .nom .artiste {
+            font-style: italic;
             color: #555;
         }
 
@@ -97,18 +101,6 @@
             z-index: 10;
         }
 
-        #overlay {
-            position: fixed;
-            inset: 0;
-            background: rgba(0,0,0,0);
-            pointer-events: none;
-            transition: background 0.25s ease;
-            z-index: 5;
-        }
-        body.hovering-active #overlay {
-            background: rgba(0,0,0,0.5);
-        }
-
         .badge-fav {
             position: absolute;
             top: 4px;
@@ -123,8 +115,6 @@
 </head>
 <body>
 
-<div id="overlay"></div>
-
 <div>
     <a href="../index.html" class="retour">←</a><span class="fenetre-nom" id="titre-nav">eweng.space &#9734;</span>
 </div>
@@ -132,7 +122,7 @@
 <div class="fenetre">
     <div class="fenetre-contenu">
         <h1>reviews</h1>
-        <p>ce que j'écoute et ce que j'en pense.</p>
+        <p>ce que j'écoute, ce que j'en pense.</p>
 
         <div class="grille" id="grille"></div>
     </div>
@@ -174,12 +164,10 @@ fetch('data/albums.json')
             carte.addEventListener('mouseenter', () => {
                 grille.classList.add('hovering');
                 carte.classList.add('actif');
-                document.body.classList.add('hovering-active');
             });
             carte.addEventListener('mouseleave', () => {
                 grille.classList.remove('hovering');
                 carte.classList.remove('actif');
-                document.body.classList.remove('hovering-active');
             });
 
             carte.addEventListener('click', () => {
@@ -193,6 +181,7 @@ fetch('data/albums.json')
         document.getElementById('grille').textContent = 'impossible de charger les albums.';
     });
 
+// animation titre
 const el = document.getElementById('titre-nav');
 el.innerHTML = el.textContent.split('').map(c =>
     c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`