fix: lien mentions légales adapté à la langue

Reviewed-on: #3

eleventy.config.js

@@ -1,3 +1,5 @@
+const cdn = require("./src/_data/cdn.json");
+
 module.exports = function(eleventyConfig) {
   // Locale-aware content: `t` resolves to the content bundle for the page's locale (fr by default)
   eleventyConfig.addGlobalData("eleventyComputed", {
@@ -5,6 +7,12 @@ module.exports = function(eleventyConfig) {
     t: (data) => data.i18n[data.locale || "fr"]
   });
 
+  // Serve local images through the BunnyCDN pull zone; leaves external URLs untouched
+  eleventyConfig.addFilter("cdn", (path) => {
+    if (typeof path !== "string" || !path.startsWith("/")) return path;
+    return cdn.url + path;
+  });
+
   // Copy assets folders to output
   eleventyConfig.addPassthroughCopy("src/assets");
 

src/_data/cdn.json

@@ -0,0 +1,3 @@
+{
+  "url": "https://organisationka.b-cdn.net"
+}

src/_data/i18n/en/navigation.json

@@ -1,12 +1,18 @@
 [
-  { "text": "Solutions", "url": "#solutions" },
+  { "text": "Solutions", "url": "/en/#solutions" },
-  { "text": "Our projects", "url": "#projets" },
+  { "text": "Our projects", "url": "/en/#projets" },
-  { "text": "DJANGOKAM", "url": "#djangokam" },
+  { "text": "DJANGOKAM", "url": "/en/#djangokam" },
-  { "text": "Services", "url": "#hebergement" },
+  { "text": "Services", "url": "/en/#hebergement" },
-  { "text": "Our work", "url": "#clients" },
+  { "text": "Donate", "url": "/en/#dons" },
-  { "text": "Our instances", "url": "#services-libres" },
+  {
-  { "text": "FAQ", "url": "#faq" },
+    "text": "Resources",
-  { "text": "Donate", "url": "#dons" },
+    "children": [
-  { "text": "Contact", "url": "#contact" },
+      { "text": "Our work", "url": "/en/#clients" },
-  { "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
+      { "text": "Our instances", "url": "/en/#services-libres" },
+      { "text": "FAQ", "url": "/en/#faq" },
+      { "text": "Press", "url": "/en/press/" },
+      { "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
+    ]
+  },
+  { "text": "Contact", "url": "/en/#contact" }
 ]

src/_data/i18n/en/press.json

@@ -0,0 +1,33 @@
+{
+  "title": "Press",
+  "title_accent": "& Media",
+  "lede": "Press resources for DJANGOKAM, the first Caribbean AI artist, produced by ORGANISATION KA INTERNATIONALE (OKI). HD visuals and listening links, ready to use for newsrooms and radio programmers.",
+  "facts_title": "The essentials",
+  "facts": [
+    { "label": "Artist", "value": "DJANGOKAM, the first Caribbean AI artist, joined by NYYOKA in duets" },
+    { "label": "Producer", "value": "ORGANISATION KA INTERNATIONALE (OKI), a cultural association based in Basse-Terre, Guadeloupe" },
+    { "label": "Discography", "value": "12 releases available on every platform, listed on MusicBrainz" },
+    { "label": "Official videos", "value": "\"I Want You Girl\" and \"Ish Mwen KUTE\"" },
+    { "label": "Language", "value": "Sings in KA, a language known as \"Creole\", with lyrics and translations on PAWÒL-NU" }
+  ],
+  "visuals_title": "HD visuals",
+  "visuals_intro": "Free to use for editorial coverage of DJANGOKAM. Click a cover for a preview, or download the high-resolution PDF.",
+  "visuals": [
+    { "image": "/assets/images/djangokam-she-told-me.webp", "caption": "\"She Told Me (Fanm-la di mwen)\" — DJANGOKAM x NYYOKA", "pdf": "DJANGOKAM_She_Told_Me_HD.pdf" },
+    { "image": "/assets/images/djangokam-i-want-you-girl.webp", "caption": "\"I Want You Girl\"", "pdf": "DJANGOKAM_I_Want_You_Girl_HD.pdf" },
+    { "image": "/assets/images/djangokam-ish-mwen-kute.jpg", "caption": "\"Ish Mwen KUTE\"", "pdf": "DJANGOKAM_Ish_Mwen_Kute_HD.pdf" }
+  ],
+  "visual_pdf_label": "HD PDF",
+  "visuals_pdf_label": "Download all 3 HD visuals (PDF)",
+  "visuals_pdf_file": "DJANGOKAM_Visuels_HD.pdf",
+  "links_title": "Listen & watch",
+  "links": [
+    { "text": "Listen on PAWÒL-NU (lyrics & translations)", "url": "https://pawol.nu" },
+    { "text": "DJANGOKAM on every platform", "url": "https://djangokam.pawol.nu" },
+    { "text": "NYYOKA on every platform", "url": "https://nyyoka.pawol.nu" },
+    { "text": "Videos on GADE (PeerTube, sovereign hosting)", "url": "https://gade.o-k-i.net" }
+  ],
+  "contact_title": "Press contact",
+  "contact_text": "Localised press kit, additional visuals, broadcast WAV or interview requests: get in touch, we reply quickly.",
+  "contact_email": "kontak@o-k-i.net"
+}

src/_data/i18n/fr/djangokam.json

@@ -6,7 +6,7 @@
   "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) »."
+    "À ses côtés, NYYOKA, artiste IA Caribéenne du même collectif, mène le même combat - 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",

src/_data/i18n/fr/navigation.json

@@ -1,12 +1,18 @@
 [
-  { "text": "Solutions", "url": "#solutions" },
+  { "text": "Solutions", "url": "/#solutions" },
-  { "text": "Nos projets", "url": "#projets" },
+  { "text": "Nos projets", "url": "/#projets" },
-  { "text": "DJANGOKAM", "url": "#djangokam" },
+  { "text": "DJANGOKAM", "url": "/#djangokam" },
-  { "text": "Services", "url": "#hebergement" },
+  { "text": "Services", "url": "/#hebergement" },
-  { "text": "Réalisations", "url": "#clients" },
+  { "text": "Dons", "url": "/#dons" },
-  { "text": "Nos instances", "url": "#services-libres" },
+  {
-  { "text": "FAQ", "url": "#faq" },
+    "text": "Ressources",
-  { "text": "Dons", "url": "#dons" },
+    "children": [
-  { "text": "Contact", "url": "#contact" },
+      { "text": "Réalisations", "url": "/#clients" },
-  { "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
+      { "text": "Nos instances", "url": "/#services-libres" },
+      { "text": "FAQ", "url": "/#faq" },
+      { "text": "Presse", "url": "/presse/" },
+      { "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
+    ]
+  },
+  { "text": "Contact", "url": "/#contact" }
 ]

src/_data/i18n/fr/press.json

@@ -0,0 +1,33 @@
+{
+  "title": "Presse",
+  "title_accent": "& Médias",
+  "lede": "Ressources presse pour DJANGOKAM, le premier artiste IA caribéen produit par ORGANISATION KA INTERNATIONALE (OKI). Visuels HD et liens d'écoute, prêts à l'emploi pour les rédactions et programmateurs radio.",
+  "facts_title": "L'essentiel",
+  "facts": [
+    { "label": "Artiste", "value": "DJANGOKAM, premier artiste IA caribéen, porté par NYYOKA en duo" },
+    { "label": "Producteur", "value": "ORGANISATION KA INTERNATIONALE (OKI), association culturelle basée à Basse-Terre, Guadeloupe" },
+    { "label": "Discographie", "value": "12 sorties disponibles sur toutes les plateformes, référencées sur MusicBrainz" },
+    { "label": "Clips officiels", "value": "\"I Want You Girl\" et \"Ish Mwen KUTE\"" },
+    { "label": "Langue", "value": "Chante en KA, langue dite « créole », avec paroles et traductions sur PAWÒL-NU" }
+  ],
+  "visuals_title": "Visuels HD",
+  "visuals_intro": "Libres de droits pour un usage rédactionnel autour de DJANGOKAM. Cliquez sur une pochette pour l'aperçu, ou téléchargez le PDF haute résolution.",
+  "visuals": [
+    { "image": "/assets/images/djangokam-she-told-me.webp", "caption": "« She Told Me (Fanm-la di mwen) » — DJANGOKAM x NYYOKA", "pdf": "DJANGOKAM_She_Told_Me_HD.pdf" },
+    { "image": "/assets/images/djangokam-i-want-you-girl.webp", "caption": "« I Want You Girl »", "pdf": "DJANGOKAM_I_Want_You_Girl_HD.pdf" },
+    { "image": "/assets/images/djangokam-ish-mwen-kute.jpg", "caption": "« Ish Mwen KUTE »", "pdf": "DJANGOKAM_Ish_Mwen_Kute_HD.pdf" }
+  ],
+  "visual_pdf_label": "PDF HD",
+  "visuals_pdf_label": "Télécharger les 3 visuels HD (PDF)",
+  "visuals_pdf_file": "DJANGOKAM_Visuels_HD.pdf",
+  "links_title": "Écoute & visionnage",
+  "links": [
+    { "text": "Écouter sur PAWÒL-NU (paroles & traductions)", "url": "https://pawol.nu" },
+    { "text": "DJANGOKAM sur toutes les plateformes", "url": "https://djangokam.pawol.nu" },
+    { "text": "NYYOKA sur toutes les plateformes", "url": "https://nyyoka.pawol.nu" },
+    { "text": "Vidéos sur GADE (PeerTube, hébergement souverain)", "url": "https://gade.o-k-i.net" }
+  ],
+  "contact_title": "Contact presse",
+  "contact_text": "Dossier de presse localisé, visuels complémentaires, WAV broadcast ou proposition d'interview : contactez-nous, nous répondons rapidement.",
+  "contact_email": "kontak@o-k-i.net"
+}

src/_includes/layouts/base.njk

@@ -23,7 +23,7 @@
     <meta property="og:url" content="https://o-k-i.net{{ page.url or '/' }}">
     <meta property="og:title" content="{% if title %}{{ title }}{% else %}{{ t.site.name }} - {{ t.site.og_tagline }}{% endif %}">
     <meta property="og:description" content="{{ description or t.site.description }}">
-    <meta property="og:image" content="https://o-k-i.net/assets/images/logo-512x512.png">
+    <meta property="og:image" content="{{ '/assets/images/logo-512x512.png' | cdn }}">
     <meta property="og:image:width" content="512">
     <meta property="og:image:height" content="512">
     <meta property="og:image:alt" content="Logo {{ t.site.name }}">
@@ -35,13 +35,13 @@
     <meta name="twitter:url" content="https://o-k-i.net{{ page.url or '/' }}">
     <meta name="twitter:title" content="{% if title %}{{ title }}{% else %}{{ t.site.name }} - {{ t.site.og_tagline }}{% endif %}">
     <meta name="twitter:description" content="{{ description or t.site.description }}">
-    <meta name="twitter:image" content="https://o-k-i.net/assets/images/logo-512x512.png">
+    <meta name="twitter:image" content="{{ '/assets/images/logo-512x512.png' | cdn }}">
     <meta name="twitter:image:alt" content="Logo {{ t.site.name }}">
 
     <!-- Favicons -->
-    <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="{{ '/assets/images/favicon.ico' | cdn }}">
-    <link rel="icon" type="image/png" sizes="512x512" href="/assets/images/logo-512x512.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="{{ '/assets/images/logo-512x512.png' | cdn }}">
-    <link rel="apple-touch-icon" href="/assets/images/logo-512x512.png">
+    <link rel="apple-touch-icon" href="{{ '/assets/images/logo-512x512.png' | cdn }}">
 
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -59,7 +59,7 @@
       "name": "{{ t.site.name }}",
       "alternateName": "{{ t.site.shortName }}",
       "url": "https://o-k-i.net",
-      "logo": "https://o-k-i.net/assets/images/logo-512x512.png",
+      "logo": "{{ '/assets/images/logo-512x512.png' | cdn }}",
       "description": "{{ t.site.description }}",
       "address": {
         "@type": "PostalAddress",

src/_includes/partials/djangokam.njk

@@ -4,7 +4,7 @@
         <h2>{{ t.djangokam.titre }} <span class="accent-text">{{ t.djangokam.titreAccent }}</span></h2>
         <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">
+        <img src="{{ '/assets/images/djangokam-portrait.webp' | cdn }}" alt="Portrait officiel de DJANGOKAM" class="djangokam-portrait" width="512" height="512" loading="lazy">
 
         <blockquote class="djangokam-highlight">
             {{ t.djangokam.message_cle }}
@@ -19,7 +19,7 @@
 
             <figure class="djangokam-duo">
                 <a href="{{ t.djangokam.duo.url }}" target="_blank" rel="noopener noreferrer">
-                    <img src="{{ t.djangokam.duo.image }}" alt="{{ t.djangokam.duo.alt }}" loading="lazy">
+                    <img src="{{ t.djangokam.duo.image | cdn }}" alt="{{ t.djangokam.duo.alt }}" loading="lazy">
                     <figcaption>{{ t.djangokam.duo.legende }}</figcaption>
                 </a>
             </figure>
@@ -39,7 +39,7 @@
             {% 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">
+                    <img src="{{ clip.image | cdn }}" alt="{{ clip.alt }}" loading="lazy">
                     <figcaption>{{ clip.titre }}</figcaption>
                 </a>
             </figure>

src/_includes/partials/footer.njk

@@ -11,7 +11,7 @@
             {{ t.site.copyright }} | {{ t.site.tagline }}
         </p>
         <p class="footer-legal">
-            <a href="/mentions-legales/">
+            <a href="{% if locale == 'en' %}/en/legal-notice/{% else %}/mentions-legales/{% endif %}">
                 {{ t.footer.legal_link }}
             </a>
         </p>

src/_includes/partials/nav.njk

@@ -1,22 +1,39 @@
 <nav>
     <div class="nav-container">
         <a href="/" class="logo">
-            <img src="/assets/images/logo-512x512.png" alt="{{ t.site.shortName }} Logo" class="logo-image">
+            <img src="{{ '/assets/images/logo-512x512.png' | cdn }}" alt="{{ t.site.shortName }} Logo" class="logo-image">
             <span>{{ t.site.shortName }}</span>
         </a>
         <ul class="nav-links">
             {% for item in t.navigation %}
+            {% if item.children %}
+            <li class="has-dropdown">
+                <button type="button" class="nav-dropdown-trigger" aria-haspopup="true" aria-expanded="false">
+                    {{ item.text }} <span class="dropdown-caret">▾</span>
+                </button>
+                <ul class="nav-dropdown">
+                    {% for child in item.children %}
+                    <li>
+                        <a href="{{ child.url }}"{% if child.external %} target="_blank"{% endif %}>
+                            {{ child.text }}
+                        </a>
+                    </li>
+                    {% endfor %}
+                </ul>
+            </li>
+            {% else %}
             <li>
                 <a href="{{ item.url }}"{% if item.external %} target="_blank"{% endif %}>
                     {{ item.text }}
                 </a>
             </li>
+            {% endif %}
             {% endfor %}
         </ul>
         {% if locale == 'en' %}
-        <a href="/" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','fr')">{{ t.ui.lang_switch_label }}</a>
+        <a href="#" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','fr'); switchLanguage('fr'); return false;">{{ 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>
+        <a href="#" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','en'); switchLanguage('en'); return false;">{{ 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>

src/_includes/partials/partners.njk

@@ -9,7 +9,7 @@
             {% 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">
+                    <img src="{{ partner.logo | cdn }}" alt="Logo {{ partner.name }}" class="partner-logo">
                 </div>
                 <h3>{{ partner.name }}</h3>
                 <p class="partner-description">{{ partner.description }}</p>

src/assets/css/styles.css

@@ -298,6 +298,72 @@ html.light-theme .theme-icon-light {
     transition: 0.3s;
 }
 
+/* Nav dropdown ("Ressources") */
+.has-dropdown {
+    position: relative;
+}
+
+.nav-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    font-weight: 500;
+    font-size: 0.95rem;
+    color: var(--blanc-creme);
+    cursor: pointer;
+}
+
+.nav-dropdown-trigger:hover {
+    color: var(--or-oki);
+}
+
+.dropdown-caret {
+    font-size: 0.7em;
+    transition: transform 0.2s ease;
+}
+
+.nav-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 1rem;
+    min-width: 200px;
+    list-style: none;
+    background: var(--noir-oki);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    padding: 0.4rem 0;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-6px);
+    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
+}
+
+.has-dropdown:hover .nav-dropdown,
+.has-dropdown.open .nav-dropdown,
+.nav-dropdown-trigger:focus-visible + .nav-dropdown {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.has-dropdown:hover .dropdown-caret,
+.has-dropdown.open .dropdown-caret {
+    transform: rotate(180deg);
+}
+
+.nav-dropdown a {
+    display: block;
+    padding: 0.55rem 1.1rem;
+    white-space: nowrap;
+    font-size: 0.9rem;
+    color: var(--blanc-creme);
+}
+
 /* Hero Section */
 .hero {
     padding: 9rem 2rem 5rem;
@@ -316,7 +382,7 @@ html.light-theme .theme-icon-light {
     right: -5%;
     width: 55%;
     height: 100%;
-    background: url('/assets/images/logo-512x512.png') center / contain no-repeat;
+    background: url('https://organisationka.b-cdn.net/assets/images/logo-512x512.png') center / contain no-repeat;
     opacity: 0.05;
     pointer-events: none;
 }
@@ -1360,6 +1426,31 @@ input[type="number"]:focus {
         display: flex;
     }
 
+    .nav-dropdown-trigger {
+        pointer-events: none;
+        opacity: 0.7;
+    }
+
+    .dropdown-caret {
+        display: none;
+    }
+
+    .nav-dropdown {
+        position: static;
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+        margin: 0.25rem 0 0.5rem 1rem;
+        border: none;
+        background: none;
+        padding: 0;
+    }
+
+    .nav-dropdown a {
+        padding: 0.4rem 0;
+        font-size: 0.9rem;
+    }
+
     .hero h1 {
         font-size: 2rem;
     }
@@ -1908,3 +1999,168 @@ input[type="number"]:focus {
         flex-direction: column;
     }
 }
+
+/* Press page */
+.press-hero {
+    padding: 9rem 2rem 3rem;
+    text-align: center;
+    border-bottom: 1px solid var(--line);
+}
+
+.press-hero h1 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.press-lede {
+    max-width: 700px;
+    margin: 0 auto;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    opacity: 0.85;
+    font-family: var(--font-body);
+}
+
+.press-facts {
+    padding: 4rem 2rem;
+    background: var(--noir-profond);
+}
+
+.press-facts h2,
+.press-visuals h2,
+.press-links h2,
+.press-contact h2 {
+    text-align: center;
+    font-size: 2rem;
+    margin-bottom: 2rem;
+}
+
+.press-facts-list {
+    max-width: 800px;
+    margin: 0 auto;
+    display: grid;
+    gap: 1rem;
+}
+
+.press-fact {
+    display: grid;
+    grid-template-columns: 160px 1fr;
+    gap: 1rem;
+    padding: 1rem 0;
+    border-bottom: 1px solid var(--line);
+    font-family: var(--font-body);
+}
+
+.press-fact-label {
+    color: var(--or-oki);
+    font-weight: 700;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.press-visuals {
+    padding: 4rem 2rem;
+    background: var(--noir-profond);
+}
+
+.press-visuals-intro {
+    text-align: center;
+    max-width: 700px;
+    margin: 0 auto 2.5rem;
+    opacity: 0.85;
+    font-family: var(--font-body);
+}
+
+.press-visual-grid {
+    max-width: 1000px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1.5rem;
+}
+
+.press-visual a {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.press-visual img {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--line);
+}
+
+.press-visual-caption {
+    display: block;
+    margin-top: 0.5rem;
+    font-size: 0.85rem;
+    opacity: 0.75;
+    font-family: var(--font-body);
+}
+
+.press-visual-pdf-link {
+    display: inline-block;
+    margin-top: 0.5rem;
+    font-size: 0.8rem;
+    font-family: var(--font-body);
+    text-decoration: none;
+    color: var(--or-oki);
+    border-bottom: 1px solid currentColor;
+}
+
+.press-visuals-pdf {
+    text-align: center;
+    margin-top: 2.5rem;
+}
+
+.press-links {
+    padding: 4rem 2rem;
+}
+
+.press-links-list {
+    max-width: 600px;
+    margin: 0 auto;
+    display: grid;
+    gap: 0.75rem;
+}
+
+.press-links-list a {
+    display: block;
+    color: var(--blanc-creme);
+    text-decoration: none;
+    padding: 0.9rem 1.25rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--line);
+    border-left: 4px solid var(--vert-oki);
+    border-radius: var(--radius-md);
+    font-family: var(--font-body);
+    transition: border-color 0.2s ease;
+}
+
+.press-links-list a:hover {
+    border-color: var(--vert-oki);
+}
+
+.press-contact {
+    padding: 4rem 2rem 6rem;
+    text-align: center;
+    background: var(--noir-profond);
+}
+
+.press-contact-text {
+    max-width: 600px;
+    margin: 0 auto 1.5rem;
+    opacity: 0.85;
+    font-family: var(--font-body);
+}
+
+@media (max-width: 600px) {
+    .press-fact {
+        grid-template-columns: 1fr;
+        gap: 0.25rem;
+    }
+}

src/assets/js/main.js

@@ -69,12 +69,42 @@
     themeToggle?.addEventListener('click', toggleTheme);
 })();
 
-// Smooth scrolling
+// Language switch with page mapping
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+function switchLanguage(lang) {
+    const currentPath = window.location.pathname;
+    let newPath;
+
+    if (lang === 'fr') {
+        // Switch to French
+        if (currentPath.startsWith('/en/')) {
+            newPath = currentPath.substring(3); // Remove '/en'
+        } else {
+            newPath = currentPath;
+        }
+        newPath = newPath.replace('/press/', '/presse/');
+        newPath = newPath.replace('/legal-notice/', '/mentions-legales/');
+    } else {
+        // Switch to English
+        if (!currentPath.startsWith('/en/')) {
+            newPath = '/en' + currentPath;
+        } else {
+            newPath = currentPath;
+        }
+        newPath = newPath.replace('/presse/', '/press/');
+        newPath = newPath.replace('/mentions-legales/', '/legal-notice/');
+    }
+
+    window.location.href = newPath;
+}
+
+// Smooth scrolling (uniquement pour les ancres de la page courante)
+document.querySelectorAll('a[href*="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
-        e.preventDefault();
+        const url = new URL(this.href, window.location.href);
-        const target = document.querySelector(this.getAttribute('href'));
+        if (url.pathname !== window.location.pathname || !url.hash) return;
+        const target = document.querySelector(url.hash);
         if (target) {
+            e.preventDefault();
             target.scrollIntoView({
                 behavior: 'smooth',
                 block: 'start'
@@ -130,6 +160,37 @@ document.addEventListener('click', (e) => {
     }
 });
 
+// Close mobile menu after clicking a nav link
+navLinks?.querySelectorAll('a').forEach(link => {
+    link.addEventListener('click', () => {
+        if (menuOpen) {
+            menuOpen = false;
+            navLinks.style.display = 'none';
+            menuToggle.children[0].style.transform = '';
+            menuToggle.children[1].style.opacity = '1';
+            menuToggle.children[2].style.transform = '';
+        }
+    });
+});
+
+// Nav dropdown ("Ressources") toggle for touch/keyboard
+document.querySelectorAll('.nav-dropdown-trigger').forEach(trigger => {
+    trigger.addEventListener('click', () => {
+        const item = trigger.closest('.has-dropdown');
+        const isOpen = item.classList.toggle('open');
+        trigger.setAttribute('aria-expanded', isOpen);
+    });
+});
+
+document.addEventListener('click', (e) => {
+    document.querySelectorAll('.has-dropdown.open').forEach(item => {
+        if (!item.contains(e.target)) {
+            item.classList.remove('open');
+            item.querySelector('.nav-dropdown-trigger')?.setAttribute('aria-expanded', 'false');
+        }
+    });
+});
+
 // Scroll animations
 const observerOptions = {
     threshold: 0.15,

src/en/legal-notice.njk

@@ -0,0 +1,222 @@
+---
+layout: layouts/base.njk
+title: Legal Notice
+description: Legal notice and legal information of ORGANISATION KA INTERNATIONALE (OKI) - Hosting, GDPR, AGPL-V3 license
+---
+
+<section style="padding: 8rem 2rem 4rem; min-height: 100vh; background: linear-gradient(135deg, var(--noir-profond) 0%, var(--gris-sombre) 100%);">
+    <div class="section-container" style="max-width: 900px;">
+        <h1 style="font-size: 2.5rem; margin-bottom: 3rem; text-align: center;">
+            <span class="accent-text">Legal Notice</span>
+        </h1>
+
+        <!-- Website Presentation -->
+        <div style="background: rgba(232, 166, 37, 0.1); border-left: 4px solid var(--or-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
+            <h2 style="color: var(--or-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
+                1. Website Presentation
+            </h2>
+            <p style="margin-bottom: 1rem; line-height: 1.6;">
+                In accordance with applicable law, we hereby provide users of the website <strong>o-k-i.net</strong>
+                with the identity of the various parties involved in its creation and management:
+            </p>
+            <ul style="list-style: none; padding: 0; margin: 1.5rem 0;">
+                <li style="margin-bottom: 1rem;">
+                    <strong style="color: var(--or-oki);">Owner:</strong><br>
+                    ORGANISATION KA INTERNATIONALE<br>
+                    36 Rue Lethière, 97100 Basse-Terre
+                </li>
+                <li style="margin-bottom: 1rem;">
+                    <strong style="color: var(--or-oki);">Publishing Manager:</strong><br>
+                    ORGANISATION KA INTERNATIONALE<br>
+                    Contact: <a href="mailto:kontak@o-k-i.net" style="color: var(--or-oki); text-decoration: none;">kontak@o-k-i.net</a>
+                </li>
+                <li style="margin-bottom: 1rem;">
+                    <strong style="color: var(--or-oki);">Webmaster:</strong><br>
+                    Cédric FAMIBELLE-PRONZOLA<br>
+                    Contact: <a href="mailto:contact@cedric-pronzola.re" style="color: var(--or-oki); text-decoration: none;">contact@cedric-pronzola.re</a>
+                </li>
+                <li style="margin-bottom: 1rem;">
+                    <strong style="color: var(--or-oki);">Hosting Provider:</strong><br>
+                    OVH<br>
+                    2 rue Kellermann, 59100 Roubaix
+                </li>
+                <li style="margin-bottom: 1rem;">
+                    <strong style="color: var(--or-oki);">Data Protection Officer:</strong><br>
+                    ORGANISATION KA INTERNATIONALE<br>
+                    Contact: <a href="mailto:kontak@o-k-i.net" style="color: var(--or-oki); text-decoration: none;">kontak@o-k-i.net</a>
+                </li>
+            </ul>
+        </div>
+
+        <!-- Terms of Use -->
+        <div style="background: rgba(0, 168, 84, 0.1); border-left: 4px solid var(--vert-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
+            <h2 style="color: var(--vert-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
+                2. Terms of Use of the Website and Services
+            </h2>
+            <p style="line-height: 1.6;">
+                The website is protected by intellectual property laws. Use of the website constitutes full acceptance
+                of the terms of use described below. These terms of use may be modified or supplemented at any time.
+            </p>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                Users of the website may not reuse or exploit the elements of the website without prior authorization.
+            </p>
+        </div>
+
+        <!-- Description of Services -->
+        <div style="background: rgba(237, 28, 76, 0.1); border-left: 4px solid var(--rouge-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
+            <h2 style="color: var(--rouge-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
+                3. Description of Services Provided
+            </h2>
+            <p style="line-height: 1.6;">
+                The website <strong>o-k-i.net</strong> is intended to provide information about all activities
+                of ORGANISATION KA INTERNATIONALE.
+            </p>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                ORGANISATION KA INTERNATIONALE strives to provide information that is as accurate as possible.
+                However, it cannot be held responsible for omissions, inaccuracies and deficiencies in updates,
+                whether due to its own actions or those of third-party partners providing this information.
+            </p>
+        </div>
+
+        <!-- Technical Limitations -->
+        <div style="background: rgba(232, 166, 37, 0.1); border-left: 4px solid var(--or-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
+            <h2 style="color: var(--or-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
+                4. Technical Limitations
+            </h2>
+            <p style="line-height: 1.6;">
+                The website uses JavaScript technology. The site is hosted within the European Union in compliance with GDPR.
+            </p>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                ORGANISATION KA INTERNATIONALE cannot be held responsible for material damage related to the use of the website.
+                Furthermore, the website user agrees to access the site using recent equipment, free from viruses,
+                and with a current, up-to-date browser.
+            </p>
+        </div>
+
+        <!-- Intellectual Property and Licenses -->
+        <div style="background: rgba(0, 168, 84, 0.1); border-left: 4px solid var(--vert-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
+            <h2 style="color: var(--vert-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
+                5. Intellectual Property and Licenses
+            </h2>
+            <p style="line-height: 1.6;">
+                The source code of the website <strong>o-k-i.net</strong> is distributed under the
+                <strong>GNU Affero General Public License v3.0 (AGPL-V3)</strong>, a free license that guarantees
+                the following freedoms:
+            </p>
+            <ul style="list-style: disc; padding-left: 2rem; margin: 1rem 0;">
+                <li style="margin-bottom: 0.5rem;">Freedom to use the software for any purpose</li>
+                <li style="margin-bottom: 0.5rem;">Freedom to study how the program works and adapt it</li>
+                <li style="margin-bottom: 0.5rem;">Freedom to redistribute copies</li>
+                <li style="margin-bottom: 0.5rem;">Freedom to improve the program and publish improvements</li>
+            </ul>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                This license ensures that any modification to the source code must be published under the same AGPL-V3 license.
+                If you use this code to provide an online service, you must also make the modified source code available
+                to users of that service.
+            </p>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                The full text of the license is available at:
+                <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" style="color: var(--or-oki); text-decoration: none;">
+                    https://www.gnu.org/licenses/agpl-3.0.html
+                </a>
+            </p>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                Original textual and visual content of the website (excluding source code) remains the property of
+                ORGANISATION KA INTERNATIONALE. Its use is subject to the conditions of the AGPL-V3 license for
+                technical elements, and requires authorization for other uses.
+            </p>
+        </div>
+
+        <!-- Limitations of Liability -->
+        <div style="background: rgba(237, 28, 76, 0.1); border-left: 4px solid var(--rouge-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
+            <h2 style="color: var(--rouge-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
+                6. Limitations of Liability
+            </h2>
+            <p style="line-height: 1.6;">
+                ORGANISATION KA INTERNATIONALE cannot be held responsible for direct or indirect damage caused to
+                the user's equipment, when accessing the website o-k-i.net, and resulting either from the use of equipment
+                not meeting the specifications indicated in section 4, or from the occurrence of a bug or incompatibility.
+            </p>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                ORGANISATION KA INTERNATIONALE cannot also be held responsible for indirect damage (such as loss of market
+                or loss of opportunity) resulting from the use of the website o-k-i.net.
+            </p>
+        </div>
+
+        <!-- Personal Data Management -->
+        <div style="background: rgba(232, 166, 37, 0.1); border-left: 4px solid var(--or-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
+            <h2 style="color: var(--or-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
+                7. Personal Data Management
+            </h2>
+            <p style="line-height: 1.6;">
+                Personal data is protected in particular by European Regulation 2016/679 of April 27, 2016
+                relating to the protection of natural persons with regard to the processing of personal data (GDPR).
+            </p>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                Personal data collected on the website o-k-i.net is processed for the following purposes:
+            </p>
+            <ul style="list-style: disc; padding-left: 2rem; margin: 1rem 0;">
+                <li style="margin-bottom: 0.5rem;">Navigation on the website</li>
+                <li style="margin-bottom: 0.5rem;">Prevention of computer fraud</li>
+                <li style="margin-bottom: 0.5rem;">Improvement and optimization of navigation</li>
+                <li style="margin-bottom: 0.5rem;">Audience measurement and statistics</li>
+            </ul>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                In application of these provisions, you have the right to access, rectify, delete and transfer your personal data.
+                You can exercise these rights by contacting:
+                <a href="mailto:kontak@o-k-i.net" style="color: var(--or-oki); text-decoration: none;">kontak@o-k-i.net</a>
+            </p>
+        </div>
+
+        <!-- Incident Notification -->
+        <div style="background: rgba(0, 168, 84, 0.1); border-left: 4px solid var(--vert-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
+            <h2 style="color: var(--vert-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
+                8. Incident Notification
+            </h2>
+            <p style="line-height: 1.6;">
+                Regardless of the efforts made, no method of transmission over the Internet and no method of electronic storage
+                is completely secure. We therefore cannot guarantee absolute security.
+            </p>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                If we became aware of a security breach, we would notify affected users so they can take appropriate measures.
+                Our incident notification procedures take into account our legal obligations, whether at the national or European level.
+                We undertake to fully inform our customers of all security-related issues and to provide all necessary information
+                to help them meet their own regulatory reporting obligations.
+            </p>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                Security measures in place include: firewalls, encryption, pseudonymization and physical security measures.
+            </p>
+        </div>
+
+        <!-- Cookies and Web Beacons -->
+        <div style="background: rgba(237, 28, 76, 0.1); border-left: 4px solid var(--rouge-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
+            <h2 style="color: var(--rouge-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
+                9. Cookies and Web Beacons
+            </h2>
+            <p style="line-height: 1.6;">
+                The website may use cookies to enhance the user experience. Users can disable cookies in their browser settings.
+            </p>
+            <p style="margin-top: 1rem; line-height: 1.6;">
+                Some pages may contain web beacons (invisible pixels) to measure website traffic and performance.
+            </p>
+        </div>
+
+        <!-- Applicable Law and Jurisdiction -->
+        <div style="background: rgba(232, 166, 37, 0.1); border-left: 4px solid var(--or-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
+            <h2 style="color: var(--or-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
+                10. Applicable Law and Jurisdiction
+            </h2>
+            <p style="line-height: 1.6;">
+                Any dispute related to the use of the website o-k-i.net is governed by French law.
+                Except where the law does not permit, exclusive jurisdiction is granted to the competent courts of Guadeloupe.
+            </p>
+        </div>
+
+        <!-- Back to Home -->
+        <div style="text-align: center; margin-top: 3rem;">
+            <a href="/en/" class="btn btn-primary">
+                ← Back to Home
+            </a>
+        </div>
+    </div>
+</section>

src/en/press.njk

@@ -0,0 +1,64 @@
+---
+layout: layouts/base.njk
+title: Press
+description: Press resources for DJANGOKAM, the first Caribbean AI artist produced by ORGANISATION KA INTERNATIONALE (OKI) — HD visuals and listening links.
+---
+
+<section class="press-hero">
+    <h1>{{ t.press.title }} <span class="accent-text">{{ t.press.title_accent }}</span></h1>
+    <p class="press-lede">{{ t.press.lede }}</p>
+</section>
+
+<section class="press-facts">
+    <div class="section-container">
+        <h2>{{ t.press.facts_title }}</h2>
+        <div class="press-facts-list">
+            {% for fact in t.press.facts %}
+            <div class="press-fact">
+                <span class="press-fact-label">{{ fact.label }}</span>
+                <span>{{ fact.value }}</span>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+
+<section class="press-visuals">
+    <div class="section-container">
+        <h2>{{ t.press.visuals_title }}</h2>
+        <p class="press-visuals-intro">{{ t.press.visuals_intro }}</p>
+        <div class="press-visual-grid">
+            {% for visual in t.press.visuals %}
+            <div class="press-visual">
+                <a href="{{ visual.image | cdn }}" target="_blank" rel="noopener noreferrer">
+                    <img src="{{ visual.image | cdn }}" alt="{{ visual.caption }}" loading="lazy">
+                    <span class="press-visual-caption">{{ visual.caption }}</span>
+                </a>
+                <a href="{{ ('/assets/press/' + visual.pdf) | cdn }}" class="press-visual-pdf-link">{{ t.press.visual_pdf_label }}</a>
+            </div>
+            {% endfor %}
+        </div>
+        <div class="press-visuals-pdf">
+            <a href="{{ ('/assets/press/' + t.press.visuals_pdf_file) | cdn }}" class="btn btn-primary">{{ t.press.visuals_pdf_label }} →</a>
+        </div>
+    </div>
+</section>
+
+<section class="press-links">
+    <div class="section-container">
+        <h2>{{ t.press.links_title }}</h2>
+        <div class="press-links-list">
+            {% for link in t.press.links %}
+            <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.text }}</a>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+
+<section class="press-contact">
+    <div class="section-container">
+        <h2>{{ t.press.contact_title }}</h2>
+        <p class="press-contact-text">{{ t.press.contact_text }}</p>
+        <a href="mailto:{{ t.press.contact_email }}" class="btn btn-primary">{{ t.press.contact_email }}</a>
+    </div>
+</section>

src/presse.njk

@@ -0,0 +1,64 @@
+---
+layout: layouts/base.njk
+title: Presse
+description: Ressources presse pour DJANGOKAM, premier artiste IA caribéen produit par ORGANISATION KA INTERNATIONALE (OKI) — visuels HD et liens d'écoute.
+---
+
+<section class="press-hero">
+    <h1>{{ t.press.title }} <span class="accent-text">{{ t.press.title_accent }}</span></h1>
+    <p class="press-lede">{{ t.press.lede }}</p>
+</section>
+
+<section class="press-facts">
+    <div class="section-container">
+        <h2>{{ t.press.facts_title }}</h2>
+        <div class="press-facts-list">
+            {% for fact in t.press.facts %}
+            <div class="press-fact">
+                <span class="press-fact-label">{{ fact.label }}</span>
+                <span>{{ fact.value }}</span>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+
+<section class="press-visuals">
+    <div class="section-container">
+        <h2>{{ t.press.visuals_title }}</h2>
+        <p class="press-visuals-intro">{{ t.press.visuals_intro }}</p>
+        <div class="press-visual-grid">
+            {% for visual in t.press.visuals %}
+            <div class="press-visual">
+                <a href="{{ visual.image | cdn }}" target="_blank" rel="noopener noreferrer">
+                    <img src="{{ visual.image | cdn }}" alt="{{ visual.caption }}" loading="lazy">
+                    <span class="press-visual-caption">{{ visual.caption }}</span>
+                </a>
+                <a href="{{ ('/assets/press/' + visual.pdf) | cdn }}" class="press-visual-pdf-link">{{ t.press.visual_pdf_label }}</a>
+            </div>
+            {% endfor %}
+        </div>
+        <div class="press-visuals-pdf">
+            <a href="{{ ('/assets/press/' + t.press.visuals_pdf_file) | cdn }}" class="btn btn-primary">{{ t.press.visuals_pdf_label }} →</a>
+        </div>
+    </div>
+</section>
+
+<section class="press-links">
+    <div class="section-container">
+        <h2>{{ t.press.links_title }}</h2>
+        <div class="press-links-list">
+            {% for link in t.press.links %}
+            <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.text }}</a>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+
+<section class="press-contact">
+    <div class="section-container">
+        <h2>{{ t.press.contact_title }}</h2>
+        <p class="press-contact-text">{{ t.press.contact_text }}</p>
+        <a href="mailto:{{ t.press.contact_email }}" class="btn btn-primary">{{ t.press.contact_email }}</a>
+    </div>
+</section>

src/sitemap.xml

@@ -12,6 +12,18 @@
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
+  <url>
+    <loc>https://o-k-i.net/presse/</loc>
+    <lastmod>2026-07-06</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.5</priority>
+  </url>
+  <url>
+    <loc>https://o-k-i.net/en/press/</loc>
+    <lastmod>2026-07-06</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.5</priority>
+  </url>
   <url>
     <loc>https://o-k-i.net/mentions-legales/</loc>
     <lastmod>2025-01-05</lastmod>