fix(contact/footer): distingue les chaînes PAWOL.NU et met à jour WhatsApp

- Met à jour le lien WhatsApp vers la chaîne publique
- Regroupe WhatsApp et Telegram sous une section Chaînes PAWOL.NU
- Affiche les titres de section dans la page contact pour distinguer les chaînes
- Met à jour les tooltips du footer pour indiquer les chaînes PAWOL.NU

src/_data/i18n/en/contact.json

@@ -5,14 +5,14 @@
     {
       "title": "🌐 Web & Contact",
       "links": [
-        { "text": "kontak@o-k-i.net", "url": "mailto:kontak@o-k-i.net" },
+        { "text": "kontak@o-k-i.net", "url": "mailto:kontak@o-k-i.net" }
-        { "text": "WhatsApp +262 692 22 974 0", "url": "https://wa.me/262692229740" }
       ]
     },
     {
-      "title": "💬 Social networks",
+      "title": "📢 PAWOL.NU channels",
       "links": [
-        { "text": "Telegram", "url": "https://t.me/OrganisationKA" }
+        { "text": "WhatsApp channel", "url": "https://whatsapp.com/channel/0029VbCv7N9AjPXTxygrRu1w" },
+        { "text": "Telegram channel", "url": "https://t.me/OrganisationKA" }
       ]
     },
     {

src/_data/i18n/fr/contact.json

@@ -5,14 +5,14 @@
     {
       "title": "🌐 Web & Contact",
       "links": [
-        { "text": "kontak@o-k-i.net", "url": "mailto:kontak@o-k-i.net" },
+        { "text": "kontak@o-k-i.net", "url": "mailto:kontak@o-k-i.net" }
-        { "text": "WhatsApp +262 692 22 974 0", "url": "https://wa.me/262692229740" }
       ]
     },
     {
-      "title": "💬 Réseaux sociaux",
+      "title": "📢 Chaînes PAWOL.NU",
       "links": [
-        { "text": "Telegram", "url": "https://t.me/OrganisationKA" }
+        { "text": "WhatsApp channel", "url": "https://whatsapp.com/channel/0029VbCv7N9AjPXTxygrRu1w" },
+        { "text": "Telegram channel", "url": "https://t.me/OrganisationKA" }
       ]
     },
     {

src/_includes/partials/contact.njk

@@ -7,6 +7,9 @@
     </div>
     <div class="contact-socials">
         {% for section in t.contact.sections %}
+        <div class="contact-socials-group">
+            <h3 class="contact-socials-title">{{ section.title }}</h3>
+            <div class="contact-socials-row">
                 {% for link in section.links %}
                 {% set lname = link.text.toLowerCase() %}
                 <a href="{{ link.url }}" title="{{ link.text }}"{% if link.url.startsWith('http') %} target="_blank" rel="noopener noreferrer"{% endif %} class="contact-social-link">
@@ -23,6 +26,8 @@
                     {% endif %}
                 </a>
                 {% endfor %}
+            </div>
+        </div>
         {% endfor %}
     </div>
 </section>

src/_includes/partials/footer.njk

@@ -16,10 +16,10 @@
             <a href="mailto:kontak@o-k-i.net" title="Email" class="social-link">
                 {% include "icons/email.svg" %}
             </a>
-            <a href="https://wa.me/262692229740" target="_blank" rel="noopener noreferrer" title="WhatsApp" class="social-link">
+            <a href="https://whatsapp.com/channel/0029VbCv7N9AjPXTxygrRu1w" target="_blank" rel="noopener noreferrer" title="WhatsApp channel (PAWOL.NU)" class="social-link">
                 {% include "icons/whatsapp.svg" %}
             </a>
-            <a href="https://t.me/OrganisationKA" target="_blank" rel="noopener noreferrer" title="Telegram" class="social-link">
+            <a href="https://t.me/OrganisationKA" target="_blank" rel="noopener noreferrer" title="Telegram channel (PAWOL.NU)" class="social-link">
                 {% include "icons/telegram.svg" %}
             </a>
             <a href="https://discord.gg/DPvUCA8dD" target="_blank" rel="noopener noreferrer" title="Discord" class="social-link">

src/assets/css/styles.css

@@ -1197,13 +1197,32 @@ html.light-theme .hero::before {
 }
 
 .contact-socials {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.contact-socials-group {
+    text-align: center;
+}
+
+.contact-socials-title {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--or-oki);
+    margin-bottom: 0.75rem;
+    opacity: 0.9;
+}
+
+.contact-socials-row {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1.5rem;
     flex-wrap: wrap;
-    max-width: 1200px;
-    margin: 0 auto;
 }
 
 .contact-social-link {
@@ -1231,6 +1250,13 @@ html.light-theme .hero::before {
 
 @media (min-width: 768px) {
     .contact-socials {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: center;
+        gap: 3rem;
+    }
+
+    .contact-socials-row {
         gap: 2rem;
     }