Réécriture SvelteKit statique (Svelte 5 runes + TS, adapter-static)

- Données PeerTube (GADE), Castopod (KUTE) et Mastodon (BOKANTE) bakées au build via +page.server.ts (throttle + retry 429 + déduplication) - Charte OKI complète : tokens, thème sombre par défaut (clair opt-in, anti-FOUC), Archivo/Inter self-hébergées, flag-bar, sprite SVG (zéro emoji en interface, zéro Font Awesome/CDN) - i18n FR/EN par routage [[locale]], bundles JSON, hreflang, %lang% serveur - Pages : accueil, /video/[uuid] (embed, téléchargements, partage, commentaires, JSON-LD VideoObject), /categories/[id], /recherche (index JSON baké, recherche client), /direct (live + annonce multi-fuseaux), /dons, /mentions-legales, /offline + 404 kréyòl - Motion gwoka : KineticText (scrub view()), ScrollProgressBar, FlagChip, reveal syncopé, View Transitions, gate prefers-reduced-motion unique - PWA : manifest + Workbox generateSW (fallback /offline/), registerSW statique - Sécurité : CSP par page en <meta> (SHA-256 des inline via scripts/postbuild-csp.mjs) + headers globaux (_headers Cloudflare et .htaccess o2switch), redirections des anciennes URLs PHP - Doc : docs/DEPLOIEMENT-SVELTEKIT.md
2026-07-23 00:49:02 -04:00
parent 5b1a78782a
commit d6efb6736f
147 changed files with 14567 additions and 15145 deletions
@@ -0,0 +1,213 @@
+# CHARTE OKI — DESIGN SYSTEM & HARMONISATION MULTI-PROJETS
+### ORGANISATION KA INTERNATIONALE · appliquer la recette SvelteKit avec la marque OKI
+
+> **Nature de ce document :** référence de marque opérationnelle, destinée aux humains et aux agents de code. Il consolide le `BRAND.md` existant (valeurs mesurées sur o-k-i.net, juillet 2026 — **source canonique** pour couleurs, typo, voix) et y ajoute les tokens prêts à l'emploi, les règles de motion, l'iconographie SVG, et la matrice d'application projet par projet. **En cas de conflit : ce document prime sur la recette générique pour tout ce qui touche à la marque ; la recette prime pour tout ce qui touche à la méthode technique.**
+
+---
+
+## 1. IDENTITÉ EN UNE PHRASE
+
+Un studio web militant caribéen dont la marque est un **drapeau panafricain — noir, or, vert, rouge — posé sur un fond presque noir, en capitales Archivo**. La marque est afrofuturiste caribéenne : un drapeau, pas une charte corporate.
+
+Trois conséquences non négociables :
+1. **Le thème sombre est l'identité par défaut** ; le clair est une variante opt-in (`html.light-theme`) qui assombrit les accents pour rester WCAG AA.
+2. **L'or porte toute l'interaction** — c'est la seule couleur d'action.
+3. **Angles nets partout** — aucune forme organique, aucune bulle très arrondie.
+
+---
+
+## 2. TOKENS — PRÊTS À L'EMPLOI
+
+### 2.1 Couleurs (mesurées sur le site réel)
+
+```css
+:root {
+  /* ── Noyau (thème sombre = défaut) ── */
+  --noir-oki:        #0D0D0D;  /* background */
+  --noir-profond:    #1A0F1A;  /* surface */
+  --blanc-creme:     #FFF8E7;  /* foreground */
+  --line:            rgba(255, 255, 255, 0.10); /* filets — jamais de gris plein */
+  --or-oki:          #FDB813;  /* accent : SEULE couleur d'action */
+  --rouge-oki:       #FF1654;  /* signal, ponctuation — jamais un lien/bouton */
+  /* ── Étendue (parcimonie : décorations et sémantique) ── */
+  --vert-oki:        #00D66C;  /* succès, validation, dons mensuels */
+  --turquoise-caraibes: #00CED1;
+  --jaune-soleil:    #FFD700;
+  --orange-flamme:   #FF6B35;
+  --violet-nuit:     #6B2D5C;
+  --bleu-ocean:      #0077BE;
+  --or-clair:        #FFE066;  /* survol des boutons */
+  --gris-sombre:     #2D1B2E;
+  /* ── Sémantique dérivée ── */
+  --muted:           color-mix(in srgb, var(--blanc-creme) 70%, transparent);
+  --card-bg:         rgba(255, 255, 255, 0.03);
+}
+```
+
+Règles d'usage (mesurées, à faire respecter) :
+- Texte secondaire = blanc crème à 70–85 % d'opacité, **pas** une couleur dédiée.
+- Filets = blanc à 10 %, jamais de gris plein.
+- Rouge = signaler · Vert = valider · Or = agir. Ne jamais permuter ces rôles.
+
+### 2.2 Typographie
+
+```css
+:root {
+  --font-display: 'Archivo', 'Arial Black', sans-serif;   /* 600–900, TITRES + BOUTONS */
+  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* 400–800 */
+}
+```
+- Titres h1–h4 : Archivo, **MAJUSCULES**, `letter-spacing: -0.01em`.
+- Boutons : Archivo 700, uppercase, `letter-spacing: 0.03em`, bordure 2 px.
+- Corps : Inter, `line-height: 1.5`. Graisses minimales : 400 body / 600 display (lisibilité écrans bas de gamme).
+- **Self-hébergement obligatoire** : woff2 dans `fonts/` + `fonts/fonts.css`, `font-display: swap`. Aucun appel Google Fonts (contradiction avec la doctrine souveraineté — bug en cours de correction sur o-k-i.net).
+
+### 2.3 Formes, espacements, layout
+
+```css
+:root {
+  --radius-sm: 3px;   /* boutons, tags, badges */
+  --radius-md: 6px;   /* cartes — jamais plus */
+  --border-card: 1px solid var(--line);
+  --border-btn:  2px solid var(--or-oki);
+  --space-1: 0.75rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 4rem;
+  --container: 1200px;
+}
+```
+- Sections : `padding: var(--space-5) var(--space-4)` · Grille : `repeat(auto-fit, minmax(300px, 1fr))`.
+- **Carte OKI canonique** : fond blanc 3 %, liseré gauche 4 px d'accent (vert ou or), survol `translateY(-2px à -4px)` + bordure d'accent.
+- **Tag OKI canonique** : fond or 8 % + bordure or 1 px, rayon 3 px.
+
+### 2.4 La flag-bar — signature n°1
+
+Bandeau **6 px, 4 segments francs** : noir 0–25 % · or 25–50 % · vert 50–75 % · rouge 75–100 %. Arrêts nets, **jamais de dégradé**.
+
+```css
+.flag-bar {
+  height: 6px;
+  background: linear-gradient(to right,
+    var(--noir-oki) 0 25%, var(--or-oki) 25% 50%,
+    var(--vert-oki) 50% 75%, var(--rouge-oki) 75% 100%);
+}
+```
+Placement : bord inférieur de la navigation fixe ; peut ponctuer un héros ou un pied de page. **Une occurrence visible par écran maximum.** C'est l'élément le plus reconnaissable de la marque — le diluer, c'est le tuer.
+
+### 2.5 Logotype
+
+Monogramme « OKI » : arche or, point vert, accent rouge sur noir. Fichier canonique `logos/favicon-1.png` (512×512, transparent — aussi og:image et apple-touch-icon) ; déclinaisons `logos/favicon-0.ico`, `assets/maskable_oki.png`. Les `logos/header-img-*` sont des marques de **partenaires** (Joukawouvè, Aktivist Vybz, cyber-mawonaj, KA UBUNTU) : provenance conservée, **ne jamais les utiliser comme logo OKI**.
+
+---
+
+## 3. MOTION OKI — LES CADENCES GWOKA
+
+La marque ne bouge pas comme une startup : elle pulse comme un ka. Tokens obligatoires dans tout projet OKI animé :
+
+```css
+:root {
+  --ease-ka:      cubic-bezier(0.22, 1, 0.36, 1);  /* temps fort : attaque franche, longue tenue */
+  --ease-syncope: cubic-bezier(0.65, 0, 0.35, 1);  /* contretemps : symétrique, urgent */
+  --dur-tanbou:   120ms;   /* double-croche — micro-interactions, hovers */
+  --dur-mesure:   480ms;   /* une mesure — entrées de section */
+  --dur-phrase:   960ms;   /* deux mesures — transitions de page */
+}
+```
+
+Règles de motion :
+1. **Le stagger de marque OKI est syncopé (3+3+2)**, pas linéaire : délais `[0, 120, 300, 360, 600, 660, 900, 960]` ms pour 8 éléments. C'est subtil — c'est le but : le rythme est une identité, pas un effet.
+2. Uniquement `transform` + `opacity` (recette P3/budgets).
+3. `prefers-reduced-motion` : gate unique au provider, contenu statique complet (le site actuel n'a **aucune** garde — à corriger partout).
+4. Durées toujours lues depuis les tokens, jamais hardcodées.
+
+---
+
+## 4. ICONOGRAPHIE — LA RÈGLE « ZÉRO EMOJI EN PRODUCTION »
+
+Le site actuel utilise des emojis (✊🏿🔓🤝🏿🛡️) : rendu dépendant de l'OS, incohérent avec la précision du drapeau. **Tout projet harmonisé remplace les emojis par le set SVG OKI.**
+
+Spécifications du set :
+- ViewBox 24×24, **stroke 2 px**, angles nets (pas de courbes organiques), une seule couleur : `currentColor` (or par défaut sur noir).
+- Remplissage réservé aux pictogrammes ≤ 16 px.
+- Grille de nommage en KA : les fichiers portent des noms kréyòl.
+
+Set initial à produire (correspondances avec l'existant) :
+
+| Fichier | Sujet | Remplace / usage |
+|---|---|---|
+| `ka.svg` | tambour ka | icône maîtresse, 404, loader |
+| `lambi.svg` | conque lambi | communication, annonces, « bòkaz » |
+| `zetwal.svg` | étoile 4 branches | navigation, favoris, instances fédivers |
+| `mawon.svg` | silhouette/brisure de chaîne stylisée | souveraineté, valeurs |
+| `lakanmou.svg` | flamme | engagement, dons ponctuels |
+| `jaden.svg` | pousse/jardin | solidarité, lakou, projets |
+| `kannen.svg` | canne à sucre stylisée | patrimoine, histoire |
+| `lanme.svg` | vague | océan, liens internationaux, Réunion↔Gwada |
+| `glo.svg` | poing levé géométrique | ✊🏿 — luttes, tarifs solidaires |
+| `kle.svg` | clé/cadenas ouvert | 🔓 — liberté, open-source |
+| `pawol.svg` | bulle de parole angulaire | langues, traduction, PAWÒL-NU |
+| `mizik-note.svg` | note de musique | MIZIK, DJANGOKAM |
+
+Chaque picto livré en `<symbol>` dans un sprite `icons.svg` + usage `<svg><use href="icons.svg#ka"/></svg>` (une seule requête, stylable en CSS).
+
+---
+
+## 5. VOIX & TON (canonique, reprise du BRAND.md)
+
+Vouvoiement direct et empathique, phrases courtes. On parle d'abord de la cause du visiteur — « Vous luttez, vous organisez, vous mobilisez » — puis de l'outil. La technique sert la lutte, jamais l'inverse.
+
+- **À dire :** sur mesure · tarifs adaptés à vos moyens · organisations engagées · transition numérique · écosystème numérique libre · à la hauteur.
+- **À éviter :** « template générique », jargon corporate/marketing, « clé en main », startup-speak.
+- Piliers : ORGANISATION KA · INTERNATIONALE · Des solutions pour chaque besoin · Le budget ne doit jamais être un frein.
+- **Langues :** FR par défaut ; le KA (kréyòl) en signature, titres de sections symboliques et microcopy (404, loader, remerciements) ; EN en version dédiée. Attribut `lang` correct à chaque bascule.
+
+## 6. IMAGERIE (canonique)
+
+Illustration numérique afrofuturiste caribéenne : scènes au coucher de soleil, personnages caribéens, pochettes musicales typographiées. Couleurs chaudes saturées sur fonds sombres. **Jamais** de photo de banque d'images corporate, jamais d'illustration générique de startup, jamais d'icône ou de logo en guise d'image. Formats : AVIF/WebP, self-hébergés, `loading="lazy"` hors LCP.
+
+---
+
+## 7. MATRICE D'APPLICATION PAR PROJET
+
+Harmoniser ≠ tout refaire : chaque plateforme a un canal de personnalisation officiel. N'UTILISER QUE ces canaux (jamais de fork pour du style).
+
+| Projet | Logiciel | Canal de theming | Application OKI |
+|---|---|---|---|
+| **o-k-i.net** | SvelteKit (migration en cours) | Natif | Référence absolue : tokens §2, flag-bar, village SVG, KineticText gwoka |
+| **BOKANTE** | Mastodon | CSS personnalisé admin + `custom.css` | Variables Mastodon remappées sur tokens OKI : fond `--noir-oki`, accent `--or-oki`, boutons Archivo uppercase ; logo colonne = monogramme OKI ; flag-bar en haut de la colonne de composition |
+| **GADE** | PeerTube | Thème CSS admin (champ « CSS personnalisé ») | Mêmes remappages ; player : contrôles or sur noir ; page À-propos = texte marque (« vidéos sans algorithme, dédiées aux cultures afro-diasporiques ») |
+| **NIYAJ** | Nextcloud | App **Theming** officielle | Couleur primaire `#FDB813`, fond sombre, logo + slogan « Votre cloud, vos données » ; favicon OKI |
+| **MIZIK** | Funkwhale | `custom.css` admin | Fond `--noir-oki`, accents or, player accentué or ; typographie : Inter si surchargeable, sinon système |
+| **KUTE** | App PHP maison | Natif | Appliquer les tokens §2 en entier — c'est un projet first-party, aucune excuse de ne pas être au niveau d'o-k-i.net |
+| **LABOLA** | Forgejo/Gitea | `custom/templates` + `custom/public/css` | Thème sombre OKI, accent or ; logo forge = monogramme ; **ne pas toucher aux templates Go au-delà du header/footer** (fragile aux upgrades) |
+| **PAWÒL-NU / djangokam.pawol.nu / nyyoka.pawol.nu** | Selon stack | Natif | Charte complète + liberté artistique accrue (pochettes, kinetic type poussé) : c'est la vitrine culturelle, le motion peut y être plus riche qu'ailleurs |
+| **fediverse.o-k-i.net** | Statique | Natif | **Constellation zétwal** : chaque instance = étoile SVG reliée, hover/focus = éclat or + label ; DOM/SVG léger uniquement |
+
+### Le footer fédéré commun (tous les sous-domaines)
+
+```
+[monogramme OKI] Un service libre opéré par ORGANISATION KA INTERNATIONALE · o-k-i.net
+```
+ flag-bar 6 px au-dessus du footer. Une seule ligne, `--muted`, lien or. C'est le fil rouge qui fait l'écosystème.
+
+### Règles cross-projets
+
+1. **Un domaine, une famille** : `*.o-k-i.net` = écosystème fédivers et outils ; `pawol.nu` = projets culturels/musicaux. Ne pas mélanger.
+2. Chaque service porte un **nom KA + le nom du logiciel en sous-titre** (pattern existant : « BOKANTE — Mastodon », « NIYAJ — Nextcloud »). Ne jamais masquer le logiciel sous-jacent : la transparence est un pilier.
+3. Favicon = monogramme OKI partout (déclinaisons ico/png/maskable).
+4. og:image par service : monogramme sur `--noir-oki` + nom du service en Archivo or.
+5. Toute nouvelle page statique du réseau démarre du template o-k-i.net (tokens inclus), jamais de zéro.
+
+---
+
+## 8. CHECKLIST D'HARMONISATION D'UN PROJET (DoD marque)
+
+- [ ] Thème sombre par défaut, clair opt-in contrasté AA.
+- [ ] Tokens §2 importés (pas de valeur recopiée à la main — un fichier `oki-tokens.css` partagé).
+- [ ] Or = seule couleur d'action ; rouge/vert dans leurs rôles sémantiques.
+- [ ] Archivo/Inter self-hébergées, zéro fonte externe.
+- [ ] Flag-bar présente, segments francs, ≤ 1 par écran.
+- [ ] Zéro emoji en interface (set SVG §4).
+- [ ] Tokens motion §3 + gate `prefers-reduced-motion`.
+- [ ] Footer fédéré + monogramme + favicon OKI.
+- [ ] Voix conforme §5 (test : aucune occurrence de « clé en main », « solution innovante », « disruptive »).
+- [ ] Zéro requête tierce au chargement (fonts, CDN, analytics) — vérifié onglet réseau.
+- [ ] Nom KA + logiciel en sous-titre visible en page d'accueil du service.