src/_data/djangokam.json

@@ -8,6 +8,23 @@
     "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"
+  },
+  "clips": [
+    {
+      "titre": "I Want You Girl",
+      "image": "/assets/images/djangokam-i-want-you-girl.png",
+      "alt": "Pochette du clip « I Want You Girl »"
+    },
+    {
+      "titre": "Ish Mwen KUTE",
+      "image": "/assets/images/djangokam-ish-mwen-kute.jpg",
+      "alt": "Pochette du clip « Ish Mwen KUTE »"
+    }
+  ],
   "faits": [
     {
       "icon": "🎵",

src/_includes/partials/djangokam.njk

@@ -10,12 +10,19 @@
             {{ djangokam.message_cle }}
         </blockquote>
 
+        <div class="djangokam-histoire-wrapper">
             <div class="djangokam-histoire">
                 {% for paragraphe in djangokam.histoire %}
                 <p>{{ paragraphe }}</p>
                 {% endfor %}
             </div>
 
+            <figure class="djangokam-duo">
+                <img src="{{ djangokam.duo.image }}" alt="{{ djangokam.duo.alt }}" loading="lazy">
+                <figcaption>{{ djangokam.duo.legende }}</figcaption>
+            </figure>
+        </div>
+
         <div class="djangokam-facts">
             {% for fait in djangokam.faits %}
             <div class="djangokam-fact-card">
@@ -26,6 +33,15 @@
             {% endfor %}
         </div>
 
+        <div class="djangokam-clips">
+            {% for clip in djangokam.clips %}
+            <figure class="djangokam-clip">
+                <img src="{{ clip.image }}" alt="{{ clip.alt }}" loading="lazy">
+                <figcaption>{{ clip.titre }}</figcaption>
+            </figure>
+            {% endfor %}
+        </div>
+
         <p class="djangokam-instrument">{{ djangokam.ia_instrument }}</p>
 
         <div class="cta-buttons djangokam-buttons">

src/assets/css/styles.css

@@ -1424,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;
 }
 
@@ -1436,6 +1443,37 @@ input[type="number"]:focus {
     margin-bottom: 1.5rem;
 }
 
+.djangokam-duo,
+.djangokam-clip {
+    margin: 0;
+    text-align: center;
+}
+
+.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-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));
@@ -1513,6 +1551,15 @@ input[type="number"]:focus {
         height: 160px;
     }
 
+    .djangokam-histoire-wrapper {
+        grid-template-columns: 1fr;
+    }
+
+    .djangokam-duo img,
+    .djangokam-clip img {
+        max-width: 220px;
+    }
+
     .djangokam-facts {
         grid-template-columns: 1fr;
     }