src/_includes/partials/djangokam.njk

@@ -4,7 +4,7 @@
         <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 }}

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;
@@ -1497,6 +1508,11 @@ input[type="number"]:focus {
         font-size: 2rem;
     }
 
+    .djangokam-portrait {
+        width: 160px;
+        height: 160px;
+    }
+
     .djangokam-facts {
         grid-template-columns: 1fr;
     }