feat: ajouter les pochettes des singles DJANGOKAM

src/assets/css/styles.css

@@ -1424,9 +1424,16 @@ input[type="number"]:focus {
     border-radius: 0 25px 25px 0;
 }
 
-.djangokam-histoire {
-    max-width: 800px;
+.djangokam-histoire-wrapper {
+    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;
     }