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 · 2026-07-05 20:39:58 +00:00 · 2026-07-06 00:37:33 +04:00 · 2026-07-06 00:32:16 +04:00
19 changed files with 971 additions and 605 deletions
@@ -1,12 +1,32 @@
 {
  "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.",
-    "À 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) »."
+    "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": [
    {
@@ -27,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",
@@ -43,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>
-        <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">
@@ -10,10 +10,19 @@
            {{ djangokam.message_cle }}
        </blockquote>

-        <div class="djangokam-histoire">
-            {% for paragraphe in djangokam.histoire %}
-            <p>{{ paragraphe }}</p>
-            {% endfor %}
+        <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">
@@ -21,12 +30,23 @@
            <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>

-        <p class="djangokam-instrument">{{ djangokam.ia_instrument }}</p>
+        <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 %}
@@ -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;">
-            <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>
@@ -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="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;">💻 Application Web Sur Mesure</h4>
-                    <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
-                        <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>
+            <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;">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;">
-                    <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>
+                <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;">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;">
-                    <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;">• Castopod (podcast)</li>
-                        <li style="margin-bottom: 0.5rem;">• Pixelfed (photos)</li>
-                        <li style="margin-bottom: 0.5rem;">• Funkwhale (musique)</li>
+                <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 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;">
-                <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>
-                    <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 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;">
-            <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">
@@ -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;">
-                💡 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>
@@ -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 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>
Author	SHA1	Message	Date
cedric	f7e9acb2d3	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.	2026-07-06 01:23:33 +04:00
cedric	4eaad7a49e	fix: corriger la typographie et les liens PAWÒL-NU de la section DJANGOKAM	2026-07-06 00:56:47 +04:00
cedric	ea7736cb28	Merge pull request 'feat: ajouter les données de la section DJANGOKAM' (#1 ) from feat/djangokam into master Reviewed-on: #1	2026-07-05 20:39:58 +00:00
cedric	494f3cd0c7	fix: remplacer les pochettes par les versions HD et lier vers pawol.nu	2026-07-06 00:37:33 +04:00
cedric	b571e1f8f3	feat: ajouter les pochettes des singles DJANGOKAM	2026-07-06 00:32:16 +04:00