chore : import initial du dossier de travail (PRD, guides, recommandations doc2sveltekit)

Inclut SPECS_SVELTE.md : conventions Svelte 5/SvelteKit pour veille-ia,
consolidées depuis doc2sveltekit-transition (playbook, charte OKI, best practices).

doc2sveltekit-transition/BRAND.md

@@ -0,0 +1,112 @@
+# ORGANISATION KA INTERNATIONALE — Guide de marque
+
+Source mesurée : https://o-k-i.net/ (CSS et HTML réels, juillet 2026).
+OKI développe des applications web sur mesure pour les associations, collectifs
+et organisations militantes, avec des tarifs adaptés à leurs moyens. L'identité
+est **afrofuturiste caribéenne** : un drapeau, pas une charte corporate.
+
+## Identité en une phrase
+
+Un studio web militant caribéen dont la marque est un drapeau pan-africain —
+noir, or, vert, rouge — posé sur un fond presque noir, en capitales Archivo.
+
+## Couleurs
+
+Le **thème sombre est l'identité par défaut**. Le thème clair existe mais comme
+variante opt-in (`html.light-theme`) qui inverse les rôles et assombrit les
+accents pour WCAG AA.
+
+| Rôle | Couleur | Hex | Variable d'origine |
+| --- | --- | --- | --- |
+| background | Noir OKI | `#0D0D0D` | `--noir-oki` |
+| surface | Noir profond | `#1A0F1A` | `--noir-profond` |
+| foreground | Blanc crème | `#FFF8E7` | `--blanc-creme` |
+| muted | Crème atténué | `#B6B1A6` | dérivé : blanc crème à 70 % (le site utilise `opacity: 0.7–0.85`) |
+| border | Ligne | `#262626` | dérivé : `rgba(255,255,255,0.1)` (`--line`) |
+| accent | Or OKI | `#FDB813` | `--or-oki` |
+| accent-secondary | Rouge OKI | `#FF1654` | `--rouge-oki` |
+
+Palette étendue mesurée (à utiliser avec parcimonie, décorations et sémantique) :
+vert OKI `#00D66C` (succès, dons mensuels), turquoise caraïbes `#00CED1`,
+jaune soleil `#FFD700`, orange flamme `#FF6B35`, violet nuit `#6B2D5C`,
+bleu océan `#0077BE`, or clair `#FFE066` (survol des boutons), gris sombre `#2D1B2E`.
+
+Règles d'usage :
+
+- L'**or `#FDB813` porte toute l'interaction** : liens, boutons, tags, survols,
+  focus. C'est la seule couleur d'action.
+- Le rouge `#FF1654` signale et ponctue ; le vert `#00D66C` valide. Ne jamais
+  les substituer à l'or pour un lien ou un bouton principal.
+- Texte secondaire : blanc crème à 70–85 % d'opacité, pas une couleur dédiée.
+- Filets : blanc à 10 % d'opacité (`rgba(255,255,255,0.1)`), jamais de gris plein.
+
+### Le « flag-bar » — signature graphique
+
+Bandeau de 6 px à 4 segments **francs** : noir 0–25 %, or 25–50 %, vert 50–75 %,
+rouge 75–100 %. Arrêts nets, **jamais de dégradé**. Il se place en bas de la
+navigation et peut ponctuer un héros ou un pied de page. C'est l'élément de
+marque le plus reconnaissable : l'utiliser une fois par écran, pas plus.
+
+## Typographie
+
+- **Display : Archivo** (600–900), MAJUSCULES, `letter-spacing: -0.01em`,
+  repli `'Arial Black', sans-serif`. Tous les titres (h1–h4) et les boutons.
+- **Body : Inter** (400–800), repli `-apple-system, BlinkMacSystemFont, sans-serif`.
+  Texte courant, tags, formulaires. `line-height: 1.5`.
+- Les deux familles sont auto-hébergées dans `fonts/` (woff2) et déclarées dans
+  `fonts/fonts.css` ; Google Fonts :
+  `https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap`.
+- Boutons : Archivo 700, uppercase, `letter-spacing: 0.03em`, bordure 2 px.
+
+## Voix et ton
+
+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. (Inféré du positionnement du site : OKI se
+  définit explicitement contre le template et les géants du web.)
+- Piliers : ORGANISATION KA · INTERNATIONALE · Des solutions pour chaque besoin ·
+  Le budget ne doit jamais être un frein.
+
+## Imagerie
+
+Illustration numérique afrofuturiste caribéenne : scènes au coucher de soleil,
+personnages caribéens, pochettes musicales typographiées (DJANGOKAM, l'artiste
+IA caribéen du collectif). Couleurs chaudes saturées sur fonds sombres.
+
+- Échantillons réels dans `imagery/` (voir `brand.json → imagery.samples`).
+- **Jamais** de photo de banque d'images corporate ni d'illustration générique
+  de start-up. Jamais d'icône ou de logo en guise d'image.
+
+## Layout et posture
+
+- **Angles nets** : rayons 3 px (boutons, tags, badges) à 6 px (cartes). Aucune
+  forme organique, aucune bulle très arrondie.
+- Bordures 1 px `rgba(255,255,255,0.1)` ; boutons bordure 2 px.
+- Cartes : fond blanc à 3 %, liseré gauche 4 px d'accent (vert ou or), survol
+  `translateY(-2px à -4px)` + bordure d'accent.
+- Tags : fond or à 8 % + bordure or 1 px, rayon 3 px.
+- Espacement : échelle rem 0.75 / 1 / 1.5 / 2 / 4 ; sections `4rem 2rem` ;
+  conteneur max 1200 px ; grille `repeat(auto-fit, minmax(300px, 1fr))`.
+- Navigation fixe, fond noir OKI, flag-bar en bord inférieur.
+
+## 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` et
+`assets/maskable_oki.png`. Les `logos/header-img-*` sont des marques de
+**partenaires** (Joukawouvè, Aktivist Vybz, cyber-mawonaj, KA UBUNTU) :
+provenance conservée, ne pas les utiliser comme logo OKI.
+
+## Limites connues
+
+- `muted` et `border` sont des valeurs **dérivées** (le site travaille en
+  opacités, pas en couleurs pleines) ; tout le reste est mesuré.
+- L'inventaire d'images larges du site se limite à 5 visuels non-logo
+  (1 portrait + 3 pochettes + 1 affiche partenaire) ; les autres images du site
+  sont des logos de partenaires, exclus des échantillons.