fix: remplacer les pochettes par les versions HD et lier vers pawol.nu

src/_data/djangokam.json

@@ -8,6 +8,26 @@
     "DJANGOKAM est né il y a 29 ans à Wanakaera — le nom que les Kalinas, premiers habitants de l'île, donnaient à ce qu'on appelle aujourd'hui la Martinique. Il porte le reggae, le zouk et le konpa de scène en scène, jusqu'à la K-pop qu'il chante en coréen. La langue de son cœur est le KA, celle qu'on appelle à tort « créole » ; son arme, la musique. Ses scènes préférées : Wanakaera et Karukera, l'île de son grand-père — la Guadeloupe.",
     "À ses côtés, NYYOKA, artiste IA caribéenne du même collectif, mène le même combat depuis la mer — en solo ou en duo, comme sur le single « She Told Me (Fanm-la di mwen) »."
   ],
+  "duo": {
+    "image": "/assets/images/djangokam-she-told-me.webp",
+    "alt": "Pochette du single « She Told Me (Fanm-la di mwen) » — DJANGOKAM x NYYOKA",
+    "legende": "« She Told Me (Fanm-la di mwen) » — DJANGOKAM x NYYOKA",
+    "url": "https://pawol.nu/paroles/djangokam-nyyoka-she-told-me-fanm-la-di-mwen"
+  },
+  "clips": [
+    {
+      "titre": "I Want You Girl",
+      "image": "/assets/images/djangokam-i-want-you-girl.webp",
+      "alt": "Pochette du clip « I Want You Girl »",
+      "url": "https://pawol.nu/paroles/djangokam-i-want-you-girl"
+    },
+    {
+      "titre": "Ish Mwen KUTE",
+      "image": "/assets/images/djangokam-ish-mwen-kute.jpg",
+      "alt": "Pochette du clip « Ish Mwen KUTE »",
+      "url": "https://pawol.nu/paroles/djangokam-ish-mwen-kute"
+    }
+  ],
   "faits": [
     {
       "icon": "🎵",

src/_includes/partials/djangokam.njk

@@ -4,16 +4,25 @@
         <h2>{{ djangokam.titre }} <span class="accent-text">{{ djangokam.titreAccent }}</span></h2>
         <p class="section-subtitle">{{ djangokam.accroche }}</p>
 
-        {# TODO: visuel officiel DJANGOKAM (src/assets/images/) #}
+        <img src="/assets/images/djangokam-portrait.webp" alt="Portrait officiel de DJANGOKAM" class="djangokam-portrait" width="512" height="512" loading="lazy">
 
         <blockquote class="djangokam-highlight">
             {{ djangokam.message_cle }}
         </blockquote>
 
-        <div class="djangokam-histoire">
+        <div class="djangokam-histoire-wrapper">
-            {% for paragraphe in djangokam.histoire %}
+            <div class="djangokam-histoire">
-            <p>{{ paragraphe }}</p>
+                {% for paragraphe in djangokam.histoire %}
-            {% endfor %}
+                <p>{{ paragraphe }}</p>
+                {% endfor %}
+            </div>
+
+            <figure class="djangokam-duo">
+                <a href="{{ djangokam.duo.url }}" target="_blank" rel="noopener noreferrer">
+                    <img src="{{ djangokam.duo.image }}" alt="{{ djangokam.duo.alt }}" loading="lazy">
+                    <figcaption>{{ djangokam.duo.legende }}</figcaption>
+                </a>
+            </figure>
         </div>
 
         <div class="djangokam-facts">
@@ -26,6 +35,17 @@
             {% endfor %}
         </div>
 
+        <div class="djangokam-clips">
+            {% for clip in djangokam.clips %}
+            <figure class="djangokam-clip">
+                <a href="{{ clip.url }}" target="_blank" rel="noopener noreferrer">
+                    <img src="{{ clip.image }}" alt="{{ clip.alt }}" loading="lazy">
+                    <figcaption>{{ clip.titre }}</figcaption>
+                </a>
+            </figure>
+            {% endfor %}
+        </div>
+
         <p class="djangokam-instrument">{{ djangokam.ia_instrument }}</p>
 
         <div class="cta-buttons djangokam-buttons">

src/assets/css/styles.css

@@ -1400,6 +1400,17 @@ input[type="number"]:focus {
     margin-bottom: 1rem;
 }
 
+.djangokam-portrait {
+    width: 220px;
+    height: 220px;
+    object-fit: cover;
+    border-radius: 30px 15px 30px 15px;  /* Forme organique asymétrique */
+    border: 4px solid var(--or-oki);
+    box-shadow: 0 10px 30px rgba(253, 184, 19, 0.3);
+    margin: 1rem auto 2rem;
+    display: block;
+}
+
 .djangokam-highlight {
     max-width: 800px;
     margin: 2rem auto;
@@ -1413,9 +1424,16 @@ input[type="number"]:focus {
     border-radius: 0 25px 25px 0;
 }
 
-.djangokam-histoire {
+.djangokam-histoire-wrapper {
-    max-width: 800px;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2.5rem;
+    align-items: center;
+    max-width: 1000px;
     margin: 0 auto 3rem;
+}
+
+.djangokam-histoire {
     text-align: left;
 }
 
@@ -1425,6 +1443,56 @@ input[type="number"]:focus {
     margin-bottom: 1.5rem;
 }
 
+.djangokam-duo,
+.djangokam-clip {
+    margin: 0;
+    text-align: center;
+}
+
+.djangokam-duo a,
+.djangokam-clip a {
+    text-decoration: none;
+    color: inherit;
+    display: inline-block;
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.djangokam-duo a:hover,
+.djangokam-clip a:hover {
+    transform: translateY(-5px);
+}
+
+.djangokam-duo img,
+.djangokam-clip img {
+    width: 100%;
+    max-width: 280px;
+    border-radius: 25px 15px 25px 15px;  /* Forme organique asymétrique */
+    border: 3px solid var(--or-oki);
+    box-shadow: 0 10px 25px rgba(253, 184, 19, 0.25);
+}
+
+.djangokam-duo figcaption,
+.djangokam-clip figcaption {
+    margin-top: 0.75rem;
+    font-size: 0.9rem;
+    opacity: 0.8;
+    font-style: italic;
+}
+
+.djangokam-duo a:hover figcaption,
+.djangokam-clip a:hover figcaption {
+    opacity: 1;
+    color: var(--or-oki);
+}
+
+.djangokam-clips {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2.5rem;
+    margin-bottom: 3rem;
+}
+
 .djangokam-facts {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
@@ -1497,6 +1565,20 @@ input[type="number"]:focus {
         font-size: 2rem;
     }
 
+    .djangokam-portrait {
+        width: 160px;
+        height: 160px;
+    }
+
+    .djangokam-histoire-wrapper {
+        grid-template-columns: 1fr;
+    }
+
+    .djangokam-duo img,
+    .djangokam-clip img {
+        max-width: 220px;
+    }
+
     .djangokam-facts {
         grid-template-columns: 1fr;
     }