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

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## Version 2.1.0 - Design Afrofuturisme Caribéen (2025-11-05)
 
+### 🌓 Système de Thème Clair/Sombre
+- ✅ **Switch thème** : Bouton dans la navigation pour basculer entre thème clair et sombre
+- ✅ **Détection automatique** : Utilise le thème système par défaut (prefers-color-scheme)
+- ✅ **Persistance** : Sauvegarde de la préférence utilisateur dans localStorage
+- ✅ **Sans flash** : Script inline dans le head pour éviter le FOUC (Flash Of Unstyled Content)
+- ✅ **Palette claire adaptée** : Couleurs ajustées pour une excellente lisibilité en mode clair
+- ✅ **Écoute système** : Changement automatique si le thème système change (si pas de préférence utilisateur)
+- ✅ **Responsive** : Bouton de thème visible et accessible sur mobile
+- ✅ **Accessibilité WCAG 2 AA** : Toutes les couleurs en thème clair respectent le ratio de contraste 4.5:1
+  - Variables de couleurs assombries (#B87A00, #006B3D, #A01030)
+  - Ajustements spécifiques pour backgrounds, bordures et box-shadows
+  - Navigation adaptée avec fond clair (#0D0D0D sur fond clair)
+  - Tous les éléments décoratifs (tags, cards, boutons) optimisés
+  - Section contact avec liens visibles en mode clair
+
 ### 🎨 Refonte Visuelle Complète - Style Afrofuturisme Caribéen
 - ✅ **Palette de couleurs enrichie** : Couleurs plus vibrantes et chaudes
   - Or plus éclatant (#FDB813), vert émeraude saturé (#00D66C)

package.json

@@ -1,13 +1,13 @@
 {
   "name": "o-k-i.net-v2",
   "version": "1.0.0",
-  "description": "Un internet où nos langues ont leur place, où nos données nous appartiennent vraiment - Alternatives libres aux GAFAM",
+  "description": "Applications web sur mesure pour associations et organisations militantes",
   "scripts": {
     "start": "eleventy --serve",
     "build": "eleventy",
     "clean": "rm -rf _site"
   },
-  "keywords": ["fediverse", "souveraineté numérique", "créole", "gafam", "alternative", "langues", "peertube", "mastodon", "guadeloupe", "martinique"],
+  "keywords": ["application web", "associations", "organisations militantes", "développement sur mesure", "numérique éthique", "souveraineté numérique", "guadeloupe", "martinique", "caribbean", "open source"],
   "author": "ORGANISATION KA INTERNATIONALE",
   "license": "AGPL-3.0",
   "devDependencies": {

src/_data/clients.json

@@ -0,0 +1,23 @@
+[
+  {
+    "name": "KA UBUNTU",
+    "domain": "kaubuntu.com",
+    "url": "https://kaubuntu.com",
+    "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é",
+    "domain": "kbm.gp",
+    "url": "https://kbm.gp",
+    "logo": "https://kbm.gp/images/logo-1024.webp",
+    "description": "Mouvement pour l'émancipation et la souveraineté alimentaire du peuple guadeloupéen. Radio communautaire Radyo Bòkaz, podcasts, lakou et agriculture locale."
+  }
+]

src/_data/contact.json

@@ -3,10 +3,6 @@
     {
       "title": "🌐 Web & Contact",
       "links": [
-        {
-          "text": "o-k-i.net",
-          "url": "https://o-k-i.net"
-        },
         {
           "text": "kontak@o-k-i.net",
           "url": "mailto:kontak@o-k-i.net"
@@ -23,20 +19,12 @@
         {
           "text": "X (Twitter)",
           "url": "https://x.com/OrganisationKA"
-        },
-        {
-          "text": "Pleroma",
-          "url": "https://bokantaj.o-k-i.net/@admin"
         }
       ]
     },
     {
-      "title": "🎥 Médias",
+      "title": "💬 Communauté",
       "links": [
-        {
-          "text": "Chaîne PeerTube",
-          "url": "https://gade.o-k-i.net/a/oki/video-channels"
-        },
         {
           "text": "Discord",
           "url": "https://discord.gg/a2r9NYNM"
@@ -51,8 +39,8 @@
       "title": "💻 Code & Développement",
       "links": [
         {
-          "text": "Codeberg",
-          "url": "https://codeberg.org/OKI"
+          "text": "Labola (Gitea)",
+          "url": "https://labola.o-k-i.net/"
         }
       ]
     }

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/faq.json

@@ -1,22 +1,26 @@
 [
   {
-    "question": "Est-ce que je peux vraiment quitter Facebook pour mon association ?",
-    "answer": "Absolument ! Nous accompagnons des dizaines d'associations dans leur transition vers des plateformes libres. Vous gardez le contrôle de vos données, de votre contenu, et de votre communauté. On vous forme et on vous suit pas à pas."
+    "question": "Qu'est-ce qu'une application web sur mesure ?",
+    "answer": "C'est une application développée spécifiquement pour répondre à VOS besoins, pas un template générique qu'on adapte à la va-vite. On part de votre fonctionnement réel : gestion de membres, agenda militant, système de pétitions, caisse de grève, newsletter... et on construit l'outil qui correspond exactement à votre organisation."
   },
   {
-    "question": "Combien coûte une migration vers le Fédiverse ?",
-    "answer": "Nous proposons des solutions adaptées à tous les budgets. L'audit initial est gratuit. Pour les associations à but non lucratif, nous avons des tarifs solidaires. Contactez-nous pour un devis personnalisé : kontak@o-k-i.net"
+    "question": "Quels sont vos tarifs préférentiels pour les associations militantes ?",
+    "answer": "Nous appliquons une grille tarifaire solidaire basée sur vos ressources réelles. Pour les syndicats, collectifs et associations militantes à but non lucratif, nous pratiquons des prix réduits et pouvons étaler le paiement. L'audit initial est gratuit. Contactez-nous pour un devis personnalisé : kontak@o-k-i.net"
   },
   {
     "question": "Faut-il être expert en informatique pour utiliser vos solutions ?",
-    "answer": "Pas du tout ! Nos plateformes sont conçues pour être accessibles. Nous proposons des formations gratuites et un accompagnement continu. Si vous savez utiliser Facebook, vous saurez utiliser nos outils."
+    "answer": "Pas du tout. Nous concevons des interfaces simples, adaptées à vos bénévoles et adhérents. On inclut systématiquement une formation à la prise en main et un accompagnement continu. Si quelque chose ne fonctionne pas ou doit évoluer, on est là."
   },
   {
-    "question": "Mes données sont-elles vraiment en sécurité ?",
-    "answer": "Oui. Contrairement aux GAFAM, vos données vous appartiennent et restent sous votre contrôle. Elles sont hébergées sur des serveurs sécurisés. Nous ne vendons jamais vos informations à des tiers."
+    "question": "Combien de temps pour développer notre application ?",
+    "answer": "Ça dépend de la complexité. Un site vitrine : 2 à 4 semaines. Une application avec gestion de membres et d'événements : 4 à 8 semaines. On travaille en transparence avec vous, avec des points réguliers pour valider chaque étape."
+  },
+  {
+    "question": "Nos données sont-elles en sécurité ?",
+    "answer": "Oui. Vos données vous appartiennent et restent sur des serveurs que nous contrôlons, pas chez des géants américains. Nous n'avons aucun intérêt commercial à exploiter vos informations. Sauvegardes automatiques quotidiennes et accès sécurisé inclus."
   },
   {
     "question": "Pourquoi le nom 'KA' ?",
-    "answer": "Le Ka représente avant tout l'énergie vitale, la force divine présente en chaque être vivant. Dans la spiritualité caribéenne héritée des traditions africaines et égyptiennes, le Ka est cette puissance intérieure qui nous anime et nous relie les uns aux autres. Le Ka, c'est aussi notre tambour sacré, nos langues, nos traditions – tout ce qui porte notre identité. ORGANISATION KA INTERNATIONALE incarne cette force vitale collective : un internet qui nous ressemble, qui vibre de nos énergies, de nos voix, de notre puissance créatrice. C'est notre mawonaj numérique."
+    "answer": "Le Ka représente avant tout l'énergie vitale, la force divine présente en chaque être vivant. Dans la spiritualité caribéenne héritée des traditions africaines et égyptiennes, le Ka est cette puissance intérieure qui nous anime et nous relie les uns aux autres. Le Ka, c'est aussi notre tambour sacré, nos langues, nos traditions – tout ce qui porte notre identité. ORGANISATION KA INTERNATIONALE incarne cette force vitale collective : un internet qui nous ressemble, qui vibre de nos énergies, de nos voix, de notre puissance créatrice."
   }
 ]

src/_data/navigation.json

@@ -4,20 +4,40 @@
     "url": "#solutions"
   },
   {
-    "text": "Fédiverse",
-    "url": "#fediverse"
+    "text": "Nos projets",
+    "url": "#projets"
+  },
+  {
+    "text": "DJANGOKAM",
+    "url": "#djangokam"
+  },
+  {
+    "text": "Services",
+    "url": "#hebergement"
+  },
+  {
+    "text": "Réalisations",
+    "url": "#clients"
+  },
+  {
+    "text": "Nos instances",
+    "url": "#services-libres"
   },
   {
     "text": "FAQ",
     "url": "#faq"
   },
+  {
+    "text": "Dons",
+    "url": "#dons"
+  },
   {
     "text": "Contact",
     "url": "#contact"
   },
   {
-    "text": "Codeberg",
-    "url": "https://codeberg.org/OKI",
+    "text": "Labola",
+    "url": "https://labola.o-k-i.net/",
     "external": true
   }
 ]

src/_data/projects.json

@@ -1,31 +1,10 @@
 [
   {
-    "name": "FEDIVERSE OKI",
-    "icon": "🌐",
-    "domain": "fediverse.o-k-i.net",
-    "description": "Portail d'accès à tous nos services Fédiverse",
-    "url": "https://fediverse.o-k-i.net/"
-  },
-  {
-    "name": "OKI.RE",
+    "name": "PAWOL.NU",
     "icon": "🎶",
-    "domain": "oki.re",
+    "domain": "pawol.nu",
     "description": "Transcriptions et traductions de productions musicales",
-    "url": "https://oki.re/"
-  },
-  {
-    "name": "NUVEL.NU",
-    "icon": "📰",
-    "domain": "nuvel.nu",
-    "description": "Actualités multilingues de nos régions",
-    "url": "https://nuvel.nu/"
-  },
-  {
-    "name": "JWE.OVH",
-    "icon": "🎮",
-    "domain": "jwe.ovh",
-    "description": "Jeu cartographique éducatif et ludique",
-    "url": "https://jwe.ovh/"
+    "url": "https://pawol.nu/"
   },
   {
     "name": "GONG.GP",

src/_data/publics.json

@@ -1,38 +1,40 @@
 [
+  {
+    "icon": "✊",
+    "title": "Associations Militantes & Syndicats",
+    "description": "Vous luttez, vous organisez, vous mobilisez, votre outil numérique doit être à la hauteur. OKI propose des tarifs préférentiels aux organisations engagées pour que le budget ne soit jamais un frein.",
+    "cta": "Demander un devis",
+    "benefits": [
+      "Tarifs solidaires adaptés à vos ressources",
+      "Application web sur mesure (gestion membres, agenda, pétitions...)",
+      "Site vitrine professionnel et accessible",
+      "Hébergement sécurisé et indépendant des GAFAM",
+      "Accompagnement technique continu"
+    ]
+  },
   {
     "icon": "🏛️",
     "title": "Associations & Collectifs",
-    "description": "Sortez de Facebook, créez votre présence numérique sans dépendre des GAFAM. Hébergement sécurisé, solutions Fédiverse (Mastodon, PeerTube), sites WordPress.",
+    "description": "Quelle que soit votre cause, nous développons l'outil numérique qui correspond exactement à vos besoins pas un template générique, une vraie application pensée pour vous.",
     "cta": "Contactez-nous",
     "benefits": [
-      "Hébergement web sécurisé et éthique",
-      "Installation de solutions Fédiverse (Mastodon, PeerTube, Castopod)",
-      "Sites WordPress ou développement sur mesure",
-      "Support technique personnalisé"
+      "Développement d'application web sur mesure",
+      "Site WordPress ou solution statique",
+      "Gestion d'événements, de membres, de dons",
+      "Hébergement éthique et sécurisé",
+      "Formation et support inclus"
     ]
   },
   {
     "icon": "💼",
     "title": "Entreprises Responsables",
-    "description": "Construisez votre présence numérique éthique. Solutions web sur mesure, hébergement sécurisé, présence sur le Fédiverse sans algorithmes opaques.",
+    "description": "Vous voulez une présence numérique éthique, sans dépendre des géants du web ? Nous construisons des solutions web solides qui correspondent à vos valeurs.",
     "cta": "Contactez-nous",
     "benefits": [
-      "Sites WordPress ou développement sur mesure",
-      "Hébergement web éthique et sécurisé",
-      "Présence sur le Fédiverse (Mastodon, PeerTube)",
+      "Développement web sur mesure",
+      "Hébergement éthique et sécurisé",
+      "Audit de votre infrastructure existante",
       "Conseil en stratégie numérique libre"
     ]
-  },
-  {
-    "icon": "👥",
-    "title": "Citoyens Engagés",
-    "description": "Rejoignez notre communauté et participez à un internet libre et décentralisé. Créez du contenu, partagez vos idées, connectez-vous autrement.",
-    "cta": "Contactez-nous",
-    "benefits": [
-      "Accès gratuit à nos plateformes Fédiverse",
-      "Communauté d'entraide active",
-      "Création de contenu sur nos services",
-      "Participation à un internet décentralisé"
-    ]
   }
 ]

src/_data/services.json

@@ -1,34 +1,34 @@
 [
   {
-    "name": "KUTE",
-    "icon": "🎙️",
-    "platform": "Castopod",
-    "description": "Alternative libre pour le podcasting. Créez, hébergez et diffusez vos podcasts en toute autonomie.",
-    "url": "https://kute.o-k-i.net/",
-    "linkText": "Découvrir KUTE"
+    "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": "Alternative libre à YouTube pour le partage de vidéos. Hébergez et partagez vos contenus vidéo en toute liberté.",
-    "url": "https://gade.o-k-i.net/",
-    "linkText": "Accéder à GADE"
+    "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": "BOKANTAJ",
-    "icon": "🐦",
-    "platform": "Pleroma + Soapbox",
-    "description": "Alternative libre à X (Twitter) pour les réseaux sociaux. Communiquez librement dans un espace respectueux.",
-    "url": "https://bokantaj.o-k-i.net/",
-    "linkText": "Rejoindre BOKANTAJ"
+    "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": "MIZIK",
-    "icon": "🎵",
-    "platform": "Funkwhale",
-    "description": "Alternative libre à SoundCloud pour la musique. Partagez et découvrez de la musique sans limites.",
-    "url": "https://mizik.o-k-i.net/library",
-    "linkText": "Écouter sur MIZIK"
+    "name": "KUTE",
+    "icon": "🎙️",
+    "platform": "Castopod",
+    "description": "Notre instance de podcasting libre. Créez, hébergez et diffusez vos podcasts en toute autonomie, sans algorithme ni censure.",
+    "url": "https://kute.o-k-i.net/",
+    "linkText": "Découvrir KUTE"
   }
 ]

src/_data/site.json

@@ -1,9 +1,9 @@
 {
   "name": "ORGANISATION KA INTERNATIONALE",
   "shortName": "OKI",
-  "description": "Un internet où nos langues ont leur place, où nos données nous appartiennent vraiment, et où nos communautés se connectent sur des plateformes qu'on contrôle collectivement.",
+  "description": "Nous développons des applications web sur mesure pour les associations, collectifs et organisations militantes, avec des tarifs adaptés à vos moyens.",
   "url": "https://o-k-i.net",
   "email": "kontak@o-k-i.net",
   "copyright": "© 2025 ORGANISATION KA INTERNATIONALE",
-  "tagline": "Hébergé avec 💛"
+  "tagline": "Le numérique au service de vos luttes"
 }

src/_data/values.json

@@ -1,22 +1,22 @@
 [
   {
-    "icon": "🌍",
-    "title": "Langues",
-    "description": "Promotion et préservation de nos langues"
+    "icon": "✊",
+    "title": "Engagement",
+    "description": "Priorité aux organisations qui luttent pour un monde plus juste"
   },
   {
     "icon": "🔓",
     "title": "Liberté",
-    "description": "Logiciels libres et données ouvertes"
+    "description": "Logiciels libres, données sous votre contrôle"
   },
   {
     "icon": "🤝",
-    "title": "Communauté",
-    "description": "Ensemble pour un internet éthique"
+    "title": "Solidarité",
+    "description": "Tarifs adaptés à vos moyens réels"
   },
   {
     "icon": "🛡️",
     "title": "Souveraineté",
-    "description": "Contrôle de nos données et infrastructures"
+    "description": "Indépendance des GAFAM et des plateformes centralisées"
   }
 ]

src/_includes/layouts/base.njk

@@ -7,7 +7,7 @@
     <!-- Title & Description -->
     <title>{% if title %}{{ title }} | {{ site.name }}{% else %}{{ site.name }} | {{ site.shortName }}{% endif %}</title>
     <meta name="description" content="{{ description or site.description }}">
-    <meta name="keywords" content="OKI, ORGANISATION KA INTERNATIONALE, Fédiverse, souveraineté numérique, langues créoles, créole guadeloupéen, alternative GAFAM, PeerTube, Mastodon, Pleroma, Funkwhale, Castopod, hébergement libre, Guadeloupe, Martinique, Caraïbes, médias indépendants, logiciel libre, données personnelles, plateformes éthiques, mawonaj numérique">
+    <meta name="keywords" content="OKI, ORGANISATION KA INTERNATIONALE, application web sur mesure, associations militantes, développement web, souveraineté numérique, tarifs solidaires, logiciel libre, Guadeloupe, Martinique, Caraïbes, numérique éthique, Castopod, KUTE, hébergement libre, alternative GAFAM">
     <meta name="author" content="{{ site.name }}">
 
     <!-- Canonical URL -->
@@ -64,17 +64,51 @@
         "contactType": "customer service"
       },
       "sameAs": [
-        "https://gade.o-k-i.net/",
-        "https://bokantaj.o-k-i.net/",
-        "https://mizik.o-k-i.net/",
+        "https://niyaj.o-k-i.net/",
         "https://kute.o-k-i.net/",
-        "https://codeberg.org/OKI",
+        "https://labola.o-k-i.net/",
         "https://liberapay.com/OKI/donate"
       ],
       "foundingDate": "2024",
       "nonprofitStatus": "NonprofitANBI"
     }
     </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
+            const storedTheme = localStorage.getItem('oki-theme');
+            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+            let theme = storedTheme;
+
+            // Si pas de préférence stockée, utiliser le thème système
+            if (!storedTheme) {
+                theme = systemPrefersDark ? 'dark' : 'light';
+            }
+
+            // Appliquer le thème immédiatement
+            if (theme === 'light') {
+                document.documentElement.classList.add('light-theme');
+            }
+        })();
+    </script>
 </head>
 <body>
     {% include "partials/nav.njk" %}

src/_includes/partials/clients.njk

@@ -0,0 +1,24 @@
+<section id="clients" class="partners">
+    <div class="section-container">
+        <h2 style="text-align: center; margin-bottom: 1rem;">Ils nous ont <span class="accent-text">fait confiance</span></h2>
+        <p class="section-subtitle">
+            Des organisations engagées qui ont choisi OKI pour construire leur présence numérique
+        </p>
+
+        <div class="partners-grid">
+            {% for client in clients %}
+            <a href="{{ client.url }}" target="_blank" rel="noopener noreferrer" class="partner-card">
+                <div class="partner-logo-container">
+                    <img src="{{ client.logo }}" alt="Logo {{ client.name }}" class="partner-logo">
+                </div>
+                <h3>{{ client.name }}</h3>
+                <p class="project-domain">{{ client.domain }}</p>
+                <p class="partner-description">{{ client.description }}</p>
+                <span class="partner-link">
+                    Visiter le site →
+                </span>
+            </a>
+            {% endfor %}
+        </div>
+    </div>
+</section>

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/engagement.njk

@@ -1,29 +1,29 @@
 <section id="engagement" class="engagement">
     <div class="section-container">
-        <h2>La révolution numérique <span class="accent-text">commence par un clic</span></h2>
+        <h2>Votre projet <span class="accent-text">commence ici</span></h2>
         <p class="section-subtitle">
-            Commencez votre transition vers un internet libre et respectueux
+            Parce que chaque organisation mérite des outils numériques à la hauteur de ses ambitions
         </p>
 
         <div class="engagement-options">
+            <div class="engagement-card">
+                <div class="engagement-icon">✊</div>
+                <h3>Associations Militantes</h3>
+                <p>Une application web sur mesure avec tarifs préférentiels pour vos luttes</p>
+                <a href="#contact" class="btn btn-primary">Contactez-nous</a>
+            </div>
+
             <div class="engagement-card">
                 <div class="engagement-icon">🏛️</div>
-                <h3>Associations</h3>
-                <p>Sortez de Facebook et créez votre présence numérique indépendante</p>
+                <h3>Associations & Collectifs</h3>
+                <p>Site vitrine, gestion de membres, agenda, développé pour vous</p>
                 <a href="#contact" class="btn btn-primary">Contactez-nous</a>
             </div>
 
             <div class="engagement-card">
                 <div class="engagement-icon">💼</div>
-                <h3>Entreprises</h3>
-                <p>Hébergement web, solutions Fédiverse ou développement sur mesure</p>
-                <a href="#contact" class="btn btn-primary">Contactez-nous</a>
-            </div>
-
-            <div class="engagement-card">
-                <div class="engagement-icon">👥</div>
-                <h3>Citoyens</h3>
-                <p>Rejoignez nos plateformes libres et participez à un internet décentralisé</p>
+                <h3>Entreprises Responsables</h3>
+                <p>Présence numérique éthique, hébergement indépendant des GAFAM</p>
                 <a href="#contact" class="btn btn-primary">Contactez-nous</a>
             </div>
         </div>

src/_includes/partials/fediverse.njk

@@ -1,11 +1,8 @@
-<section id="fediverse" class="fediverse">
+<section id="services-libres" class="fediverse">
     <div class="section-container">
-        <h2>Nos Services <span class="accent-text">Fédiverse</span></h2>
+        <h2>Nos <span class="accent-text">services hébergés</span></h2>
         <p class="section-subtitle">
-            Tu veux créer du contenu sans te faire censurer ? Monter un podcast qui ne finit pas noyé dans l'algorithme ?
-        </p>
-        <p class="section-subtitle" style="font-size: 1rem; margin-top: 0.5rem; opacity: 0.9;">
-            Nos plateformes libres te donnent le contrôle. Pas d'algorithme aveugle, pas de 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">

src/_includes/partials/hero.njk

@@ -10,16 +10,16 @@
         <h1>ORGANISATION KA</h1>
         <h2 class="hero-subtitle">INTERNATIONALE</h2>
         <p style="font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--or-oki); font-weight: 600;">
-            Et si on prenait le contrôle ensemble ?
+            {{ site.tagline }}
         </p>
         <div class="hero-tags">
-            <span class="tag">🌍 Nos langues ont leur place</span>
-            <span class="tag">🔓 Nos données nous appartiennent</span>
-            <span class="tag">🤝 Nos communautés se connectent librement</span>
+            <span class="tag">✊ Applications web pour vos associations</span>
+            <span class="tag">💸 Tarifs préférentiels pour les organisations militantes</span>
+            <span class="tag">🔓 Indépendant des GAFAM</span>
         </div>
         <p>{{ site.description }}</p>
         <div class="cta-buttons">
-            <a href="#fediverse" class="btn btn-primary">Découvrir nos Services</a>
+            <a href="#solutions" class="btn btn-primary">Nos Solutions</a>
             <a href="#mission" class="btn btn-secondary">Notre Mission</a>
         </div>
     </div>

src/_includes/partials/hosting.njk

@@ -1,33 +1,36 @@
 <section id="hebergement" class="hosting">
     <div class="section-container">
-        <h2 style="text-align: center; margin-bottom: 1rem;">Services <span class="accent-text">d'Hébergement & Infrastructure</span></h2>
+        <h2 style="text-align: center; margin-bottom: 1rem;">Développement <span class="accent-text">Web sur Mesure</span></h2>
 
         <p class="section-subtitle" style="text-align: center; margin-bottom: 3rem;">
-            Vous rêvez de sortir des GAFAM pour organiser vos événements ? De communiquer en langue dite "créole" sur des plateformes libres ? OKI propose des services sur mesure en respectant vos valeurs.
+            Chaque organisation a des besoins uniques. Nous concevons et développons l'outil numérique qui correspond exactement à votre fonctionnement, pas un template, une vraie application.
         </p>
 
         <div class="hosting-banner">
-            <h3>🚀 Solutions complètes pour votre souveraineté numérique</h3>
-            <p>OKI administre et sécurise les outils informatiques pour associations, collectifs et initiatives citoyennes.</p>
+            <h3>🚀 Des solutions complètes, de A à Z</h3>
+            <p>OKI accompagne les associations et collectifs à chaque étape : conception, développement, hébergement, formation et maintenance.</p>
 
             <div class="hosting-features">
                 <div class="hosting-feature">
-                    <span>✓</span> Hébergement mutualisé sécurisé
+                    <span>✓</span> Développement d'applications web sur mesure
                 </div>
                 <div class="hosting-feature">
-                    <span>✓</span> Gestion de noms de domaine
+                    <span>✓</span> Sites vitrine professionnels
                 </div>
                 <div class="hosting-feature">
                     <span>✓</span> Instances Fédiverse clé en main
                 </div>
+                <div class="hosting-feature">
+                    <span>✓</span> Hébergement sécurisé et indépendant
+                </div>
+                <div class="hosting-feature">
+                    <span>✓</span> Gestion de noms de domaine
+                </div>
                 <div class="hosting-feature">
                     <span>✓</span> Sauvegardes automatiques quotidiennes
                 </div>
                 <div class="hosting-feature">
-                    <span>✓</span> Serveur mail inclus
-                </div>
-                <div class="hosting-feature">
-                    <span>✓</span> Support technique
+                    <span>✓</span> Formation et support technique inclus
                 </div>
             </div>
         </div>
@@ -38,30 +41,45 @@
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 3rem;">
 
                 <div class="service-offering-card" style="background: rgba(0, 168, 84, 0.1); border: 2px solid var(--vert-oki); border-radius: 20px; padding: 2rem;">
-                    <h4 style="color: var(--vert-oki); margin-bottom: 1rem;">📦 Hébergement Web</h4>
+                    <h4 style="color: var(--vert-oki); margin-bottom: 1rem;">💻 Application Web Sur Mesure</h4>
                     <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
-                        <li style="margin-bottom: 0.5rem;">• WordPress, Sites statiques</li>
-                        <li style="margin-bottom: 0.5rem;">• Base de données MySQL/PostgreSQL</li>
-                        <li style="margin-bottom: 0.5rem;">• Certificat SSL gratuit</li>
-                        <li style="margin-bottom: 0.5rem;">• Stockage évolutif</li>
+                        <li style="margin-bottom: 0.5rem;">• Gestion de membres et adhésions</li>
+                        <li style="margin-bottom: 0.5rem;">• Agenda et gestion d'événements</li>
+                        <li style="margin-bottom: 0.5rem;">• Pétitions et mobilisation en ligne</li>
+                        <li style="margin-bottom: 0.5rem;">• Caisse de solidarité, dons</li>
+                        <li style="margin-bottom: 0.5rem;">• Newsletter et communication interne</li>
                     </ul>
-                    <p style="color: var(--or-oki); font-weight: bold;">Mutualisé</p>
+                    <p style="color: var(--or-oki); font-weight: bold;">Développement sur mesure</p>
                 </div>
 
                 <div class="service-offering-card" style="background: rgba(237, 28, 76, 0.1); border: 2px solid var(--rouge-oki); border-radius: 20px; padding: 2rem;">
-                    <h4 style="color: var(--rouge-oki); margin-bottom: 1rem;">🌐 Instances Fédiverse</h4>
+                    <h4 style="color: var(--rouge-oki); margin-bottom: 1rem;">🌐 Site Vitrine & Hébergement</h4>
                     <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
+                        <li style="margin-bottom: 0.5rem;">• WordPress ou site statique</li>
+                        <li style="margin-bottom: 0.5rem;">• Hébergement mutualisé sécurisé</li>
+                        <li style="margin-bottom: 0.5rem;">• Base de données MySQL/PostgreSQL</li>
+                        <li style="margin-bottom: 0.5rem;">• Certificat SSL gratuit</li>
+                        <li style="margin-bottom: 0.5rem;">• Serveur mail inclus</li>
+                    </ul>
+                    <p style="color: var(--or-oki); font-weight: bold;">Hébergement éthique</p>
+                </div>
+
+                <div class="service-offering-card" style="background: rgba(232, 166, 37, 0.1); border: 2px solid var(--or-oki); border-radius: 20px; padding: 2rem;">
+                    <h4 style="color: var(--or-oki); margin-bottom: 1rem;">🕸️ Instance Fédiverse</h4>
+                    <p style="margin-bottom: 1rem; font-size: 0.95rem; opacity: 0.9;">Votre association veut sa propre plateforme libre, sans dépendre d'un tiers ? On installe et administre votre instance :</p>
+                    <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
+                        <li style="margin-bottom: 0.5rem;">• Mastodon / Pleroma (réseau social)</li>
                         <li style="margin-bottom: 0.5rem;">• PeerTube (vidéo)</li>
-                        <li style="margin-bottom: 0.5rem;">• Mastodon/Pleroma (social)</li>
-                        <li style="margin-bottom: 0.5rem;">• Funkwhale (audio)</li>
+                        <li style="margin-bottom: 0.5rem;">• Castopod (podcast)</li>
                         <li style="margin-bottom: 0.5rem;">• Pixelfed (photos)</li>
+                        <li style="margin-bottom: 0.5rem;">• Funkwhale (musique)</li>
                     </ul>
                     <p style="color: var(--or-oki); font-weight: bold;">Installation & maintenance</p>
                 </div>
             </div>
 
             <div style="background: rgba(232, 166, 37, 0.1); border-radius: 15px; padding: 2rem; margin-bottom: 2rem;">
-                <h4 style="color: var(--or-oki); margin-bottom: 1rem;">🔐 Services de gestion sécurisée</h4>
+                <h4 style="color: var(--or-oki); margin-bottom: 1rem;">🔐 Gestion numérique sécurisée</h4>
                 <p style="margin-bottom: 1rem;">OKI peut assurer la gestion complète de vos propriétés numériques :</p>
                 <ul style="list-style: none; padding-left: 1rem;">
                     <li style="margin-bottom: 0.5rem;">✅ Propriété et gestion de noms de domaine</li>
@@ -77,7 +95,8 @@
                 <p style="max-width: 800px; margin: 0 auto 2rem; line-height: 1.6;">
                     Notre équipe technique, composée d'experts engagés, garantit l'impartialité,
                     la sécurité et la pérennité de vos outils numériques. Nous mutualisons les coûts entre
-                    projets solidaires pour des tarifs justes et accessibles.
+                    projets solidaires pour des tarifs justes et accessibles et nous appliquons des tarifs
+                    préférentiels aux organisations militantes.
                 </p>
                 <a href="#contact" class="btn btn-primary">
                     Contactez-nous →

src/_includes/partials/mission.njk

@@ -2,10 +2,10 @@
     <div class="section-container">
         <h2>Notre <span class="accent-text">Mission</span></h2>
         <p class="mission-text">
-            Construire un internet différent où nos langues, nos histoires et nos cultures ne se perdent pas dans la masse. Un espace où nos données nous appartiennent vraiment, pas aux GAFAM qui en font leur business. OKI propose un accompagnement pour les créateurs de contenu, les associations et collectifs qui veulent passer aux alternatives libres et éthiques.
+            OKI développe des applications web sur mesure pour les associations, collectifs et organisations qui changent le monde. Nous croyons que la qualité des outils numériques ne devrait pas être réservée à ceux qui ont les moyens, c'est pourquoi nous proposons des tarifs adaptés à la réalité de chaque structure, avec une attention particulière pour les organisations militantes.
         </p>
         <p class="mission-text" style="font-size: 1.1rem; margin-top: 1rem;">
-            Pas besoin d'être expert – juste motivé ! On t'accompagne pas à pas.
+            Nos langues, nos cultures, nos luttes méritent des outils qui leur ressemblent. Pas des templates génériques, de vraies solutions pensées pour vous.
         </p>
 
         <div class="values-grid">

src/_includes/partials/nav.njk

@@ -13,6 +13,10 @@
             </li>
             {% endfor %}
         </ul>
+        <button id="theme-toggle" class="theme-toggle" aria-label="Changer de thème" title="Changer de thème">
+            <span class="theme-icon theme-icon-dark">🌙</span>
+            <span class="theme-icon theme-icon-light">☀️</span>
+        </button>
         <div class="menu-toggle">
             <span></span>
             <span></span>

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

@@ -27,6 +27,35 @@
     --rouge-clair: #FF6B9D;         /* Rose corail */
 }
 
+/* Thème Clair */
+html.light-theme,
+html.light-theme body {
+    /* Couleurs inversées pour le mode clair */
+    --noir-oki: #FFF8E7;            /* Fond clair */
+    --blanc-creme: #0D0D0D;         /* Texte sombre */
+
+    /* Ajustements pour la lisibilité */
+    --noir-profond: #F5F0E8;        /* Fond de section clair */
+    --gris-sombre: #E8DDD0;         /* Gris clair */
+
+    /* Couleurs vives assombries pour WCAG AA (contraste 4.5:1 minimum) */
+    --or-oki: #B87A00;              /* Or assombri pour contraste suffisant */
+    --vert-oki: #006B3D;            /* Vert assombri */
+    --rouge-oki: #A01030;           /* Rouge assombri */
+    --turquoise-caraibes: #006B75;  /* Turquoise assombri */
+    --violet-nuit: #6B2D5C;         /* Violet ok */
+    --bleu-ocean: #004B7F;          /* Bleu assombri */
+
+    /* Couleurs dérivées plus claires pour bordures/décorations */
+    --or-clair: #D99000;            /* Or clair pour éléments secondaires */
+    --vert-clair: #008C4F;          /* Vert clair */
+    --rouge-clair: #C01545;         /* Rouge clair */
+
+    /* Couleurs d'accentuation */
+    --jaune-soleil: #B87A00;        /* Aligné avec l'or */
+    --orange-flamme: #C85000;       /* Orange assombri */
+}
+
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     background:
@@ -51,6 +80,108 @@ nav {
     border-bottom: 2px solid var(--or-oki);
 }
 
+html.light-theme nav {
+    background: rgba(255, 248, 231, 0.95);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+html.light-theme .nav-links a {
+    color: #0D0D0D;
+}
+
+html.light-theme .nav-links a:hover {
+    color: var(--or-oki);
+}
+
+/* Ajustements de contraste pour le thème clair (WCAG 2 AA) */
+html.light-theme .tag {
+    background: rgba(184, 122, 0, 0.15);
+    box-shadow: 0 4px 15px rgba(184, 122, 0, 0.2);
+}
+
+html.light-theme .value-card {
+    background: rgba(184, 122, 0, 0.08);
+    border: 3px solid rgba(184, 122, 0, 0.3);
+    box-shadow: 0 6px 20px rgba(184, 122, 0, 0.12);
+}
+
+html.light-theme .value-card:hover {
+    background: rgba(184, 122, 0, 0.15);
+    box-shadow: 0 12px 35px rgba(184, 122, 0, 0.25);
+}
+
+html.light-theme .hosting-banner {
+    background: rgba(184, 122, 0, 0.12);
+    box-shadow: 0 10px 30px rgba(184, 122, 0, 0.2);
+}
+
+html.light-theme .donation-amount {
+    background: rgba(184, 122, 0, 0.15);
+    box-shadow: 0 6px 20px rgba(184, 122, 0, 0.2);
+}
+
+html.light-theme .donation-amount:hover {
+    box-shadow: 0 10px 30px rgba(184, 122, 0, 0.4);
+}
+
+html.light-theme .donation-amount.monthly {
+    background: rgba(0, 107, 61, 0.15);
+}
+
+html.light-theme .service-card {
+    background: rgba(0, 107, 61, 0.1);
+    box-shadow: 0 10px 30px rgba(0, 107, 61, 0.15);
+}
+
+html.light-theme .btn-primary:hover {
+    box-shadow: 0 15px 40px rgba(184, 122, 0, 0.4);
+}
+
+html.light-theme .public-benefits {
+    background: rgba(184, 122, 0, 0.12);
+    border: 2px solid rgba(184, 122, 0, 0.3);
+}
+
+html.light-theme .publics-footer {
+    background: rgba(184, 122, 0, 0.12);
+    border: 2px solid rgba(184, 122, 0, 0.3);
+}
+
+html.light-theme .faq-item {
+    background: rgba(255, 255, 255, 0.5);
+    border: 3px solid rgba(184, 122, 0, 0.3);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+}
+
+html.light-theme .faq-item:hover {
+    box-shadow: 0 8px 25px rgba(184, 122, 0, 0.25);
+}
+
+html.light-theme .faq-item.active {
+    box-shadow: 0 10px 35px rgba(184, 122, 0, 0.35);
+}
+
+html.light-theme .engagement-card {
+    background: rgba(184, 122, 0, 0.12);
+    box-shadow: 0 10px 30px rgba(184, 122, 0, 0.2);
+}
+
+html.light-theme .engagement-card:hover {
+    box-shadow: 0 25px 50px rgba(184, 122, 0, 0.35);
+}
+
+html.light-theme .contact {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+html.light-theme .contact-links a {
+    color: #0D0D0D;
+}
+
+html.light-theme .contact-links a:hover {
+    color: var(--or-oki);
+}
+
 .nav-container {
     max-width: 1200px;
     margin: 0 auto;
@@ -101,6 +232,54 @@ nav {
     color: var(--or-oki);
 }
 
+/* Theme Toggle Button */
+.theme-toggle {
+    background: rgba(255, 255, 255, 0.1);
+    border: 2px solid var(--or-oki);
+    border-radius: 20px 10px 20px 10px;
+    padding: 0.5rem 0.8rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+    font-size: 1.2rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.theme-toggle:hover {
+    background: rgba(253, 184, 19, 0.2);
+    border-color: var(--jaune-soleil);
+    transform: scale(1.05);
+}
+
+.theme-icon {
+    transition: all 0.4s ease;
+    display: inline-block;
+}
+
+.theme-icon-light {
+    display: none;
+}
+
+html.light-theme .theme-icon-dark {
+    display: none;
+}
+
+html.light-theme .theme-icon-light {
+    display: inline-block;
+}
+
+html.light-theme .theme-toggle {
+    background: rgba(0, 0, 0, 0.1);
+    border-color: var(--or-oki);
+}
+
+html.light-theme .theme-toggle:hover {
+    background: rgba(232, 166, 37, 0.2);
+}
+
 .menu-toggle {
     display: none;
     flex-direction: column;
@@ -869,6 +1048,15 @@ input[type="number"]:focus {
         display: none;
     }
 
+    .nav-container {
+        gap: 1rem;
+    }
+
+    .theme-toggle {
+        padding: 0.4rem 0.6rem;
+        font-size: 1rem;
+    }
+
     .menu-toggle {
         display: flex;
     }
@@ -1188,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/assets/js/main.js

@@ -1,3 +1,74 @@
+// Theme Management
+(function() {
+    const themeToggle = document.getElementById('theme-toggle');
+
+    // Fonction pour obtenir le thème actuel
+    function getCurrentTheme() {
+        return document.documentElement.classList.contains('light-theme') ? 'light' : 'dark';
+    }
+
+    // Fonction pour changer de thème
+    function toggleTheme() {
+        const currentTheme = getCurrentTheme();
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        if (newTheme === 'light') {
+            document.documentElement.classList.add('light-theme');
+        } else {
+            document.documentElement.classList.remove('light-theme');
+        }
+
+        // Sauvegarder la préférence
+        localStorage.setItem('oki-theme', newTheme);
+
+        // Mettre à jour le menu mobile si ouvert
+        const navLinks = document.querySelector('.nav-links');
+        if (navLinks && navLinks.style.display === 'flex') {
+            const background = newTheme === 'light' ? 'rgba(255, 248, 231, 0.98)' : 'rgba(0, 0, 0, 0.98)';
+            navLinks.style.background = background;
+        }
+
+        // Mettre à jour les styles de la nav en fonction du scroll actuel
+        const nav = document.querySelector('nav');
+        const currentScroll = window.pageYOffset;
+        const isLightTheme = newTheme === 'light';
+
+        if (currentScroll > 100) {
+            if (isLightTheme) {
+                nav.style.background = 'rgba(255, 248, 231, 0.98)';
+                nav.style.boxShadow = '0 2px 20px rgba(184, 122, 0, 0.3)';
+            } else {
+                nav.style.background = 'rgba(0, 0, 0, 0.98)';
+                nav.style.boxShadow = '0 2px 20px rgba(232, 166, 37, 0.3)';
+            }
+        } else {
+            if (isLightTheme) {
+                nav.style.background = 'rgba(255, 248, 231, 0.95)';
+                nav.style.boxShadow = '';
+            } else {
+                nav.style.background = 'rgba(0, 0, 0, 0.95)';
+                nav.style.boxShadow = '';
+            }
+        }
+    }
+
+    // Écouter le changement de thème système
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    darkModeMediaQuery.addEventListener('change', (e) => {
+        // Ne changer automatiquement que si l'utilisateur n'a pas de préférence stockée
+        if (!localStorage.getItem('oki-theme')) {
+            if (e.matches) {
+                document.documentElement.classList.remove('light-theme');
+            } else {
+                document.documentElement.classList.add('light-theme');
+            }
+        }
+    });
+
+    // Ajouter l'événement au bouton
+    themeToggle?.addEventListener('click', toggleTheme);
+})();
+
 // Smooth scrolling
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
@@ -20,12 +91,16 @@ let menuOpen = false;
 menuToggle?.addEventListener('click', () => {
     menuOpen = !menuOpen;
     if (menuOpen) {
+        // Déterminer le fond selon le thème actuel
+        const isLightTheme = document.documentElement.classList.contains('light-theme');
+        const background = isLightTheme ? 'rgba(255, 248, 231, 0.98)' : 'rgba(0, 0, 0, 0.98)';
+
         navLinks.style.display = 'flex';
         navLinks.style.position = 'absolute';
         navLinks.style.top = '100%';
         navLinks.style.left = '0';
         navLinks.style.right = '0';
-        navLinks.style.background = 'rgba(0, 0, 0, 0.98)';
+        navLinks.style.background = background;
         navLinks.style.flexDirection = 'column';
         navLinks.style.padding = '1rem';
         navLinks.style.borderTop = '2px solid #E8A625';
@@ -82,13 +157,24 @@ const nav = document.querySelector('nav');
 
 window.addEventListener('scroll', () => {
     const currentScroll = window.pageYOffset;
+    const isLightTheme = document.documentElement.classList.contains('light-theme');
 
     if (currentScroll > 100) {
-        nav.style.background = 'rgba(0, 0, 0, 0.98)';
-        nav.style.boxShadow = '0 2px 20px rgba(232, 166, 37, 0.3)';
+        if (isLightTheme) {
+            nav.style.background = 'rgba(255, 248, 231, 0.98)';
+            nav.style.boxShadow = '0 2px 20px rgba(184, 122, 0, 0.3)';
+        } else {
+            nav.style.background = 'rgba(0, 0, 0, 0.98)';
+            nav.style.boxShadow = '0 2px 20px rgba(232, 166, 37, 0.3)';
+        }
     } else {
-        nav.style.background = 'rgba(0, 0, 0, 0.95)';
-        nav.style.boxShadow = '';
+        if (isLightTheme) {
+            nav.style.background = 'rgba(255, 248, 231, 0.95)';
+            nav.style.boxShadow = '';
+        } else {
+            nav.style.background = 'rgba(0, 0, 0, 0.95)';
+            nav.style.boxShadow = '';
+        }
     }
 
     // Hide/show navbar on scroll

src/index.njk

@@ -4,12 +4,13 @@ layout: layouts/base.njk
 
 {% include "partials/hero.njk" %}
 {% include "partials/publics.njk" %}
-{% include "partials/fediverse.njk" %}
 {% include "partials/projects.njk" %}
+{% include "partials/djangokam.njk" %}
 {% include "partials/mission.njk" %}
 {% include "partials/hosting.njk" %}
+{% include "partials/clients.njk" %}
+{% include "partials/fediverse.njk" %}
 {% include "partials/support.njk" %}
-{% include "partials/partners.njk" %}
 {% include "partials/faq.njk" %}
 {% include "partials/engagement.njk" %}
 {% include "partials/contact.njk" %}