Marque : page /marque — logos des 13 plateformes + palettes documentées
- src/app/marque/page.tsx : logos SVG/PNG telechargeables (7 variantes par marque : SVG source, PNG 512/1024 transparents, fonds papier/encre 1280, icone iOS 180, banniere OG 1200x630) + ZIP complet - palettes lues dans ecosystem.json (source canonique) : hex, RGB, HSL et contrastes WCAG calcules au build ; palette commune tokens.css decrite role par role (papier, encre, verts, ambre, brique, ombres, typo, geometrie) - recits de couleur des 13 accents + regles d usage (on fait / on ne fait pas) - public/marque/ : 92 fichiers collectes depuis les sites en prod (2026-08-23) - nav : onglet Marque ; sitemap : /marque Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
95 changed files +618 −0
added
public/marque/api-ka/api-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/api-ka/api-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/api-ka/api-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/api-ka/api-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/api-ka/api-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/api-ka/api-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/api-ka/api-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#3b5bdb" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#3b5bdb" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/auto-ka/auto-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/auto-ka/auto-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/auto-ka/auto-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/auto-ka/auto-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/auto-ka/auto-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/auto-ka/auto-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/auto-ka/auto-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#ff5a2a" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#ff5a2a" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/crea-ka/crea-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/crea-ka/crea-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/crea-ka/crea-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/crea-ka/crea-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/crea-ka/crea-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/crea-ka/crea-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/crea-ka/crea-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#7048e8" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#7048e8" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/fabri-ka/fabri-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/fabri-ka/fabri-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/fabri-ka/fabri-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/fabri-ka/fabri-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/fabri-ka/fabri-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/fabri-ka/fabri-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/fabri-ka/fabri-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#c4532e" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#c4532e" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/food-ka/food-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/food-ka/food-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/food-ka/food-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/food-ka/food-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/food-ka/food-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/food-ka/food-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/food-ka/food-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#1f9d55" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#1f9d55" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/groupe-ka/groupe-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/groupe-ka/groupe-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/groupe-ka/groupe-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/groupe-ka/groupe-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/groupe-ka/groupe-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/groupe-ka/groupe-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/groupe-ka/groupe-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#d9f26b" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#d9f26b" transform="rotate(-4 32 32)">KA</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/immo-ka/immo-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/immo-ka/immo-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/immo-ka/immo-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/immo-ka/immo-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/immo-ka/immo-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/immo-ka/immo-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/immo-ka/immo-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#e23744" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#e23744" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/job-ka/job-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/job-ka/job-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/job-ka/job-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/job-ka/job-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/job-ka/job-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/job-ka/job-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/job-ka/job-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#0c8599" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#0c8599" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/ka-marque-complet.zip
+0 −0
Binary file not shown.
added
public/marque/lou-ka/lou-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/lou-ka/lou-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/lou-ka/lou-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/lou-ka/lou-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/lou-ka/lou-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/lou-ka/lou-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/lou-ka/lou-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#ff6a00" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#ff6a00" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/resto-ka/resto-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/resto-ka/resto-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/resto-ka/resto-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/resto-ka/resto-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/resto-ka/resto-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/resto-ka/resto-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/resto-ka/resto-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#f08c00" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#f08c00" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/sorti-ka/sorti-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/sorti-ka/sorti-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/sorti-ka/sorti-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/sorti-ka/sorti-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/sorti-ka/sorti-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/sorti-ka/sorti-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/sorti-ka/sorti-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#d6336c" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#d6336c" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/trouve-ka/trouve-ka-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/trouve-ka/trouve-ka-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/trouve-ka/trouve-ka-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/trouve-ka/trouve-ka-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/trouve-ka/trouve-ka-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/trouve-ka/trouve-ka-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/trouve-ka/trouve-ka-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#1c7ed6" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#1c7ed6" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
public/marque/vrai-prix/vrai-prix-banniere-og-1200x630.png
+0 −0
Binary file not shown.
added
public/marque/vrai-prix/vrai-prix-icone-180.png
+0 −0
Binary file not shown.
added
public/marque/vrai-prix/vrai-prix-logo-1024.png
+0 −0
Binary file not shown.
added
public/marque/vrai-prix/vrai-prix-logo-512.png
+0 −0
Binary file not shown.
added
public/marque/vrai-prix/vrai-prix-logo-fond-encre-1280.png
+0 −0
Binary file not shown.
added
public/marque/vrai-prix/vrai-prix-logo-fond-papier-1280.png
+0 −0
Binary file not shown.
added
public/marque/vrai-prix/vrai-prix-logo.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#ff5148" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#ff5148" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
modified
src/app/layout.tsx
+1 −0
@@ -123,6 +123,7 @@ const NAV_ITEMS = [ | ||
| 123 | 123 | { href: "/rapports", label: "Rapports" }, |
| 124 | 124 | { href: "/investisseurs", label: "Investisseurs" }, |
| 125 | 125 | { href: "/telecharger", label: "Télécharger" }, |
| 126 | + { href: "/marque", label: "Marque" }, | |
| 126 | 127 | { href: "/status", label: "Statut" }, |
| 127 | 128 | { href: "/#contact", label: "Contact" }, |
| 128 | 129 | ]; |
added
src/app/marque/page.tsx
+551 −0
@@ -0,0 +1,551 @@ | ||
| 1 | +// Auteur : Simon-Pierre Boucher — contact@spboucher.ai | |
| 2 | +// /marque — Image de marque du Groupe KA : les logos des 13 plateformes en | |
| 3 | +// SVG et PNG (toutes les variantes, téléchargeables) et la description | |
| 4 | +// détaillée de chaque palette de couleurs — la commune et les 13 accents. | |
| 5 | +// Palettes lues directement dans src/ka/ecosystem.json (source canonique) ; | |
| 6 | +// valeurs RGB/HSL et contrastes WCAG calculés au build, jamais recopiés. | |
| 7 | +import type { Metadata } from "next"; | |
| 8 | +import eco from "@/ka/ecosystem.json"; | |
| 9 | + | |
| 10 | +export const metadata: Metadata = { | |
| 11 | + title: "Image de marque — logos & couleurs", | |
| 12 | + description: | |
| 13 | + "Les logos des 13 plateformes du Groupe KA en SVG et PNG (variantes transparentes, fond papier, fond encre, icône iOS, bannière) et la description détaillée de toutes les palettes : la palette commune « éditorial sharp » et les 13 accents, avec valeurs hex, RGB, HSL et contrastes WCAG.", | |
| 14 | +}; | |
| 15 | + | |
| 16 | +// --------------------------------------------------------------------------- | |
| 17 | +// Outils couleur — tout est calculé à partir du hex (une seule source de vérité) | |
| 18 | +// --------------------------------------------------------------------------- | |
| 19 | + | |
| 20 | +function hexToRgb(hex: string): [number, number, number] { | |
| 21 | + const h = hex.replace("#", ""); | |
| 22 | + return [ | |
| 23 | + parseInt(h.slice(0, 2), 16), | |
| 24 | + parseInt(h.slice(2, 4), 16), | |
| 25 | + parseInt(h.slice(4, 6), 16), | |
| 26 | + ]; | |
| 27 | +} | |
| 28 | + | |
| 29 | +function rgbLabel(hex: string): string { | |
| 30 | + const [r, g, b] = hexToRgb(hex); | |
| 31 | + return `${r}, ${g}, ${b}`; | |
| 32 | +} | |
| 33 | + | |
| 34 | +function hslLabel(hex: string): string { | |
| 35 | + const [r0, g0, b0] = hexToRgb(hex).map((v) => v / 255); | |
| 36 | + const max = Math.max(r0, g0, b0); | |
| 37 | + const min = Math.min(r0, g0, b0); | |
| 38 | + const l = (max + min) / 2; | |
| 39 | + let h = 0; | |
| 40 | + let s = 0; | |
| 41 | + if (max !== min) { | |
| 42 | + const d = max - min; | |
| 43 | + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | |
| 44 | + if (max === r0) h = ((g0 - b0) / d + (g0 < b0 ? 6 : 0)) / 6; | |
| 45 | + else if (max === g0) h = ((b0 - r0) / d + 2) / 6; | |
| 46 | + else h = ((r0 - g0) / d + 4) / 6; | |
| 47 | + } | |
| 48 | + return `${Math.round(h * 360)}°, ${Math.round(s * 100)} %, ${Math.round(l * 100)} %`; | |
| 49 | +} | |
| 50 | + | |
| 51 | +/** Luminance relative WCAG 2.x. */ | |
| 52 | +function luminance(hex: string): number { | |
| 53 | + const [r, g, b] = hexToRgb(hex).map((v) => { | |
| 54 | + const c = v / 255; | |
| 55 | + return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); | |
| 56 | + }); | |
| 57 | + return 0.2126 * r + 0.7152 * g + 0.0722 * b; | |
| 58 | +} | |
| 59 | + | |
| 60 | +/** Ratio de contraste WCAG entre deux couleurs (« 4,6:1 »). */ | |
| 61 | +function contrast(a: string, b: string): string { | |
| 62 | + const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x); | |
| 63 | + const ratio = (l1 + 0.05) / (l2 + 0.05); | |
| 64 | + return `${ratio.toFixed(1).replace(".", ",")}:1`; | |
| 65 | +} | |
| 66 | + | |
| 67 | +const PAPER = "#f5f3ee"; | |
| 68 | +const INK = "#141814"; | |
| 69 | + | |
| 70 | +// --------------------------------------------------------------------------- | |
| 71 | +// Récits de couleur — la nuance de chaque marque, décrite précisément | |
| 72 | +// --------------------------------------------------------------------------- | |
| 73 | + | |
| 74 | +const COLOR_STORIES: Record<string, { name: string; story: string }> = { | |
| 75 | + "groupe-ka": { | |
| 76 | + name: "Lime KA", | |
| 77 | + story: | |
| 78 | + "Le vert-jaune électrique du groupe : une teinte végétale poussée à la saturation maximale, à mi-chemin entre la chartreuse et le lime. C'est la couleur mère de l'écosystème — celle du surligneur posé sur l'encre, des boutons du hub et du wordmark inversé. Très claire, elle exige toujours du texte encre par-dessus.", | |
| 79 | + }, | |
| 80 | + "trouve-ka": { | |
| 81 | + name: "Bleu moteur", | |
| 82 | + story: | |
| 83 | + "Un bleu azur franc, ni marine ni cyan : la couleur historique de la recherche sur le web. Elle évoque le lien hypertexte, la confiance et la neutralité — exactement le rôle de Trouve·Ka, le moteur qui indexe tout l'écosystème sans favoriser personne.", | |
| 84 | + }, | |
| 85 | + "lou-ka": { | |
| 86 | + name: "Orange signal", | |
| 87 | + story: | |
| 88 | + "Un orange pur et incandescent, presque celui des affiches « À louer ». Chaleureux comme un chez-soi, visible comme une pancarte : il marque les loyers, les CTA de candidature et les badges de disponibilité sur fond papier.", | |
| 89 | + }, | |
| 90 | + "immo-ka": { | |
| 91 | + name: "Rouge vermillon", | |
| 92 | + story: | |
| 93 | + "Un rouge carmin légèrement rosé, sérieux sans être agressif — la couleur des grandes bannières immobilières. Il porte les prix de vente et les badges de marché, et son foncé bordeaux assoit les hovers.", | |
| 94 | + }, | |
| 95 | + "vrai-prix": { | |
| 96 | + name: "Corail évaluation", | |
| 97 | + story: | |
| 98 | + "Un rouge corail lumineux, plus chaud et plus clair que le vermillon d'Immo·Ka : la nuance qui distingue l'évaluation (Vrai-Prix) de la transaction (Immo·Ka). Utilisé pour les écarts de valeur et les jauges de plus/moins-value.", | |
| 99 | + }, | |
| 100 | + "auto-ka": { | |
| 101 | + name: "Orange brûlé", | |
| 102 | + story: | |
| 103 | + "Entre l'orange signal de Lou·Ka et le rouge de Vrai-Prix : un orange « feu arrière » énergique, évocation de la route et du métal chaud. Il souligne les prix des véhicules et les kilométrages.", | |
| 104 | + }, | |
| 105 | + "fabri-ka": { | |
| 106 | + name: "Terracotta atelier", | |
| 107 | + story: | |
| 108 | + "Un brun-orangé terreux, désaturé volontairement par rapport aux autres oranges du groupe : la terre cuite, le cuir, le bois de l'atelier. La couleur artisanale de la plateforme des produits fabriqués au Québec.", | |
| 109 | + }, | |
| 110 | + "food-ka": { | |
| 111 | + name: "Vert épicerie", | |
| 112 | + story: | |
| 113 | + "Un vert franc de fraîcheur, plus vif que le vert profond institutionnel du groupe : celui des étals de fruits et légumes et des étiquettes « spécial ». Il marque les aubaines et les baisses de prix.", | |
| 114 | + }, | |
| 115 | + "resto-ka": { | |
| 116 | + name: "Safran cuisine", | |
| 117 | + story: | |
| 118 | + "Un jaune-orangé safrané, chaud comme une salle de resto le soir. Assez clair pour exiger du texte encre par-dessus (seul accent avec le lime du groupe dans ce cas), il porte les fourchettes de prix et les badges de menus.", | |
| 119 | + }, | |
| 120 | + "sorti-ka": { | |
| 121 | + name: "Framboise scène", | |
| 122 | + story: | |
| 123 | + "Un rose framboise assumé, saturé et nocturne : néons de salle de spectacle, tampon d'entrée sur la main. La couleur de l'événementiel du groupe, posée sur les dates et les badges « gratuit ».", | |
| 124 | + }, | |
| 125 | + "crea-ka": { | |
| 126 | + name: "Violet créateur", | |
| 127 | + story: | |
| 128 | + "Un violet électrique à mi-chemin de l'indigo et du pourpre — la couleur des plateformes de création et du streaming. Il relie les fiches des créateurs et leurs compteurs d'abonnés.", | |
| 129 | + }, | |
| 130 | + "api-ka": { | |
| 131 | + name: "Indigo machine", | |
| 132 | + story: | |
| 133 | + "Un bleu-violet d'interface développeur : plus profond que le bleu de Trouve·Ka, plus sage que le violet de Créa·Ka. La couleur du code, des clés d'API et des réponses JSON de la plateforme centrale.", | |
| 134 | + }, | |
| 135 | + "job-ka": { | |
| 136 | + name: "Sarcelle carrière", | |
| 137 | + story: | |
| 138 | + "Un bleu-vert sarcelle professionnel, unique dans le spectre du groupe : ni le bleu du moteur, ni le vert de l'épicerie. Il habille les salaires affichés et les badges d'employeurs.", | |
| 139 | + }, | |
| 140 | +}; | |
| 141 | + | |
| 142 | +// --------------------------------------------------------------------------- | |
| 143 | +// Palette commune (tokens.css de ka-ui) — chaque rôle décrit en détail | |
| 144 | +// --------------------------------------------------------------------------- | |
| 145 | + | |
| 146 | +type CommonColor = { | |
| 147 | + varName: string; | |
| 148 | + hex: string; | |
| 149 | + name: string; | |
| 150 | + role: string; | |
| 151 | +}; | |
| 152 | + | |
| 153 | +const COMMON_PALETTE: CommonColor[] = [ | |
| 154 | + { | |
| 155 | + varName: "--paper", | |
| 156 | + hex: "#f5f3ee", | |
| 157 | + name: "Papier", | |
| 158 | + role: "Le fond de tous les sites : un blanc cassé chaud, teinté de beige, qui évoque le papier journal de qualité. Jamais de blanc pur en pleine page — le papier réduit l'éblouissement et donne au groupe son air éditorial. C'est aussi le fond des variantes « fond papier » des logos.", | |
| 159 | + }, | |
| 160 | + { | |
| 161 | + varName: "--surface", | |
| 162 | + hex: "#ffffff", | |
| 163 | + name: "Surface", | |
| 164 | + role: "Le blanc pur, réservé aux cartes et panneaux posés SUR le papier : l'écart subtil entre #ffffff et #f5f3ee crée la hiérarchie de profondeur sans recourir aux ombres portées classiques.", | |
| 165 | + }, | |
| 166 | + { | |
| 167 | + varName: "--surface-2", | |
| 168 | + hex: "#faf9f5", | |
| 169 | + name: "Surface 2", | |
| 170 | + role: "L'intermédiaire entre papier et surface : fonds de zébrures de tableaux, cellules alternées, zones de formulaire au repos.", | |
| 171 | + }, | |
| 172 | + { | |
| 173 | + varName: "--ink", | |
| 174 | + hex: "#141814", | |
| 175 | + name: "Encre", | |
| 176 | + role: "Le noir du groupe — jamais #000000 : une encre très légèrement verdie qui adoucit le contraste sur papier. Texte courant, bordures « sharp » de 1,5 à 2 px, fonds inversés des boutons et des pastilles de logos.", | |
| 177 | + }, | |
| 178 | + { | |
| 179 | + varName: "--ink-2", | |
| 180 | + hex: "#4d5551", | |
| 181 | + name: "Encre 2", | |
| 182 | + role: "Le gris-vert des textes secondaires : sous-titres, descriptions, légendes. Toujours lisible (contraste AA sur papier) mais en retrait net de l'encre pleine.", | |
| 183 | + }, | |
| 184 | + { | |
| 185 | + varName: "--ink-3", | |
| 186 | + hex: "#8b928c", | |
| 187 | + name: "Encre 3", | |
| 188 | + role: "Le gris le plus clair autorisé pour du texte : micro-étiquettes, méta-données, notes de bas de carte en JetBrains Mono. En dessous de cette valeur, on ne écrit plus — on décore.", | |
| 189 | + }, | |
| 190 | + { | |
| 191 | + varName: "--green", | |
| 192 | + hex: "#1c5c41", | |
| 193 | + name: "Vert profond", | |
| 194 | + role: "Le vert institutionnel du groupe : sous-titres de sections, éyquettes de rubriques, états « succès », liens visités des documents. C'est le pendant sérieux du lime — même famille végétale, saturation inversée.", | |
| 195 | + }, | |
| 196 | + { | |
| 197 | + varName: "--green-deep", | |
| 198 | + hex: "#123f2e", | |
| 199 | + name: "Vert abyssal", | |
| 200 | + role: "Le vert le plus sombre : hovers des boutons encre, fonds de bandeaux « données vérifiées », accent-deep par défaut du hub.", | |
| 201 | + }, | |
| 202 | + { | |
| 203 | + varName: "--amber", | |
| 204 | + hex: "#e8a33d", | |
| 205 | + name: "Ambre", | |
| 206 | + role: "La couleur d'avertissement doux : données partielles, sources en attente, badges « bêta ». Jamais utilisée pour de l'erreur.", | |
| 207 | + }, | |
| 208 | + { | |
| 209 | + varName: "--amber-soft", | |
| 210 | + hex: "#fdf3e2", | |
| 211 | + name: "Ambre pâle", | |
| 212 | + role: "Le fond des encarts d'avertissement — l'ambre à 10 % d'intensité perçue, pour des bandeaux lisibles sans crier.", | |
| 213 | + }, | |
| 214 | + { | |
| 215 | + varName: "--danger", | |
| 216 | + hex: "#b3423a", | |
| 217 | + name: "Brique", | |
| 218 | + role: "L'erreur et la suppression : un rouge brique désaturé, volontairement distinct des accents rouges d'Immo·Ka et Vrai-Prix pour que l'erreur ne ressemble jamais à de la marque.", | |
| 219 | + }, | |
| 220 | + { | |
| 221 | + varName: "--danger-soft", | |
| 222 | + hex: "#fbe9e7", | |
| 223 | + name: "Brique pâle", | |
| 224 | + role: "Le fond des messages d'erreur et des zones de suppression à confirmer.", | |
| 225 | + }, | |
| 226 | +]; | |
| 227 | + | |
| 228 | +// Fichiers de variantes par site (générés depuis les repos de prod). | |
| 229 | +const VARIANTS = (id: string) => [ | |
| 230 | + { file: `${id}-logo.svg`, label: "SVG vectoriel", note: "source, échelle infinie" }, | |
| 231 | + { file: `${id}-logo-512.png`, label: "PNG 512", note: "transparent" }, | |
| 232 | + { file: `${id}-logo-1024.png`, label: "PNG 1024", note: "transparent" }, | |
| 233 | + { file: `${id}-logo-fond-papier-1280.png`, label: "PNG fond papier", note: "1280 px, #f5f3ee" }, | |
| 234 | + { file: `${id}-logo-fond-encre-1280.png`, label: "PNG fond encre", note: "1280 px, #141814" }, | |
| 235 | + { file: `${id}-icone-180.png`, label: "Icône iOS 180", note: "apple-touch-icon" }, | |
| 236 | + { file: `${id}-banniere-og-1200x630.png`, label: "Bannière 1200×630", note: "partage social (OG)" }, | |
| 237 | +]; | |
| 238 | + | |
| 239 | +type Site = (typeof eco.sites)[number]; | |
| 240 | + | |
| 241 | +function Swatch({ | |
| 242 | + hex, | |
| 243 | + varName, | |
| 244 | + name, | |
| 245 | + usage, | |
| 246 | + border, | |
| 247 | +}: { | |
| 248 | + hex: string; | |
| 249 | + varName: string; | |
| 250 | + name: string; | |
| 251 | + usage: string; | |
| 252 | + border?: boolean; | |
| 253 | +}) { | |
| 254 | + return ( | |
| 255 | + <div className="flex items-start gap-3"> | |
| 256 | + <span | |
| 257 | + aria-hidden="true" | |
| 258 | + className="mt-[2px] block h-10 w-10 shrink-0 rounded-md" | |
| 259 | + style={{ | |
| 260 | + background: hex, | |
| 261 | + border: border ? "1.5px solid rgba(20,24,20,.35)" : "1.5px solid #141814", | |
| 262 | + }} | |
| 263 | + /> | |
| 264 | + <div className="min-w-0"> | |
| 265 | + <p className="text-[13px] leading-tight font-bold"> | |
| 266 | + {name}{" "} | |
| 267 | + <span className="gk-mono text-[10.5px] font-bold text-ink-3">{varName}</span> | |
| 268 | + </p> | |
| 269 | + <p className="gk-mono text-[11px] font-bold tracking-[0.02em] text-ink-2"> | |
| 270 | + {hex.toUpperCase()} · RGB {rgbLabel(hex)} · HSL {hslLabel(hex)} | |
| 271 | + </p> | |
| 272 | + <p className="mt-1 text-[12.5px] leading-snug text-ink-2">{usage}</p> | |
| 273 | + </div> | |
| 274 | + </div> | |
| 275 | + ); | |
| 276 | +} | |
| 277 | + | |
| 278 | +function SiteCard({ site }: { site: Site }) { | |
| 279 | + const story = COLOR_STORIES[site.id]; | |
| 280 | + const dir = `/marque/${site.id}`; | |
| 281 | + return ( | |
| 282 | + <article id={site.id} className="gk-card scroll-mt-24 p-6"> | |
| 283 | + {/* En-tête : logo + identité */} | |
| 284 | + <div className="flex flex-wrap items-center gap-4"> | |
| 285 | + {/* eslint-disable-next-line @next/next/no-img-element */} | |
| 286 | + <img | |
| 287 | + src={`${dir}/${site.id}-logo.svg`} | |
| 288 | + alt={`Logo ${site.wordmark}`} | |
| 289 | + width={64} | |
| 290 | + height={64} | |
| 291 | + loading="lazy" | |
| 292 | + className="h-16 w-16 rounded-[14px] border-[1.5px] border-ink" | |
| 293 | + /> | |
| 294 | + <div className="min-w-0 flex-1"> | |
| 295 | + <h3 className="gk-display text-[22px] leading-none font-bold">{site.wordmark}</h3> | |
| 296 | + <p className="gk-mono mt-1 text-[11px] font-bold tracking-[0.08em] text-green uppercase"> | |
| 297 | + {site.domain} | |
| 298 | + </p> | |
| 299 | + <p className="mt-1 text-[13px] text-ink-2">{site.tagline}</p> | |
| 300 | + </div> | |
| 301 | + <span | |
| 302 | + className="gk-display rounded-full border-[1.5px] border-ink px-4 py-2 text-[13px] font-bold" | |
| 303 | + style={{ background: site.accent, color: site.onAccent }} | |
| 304 | + > | |
| 305 | + {story?.name ?? "Accent"} | |
| 306 | + </span> | |
| 307 | + </div> | |
| 308 | + | |
| 309 | + {/* Récit de couleur */} | |
| 310 | + {story && <p className="mt-4 text-[13.5px] leading-relaxed text-ink-2">{story.story}</p>} | |
| 311 | + | |
| 312 | + {/* Palette du site */} | |
| 313 | + <div className="mt-5 grid gap-4 sm:grid-cols-2"> | |
| 314 | + <Swatch | |
| 315 | + hex={site.accent} | |
| 316 | + varName="--accent" | |
| 317 | + name="Accent" | |
| 318 | + usage={`La couleur de marque : CTA, liens actifs, surlignés inclinés, compteurs. Contraste ${contrast(site.accent, PAPER)} sur papier, ${contrast(site.accent, INK)} sur encre.`} | |
| 319 | + /> | |
| 320 | + <Swatch | |
| 321 | + hex={site.accentSoft} | |
| 322 | + varName="--accent-soft" | |
| 323 | + name="Accent pâle" | |
| 324 | + usage="L'accent dilué pour les fonds : badges, encarts d'information, survols de lignes de tableaux, fonds de puces. Toujours avec du texte encre par-dessus." | |
| 325 | + border | |
| 326 | + /> | |
| 327 | + <Swatch | |
| 328 | + hex={site.accentDeep} | |
| 329 | + varName="--accent-deep" | |
| 330 | + name="Accent profond" | |
| 331 | + usage={`La version assombrie : hovers de boutons, texte d'accent posé sur fond clair (contraste ${contrast(site.accentDeep, PAPER)} sur papier), traits de soulignement appuyés.`} | |
| 332 | + /> | |
| 333 | + <Swatch | |
| 334 | + hex={site.onAccent} | |
| 335 | + varName="--on-accent" | |
| 336 | + name="Texte sur accent" | |
| 337 | + usage={`La seule couleur autorisée pour du texte posé directement sur l'accent (contraste ${contrast(site.onAccent, site.accent)} sur l'accent).`} | |
| 338 | + border={site.onAccent.toLowerCase() === "#ffffff"} | |
| 339 | + /> | |
| 340 | + </div> | |
| 341 | + | |
| 342 | + {/* Variantes du logo */} | |
| 343 | + <div className="mt-5 flex flex-wrap items-end gap-3"> | |
| 344 | + {/* eslint-disable-next-line @next/next/no-img-element */} | |
| 345 | + <img | |
| 346 | + src={`${dir}/${site.id}-logo-fond-papier-1280.png`} | |
| 347 | + alt={`Logo ${site.wordmark} sur fond papier`} | |
| 348 | + width={72} | |
| 349 | + height={72} | |
| 350 | + loading="lazy" | |
| 351 | + className="h-[72px] w-[72px] rounded-lg border-[1.5px] border-ink" | |
| 352 | + /> | |
| 353 | + {/* eslint-disable-next-line @next/next/no-img-element */} | |
| 354 | + <img | |
| 355 | + src={`${dir}/${site.id}-logo-fond-encre-1280.png`} | |
| 356 | + alt={`Logo ${site.wordmark} sur fond encre`} | |
| 357 | + width={72} | |
| 358 | + height={72} | |
| 359 | + loading="lazy" | |
| 360 | + className="h-[72px] w-[72px] rounded-lg border-[1.5px] border-ink" | |
| 361 | + /> | |
| 362 | + {/* eslint-disable-next-line @next/next/no-img-element */} | |
| 363 | + <img | |
| 364 | + src={`${dir}/${site.id}-banniere-og-1200x630.png`} | |
| 365 | + alt={`Bannière de partage ${site.wordmark} (1200 × 630)`} | |
| 366 | + width={137} | |
| 367 | + height={72} | |
| 368 | + loading="lazy" | |
| 369 | + className="h-[72px] w-auto rounded-lg border-[1.5px] border-ink" | |
| 370 | + /> | |
| 371 | + </div> | |
| 372 | + <ul className="mt-4 flex flex-wrap gap-2"> | |
| 373 | + {VARIANTS(site.id).map((v) => ( | |
| 374 | + <li key={v.file}> | |
| 375 | + <a | |
| 376 | + href={`${dir}/${v.file}`} | |
| 377 | + download | |
| 378 | + className="gk-mono inline-block rounded-full border-[1.5px] border-ink bg-surface px-3 py-[6px] text-[10.5px] font-bold tracking-[0.03em] transition-colors hover:bg-ink hover:text-lime" | |
| 379 | + title={v.note} | |
| 380 | + > | |
| 381 | + {v.label} ↓ | |
| 382 | + </a> | |
| 383 | + </li> | |
| 384 | + ))} | |
| 385 | + </ul> | |
| 386 | + </article> | |
| 387 | + ); | |
| 388 | +} | |
| 389 | + | |
| 390 | +export default function MarquePage() { | |
| 391 | + const sites = eco.sites as Site[]; | |
| 392 | + return ( | |
| 393 | + <main className="mx-auto max-w-6xl px-4 py-12 sm:px-6"> | |
| 394 | + <p className="kicker">Image de marque · Un système, treize accents</p> | |
| 395 | + <h1 className="gk-display mt-3 text-[clamp(28px,4.5vw,44px)] leading-[1.02] font-bold tracking-[-0.035em] uppercase"> | |
| 396 | + La <span className="hl">marque</span> KA | |
| 397 | + </h1> | |
| 398 | + <p className="mt-4 max-w-2xl text-[14.5px] text-ink-2"> | |
| 399 | + Tout l'écosystème partage un seul design system — « éditorial | |
| 400 | + sharp » : papier chaud, encre verdie, bordures franches, ombres | |
| 401 | + décalées dures et grain de film. Chaque plateforme n'y ajoute | |
| 402 | + qu'une chose : son accent. Cette page rassemble les logos des 13 | |
| 403 | + marques dans tous les formats (SVG vectoriel, PNG transparent, fonds | |
| 404 | + papier et encre, icône iOS, bannière de partage) et documente chaque | |
| 405 | + couleur au pixel près : hex, RGB, HSL, contrastes WCAG et règles | |
| 406 | + d'usage. | |
| 407 | + </p> | |
| 408 | + <p className="mt-5"> | |
| 409 | + <a | |
| 410 | + href="/marque/ka-marque-complet.zip" | |
| 411 | + download | |
| 412 | + className="gk-display inline-block rounded-full border-[1.5px] border-ink bg-ink px-6 py-3 text-[14px] font-bold text-lime transition-colors hover:bg-green-deep" | |
| 413 | + > | |
| 414 | + Tout télécharger — 13 marques, 91 fichiers (ZIP, 4 Mo) ↓ | |
| 415 | + </a> | |
| 416 | + </p> | |
| 417 | + | |
| 418 | + {/* ------------------------------------------------------------- */} | |
| 419 | + <section className="mt-14" id="palette-commune"> | |
| 420 | + <p className="kicker">01 · La palette commune</p> | |
| 421 | + <h2 className="gk-display mt-2 text-[clamp(22px,3vw,32px)] font-bold tracking-[-0.02em]"> | |
| 422 | + Le socle « éditorial sharp » — identique sur les 13 sites | |
| 423 | + </h2> | |
| 424 | + <p className="mt-3 max-w-2xl text-[13.5px] text-ink-2"> | |
| 425 | + Ces couleurs viennent de <span className="gk-mono text-[12px]">ka-ui/tokens.css</span>, | |
| 426 | + la source canonique importée par chaque plateforme. Elles ne changent | |
| 427 | + jamais d'un site à l'autre : c'est ce qui fait qu'un | |
| 428 | + site ·Ka se reconnaît avant même de lire son nom. Le contraste | |
| 429 | + encre sur papier est de {contrast(INK, PAPER)} — au-dessus du seuil | |
| 430 | + AAA (7:1) pour le texte courant. | |
| 431 | + </p> | |
| 432 | + <div className="gk-card mt-6 grid gap-5 p-6 sm:grid-cols-2"> | |
| 433 | + {COMMON_PALETTE.map((c) => ( | |
| 434 | + <Swatch | |
| 435 | + key={c.varName} | |
| 436 | + hex={c.hex} | |
| 437 | + varName={c.varName} | |
| 438 | + name={c.name} | |
| 439 | + usage={c.role + (c.varName === "--ink" ? ` Contraste ${contrast(INK, PAPER)} sur papier (AAA).` : "")} | |
| 440 | + border={["#ffffff", "#faf9f5", "#f5f3ee", "#fdf3e2", "#fbe9e7"].includes(c.hex)} | |
| 441 | + /> | |
| 442 | + ))} | |
| 443 | + </div> | |
| 444 | + <div className="mt-6 grid gap-6 md:grid-cols-3"> | |
| 445 | + <div className="gk-card p-5"> | |
| 446 | + <h3 className="gk-display text-[16px] font-bold">Bordures & ombres</h3> | |
| 447 | + <p className="mt-2 text-[12.5px] leading-relaxed text-ink-2"> | |
| 448 | + Bordures encre de 1,5 à 2 px sur tout élément saillant. Les ombres | |
| 449 | + ne sont jamais floues : décalées et dures —{" "} | |
| 450 | + <span className="gk-mono text-[11px]">6px 6px 0 encre</span> pour | |
| 451 | + les éléments actifs,{" "} | |
| 452 | + <span className="gk-mono text-[11px]">8px 8px 0 encre 8 %</span>{" "} | |
| 453 | + pour les cartes au repos. C'est la signature néo-brutaliste | |
| 454 | + du groupe. | |
| 455 | + </p> | |
| 456 | + </div> | |
| 457 | + <div className="gk-card p-5"> | |
| 458 | + <h3 className="gk-display text-[16px] font-bold">Typographie</h3> | |
| 459 | + <p className="mt-2 text-[12.5px] leading-relaxed text-ink-2"> | |
| 460 | + Trois familles, trois rôles : <b>Space Grotesk</b> pour les titres | |
| 461 | + et les wordmarks (display), <b>Inter</b> pour le texte courant,{" "} | |
| 462 | + <span className="gk-mono text-[11px] font-bold">JetBrains Mono</span>{" "} | |
| 463 | + pour les micro-étiquettes, chiffres et méta-données. Échelle | |
| 464 | + fluide en clamp(), mobile-first. | |
| 465 | + </p> | |
| 466 | + </div> | |
| 467 | + <div className="gk-card p-5"> | |
| 468 | + <h3 className="gk-display text-[16px] font-bold">Géométrie</h3> | |
| 469 | + <p className="mt-2 text-[12.5px] leading-relaxed text-ink-2"> | |
| 470 | + Rayons de 10 px pour les cartes, 6 px pour les contrôles, | |
| 471 | + pastilles pleines (999 px) pour les badges et boutons ronds. Les | |
| 472 | + pastilles de logos utilisent un rayon de 14/64 de leur côté. | |
| 473 | + Zones tactiles minimales de 44 × 44 px. | |
| 474 | + </p> | |
| 475 | + </div> | |
| 476 | + </div> | |
| 477 | + </section> | |
| 478 | + | |
| 479 | + {/* ------------------------------------------------------------- */} | |
| 480 | + <section className="mt-14" id="logos"> | |
| 481 | + <p className="kicker">02 · Les 13 marques</p> | |
| 482 | + <h2 className="gk-display mt-2 text-[clamp(22px,3vw,32px)] font-bold tracking-[-0.02em]"> | |
| 483 | + Logos & accents — chaque plateforme, tous les formats | |
| 484 | + </h2> | |
| 485 | + <p className="mt-3 max-w-2xl text-[13.5px] text-ink-2"> | |
| 486 | + Chaque marque est une pastille : le monogramme du site posé sur | |
| 487 | + l'encre, coins arrondis, liseré intérieur. Sept fichiers par | |
| 488 | + marque : le SVG source (échelle infinie), deux PNG transparents (512 | |
| 489 | + et 1024 px), deux mises en situation (fond papier et fond encre, | |
| 490 | + 1280 px), l'icône iOS (180 px) et la bannière de partage social | |
| 491 | + (1200 × 630). Quatre variables de couleur par site — accent, accent | |
| 492 | + pâle, accent profond, texte sur accent — et rien d'autre ne | |
| 493 | + change. | |
| 494 | + </p> | |
| 495 | + <nav aria-label="Aller à une marque" className="mt-5 flex flex-wrap gap-2"> | |
| 496 | + {sites.map((s) => ( | |
| 497 | + <a | |
| 498 | + key={s.id} | |
| 499 | + href={`#${s.id}`} | |
| 500 | + className="gk-mono rounded-full border-[1.5px] border-ink px-3 py-[6px] text-[10.5px] font-bold tracking-[0.03em]" | |
| 501 | + style={{ background: s.accentSoft }} | |
| 502 | + > | |
| 503 | + {s.wordmark} | |
| 504 | + </a> | |
| 505 | + ))} | |
| 506 | + </nav> | |
| 507 | + <div className="mt-8 grid gap-8"> | |
| 508 | + {sites.map((s) => ( | |
| 509 | + <SiteCard key={s.id} site={s} /> | |
| 510 | + ))} | |
| 511 | + </div> | |
| 512 | + </section> | |
| 513 | + | |
| 514 | + {/* ------------------------------------------------------------- */} | |
| 515 | + <section className="mt-14" id="regles"> | |
| 516 | + <p className="kicker">03 · Règles d'usage</p> | |
| 517 | + <h2 className="gk-display mt-2 text-[clamp(22px,3vw,32px)] font-bold tracking-[-0.02em]"> | |
| 518 | + Ce qu'on fait — et ce qu'on ne fait pas | |
| 519 | + </h2> | |
| 520 | + <div className="mt-6 grid gap-6 md:grid-cols-2"> | |
| 521 | + <div className="gk-card p-6"> | |
| 522 | + <h3 className="gk-display text-[16px] font-bold text-green">On fait</h3> | |
| 523 | + <ul className="mt-3 list-disc space-y-2 pl-5 text-[13px] text-ink-2"> | |
| 524 | + <li>Utiliser le SVG dès que possible — les PNG sont des commodités d'intégration.</li> | |
| 525 | + <li>Préserver une zone de protection d'au moins 25 % du côté de la pastille autour du logo.</li> | |
| 526 | + <li>Poser les logos sur papier (#f5f3ee), sur encre (#141814) ou sur photo calme — les variantes fournies couvrent ces trois cas.</li> | |
| 527 | + <li>Écrire les noms avec le point médian : Lou·Ka, Immo·Ka, Sorti·Ka… (« Groupe KA » et « Vrai-Prix » font exception).</li> | |
| 528 | + <li>Respecter la couleur « texte sur accent » de chaque site : encre sur lime et safran, blanc partout ailleurs.</li> | |
| 529 | + </ul> | |
| 530 | + </div> | |
| 531 | + <div className="gk-card p-6"> | |
| 532 | + <h3 className="gk-display text-[16px] font-bold text-danger">On ne fait pas</h3> | |
| 533 | + <ul className="mt-3 list-disc space-y-2 pl-5 text-[13px] text-ink-2"> | |
| 534 | + <li>Déformer, incliner, étirer ou recolorer les pastilles.</li> | |
| 535 | + <li>Changer le rayon des coins ou retirer le liseré intérieur.</li> | |
| 536 | + <li>Poser un accent sur un autre accent — les couleurs de marque ne se mélangent jamais entre sites.</li> | |
| 537 | + <li>Utiliser un accent comme couleur d'erreur (la brique #b3423a existe pour ça).</li> | |
| 538 | + <li>Reproduire les logos pour laisser croire à une affiliation : ils identifient les services du Groupe KA, rien d'autre.</li> | |
| 539 | + </ul> | |
| 540 | + </div> | |
| 541 | + </div> | |
| 542 | + <p className="gk-mono mt-10 text-[11px] leading-relaxed text-ink-3"> | |
| 543 | + Palettes lues en direct dans ecosystem.json (ka-ui) — les valeurs | |
| 544 | + affichées ne peuvent pas dériver du code. Logos collectés depuis les | |
| 545 | + sites en production le 2026-08-23. Questions de marque et demandes | |
| 546 | + presse : info@groupe-ka.com. | |
| 547 | + </p> | |
| 548 | + </section> | |
| 549 | + </main> | |
| 550 | + ); | |
| 551 | +} | |
modified
src/app/sitemap.ts
+1 −0
@@ -19,6 +19,7 @@ export default function sitemap(): MetadataRoute.Sitemap { | ||
| 19 | 19 | { path: "/rapports", changeFrequency: "daily", priority: 0.7 }, |
| 20 | 20 | { path: "/status", changeFrequency: "daily", priority: 0.6 }, |
| 21 | 21 | { path: "/telecharger", changeFrequency: "weekly", priority: 0.7 }, |
| 22 | + { path: "/marque", changeFrequency: "monthly", priority: 0.6 }, | |
| 22 | 23 | { path: "/avis", changeFrequency: "monthly", priority: 0.5 }, |
| 23 | 24 | { path: "/bots", changeFrequency: "monthly", priority: 0.5 }, |
| 24 | 25 | { path: "/retrait", changeFrequency: "monthly", priority: 0.4 }, |
| 25 | 26 | |