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.
fix: corriger la typographie et les liens PAWÒL-NU de la section DJANGOKAM
2026-07-06 01:23:33 +04:00 · 2026-07-06 00:56:47 +04:00
16 changed files with 867 additions and 607 deletions
@@ -1,17 +1,17 @@
 {
  "surtitre": "Notre projet musical",
  "titre": "DJANGOKAM",
-  "titreAccent": "l'artiste IA caribéen",
+  "titreAccent": "l'artiste IA Caribéen",
  "accroche": "Quand l'intelligence artificielle chante en KA.",
-  "message_cle": "DJANGOKAM n'est pas simplement un artiste virtuel. Il est le premier projet musical porté par l'ORGANISATION KA INTERNATIONALE (OKI), une association culturelle guadeloupéenne qui explore les possibilités offertes par l'intelligence artificielle pour promouvoir les langues, les cultures et la création artistique caribéennes. À travers ce projet, OKI démontre que les technologies émergentes peuvent être mises au service du patrimoine culturel plutôt que de s'y opposer.",
+  "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.",
+    "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) »."
+    "À 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",
+    "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",
+    "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": [
@@ -47,10 +47,10 @@
    {
      "icon": "📝",
      "chiffre": "Paroles & traductions",
-      "texte": "transcriptions, traductions et karaokés de chaque titre sur PAWOL.NU"
+      "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 d'OKI : PAWOL.NU, médias libres, outils libres et plateformes du Fédiverse.",
+  "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",
@@ -63,13 +63,13 @@
      "primary": false
    },
    {
-      "text": "PAWOL.NU",
+      "text": "PAWÒL-NU",
      "url": "https://pawol.nu",
      "primary": false
    }
  ],
  "presse": {
-    "texte": "Presse & médias : dossier de presse, visuels HD et interviews sur demande —",
+    "texte": "Presse & médias : dossier de presse, visuels HD et interviews sur demande -",
    "email": "kontak@o-k-i.net"
  }
 }
@@ -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">
@@ -1,6 +1,6 @@
 <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>
+        <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>
@@ -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>
+        <h2>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;">
+        <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" 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.
+            « 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">
@@ -30,7 +30,7 @@
            <div class="djangokam-fact-card">
                <div class="djangokam-fact-icon">{{ fait.icon }}</div>
                <h3>{{ fait.chiffre }}</h3>
-                <p>{{ fait.texte }}</p>
+                <p>{{ fait.texte | safe }}</p>
            </div>
            {% endfor %}
        </div>
@@ -46,7 +46,7 @@
            {% endfor %}
        </div>
-        <p class="djangokam-instrument">{{ djangokam.ia_instrument }}</p>
+        <p class="djangokam-instrument">{{ djangokam.ia_instrument | safe }}</p>
        <div class="cta-buttons djangokam-buttons">
            {% for bouton in djangokam.boutons %}
@@ -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">
@@ -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;">
+        <p class="footer-legal">
-            <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'">
+            <a href="/mentions-legales/">
                Mentions Légales
            </a>
        </p>
@@ -1,15 +1,8 @@
 <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;">
+        <p class="hero-tagline">
            {{ site.tagline }}
        </p>
        <div class="hero-tags">
@@ -1,13 +1,13 @@
 <section id="hebergement" class="hosting">
    <div class="section-container">
-        <h2 style="text-align: center; margin-bottom: 1rem;">Développement <span class="accent-text">Web sur Mesure</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;">
+        <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>🚀 Des solutions complètes, de A à Z</h3>
+            <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">
@@ -36,63 +36,62 @@
        </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="offer-cards">
-
+                <div class="offer-card">
-                <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>Application Web Sur Mesure</h4>
-                    <h4 style="color: var(--vert-oki); margin-bottom: 1rem;">💻 Application Web Sur Mesure</h4>
+                    <ul class="offer-list">
-                    <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
+                        <li>Gestion de membres et adhésions</li>
-                        <li style="margin-bottom: 0.5rem;">• Gestion de membres et adhésions</li>
+                        <li>Agenda et gestion d'événements</li>
-                        <li style="margin-bottom: 0.5rem;">• Agenda et gestion d'événements</li>
+                        <li>Pétitions et mobilisation en ligne</li>
-                        <li style="margin-bottom: 0.5rem;">• Pétitions et mobilisation en ligne</li>
+                        <li>Caisse de solidarité, dons</li>
-                        <li style="margin-bottom: 0.5rem;">• Caisse de solidarité, dons</li>
+                        <li>Newsletter et communication interne</li>
                        <li style="margin-bottom: 0.5rem;">• Newsletter et communication interne</li>
                    </ul>
-                    <p style="color: var(--or-oki); font-weight: bold;">Développement sur mesure</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;">
+                <div class="offer-card offer-card--hosting">
-                    <h4 style="color: var(--rouge-oki); margin-bottom: 1rem;">🌐 Site Vitrine & Hébergement</h4>
+                    <h4>Site Vitrine & Hébergement</h4>
-                    <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
+                    <ul class="offer-list">
-                        <li style="margin-bottom: 0.5rem;">• WordPress ou site statique</li>
+                        <li>WordPress ou site statique</li>
-                        <li style="margin-bottom: 0.5rem;">• Hébergement mutualisé sécurisé</li>
+                        <li>Hébergement mutualisé sécurisé</li>
-                        <li style="margin-bottom: 0.5rem;">• Base de données MySQL/PostgreSQL</li>
+                        <li>Base de données MySQL/PostgreSQL</li>
-                        <li style="margin-bottom: 0.5rem;">• Certificat SSL gratuit</li>
+                        <li>Certificat SSL gratuit</li>
-                        <li style="margin-bottom: 0.5rem;">• Serveur mail inclus</li>
+                        <li>Serveur mail inclus</li>
                    </ul>
-                    <p style="color: var(--or-oki); font-weight: bold;">Hébergement éthique</p>
+                    <p class="offer-tagline">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;">
+                <div class="offer-card offer-card--fediverse">
-                    <h4 style="color: var(--or-oki); margin-bottom: 1rem;">🕸️ Instance Fédiverse</h4>
+                    <h4>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>
+                    <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 style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
+                    <ul class="offer-list">
-                        <li style="margin-bottom: 0.5rem;">• Mastodon / Pleroma (réseau social)</li>
+                        <li>Mastodon / Pleroma (réseau social)</li>
-                        <li style="margin-bottom: 0.5rem;">• PeerTube (vidéo)</li>
+                        <li>PeerTube (vidéo)</li>
-                        <li style="margin-bottom: 0.5rem;">• Castopod (podcast)</li>
+                        <li>Castopod (podcast)</li>
-                        <li style="margin-bottom: 0.5rem;">• Pixelfed (photos)</li>
+                        <li>Pixelfed (photos)</li>
-                        <li style="margin-bottom: 0.5rem;">• Funkwhale (musique)</li>
+                        <li>Funkwhale (musique)</li>
                    </ul>
-                    <p style="color: var(--or-oki); font-weight: bold;">Installation & maintenance</p>
+                    <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;">
+            <div class="hosting-note">
-                <h4 style="color: var(--or-oki); margin-bottom: 1rem;">🔐 Gestion numérique sécurisée</h4>
+                <h4>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>
+                <p>OKI peut assurer la gestion complète de vos propriétés numériques :</p>
-                <ul style="list-style: none; padding-left: 1rem;">
+                <ul>
-                    <li style="margin-bottom: 0.5rem;">✅ Propriété et gestion de noms de domaine</li>
+                    <li>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>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>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>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>
+                    <li>Médiation en cas de conflits sur les outils numériques</li>
                </ul>
            </div>
-            <div style="text-align: center; margin-top: 3rem;">
+            <div class="hosting-why">
-                <h4 style="color: var(--or-oki); margin-bottom: 1rem;">💡 Pourquoi choisir OKI ?</h4>
+                <h4>Pourquoi choisir OKI ?</h4>
-                <p style="max-width: 800px; margin: 0 auto 2rem; line-height: 1.6;">
+                <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 et nous appliquons des tarifs
@@ -4,7 +4,7 @@
        <p class="mission-text">
            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;">
+        <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>
@@ -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;">
+        <a href="/" class="logo">
-            <img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image" style="height: 2.5rem; width: auto;">
+            <img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image">
            <span>{{ site.shortName }}</span>
        </a>
        <ul class="nav-links">
@@ -23,4 +23,5 @@
            <span></span>
        </div>
    </div>
    <div class="flag-bar"></div>
 </nav>
@@ -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>
@@ -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>
@@ -29,10 +29,10 @@
        </div>
        <div class="publics-footer">
-            <p style="font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600;">
+            <p>
-                💡 Prêt à franchir le pas ?
+                Prêt à franchir le pas ?
            </p>
-            <p style="opacity: 0.9;">
+            <p>
                Parce que tout grand changement commence par une conversation
            </p>
        </div>
@@ -1,23 +1,19 @@
 <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 class="donation-panels">
        <div style="max-width: 900px; margin: 0 auto;">
-            <!-- One-time Donations -->
+            <div class="support-panel support-panel--primary">
-            <div style="background: rgba(232, 166, 37, 0.1); border-radius: 20px; padding: 2rem; margin-bottom: 2rem;">
+                <h3>Don ponctuel</h3>
                <h3 style="color: var(--or-oki); margin-bottom: 1.5rem; text-align: center;">
                    💸 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 class="support-panel support-panel--secondary">
-            <div style="background: rgba(0, 168, 84, 0.1); border-radius: 20px; padding: 2rem;">
+                <h3>Don mensuel</h3>
                <h3 style="color: var(--vert-oki); margin-bottom: 1.5rem; text-align: center;">
                    ⭐ 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 class="alt-donation-section">
-        <div style="margin-top: 3rem;">
+            <h3 class="alt-donation-title">
            <h3 style="text-align: center; color: var(--or-oki); margin-bottom: 2rem; font-size: 1.5rem;">
                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;">
+            <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">
-                <!-- Liberapay -->
+                    <div class="alt-donation-icon">💛</div>
-                <a href="https://liberapay.com/OKI/donate" target="_blank" rel="noopener noreferrer" style="
+                    <h4>Liberapay</h4>
-                    display: flex;
+                    <p>
                    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;">
                        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" class="alt-donation-card alt-donation-card--kofi">
-                <a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" style="
+                    <div class="alt-donation-icon">☕</div>
-                    display: flex;
+                    <h4>Ko-fi</h4>
-                    flex-direction: column;
+                    <p>
                    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;">
                        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;">
+        <div class="security-note">
-            <p style="font-size: 0.95rem; margin-bottom: 0.5rem;">
+            <p>
-                🔒 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>.
+                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>