refactor: regrouper le menu desktop dans Ressources

src/_data/i18n/en/navigation.json

@@ -3,10 +3,16 @@
   { "text": "Our projects", "url": "#projets" },
   { "text": "DJANGOKAM", "url": "#djangokam" },
   { "text": "Services", "url": "#hebergement" },
+  { "text": "Donate", "url": "#dons" },
+  {
+    "text": "Resources",
+    "children": [
       { "text": "Our work", "url": "#clients" },
       { "text": "Our instances", "url": "#services-libres" },
       { "text": "FAQ", "url": "#faq" },
-  { "text": "Donate", "url": "#dons" },
+      { "text": "Press", "url": "/en/press/" },
-  { "text": "Contact", "url": "#contact" },
       { "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
     ]
+  },
+  { "text": "Contact", "url": "#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/navigation.json

@@ -3,10 +3,16 @@
   { "text": "Nos projets", "url": "#projets" },
   { "text": "DJANGOKAM", "url": "#djangokam" },
   { "text": "Services", "url": "#hebergement" },
+  { "text": "Dons", "url": "#dons" },
+  {
+    "text": "Ressources",
+    "children": [
       { "text": "Réalisations", "url": "#clients" },
       { "text": "Nos instances", "url": "#services-libres" },
       { "text": "FAQ", "url": "#faq" },
-  { "text": "Dons", "url": "#dons" },
+      { "text": "Presse", "url": "/presse/" },
-  { "text": "Contact", "url": "#contact" },
       { "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/partials/nav.njk

@@ -6,11 +6,28 @@
         </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' %}

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;
@@ -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

@@ -130,6 +130,24 @@ document.addEventListener('click', (e) => {
     }
 });
 
+// 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/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>