feat: mettre à jour la navigation

feat: ajouter la section réalisations clients
refactor: remplacer Codeberg par Labola, retirer Pleroma et PeerTube
2026-05-17 22:54:54 +04:00 · 2026-05-17 22:54:44 +04:00 · 2026-05-17 22:54:33 +04:00 · 2026-05-17 22:54:26 +04:00 · 2026-05-17 22:54:17 +04:00 · 2026-05-17 22:54:11 +04:00
22 changed files with 491 additions and 168 deletions
@@ -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)
@@ -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": {
@@ -0,0 +1,16 @@
+[
+  {
+    "name": "KA UBUNTU",
+    "domain": "kaubuntu.com",
+    "url": "https://kaubuntu.com",
+    "logo": "https://kaubuntu.com/wp-content/uploads/2024/12/cropped-logo-noir-RVB-192x192.png",
+    "description": "Média indépendant engagé pour l'autodétermination de La Réunion et l'intégration panafricaine. \"Je suis parce que nous sommes.\""
+  },
+  {
+    "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."
+  }
+]
@@ -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/"
        }
      ]
    }
@@ -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."
  }
 ]
@@ -4,8 +4,16 @@
    "url": "#solutions"
  },
  {
-    "text": "Fédiverse",
-    "url": "#fediverse"
+    "text": "Nos projets",
+    "url": "#projets"
+  },
+  {
+    "text": "Services",
+    "url": "#hebergement"
+  },
+  {
+    "text": "Réalisations",
+    "url": "#clients"
  },
  {
    "text": "FAQ",
@@ -16,8 +24,8 @@
    "url": "#contact"
  },
  {
-    "text": "Codeberg",
-    "url": "https://codeberg.org/OKI",
+    "text": "Labola",
+    "url": "https://labola.o-k-i.net/",
    "external": true
  }
 ]
@@ -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",
@@ -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é"
-    ]
  }
 ]
@@ -3,32 +3,8 @@
    "name": "KUTE",
    "icon": "🎙️",
    "platform": "Castopod",
-    "description": "Alternative libre pour le podcasting. Créez, hébergez et diffusez vos podcasts en toute autonomie.",
+    "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"
-  },
-  {
-    "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"
-  },
-  {
-    "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": "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"
  }
 ]
@@ -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"
 }
@@ -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"
  }
 ]
@@ -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,34 @@
        "contactType": "customer service"
      },
      "sameAs": [
-        "https://gade.o-k-i.net/",
-        "https://bokantaj.o-k-i.net/",
-        "https://mizik.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>
+        (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" %}
@@ -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>
@@ -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>
@@ -1,14 +1,11 @@
-<section id="fediverse" class="fediverse">
+<section id="kute" class="fediverse">
    <div class="section-container">
-        <h2>Nos Services <span class="accent-text">Fédiverse</span></h2>
+        <h2>Notre instance <span class="accent-text">KUTE</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.
+            Podcasting libre et indépendant, sans algorithme, sans censure arbitraire.
        </p>

-        <div class="services-grid">
+        <div class="services-grid" style="max-width: 480px; margin: 0 auto;">
            {% for service in services %}
            <div class="service-card">
                <div class="service-icon">{{ service.icon }}</div>
@@ -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>
@@ -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 →
@@ -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">
@@ -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>
@@ -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;
    }
@@ -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
@@ -4,12 +4,12 @@ layout: layouts/base.njk

 {% include "partials/hero.njk" %}
 {% include "partials/publics.njk" %}
-{% include "partials/fediverse.njk" %}
 {% include "partials/projects.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" %}
Author	SHA1	Message	Date
cedric	2e9bb3190a	feat: mettre à jour la navigation	2026-05-17 22:54:54 +04:00
cedric	af8bb2a96e	feat: ajouter la section réalisations clients	2026-05-17 22:54:44 +04:00
cedric	cabda55c5c	refactor: remplacer Codeberg par Labola, retirer Pleroma et PeerTube	2026-05-17 22:54:33 +04:00
cedric	5862a9e471	refactor: mettre à jour les projets web (oki.re→pawol.nu, retraits)	2026-05-17 22:54:26 +04:00
cedric	6353e6cd05	feat: restructurer les services — dev web, hébergement, instances Fédiverse	2026-05-17 22:54:17 +04:00
cedric	4eefa05d17	feat: recentrer l'offre sur les associations militantes	2026-05-17 22:54:11 +04:00
cedric	b93fbae901	feat: réduire le Fediverse à l'instance KUTE	2026-05-17 22:54:05 +04:00
cedric	14003e6f32	feat: pivoter vers le développement web sur mesure pour associations	2026-05-17 22:48:40 +04:00
cedric	36e07ade98	feat: add theme switching	2025-11-12 23:13:02 +04:00
cedric	d4624b1729	refactor: remove one link in contact	2025-11-12 17:16:06 +04:00