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

src/_data/clients.json

@@ -3,8 +3,15 @@
     "name": "KA UBUNTU",
     "domain": "kaubuntu.com",
     "url": "https://kaubuntu.com",
-    "logo": "https://kaubuntu.com/wp-content/uploads/2024/12/cropped-logo-noir-RVB-192x192.png",
-    "description": "Média indépendant engagé pour l'autodétermination de La Réunion et l'intégration panafricaine. \"Je suis parce que nous sommes.\""
+    "logo": "https://kaubuntu.com/wp-content/uploads/2026/04/logo-ka-ubuntu.png",
+    "description": "Mouvement politique panafricaniste et indépendantiste réunionnais. Lutte pour l'autodétermination de La Réunion et l'unité africaine. \"Je suis parce que nous sommes.\""
+  },
+  {
+    "name": "KA UBUNTU — Hub multimédia",
+    "domain": "kaubuntu.re",
+    "url": "https://kaubuntu.re",
+    "logo": "https://kaubuntu.re/img/logo.png",
+    "description": "Agrégateur multimédia centralisé pour Ka Ubuntu : vidéos YouTube, articles, Instagram et TikTok réunis en une seule page. Application web progressive (PWA)."
   },
   {
     "name": "KBM – Ka Pou Nou Bwè é Manjé",

src/_data/djangokam.json

@@ -0,0 +1,75 @@
+{
+  "surtitre": "Notre projet musical",
+  "titre": "DJANGOKAM",
+  "titreAccent": "l'artiste IA caribéen",
+  "accroche": "Quand l'intelligence artificielle chante en KA.",
+  "message_cle": "DJANGOKAM n'est pas simplement un artiste virtuel. Il est le premier projet musical porté par l'ORGANISATION KA INTERNATIONALE (OKI), une association culturelle guadeloupéenne qui explore les possibilités offertes par l'intelligence artificielle pour promouvoir les langues, les cultures et la création artistique caribéennes. À travers ce projet, OKI démontre que les technologies émergentes peuvent être mises au service du patrimoine culturel plutôt que de s'y opposer.",
+  "histoire": [
+    "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": "🎵",
+      "chiffre": "12 sorties",
+      "texte": "disponibles sur toutes les plateformes (Spotify, Apple Music, Deezer, Tidal, Qobuz, Amazon Music, SoundCloud), référencées sur MusicBrainz"
+    },
+    {
+      "icon": "🎬",
+      "chiffre": "2 clips officiels",
+      "texte": "pour les singles « I Want You Girl » et « Ish Mwen KUTE »"
+    },
+    {
+      "icon": "🎤",
+      "chiffre": "2 artistes IA",
+      "texte": "DJANGOKAM et NYYOKA, duos et remixes croisés"
+    },
+    {
+      "icon": "📝",
+      "chiffre": "Paroles & traductions",
+      "texte": "transcriptions, traductions et karaokés de chaque titre sur PAWOL.NU"
+    }
+  ],
+  "ia_instrument": "L'intelligence artificielle n'a pas vocation à remplacer les artistes : elle constitue un nouvel instrument, un outil de création, un laboratoire artistique — et un moyen de faire rayonner les cultures créoles. DJANGOKAM est un personnage artistique complet — identité, univers graphique, répertoire — créé et dirigé par des humains. Il est la vitrine musicale de l'écosystème d'OKI : PAWOL.NU, médias libres, outils libres et plateformes du Fédiverse.",
+  "boutons": [
+    {
+      "text": "Écouter DJANGOKAM",
+      "url": "https://djangokam.pawol.nu",
+      "primary": true
+    },
+    {
+      "text": "Découvrir NYYOKA",
+      "url": "https://nyyoka.pawol.nu",
+      "primary": false
+    },
+    {
+      "text": "PAWOL.NU",
+      "url": "https://pawol.nu",
+      "primary": false
+    }
+  ],
+  "presse": {
+    "texte": "Presse & médias : dossier de presse, visuels HD et interviews sur demande —",
+    "email": "kontak@o-k-i.net"
+  }
+}

src/_data/navigation.json

@@ -7,6 +7,10 @@
     "text": "Nos projets",
     "url": "#projets"
   },
+  {
+    "text": "DJANGOKAM",
+    "url": "#djangokam"
+  },
   {
     "text": "Services",
     "url": "#hebergement"
@@ -15,10 +19,18 @@
     "text": "Réalisations",
     "url": "#clients"
   },
+  {
+    "text": "Nos instances",
+    "url": "#services-libres"
+  },
   {
     "text": "FAQ",
     "url": "#faq"
   },
+  {
+    "text": "Dons",
+    "url": "#dons"
+  },
   {
     "text": "Contact",
     "url": "#contact"

src/_data/services.json

@@ -1,4 +1,28 @@
 [
+  {
+    "name": "BOKANTE",
+    "icon": "🐘",
+    "platform": "Mastodon",
+    "description": "Notre instance du réseau social libre. Échangez, partagez et connectez-vous sans surveillance ni algorithme, loin des réseaux de X ou Facebook.",
+    "url": "https://bokante.o-k-i.net",
+    "linkText": "Rejoindre BOKANTE"
+  },
+  {
+    "name": "GADE",
+    "icon": "📺",
+    "platform": "PeerTube",
+    "description": "Notre instance vidéo libre et souveraine. Diffusez vos vidéos sans algorithme ni censure, dédiée aux langues, cultures et productions afro-diasporiques.",
+    "url": "https://gade.o-k-i.net",
+    "linkText": "Regarder sur GADE"
+  },
+  {
+    "name": "NIYAJ",
+    "icon": "☁️",
+    "platform": "Nextcloud",
+    "description": "Votre cloud personnel, loin des serveurs de Google. Fichiers, agenda, contacts, documents collaboratifs, tout ce que Google Drive propose, mais vos données restent les vôtres.",
+    "url": "https://niyaj.o-k-i.net",
+    "linkText": "Accéder à NIYAJ"
+  },
   {
     "name": "KUTE",
     "icon": "🎙️",

src/_includes/layouts/base.njk

@@ -64,6 +64,7 @@
         "contactType": "customer service"
       },
       "sameAs": [
+        "https://niyaj.o-k-i.net/",
         "https://kute.o-k-i.net/",
         "https://labola.o-k-i.net/",
         "https://liberapay.com/OKI/donate"
@@ -73,6 +74,22 @@
     }
     </script>
 
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "MusicGroup",
+      "name": "DJANGOKAM",
+      "genre": ["Reggae", "Zouk", "Konpa", "K-pop"],
+      "url": "https://djangokam.pawol.nu",
+      "sameAs": ["https://djangokam.pawol.nu"],
+      "member": {
+        "@type": "Organization",
+        "name": "{{ site.name }}",
+        "url": "https://o-k-i.net"
+      }
+    }
+    </script>
+
     <script>
         (function() {
             // Récupérer le thème stocké ou détecter le thème système

src/_includes/partials/djangokam.njk

@@ -0,0 +1,63 @@
+<section id="djangokam" class="djangokam">
+    <div class="section-container">
+        <p class="djangokam-surtitre">{{ djangokam.surtitre }}</p>
+        <h2>{{ djangokam.titre }} <span class="accent-text">{{ djangokam.titreAccent }}</span></h2>
+        <p class="section-subtitle">{{ djangokam.accroche }}</p>
+
+        <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-wrapper">
+            <div class="djangokam-histoire">
+                {% for paragraphe in djangokam.histoire %}
+                <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">
+            {% for fait in djangokam.faits %}
+            <div class="djangokam-fact-card">
+                <div class="djangokam-fact-icon">{{ fait.icon }}</div>
+                <h3>{{ fait.chiffre }}</h3>
+                <p>{{ fait.texte }}</p>
+            </div>
+            {% 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">
+            {% for bouton in djangokam.boutons %}
+            <a href="{{ bouton.url }}" target="_blank" rel="noopener noreferrer" class="btn {% if bouton.primary %}btn-primary{% else %}btn-secondary{% endif %}">
+                {{ bouton.text }} →
+            </a>
+            {% endfor %}
+        </div>
+
+        <p class="djangokam-presse">
+            {{ djangokam.presse.texte }} <a href="mailto:{{ djangokam.presse.email }}">{{ djangokam.presse.email }}</a>
+        </p>
+    </div>
+</section>

src/_includes/partials/fediverse.njk

@@ -1,11 +1,11 @@
-<section id="kute" class="fediverse">
+<section id="services-libres" class="fediverse">
     <div class="section-container">
-        <h2>Notre instance <span class="accent-text">KUTE</span></h2>
+        <h2>Nos <span class="accent-text">services hébergés</span></h2>
         <p class="section-subtitle">
-            Podcasting libre et indépendant, sans algorithme, sans censure arbitraire.
+            Des alternatives libres aux géants du web, vos données restent sous votre contrôle, pas dans les serveurs de Google ou d'Amazon.
         </p>
 
-        <div class="services-grid" style="max-width: 480px; margin: 0 auto;">
+        <div class="services-grid">
             {% for service in services %}
             <div class="service-card">
                 <div class="service-icon">{{ service.icon }}</div>

src/_includes/partials/support.njk

@@ -1,4 +1,4 @@
-<section class="support">
+<section id="dons" class="support">
     <div class="section-container">
         <h2>Nous <span class="accent-text">Soutenir</span></h2>
         <p style="font-size: 1.3rem; margin-bottom: 1rem;">

src/assets/css/styles.css

@@ -1376,3 +1376,214 @@ input[type="number"]:focus {
         font-size: 2rem;
     }
 }
+
+/* DJANGOKAM Section */
+.djangokam {
+    padding: 4rem 2rem;
+    background:
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" width="90" height="90"><circle cx="45" cy="45" r="30" fill="none" stroke="%23FDB813" stroke-width="1" opacity="0.05"/><circle cx="45" cy="45" r="15" fill="none" stroke="%2300D66C" stroke-width="0.5" opacity="0.05"/></svg>') 0 0 / 160px 160px,
+        linear-gradient(135deg, var(--noir-profond) 0%, var(--gris-sombre) 100%);
+    text-align: center;
+}
+
+.djangokam-surtitre {
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--vert-oki);
+    margin-bottom: 0.5rem;
+}
+
+.djangokam h2 {
+    font-size: 3rem;
+    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;
+    padding: 2rem;
+    text-align: left;
+    font-size: 1.1rem;
+    line-height: 1.8;
+    font-style: italic;
+    background: rgba(253, 184, 19, 0.1);
+    border-left: 4px solid var(--or-oki);
+    border-radius: 0 25px 25px 0;
+}
+
+.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;
+}
+
+.djangokam-histoire p {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    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));
+    gap: 2rem;
+    margin-bottom: 3rem;
+}
+
+.djangokam-fact-card {
+    background: rgba(0, 214, 108, 0.1);
+    border: 3px solid var(--vert-oki);
+    border-radius: 30px 15px 30px 15px;  /* Forme organique asymétrique */
+    padding: 2rem;
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    box-shadow: 0 8px 25px rgba(0, 214, 108, 0.15);
+}
+
+.djangokam-fact-card:nth-child(2n) {
+    background: rgba(255, 22, 84, 0.1);
+    border-color: var(--rouge-oki);
+    box-shadow: 0 8px 25px rgba(255, 22, 84, 0.15);
+}
+
+.djangokam-fact-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--or-oki);
+}
+
+.djangokam-fact-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    display: inline-block;
+    animation: floatOrganic 4s ease-in-out infinite;
+}
+
+.djangokam-fact-card h3 {
+    color: var(--or-oki);
+    margin-bottom: 0.5rem;
+    font-size: 1.3rem;
+}
+
+.djangokam-instrument {
+    max-width: 800px;
+    margin: 0 auto 3rem;
+    font-size: 1.1rem;
+    line-height: 1.8;
+    opacity: 0.9;
+}
+
+.djangokam-buttons {
+    justify-content: center;
+    margin-bottom: 2rem;
+}
+
+.djangokam-presse {
+    font-size: 0.9rem;
+    opacity: 0.7;
+}
+
+.djangokam-presse a {
+    color: var(--or-oki);
+    text-decoration: none;
+}
+
+.djangokam-presse a:hover {
+    text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+    .djangokam h2 {
+        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;
+    }
+
+    .djangokam-buttons {
+        flex-direction: column;
+    }
+}

src/index.njk

@@ -5,6 +5,7 @@ layout: layouts/base.njk
 {% include "partials/hero.njk" %}
 {% include "partials/publics.njk" %}
 {% include "partials/projects.njk" %}
+{% include "partials/djangokam.njk" %}
 {% include "partials/mission.njk" %}
 {% include "partials/hosting.njk" %}
 {% include "partials/clients.njk" %}