refactor: nouvelle identité visuelle, design plat et affirmé

Remplace les codes visuels generiques (degrades animes, icones
flottantes, cartes glassmorphiques, coins organiques) par un systeme
graphique sobre et institutionnel : aplats de couleur, bandeau
'drapeau' OKI, typographie Archivo/Inter, cartes a bordure d'accent.
Les couleurs de marque sont inchangees.

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 ORGANISATION KA INTERNATIONALE (OKI), une association culturelle guadeloupéenne qui explore les possibilités offertes par l'intelligence artificielle pour promouvoir les langues dites « créoles », 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 <a href=\"https://pawol.nu\" target=\"_blank\" rel=\"noopener noreferrer\">PAWÒL-NU</a>"
+    }
+  ],
+  "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 de OKI : <a href=\"https://pawol.nu\" target=\"_blank\" rel=\"noopener noreferrer\">PAWÒL-NU</a>, 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": "PAWÒL-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 -->
@@ -38,6 +38,11 @@
     <link rel="icon" type="image/png" sizes="512x512" href="/assets/images/logo-512x512.png">
     <link rel="apple-touch-icon" href="/assets/images/logo-512x512.png">
 
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+
     <!-- Stylesheet -->
     <link rel="stylesheet" href="/assets/css/styles.css">
 
@@ -64,17 +69,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>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/contact.njk

@@ -1,8 +1,8 @@
 <section class="contact" id="contact">
     <div class="section-container">
-        <h2 style="text-align: center; margin-bottom: 1rem; color: var(--or-oki);">Envie de passer à l'action ?</h2>
-        <p style="text-align: center; max-width: 800px; margin: 0 auto 3rem; font-size: 1.1rem; line-height: 1.6;">
-            « Mais je sais pas par où commencer ! » Aucun souci ! On t'accompagne pas à pas. Un message sur nos réseaux, un mail à <a href="mailto:kontak@o-k-i.net" style="color: var(--or-oki);">kontak@o-k-i.net</a>, et on te montre comment ton talent peut changer les choses. Même si c'est juste une idée dans ta tête – chez nous, les idées deviennent des actions.
+        <h2>Envie de passer à l'action ?</h2>
+        <p class="contact-lede">
+            « Mais je sais pas par où commencer ! » Aucun souci ! On t'accompagne pas à pas. Un message sur nos réseaux, un mail à <a href="mailto:kontak@o-k-i.net">kontak@o-k-i.net</a>, et on te montre comment ton talent peut changer les choses. Même si c'est juste une idée dans ta tête – chez nous, les idées deviennent des actions.
         </p>
     </div>
     <div class="contact-grid">

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 | safe }}</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 | safe }}</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/faq.njk

@@ -20,7 +20,7 @@
         </div>
 
         <div class="faq-footer">
-            <p style="font-size: 1.1rem; margin-bottom: 1rem;">
+            <p>
                 Vous avez d'autres questions ?
             </p>
             <a href="#contact" class="btn btn-secondary">

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

@@ -1,16 +1,17 @@
 <footer>
+    <div class="flag-bar"></div>
     <div class="footer-content">
-        <p style="font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem;">
+        <p class="footer-name">
             {{ site.name }}
         </p>
-        <p style="opacity: 0.8;">
+        <p>
             Association à but non lucratif | Promotion des langues et cultures | Alternatives libres aux GAFAM
         </p>
-        <p style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.7;">
+        <p class="footer-meta">
             {{ site.copyright }} | {{ site.tagline }}
         </p>
-        <p style="margin-top: 1rem;">
-            <a href="/mentions-legales/" style="color: var(--or-oki); text-decoration: none; transition: opacity 0.3s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
+        <p class="footer-legal">
+            <a href="/mentions-legales/">
                 Mentions Légales
             </a>
         </p>

src/_includes/partials/hero.njk

@@ -1,25 +1,18 @@
 <section class="hero">
-    <div class="network-bg">
-        <div class="node" style="top: 20%; left: 10%;"></div>
-        <div class="node" style="top: 50%; left: 80%; animation-delay: 1s;"></div>
-        <div class="node" style="top: 70%; left: 30%; animation-delay: 2s;"></div>
-        <div class="node" style="top: 30%; left: 60%; animation-delay: 0.5s;"></div>
-        <div class="node" style="top: 80%; left: 70%; animation-delay: 1.5s;"></div>
-    </div>
     <div class="hero-content">
         <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 ?
+        <p class="hero-tagline">
+            {{ 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,83 +1,101 @@
 <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>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.
+        <p class="section-subtitle">
+            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>
 
         <div class="services-offerings">
-            <h3 style="text-align: center; color: var(--or-oki); margin: 3rem 0 2rem;">Nos offres de services</h3>
+            <h3>Nos offres de services</h3>
 
-            <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>
-                    <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>
+            <div class="offer-cards">
+                <div class="offer-card">
+                    <h4>Application Web Sur Mesure</h4>
+                    <ul class="offer-list">
+                        <li>Gestion de membres et adhésions</li>
+                        <li>Agenda et gestion d'événements</li>
+                        <li>Pétitions et mobilisation en ligne</li>
+                        <li>Caisse de solidarité, dons</li>
+                        <li>Newsletter et communication interne</li>
                     </ul>
-                    <p style="color: var(--or-oki); font-weight: bold;">Mutualisé</p>
+                    <p class="offer-tagline">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>
-                    <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
-                        <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;">• Pixelfed (photos)</li>
+                <div class="offer-card offer-card--hosting">
+                    <h4>Site Vitrine & Hébergement</h4>
+                    <ul class="offer-list">
+                        <li>WordPress ou site statique</li>
+                        <li>Hébergement mutualisé sécurisé</li>
+                        <li>Base de données MySQL/PostgreSQL</li>
+                        <li>Certificat SSL gratuit</li>
+                        <li>Serveur mail inclus</li>
                     </ul>
-                    <p style="color: var(--or-oki); font-weight: bold;">Installation & maintenance</p>
+                    <p class="offer-tagline">Hébergement éthique</p>
+                </div>
+
+                <div class="offer-card offer-card--fediverse">
+                    <h4>Instance Fédiverse</h4>
+                    <p class="offer-intro">Votre association veut sa propre plateforme libre, sans dépendre d'un tiers ? On installe et administre votre instance :</p>
+                    <ul class="offer-list">
+                        <li>Mastodon / Pleroma (réseau social)</li>
+                        <li>PeerTube (vidéo)</li>
+                        <li>Castopod (podcast)</li>
+                        <li>Pixelfed (photos)</li>
+                        <li>Funkwhale (musique)</li>
+                    </ul>
+                    <p class="offer-tagline">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>
-                <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>
-                    <li style="margin-bottom: 0.5rem;">✅ Administration de comptes web (réseaux sociaux, emails)</li>
-                    <li style="margin-bottom: 0.5rem;">✅ Gestion sécurisée des accès et mots de passe</li>
-                    <li style="margin-bottom: 0.5rem;">✅ Protection contre les prises de contrôle internes</li>
-                    <li style="margin-bottom: 0.5rem;">✅ Médiation en cas de conflits sur les outils numériques</li>
+            <div class="hosting-note">
+                <h4>Gestion numérique sécurisée</h4>
+                <p>OKI peut assurer la gestion complète de vos propriétés numériques :</p>
+                <ul>
+                    <li>Propriété et gestion de noms de domaine</li>
+                    <li>Administration de comptes web (réseaux sociaux, emails)</li>
+                    <li>Gestion sécurisée des accès et mots de passe</li>
+                    <li>Protection contre les prises de contrôle internes</li>
+                    <li>Médiation en cas de conflits sur les outils numériques</li>
                 </ul>
             </div>
 
-            <div style="text-align: center; margin-top: 3rem;">
-                <h4 style="color: var(--or-oki); margin-bottom: 1rem;">💡 Pourquoi choisir OKI ?</h4>
-                <p style="max-width: 800px; margin: 0 auto 2rem; line-height: 1.6;">
+            <div class="hosting-why">
+                <h4>Pourquoi choisir OKI ?</h4>
+                <p>
                     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.
+        <p class="mission-text mission-text--secondary">
+            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

@@ -1,7 +1,7 @@
 <nav>
     <div class="nav-container">
-        <a href="/" class="logo logo-with-glow" style="display: flex; align-items: center; gap: 0.5rem;">
-            <img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image" style="height: 2.5rem; width: auto;">
+        <a href="/" class="logo">
+            <img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image">
             <span>{{ site.shortName }}</span>
         </a>
         <ul class="nav-links">
@@ -13,10 +13,15 @@
             </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>
             <span></span>
         </div>
     </div>
+    <div class="flag-bar"></div>
 </nav>

src/_includes/partials/partners.njk

@@ -1,6 +1,6 @@
 <section id="partenaires" class="partners">
     <div class="section-container">
-        <h2 style="text-align: center; margin-bottom: 1rem;">Nos <span class="accent-text">Partenaires</span></h2>
+        <h2>Nos <span class="accent-text">Partenaires</span></h2>
         <p class="section-subtitle">
             Ils partagent nos valeurs et contribuent à enrichir notre écosystème numérique libre
         </p>

src/_includes/partials/projects.njk

@@ -4,12 +4,12 @@
 
         <div class="project-cards">
             {% for project in projects %}
-            <a href="{{ project.url }}" target="_blank" rel="noopener noreferrer" class="project-card" style="text-decoration: none; color: inherit;">
+            <a href="{{ project.url }}" target="_blank" rel="noopener noreferrer" class="project-card">
                 <div class="project-icon">{{ project.icon }}</div>
                 <h3>{{ project.name }}</h3>
                 <p class="project-domain">{{ project.domain }}</p>
                 <p>{{ project.description }}</p>
-                <span class="service-link" style="margin-top: 1rem;">
+                <span class="service-link project-card-link">
                     Visiter le site →
                 </span>
             </a>

src/_includes/partials/publics.njk

@@ -29,10 +29,10 @@
         </div>
 
         <div class="publics-footer">
-            <p style="font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600;">
-                💡 Prêt à franchir le pas ?
+            <p>
+                Prêt à franchir le pas ?
             </p>
-            <p style="opacity: 0.9;">
+            <p>
                 Parce que tout grand changement commence par une conversation
             </p>
         </div>

src/_includes/partials/support.njk

@@ -1,23 +1,19 @@
-<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;">
+        <p class="support-lede">
             Chaque like, chaque partage, chaque don compte pour construire cet internet-là
         </p>
-        <p style="font-size: 1.1rem; margin-bottom: 3rem; opacity: 0.9;">
+        <p class="support-lede-secondary">
             Celui où nos ancêtres ne seraient pas effacés par des algorithmes aveugles. Celui où une jeune fille de Lapwent (Pointe-à-Pitre) peut lancer un média en langue dite "créole", sans demander la permission à une multinationale.
         </p>
 
-        <!-- Donation Options Container -->
-        <div style="max-width: 900px; margin: 0 auto;">
+        <div class="donation-panels">
 
-            <!-- One-time Donations -->
-            <div style="background: rgba(232, 166, 37, 0.1); border-radius: 20px; padding: 2rem; margin-bottom: 2rem;">
-                <h3 style="color: var(--or-oki); margin-bottom: 1.5rem; text-align: center;">
-                    💸 Don ponctuel
-                </h3>
+            <div class="support-panel support-panel--primary">
+                <h3>Don ponctuel</h3>
 
-                <div class="donation-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
+                <div class="donation-grid">
                     <a href="https://don.o-k-i.net/b/aEUdTw5SD3SH7m0bII" class="donation-amount" target="_blank" rel="noopener noreferrer">
                         1€
                     </a>
@@ -36,24 +32,21 @@
                 </div>
 
                 <div style="text-align: center;">
-                    <label style="display: block; margin-bottom: 1rem; color: var(--blanc-creme);">Montant personnalisé :</label>
+                    <label class="donation-form-label">Montant personnalisé :</label>
                     <div class="custom-donation-form">
                         <input type="number" id="customAmountOneTime" placeholder="Montant" min="1" class="custom-amount-input">
                         <span class="currency-symbol">€</span>
-                        <button onclick="handleCustomDonation('oneTime')" class="custom-donation-btn custom-donation-btn-primary" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
+                        <button onclick="handleCustomDonation('oneTime')" class="custom-donation-btn custom-donation-btn-primary">
                             Donner
                         </button>
                     </div>
                 </div>
             </div>
 
-            <!-- Monthly Donations -->
-            <div style="background: rgba(0, 168, 84, 0.1); border-radius: 20px; padding: 2rem;">
-                <h3 style="color: var(--vert-oki); margin-bottom: 1.5rem; text-align: center;">
-                    ⭐ Don mensuel
-                </h3>
+            <div class="support-panel support-panel--secondary">
+                <h3>Don mensuel</h3>
 
-                <div class="donation-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
+                <div class="donation-grid">
                     <a href="https://don.o-k-i.net/b/7sI9Dgch14WL7m0fZ3" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
                         1€/mois
                     </a>
@@ -72,11 +65,11 @@
                 </div>
 
                 <div style="text-align: center;">
-                    <label style="display: block; margin-bottom: 1rem; color: var(--blanc-creme);">Montant mensuel personnalisé :</label>
+                    <label class="donation-form-label">Montant mensuel personnalisé :</label>
                     <div class="custom-donation-form">
                         <input type="number" id="customAmountMonthly" placeholder="Montant" min="1" class="custom-amount-input custom-amount-input-monthly">
                         <span class="currency-symbol">€/mois</span>
-                        <button onclick="handleCustomDonation('monthly')" class="custom-donation-btn custom-donation-btn-secondary" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
+                        <button onclick="handleCustomDonation('monthly')" class="custom-donation-btn custom-donation-btn-secondary">
                             S'abonner
                         </button>
                     </div>
@@ -85,62 +78,35 @@
 
         </div>
 
-        <!-- Alternative Donation Methods -->
-        <div style="margin-top: 3rem;">
-            <h3 style="text-align: center; color: var(--or-oki); margin-bottom: 2rem; font-size: 1.5rem;">
+        <div class="alt-donation-section">
+            <h3 class="alt-donation-title">
                 Autres moyens de nous soutenir
             </h3>
 
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 700px; margin: 0 auto;">
-
-                <!-- Liberapay -->
-                <a href="https://liberapay.com/OKI/donate" target="_blank" rel="noopener noreferrer" style="
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    gap: 1rem;
-                    padding: 2rem;
-                    background: rgba(242, 179, 54, 0.1);
-                    border: 2px solid #F2B336;
-                    border-radius: 15px;
-                    text-decoration: none;
-                    transition: all 0.3s ease;
-                " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 30px rgba(242, 179, 54, 0.3)'" onmouseout="this.style.transform=''; this.style.boxShadow=''">
-                    <div style="font-size: 3rem;">💛</div>
-                    <h4 style="color: #F2B336; font-size: 1.3rem; margin: 0;">Liberapay</h4>
-                    <p style="color: var(--blanc-creme); text-align: center; margin: 0; font-size: 0.95rem;">
+            <div class="alt-donation-grid">
+                <a href="https://liberapay.com/OKI/donate" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--liberapay">
+                    <div class="alt-donation-icon">💛</div>
+                    <h4>Liberapay</h4>
+                    <p>
                         Soutenez-nous via Liberapay, une plateforme libre et éthique
                     </p>
                 </a>
 
-                <!-- Ko-fi -->
-                <a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" style="
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    gap: 1rem;
-                    padding: 2rem;
-                    background: rgba(255, 93, 93, 0.1);
-                    border: 2px solid #FF5E5B;
-                    border-radius: 15px;
-                    text-decoration: none;
-                    transition: all 0.3s ease;
-                " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 30px rgba(255, 93, 93, 0.3)'" onmouseout="this.style.transform=''; this.style.boxShadow=''">
-                    <div style="font-size: 3rem;">☕</div>
-                    <h4 style="color: #FF5E5B; font-size: 1.3rem; margin: 0;">Ko-fi</h4>
-                    <p style="color: var(--blanc-creme); text-align: center; margin: 0; font-size: 0.95rem;">
+                <a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--kofi">
+                    <div class="alt-donation-icon">☕</div>
+                    <h4>Ko-fi</h4>
+                    <p>
                         Offrez-nous un café sur Ko-fi pour nous encourager
                     </p>
                 </a>
-
             </div>
         </div>
 
-        <div style="text-align: center; margin-top: 3rem; padding: 1.5rem; background: rgba(0, 0, 0, 0.3); border-radius: 15px;">
-            <p style="font-size: 0.95rem; margin-bottom: 0.5rem;">
-                🔒 Les dons directs (montants ci-dessus) sont sécurisés par <a href="https://stripe.com/" target="_blank" style="color: var(--or-oki); text-decoration: none;">Stripe</a>.
+        <div class="security-note">
+            <p>
+                Les dons directs (montants ci-dessus) sont sécurisés par <a href="https://stripe.com/" target="_blank">Stripe</a>.
             </p>
-            <p style="font-size: 0.9rem; opacity: 0.8;">
+            <p>
                 Liberapay et Ko-fi utilisent leurs propres systèmes de paiement sécurisés.
             </p>
         </div>

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,14 +157,25 @@ const nav = document.querySelector('nav');
 
 window.addEventListener('scroll', () => {
     const currentScroll = window.pageYOffset;
+    const isLightTheme = document.documentElement.classList.contains('light-theme');
 
     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 = '';
         }
+    }
 
     // Hide/show navbar on scroll
     if (currentScroll > lastScroll && currentScroll > 500) {

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" %}