refactor: migrer les partials vers le contenu localisé

src/_includes/partials/clients.njk

@@ -1,12 +1,12 @@
 <section id="clients" class="partners">
     <div class="section-container">
-        <h2>Ils nous ont <span class="accent-text">fait confiance</span></h2>
+        <h2>{{ t.clients.section_title }} <span class="accent-text">{{ t.clients.section_title_accent }}</span></h2>
         <p class="section-subtitle">
-            Des organisations engagées qui ont choisi OKI pour construire leur présence numérique
+            {{ t.clients.section_subtitle }}
         </p>
 
         <div class="partners-grid">
-            {% for client in clients %}
+            {% for client in t.clients.items %}
             <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">
@@ -15,7 +15,7 @@
                 <p class="project-domain">{{ client.domain }}</p>
                 <p class="partner-description">{{ client.description }}</p>
                 <span class="partner-link">
-                    Visiter le site →
+                    {{ t.clients.link_text }} →
                 </span>
             </a>
             {% endfor %}

src/_includes/partials/contact.njk

@@ -1,12 +1,12 @@
 <section class="contact" id="contact">
     <div class="section-container">
-        <h2>Envie de passer à l'action ?</h2>
+        <h2>{{ t.contact.title }}</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.
+            {{ t.contact.lede | safe }}
         </p>
     </div>
     <div class="contact-grid">
-        {% for section in contact.sections %}
+        {% for section in t.contact.sections %}
         <div class="contact-card">
             <h3>{{ section.title }}</h3>
             <div class="contact-links">

src/_includes/partials/djangokam.njk

@@ -1,32 +1,32 @@
 <section id="djangokam" class="djangokam">
     <div class="section-container">
-        <p class="djangokam-surtitre">{{ djangokam.surtitre }}</p>
+        <p class="djangokam-surtitre">{{ t.djangokam.surtitre }}</p>
-        <h2>{{ djangokam.titre }} <span class="accent-text">{{ djangokam.titreAccent }}</span></h2>
+        <h2>{{ t.djangokam.titre }} <span class="accent-text">{{ t.djangokam.titreAccent }}</span></h2>
-        <p class="section-subtitle">{{ djangokam.accroche }}</p>
+        <p class="section-subtitle">{{ t.djangokam.accroche }}</p>
 
         <img src="/assets/images/djangokam-portrait.webp" alt="Portrait officiel de DJANGOKAM" class="djangokam-portrait" width="512" height="512" loading="lazy">
 
         <blockquote class="djangokam-highlight">
-            {{ djangokam.message_cle }}
+            {{ t.djangokam.message_cle }}
         </blockquote>
 
         <div class="djangokam-histoire-wrapper">
             <div class="djangokam-histoire">
-                {% for paragraphe in djangokam.histoire %}
+                {% for paragraphe in t.djangokam.histoire %}
                 <p>{{ paragraphe }}</p>
                 {% endfor %}
             </div>
 
             <figure class="djangokam-duo">
-                <a href="{{ djangokam.duo.url }}" target="_blank" rel="noopener noreferrer">
+                <a href="{{ t.djangokam.duo.url }}" target="_blank" rel="noopener noreferrer">
-                    <img src="{{ djangokam.duo.image }}" alt="{{ djangokam.duo.alt }}" loading="lazy">
+                    <img src="{{ t.djangokam.duo.image }}" alt="{{ t.djangokam.duo.alt }}" loading="lazy">
-                    <figcaption>{{ djangokam.duo.legende }}</figcaption>
+                    <figcaption>{{ t.djangokam.duo.legende }}</figcaption>
                 </a>
             </figure>
         </div>
 
         <div class="djangokam-facts">
-            {% for fait in djangokam.faits %}
+            {% for fait in t.djangokam.faits %}
             <div class="djangokam-fact-card">
                 <div class="djangokam-fact-icon">{{ fait.icon }}</div>
                 <h3>{{ fait.chiffre }}</h3>
@@ -36,7 +36,7 @@
         </div>
 
         <div class="djangokam-clips">
-            {% for clip in djangokam.clips %}
+            {% for clip in t.djangokam.clips %}
             <figure class="djangokam-clip">
                 <a href="{{ clip.url }}" target="_blank" rel="noopener noreferrer">
                     <img src="{{ clip.image }}" alt="{{ clip.alt }}" loading="lazy">
@@ -46,10 +46,10 @@
             {% endfor %}
         </div>
 
-        <p class="djangokam-instrument">{{ djangokam.ia_instrument | safe }}</p>
+        <p class="djangokam-instrument">{{ t.djangokam.ia_instrument | safe }}</p>
 
         <div class="cta-buttons djangokam-buttons">
-            {% for bouton in djangokam.boutons %}
+            {% for bouton in t.djangokam.boutons %}
             <a href="{{ bouton.url }}" target="_blank" rel="noopener noreferrer" class="btn {% if bouton.primary %}btn-primary{% else %}btn-secondary{% endif %}">
                 {{ bouton.text }} →
             </a>
@@ -57,7 +57,7 @@
         </div>
 
         <p class="djangokam-presse">
-            {{ djangokam.presse.texte }} <a href="mailto:{{ djangokam.presse.email }}">{{ djangokam.presse.email }}</a>
+            {{ t.djangokam.presse.texte }} <a href="mailto:{{ t.djangokam.presse.email }}">{{ t.djangokam.presse.email }}</a>
         </p>
     </div>
 </section>

src/_includes/partials/engagement.njk

@@ -1,31 +1,19 @@
 <section id="engagement" class="engagement">
     <div class="section-container">
-        <h2>Votre projet <span class="accent-text">commence ici</span></h2>
+        <h2>{{ t.engagement.section_title }} <span class="accent-text">{{ t.engagement.section_title_accent }}</span></h2>
         <p class="section-subtitle">
-            Parce que chaque organisation mérite des outils numériques à la hauteur de ses ambitions
+            {{ t.engagement.section_subtitle }}
         </p>
 
         <div class="engagement-options">
+            {% for card in t.engagement.cards %}
             <div class="engagement-card">
-                <div class="engagement-icon">✊🏿</div>
+                <div class="engagement-icon">{{ card.icon }}</div>
-                <h3>Associations Militantes</h3>
+                <h3>{{ card.title }}</h3>
-                <p>Une application web sur mesure avec tarifs préférentiels pour vos luttes</p>
+                <p>{{ card.text }}</p>
-                <a href="#contact" class="btn btn-primary">Contactez-nous</a>
+                <a href="#contact" class="btn btn-primary">{{ card.cta }}</a>
-            </div>
-
-            <div class="engagement-card">
-                <div class="engagement-icon">🏛️</div>
-                <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 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>
+            {% endfor %}
         </div>
     </div>
 </section>

src/_includes/partials/faq.njk

@@ -1,12 +1,12 @@
 <section id="faq" class="faq">
     <div class="section-container">
-        <h2>Questions <span class="accent-text">fréquentes</span></h2>
+        <h2>{{ t.faq.section_title }} <span class="accent-text">{{ t.faq.section_title_accent }}</span></h2>
         <p class="section-subtitle">
-            Tout ce que vous devez savoir pour commencer votre transition numérique
+            {{ t.faq.section_subtitle }}
         </p>
 
         <div class="faq-container">
-            {% for item in faq %}
+            {% for item in t.faq.items %}
             <div class="faq-item">
                 <button class="faq-question" onclick="this.parentElement.classList.toggle('active')">
                     <span>{{ item.question }}</span>
@@ -21,10 +21,10 @@
 
         <div class="faq-footer">
             <p>
-                Vous avez d'autres questions ?
+                {{ t.faq.footer_text }}
             </p>
             <a href="#contact" class="btn btn-secondary">
-                Contactez-nous →
+                {{ t.faq.footer_cta }} →
             </a>
         </div>
     </div>

src/_includes/partials/fediverse.njk

@@ -1,12 +1,12 @@
 <section id="services-libres" class="fediverse">
     <div class="section-container">
-        <h2>Nos <span class="accent-text">services hébergés</span></h2>
+        <h2>{{ t.services.section_title }} <span class="accent-text">{{ t.services.section_title_accent }}</span></h2>
         <p class="section-subtitle">
-            Des alternatives libres aux géants du web, vos données restent sous votre contrôle, pas dans les serveurs de Google ou d'Amazon.
+            {{ t.services.section_subtitle }}
         </p>
 
         <div class="services-grid">
-            {% for service in services %}
+            {% for service in t.services.items %}
             <div class="service-card">
                 <div class="service-icon">{{ service.icon }}</div>
                 <h3>{{ service.name }}</h3>

src/_includes/partials/footer.njk

@@ -2,17 +2,17 @@
     <div class="flag-bar"></div>
     <div class="footer-content">
         <p class="footer-name">
-            {{ site.name }}
+            {{ t.site.name }}
         </p>
         <p>
-            Association à but non lucratif | Promotion des langues et cultures | Alternatives libres aux GAFAM
+            {{ t.footer.tagline_line }}
         </p>
         <p class="footer-meta">
-            {{ site.copyright }} | {{ site.tagline }}
+            {{ t.site.copyright }} | {{ t.site.tagline }}
         </p>
         <p class="footer-legal">
             <a href="/mentions-legales/">
-                Mentions Légales
+                {{ t.footer.legal_link }}
             </a>
         </p>
     </div>

src/_includes/partials/hero.njk

@@ -3,17 +3,17 @@
         <h1>ORGANISATION KA</h1>
         <h2 class="hero-subtitle">INTERNATIONALE</h2>
         <p class="hero-tagline">
-            {{ site.tagline }}
+            {{ t.site.tagline }}
         </p>
         <div class="hero-tags">
-            <span class="tag">✊🏿 Applications web pour vos associations</span>
+            {% for tag in t.hero.tags %}
-            <span class="tag">💸 Tarifs préférentiels pour les organisations militantes</span>
+            <span class="tag">{{ tag }}</span>
-            <span class="tag">🔓 Indépendant des GAFAM</span>
+            {% endfor %}
         </div>
-        <p>{{ site.description }}</p>
+        <p>{{ t.site.description }}</p>
         <div class="cta-buttons">
-            <a href="#solutions" class="btn btn-primary">Nos Solutions</a>
+            <a href="#solutions" class="btn btn-primary">{{ t.hero.cta_primary }}</a>
-            <a href="#mission" class="btn btn-secondary">Notre Mission</a>
+            <a href="#mission" class="btn btn-secondary">{{ t.hero.cta_secondary }}</a>
         </div>
     </div>
 </section>

src/_includes/partials/hosting.njk

@@ -1,104 +1,61 @@
 <section id="hebergement" class="hosting">
     <div class="section-container">
-        <h2>Développement <span class="accent-text">Web sur Mesure</span></h2>
+        <h2>{{ t.hosting.section_title }} <span class="accent-text">{{ t.hosting.section_title_accent }}</span></h2>
 
         <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.
+            {{ t.hosting.section_subtitle }}
         </p>
 
         <div class="hosting-banner">
-            <h3>Des solutions complètes, de A à Z</h3>
+            <h3>{{ t.hosting.banner_title }}</h3>
-            <p>OKI accompagne les associations et collectifs à chaque étape : conception, développement, hébergement, formation et maintenance.</p>
+            <p>{{ t.hosting.banner_text }}</p>
 
             <div class="hosting-features">
+                {% for feature in t.hosting.features %}
                 <div class="hosting-feature">
-                    <span>✓</span> Développement d'applications web sur mesure
+                    <span>✓</span> {{ feature }}
-                </div>
-                <div class="hosting-feature">
-                    <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> Formation et support technique inclus
                 </div>
+                {% endfor %}
             </div>
         </div>
 
         <div class="services-offerings">
-            <h3>Nos offres de services</h3>
+            <h3>{{ t.hosting.offerings_title }}</h3>
 
             <div class="offer-cards">
-                <div class="offer-card">
+                {% for card in t.hosting.offer_cards %}
-                    <h4>Application Web Sur Mesure</h4>
+                <div class="offer-card{% if card.modifier %} offer-card--{{ card.modifier }}{% endif %}">
+                    <h4>{{ card.title }}</h4>
+                    {% if card.intro %}
+                    <p class="offer-intro">{{ card.intro }}</p>
+                    {% endif %}
                     <ul class="offer-list">
-                        <li>Gestion de membres et adhésions</li>
+                        {% for item in card.items %}
-                        <li>Agenda et gestion d'événements</li>
+                        <li>{{ item }}</li>
-                        <li>Pétitions et mobilisation en ligne</li>
+                        {% endfor %}
-                        <li>Caisse de solidarité, dons</li>
-                        <li>Newsletter et communication interne</li>
                     </ul>
-                    <p class="offer-tagline">Développement sur mesure</p>
+                    <p class="offer-tagline">{{ card.tagline }}</p>
-                </div>
-
-                <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 class="offer-tagline">Hébergement éthique</p>
-                </div>
-
-                <div class="offer-card offer-card--fediverse">
-                    <h4>Instance Fédiverse</h4>
-                    <p class="offer-intro">Votre association veut sa propre plateforme libre, sans dépendre d'un tiers ? On installe et administre votre instance :</p>
-                    <ul class="offer-list">
-                        <li>Mastodon / Pleroma (réseau social)</li>
-                        <li>PeerTube (vidéo)</li>
-                        <li>Castopod (podcast)</li>
-                        <li>Pixelfed (photos)</li>
-                        <li>Funkwhale (musique)</li>
-                    </ul>
-                    <p class="offer-tagline">Installation & maintenance</p>
                 </div>
+                {% endfor %}
             </div>
 
             <div class="hosting-note">
-                <h4>Gestion numérique sécurisée</h4>
+                <h4>{{ t.hosting.note_title }}</h4>
-                <p>OKI peut assurer la gestion complète de vos propriétés numériques :</p>
+                <p>{{ t.hosting.note_intro }}</p>
                 <ul>
-                    <li>Propriété et gestion de noms de domaine</li>
+                    {% for item in t.hosting.note_items %}
-                    <li>Administration de comptes web (réseaux sociaux, emails)</li>
+                    <li>{{ item }}</li>
-                    <li>Gestion sécurisée des accès et mots de passe</li>
+                    {% endfor %}
-                    <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 class="hosting-why">
-                <h4>Pourquoi choisir OKI ?</h4>
+                <h4>{{ t.hosting.why_title }}</h4>
                 <p>
-                    Notre équipe technique, composée d'experts engagés, garantit l'impartialité,
+                    {{ t.hosting.why_text }}
-                    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
-                    préférentiels aux organisations militantes.
                 </p>
                 <a href="#contact" class="btn btn-primary">
-                    Contactez-nous →
+                    {{ t.hosting.why_cta }} →
                 </a>
             </div>
         </div>

src/_includes/partials/mission.njk

@@ -1,15 +1,15 @@
 <section id="mission" class="mission">
     <div class="section-container">
-        <h2>Notre <span class="accent-text">Mission</span></h2>
+        <h2>{{ t.mission.section_title }} <span class="accent-text">{{ t.mission.section_title_accent }}</span></h2>
         <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.
+            {{ t.mission.paragraph_main }}
         </p>
         <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.
+            {{ t.mission.paragraph_secondary }}
         </p>
 
         <div class="values-grid">
-            {% for value in values %}
+            {% for value in t.values %}
             <div class="value-card">
                 <div class="value-icon">{{ value.icon }}</div>
                 <h3>{{ value.title }}</h3>

src/_includes/partials/nav.njk

@@ -1,11 +1,11 @@
 <nav>
     <div class="nav-container">
         <a href="/" class="logo">
-            <img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image">
+            <img src="/assets/images/logo-512x512.png" alt="{{ t.site.shortName }} Logo" class="logo-image">
-            <span>{{ site.shortName }}</span>
+            <span>{{ t.site.shortName }}</span>
         </a>
         <ul class="nav-links">
-            {% for item in navigation %}
+            {% for item in t.navigation %}
             <li>
                 <a href="{{ item.url }}"{% if item.external %} target="_blank"{% endif %}>
                     {{ item.text }}
@@ -13,7 +13,12 @@
             </li>
             {% endfor %}
         </ul>
-        <button id="theme-toggle" class="theme-toggle" aria-label="Changer de thème" title="Changer de thème">
+        {% if locale == 'en' %}
+        <a href="/" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','fr')">{{ t.ui.lang_switch_label }}</a>
+        {% else %}
+        <a href="/en/" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','en')">{{ t.ui.lang_switch_label }}</a>
+        {% endif %}
+        <button id="theme-toggle" class="theme-toggle" aria-label="{{ t.ui.theme_toggle }}" title="{{ t.ui.theme_toggle }}">
             <span class="theme-icon theme-icon-dark">🌙</span>
             <span class="theme-icon theme-icon-light">☀️</span>
         </button>

src/_includes/partials/partners.njk

@@ -1,12 +1,12 @@
 <section id="partenaires" class="partners">
     <div class="section-container">
-        <h2>Nos <span class="accent-text">Partenaires</span></h2>
+        <h2>{{ t.partners.section_title }} <span class="accent-text">{{ t.partners.section_title_accent }}</span></h2>
         <p class="section-subtitle">
-            Ils partagent nos valeurs et contribuent à enrichir notre écosystème numérique libre
+            {{ t.partners.section_subtitle }}
         </p>
 
         <div class="partners-grid">
-            {% for partner in partners %}
+            {% for partner in t.partners.items %}
             <a href="{{ partner.url }}" target="_blank" rel="noopener noreferrer" class="partner-card">
                 <div class="partner-logo-container">
                     <img src="{{ partner.logo }}" alt="Logo {{ partner.name }}" class="partner-logo">
@@ -14,7 +14,7 @@
                 <h3>{{ partner.name }}</h3>
                 <p class="partner-description">{{ partner.description }}</p>
                 <span class="partner-link">
-                    Découvrir sur GADE →
+                    {{ t.partners.link_text }} →
                 </span>
             </a>
             {% endfor %}

src/_includes/partials/projects.njk

@@ -1,16 +1,16 @@
 <section id="projets" class="projects">
     <div class="section-container">
-        <h2>Nos <span class="accent-text">Projets Web</span></h2>
+        <h2>{{ t.projects.section_title }} <span class="accent-text">{{ t.projects.section_title_accent }}</span></h2>
 
         <div class="project-cards">
-            {% for project in projects %}
+            {% for project in t.projects.items %}
             <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 project-card-link">
-                    Visiter le site →
+                    {{ t.projects.link_text }} →
                 </span>
             </a>
             {% endfor %}

src/_includes/partials/publics.njk

@@ -1,19 +1,19 @@
 <section id="solutions" class="publics">
     <div class="section-container">
-        <h2>Des solutions pour <span class="accent-text">chaque besoin</span></h2>
+        <h2>{{ t.publics.section_title }} <span class="accent-text">{{ t.publics.section_title_accent }}</span></h2>
         <p class="section-subtitle">
-            Que vous soyez association, entreprise ou citoyen engagé, nous avons les outils pour votre transition numérique
+            {{ t.publics.section_subtitle }}
         </p>
 
         <div class="publics-grid">
-            {% for public in publics %}
+            {% for public in t.publics.items %}
             <div class="public-card">
                 <div class="public-icon">{{ public.icon }}</div>
                 <h3>{{ public.title }}</h3>
                 <p class="public-description">{{ public.description }}</p>
 
                 <div class="public-benefits">
-                    <h4>Ce que vous obtenez :</h4>
+                    <h4>{{ t.publics.benefits_label }}</h4>
                     <ul>
                         {% for benefit in public.benefits %}
                         <li>✓ {{ benefit }}</li>
@@ -30,10 +30,10 @@
 
         <div class="publics-footer">
             <p>
-                Prêt à franchir le pas ?
+                {{ t.publics.footer_line1 }}
             </p>
             <p>
-                Parce que tout grand changement commence par une conversation
+                {{ t.publics.footer_line2 }}
             </p>
         </div>
     </div>

src/_includes/partials/support.njk

@@ -1,76 +1,56 @@
 <section id="dons" class="support">
     <div class="section-container">
-        <h2>Nous <span class="accent-text">Soutenir</span></h2>
+        <h2>{{ t.support.section_title }} <span class="accent-text">{{ t.support.section_title_accent }}</span></h2>
         <p class="support-lede">
-            Chaque like, chaque partage, chaque don compte pour construire cet internet-là
+            {{ t.support.lede }}
         </p>
         <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.
+            {{ t.support.lede_secondary }}
         </p>
 
         <div class="donation-panels">
 
             <div class="support-panel support-panel--primary">
-                <h3>Don ponctuel</h3>
+                <h3>{{ t.support.one_time_title }}</h3>
 
                 <div class="donation-grid">
-                    <a href="https://don.o-k-i.net/b/aEUdTw5SD3SH7m0bII" class="donation-amount" target="_blank" rel="noopener noreferrer">
+                    {% for d in donations.oneTime %}
-                        1€
+                    <a href="{{ d.url }}" class="donation-amount" target="_blank" rel="noopener noreferrer">
-                    </a>
+                        {{ d.amount }}{{ t.support.one_time_suffix }}
-                    <a href="https://don.o-k-i.net/b/4gw6r480L1Kz5dScMO" class="donation-amount" target="_blank" rel="noopener noreferrer">
-                        5€
-                    </a>
-                    <a href="https://don.o-k-i.net/b/5kA02G1Cn4WLbCgeUV" class="donation-amount" target="_blank" rel="noopener noreferrer">
-                        10€
-                    </a>
-                    <a href="https://don.o-k-i.net/b/fZebLo94PfBpayc5kn" class="donation-amount" target="_blank" rel="noopener noreferrer">
-                        20€
-                    </a>
-                    <a href="https://don.o-k-i.net/b/6oE5n05SDdth49O004" class="donation-amount" target="_blank" rel="noopener noreferrer">
-                        50€
                     </a>
+                    {% endfor %}
                 </div>
 
                 <div style="text-align: center;">
-                    <label class="donation-form-label">Montant personnalisé :</label>
+                    <label class="donation-form-label">{{ t.support.custom_amount_label }}</label>
                     <div class="custom-donation-form">
-                        <input type="number" id="customAmountOneTime" placeholder="Montant" min="1" class="custom-amount-input">
+                        <input type="number" id="customAmountOneTime" placeholder="{{ t.support.custom_amount_placeholder }}" min="1" class="custom-amount-input">
-                        <span class="currency-symbol">€</span>
+                        <span class="currency-symbol">{{ t.support.one_time_suffix }}</span>
                         <button onclick="handleCustomDonation('oneTime')" class="custom-donation-btn custom-donation-btn-primary">
-                            Donner
+                            {{ t.support.custom_amount_btn }}
                         </button>
                     </div>
                 </div>
             </div>
 
             <div class="support-panel support-panel--secondary">
-                <h3>Don mensuel</h3>
+                <h3>{{ t.support.monthly_title }}</h3>
 
                 <div class="donation-grid">
-                    <a href="https://don.o-k-i.net/b/7sI9Dgch14WL7m0fZ3" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
+                    {% for d in donations.monthly %}
-                        1€/mois
+                    <a href="{{ d.url }}" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
-                    </a>
+                        {{ d.amount }}{{ t.support.monthly_suffix }}
-                    <a href="https://don.o-k-i.net/b/8wM4iW4Ozbl95dS6ow" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
-                        5€/mois
-                    </a>
-                    <a href="https://don.o-k-i.net/b/8wM2aO80L74TcGk3ci" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
-                        10€/mois
-                    </a>
-                    <a href="https://don.o-k-i.net/b/00g7v894P88XgWAfZ7" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
-                        20€/mois
-                    </a>
-                    <a href="https://don.o-k-i.net/b/4gw8zc6WHgFtcGkbIP" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
-                        50€/mois
                     </a>
+                    {% endfor %}
                 </div>
 
                 <div style="text-align: center;">
-                    <label class="donation-form-label">Montant mensuel personnalisé :</label>
+                    <label class="donation-form-label">{{ t.support.custom_monthly_label }}</label>
                     <div class="custom-donation-form">
-                        <input type="number" id="customAmountMonthly" placeholder="Montant" min="1" class="custom-amount-input custom-amount-input-monthly">
+                        <input type="number" id="customAmountMonthly" placeholder="{{ t.support.custom_amount_placeholder }}" min="1" class="custom-amount-input custom-amount-input-monthly">
-                        <span class="currency-symbol">€/mois</span>
+                        <span class="currency-symbol">{{ t.support.monthly_suffix }}</span>
                         <button onclick="handleCustomDonation('monthly')" class="custom-donation-btn custom-donation-btn-secondary">
-                            S'abonner
+                            {{ t.support.custom_monthly_btn }}
                         </button>
                     </div>
                 </div>
@@ -80,23 +60,23 @@
 
         <div class="alt-donation-section">
             <h3 class="alt-donation-title">
-                Autres moyens de nous soutenir
+                {{ t.support.alt_title }}
             </h3>
 
             <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">
+                <a href="{{ donations.liberapay }}" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--liberapay">
                     <div class="alt-donation-icon">💛</div>
-                    <h4>Liberapay</h4>
+                    <h4>{{ t.support.liberapay_title }}</h4>
                     <p>
-                        Soutenez-nous via Liberapay, une plateforme libre et éthique
+                        {{ t.support.liberapay_text }}
                     </p>
                 </a>
 
-                <a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--kofi">
+                <a href="{{ donations.kofi }}" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--kofi">
                     <div class="alt-donation-icon">☕</div>
-                    <h4>Ko-fi</h4>
+                    <h4>{{ t.support.kofi_title }}</h4>
                     <p>
-                        Offrez-nous un café sur Ko-fi pour nous encourager
+                        {{ t.support.kofi_text }}
                     </p>
                 </a>
             </div>
@@ -104,10 +84,10 @@
 
         <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>.
+                {{ t.support.security_stripe | safe }}
             </p>
             <p>
-                Liberapay et Ko-fi utilisent leurs propres systèmes de paiement sécurisés.
+                {{ t.support.security_alt }}
             </p>
         </div>
     </div>

src/assets/css/styles.css

@@ -133,6 +133,14 @@ html.light-theme .nav-links a:hover {
     color: var(--or-oki);
 }
 
+html.light-theme .lang-switch {
+    color: #0D0D0D;
+}
+
+html.light-theme .lang-switch: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.08);
@@ -224,6 +232,24 @@ html.light-theme .contact-links a:hover {
     color: var(--or-oki);
 }
 
+/* Language Switch */
+.lang-switch {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    padding: 0.5rem 0.7rem;
+    color: var(--blanc-creme);
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 0.8rem;
+    letter-spacing: 0.04em;
+    transition: border-color 0.2s ease, color 0.2s ease;
+}
+
+.lang-switch:hover {
+    border-color: var(--or-oki);
+    color: var(--or-oki);
+}
+
 /* Theme Toggle Button */
 .theme-toggle {
     background: transparent;