SPB Git forge
spboucher.ai ↗

spb/vrai-prix

Public

Vrai-Prix — l'évaluation du vrai prix des propriétés résidentielles au Québec.

webappreal-estatequebechousing
60commits 1branches 0releases
12.3 MBsize
maindefault branch
17 days agolast push
TypeScript 90.2% JavaScript 3.5% Python 3.4% CSS 1.9% HTML 0.6%

Harmonisation Groupe KA — design system ka-ui, badge, footer commun, page contact

- ka-ui vendoré (src/ka/) : tokens.css importé dans layer(base) via globals.css
  (bat le preflight Tailwind, reste sous les utilitaires et le design local),
  bloc compat pour les titres, accent rouge canonique (--accent/--accent-soft/
  --accent-deep/--on-accent) avec alias historiques --lime/--lime-soft
- Header : badge « Un service Groupe KA » à côté du logo (desktop xl+) et dans
  le pied du menu mobile, cliquable vers groupe-ka.com
- Footer : KaFooter commun (bloc encre, contacts et sites centralisés
  d ecosystem.json) précédé de la rangée locale FooterNav restylée papier
- Nouvelle page /contact : courriels centralisés, avertissement d agrégateur,
  lien hub + création de compte KA ID, liste des sites de l écosystème
- SEO : titre par défaut « Vrai-Prix — Un service Groupe KA » (layout + OG/X)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Simon-Pierre Boucher committed 1 mo ago (Aug 18, 2026) parent ead5d8a

9 changed files +545 −17

added src/app/contact/page.tsx +97 −0
@@ -0,0 +1,97 @@
1 +// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
2 +// Page contact — infos centralisées de l'écosystème Groupe KA (ka-ui/ecosystem.json).
3 +import type { Metadata } from "next";
4 +import eco from "@/ka/ecosystem.json";
5 +
6 +export const metadata: Metadata = {
7 + title: "Contact",
8 + description:
9 + "Joindre le Groupe KA : projets et partenariats, médias, légal et vie privée. Vrai-Prix est un service Groupe KA.",
10 +};
11 +
12 +const SELF_ID = "vrai-prix";
13 +
14 +export default function ContactPage() {
15 + const others = eco.sites.filter((s) => s.id !== SELF_ID);
16 + return (
17 + <div className="pb-6 pt-10">
18 + <p className="kicker">Contact</p>
19 + <h1 className="vp-display mt-3 max-w-3xl text-[clamp(30px,5vw,52px)] font-bold uppercase leading-[1] tracking-[-0.03em]">
20 + Écrire au <span className="hl">Groupe&nbsp;KA</span>
21 + </h1>
22 + <p className="mt-5 max-w-2xl text-[15px] leading-relaxed text-ink-2">
23 + Vrai-Prix est un service du <b className="text-ink">{eco.org.name}</b> —{" "}
24 + {eco.org.tagline} Toutes les demandes passent par les adresses
25 + centralisées ci-dessous.
26 + </p>
27 +
28 + {/* les 3 courriels avec leurs rôles */}
29 + <div className="mt-9 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
30 + {eco.contacts.map((c) => (
31 + <a
32 + key={c.email}
33 + href={`mailto:${c.email}`}
34 + className="card card-hover block p-5"
35 + >
36 + <p className="klabel">{c.role}</p>
37 + <p className="vp-mono mt-2 break-all text-[13.5px] font-bold text-ink">
38 + {c.email}
39 + </p>
40 + </a>
41 + ))}
42 + </div>
43 +
44 + {/* avertissement d'agrégateur */}
45 + <div className="card mt-8 max-w-2xl border-l-[6px] border-l-lime p-5">
46 + <p className="klabel">Avertissement</p>
47 + <p className="mt-2 text-[14px] leading-relaxed">{eco.org.disclaimer}</p>
48 + </div>
49 +
50 + {/* hub + compte KA ID */}
51 + <div className="mt-10">
52 + <p className="kicker">Le hub</p>
53 + <p className="mt-3 max-w-2xl text-[14.5px] text-ink-2">
54 + Le portail de l&apos;écosystème vit sur{" "}
55 + <a
56 + href={eco.hub.url}
57 + target="_blank"
58 + rel="noopener noreferrer"
59 + className="font-bold text-ink underline decoration-lime decoration-2 underline-offset-4"
60 + >
61 + groupe-ka.com
62 + </a>
63 + . La création d&apos;un compte KA&nbsp;ID se fait sur{" "}
64 + <a
65 + href={`${eco.hub.url}${eco.hub.loginPath}`}
66 + target="_blank"
67 + rel="noopener noreferrer"
68 + className="font-bold text-ink underline decoration-lime decoration-2 underline-offset-4"
69 + >
70 + groupe-ka.com/connexion
71 + </a>{" "}
72 + — le même compte ouvre toutes les plateformes du groupe.
73 + </p>
74 + </div>
75 +
76 + {/* les sites de l'écosystème */}
77 + <div className="mt-10">
78 + <p className="kicker">L&apos;écosystème</p>
79 + <ul className="mt-4 flex max-w-3xl list-none flex-wrap gap-2.5 p-0">
80 + {others.map((s) => (
81 + <li key={s.id}>
82 + <a
83 + href={`https://${s.domain}`}
84 + target="_blank"
85 + rel="noopener noreferrer"
86 + className="chip"
87 + title={s.tagline}
88 + >
89 + {s.wordmark}
90 + </a>
91 + </li>
92 + ))}
93 + </ul>
94 + </div>
95 + </div>
96 + );
97 +}
modified src/app/globals.css +22 −3
@@ -7,8 +7,20 @@
7 7 · Accent rouge vif #ff5148 + bordeaux #9e2a25 sur encre
8 8 ----------------------------------------------------------------------------- */
9 9 @import "tailwindcss";
10 +/* ka-ui (Groupe KA) — tokens + composants communs (.gk-badge, .ka-footer, .card…).
11 + Importé dans layer(base) AVANT le corps de ce fichier : il bat le preflight
12 + Tailwind mais reste sous les utilitaires (layered) et sous nos règles locales
13 + (non-layered). Un import brut dans layout.tsx écraserait les text-[…]/leading-[…]
14 + des titres (règles éléments non-layered > utilitaires layered). */
15 +@import "../ka/tokens.css" layer(base);
10 16
11 17 :root {
18 + /* ---- Accent Vrai-Prix (tokens canoniques ka-ui) — identité rouge ---- */
19 + --accent: #ff5148;
20 + --accent-soft: #ffe3e0;
21 + --accent-deep: #9e2a25;
22 + --on-accent: #ffffff;
23 +
12 24 --paper: #f5f3ee;
13 25 --surface: #ffffff;
14 26 --surface-2: #faf9f5;
@@ -19,8 +31,8 @@
19 31 --line-strong: rgba(20, 24, 20, 0.85);
20 32 --green: #9e2a25;
21 33 --green-deep: #771f1b;
22 − --lime: #ff5148;
23 − --lime-soft: #ffe3e0;
34 + --lime: var(--accent); /* alias historiques → l'accent est le token canonique */
35 + --lime-soft: var(--accent-soft);
24 36 --amber: #e8a33d;
25 37 --amber-soft: #fdf3e2;
26 38 --danger: #b3423a;
@@ -51,6 +63,13 @@
51 63 --font-mono: var(--font-jetbrains), ui-monospace, monospace;
52 64 }
53 65
66 +/* compat ka-ui : tokens.css impose marges + tailles fluides aux titres ; le
67 + design local dimensionne les siens via utilitaires → on rétablit le
68 + comportement preflight (même layer, source postérieure = prioritaire). */
69 +@layer base {
70 + h1, h2, h3, h4 { margin: 0; font-size: inherit; line-height: inherit; }
71 +}
72 +
54 73 html { scroll-behavior: smooth; }
55 74 body {
56 75 background: var(--paper);
@@ -129,7 +148,7 @@ select.vp-input {
129 148 .btn:active { transform: translate(2px, 2px); box-shadow: none !important; }
130 149 .btn-primary { background: var(--ink); color: var(--lime); box-shadow: 4px 4px 0 rgba(20,24,20,0.25); }
131 150 .btn-primary:hover { background: var(--green-deep); }
132 −.btn-ghost { background: transparent; color: var(--ink); }
151 +.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
133 152 .btn-ghost:hover { background: var(--lime); box-shadow: 4px 4px 0 rgba(20,24,20,0.2); }
134 153
135 154 .stat-chip {
modified src/app/layout.tsx +29 −12
@@ -7,6 +7,8 @@ import AccountButton from "@/components/AccountButton";
7 7 import CookieConsent from "@/components/CookieConsent";
8 8 import FooterNav from "@/components/FooterNav";
9 9 import HeaderNav from "@/components/HeaderNav";
10 +import GroupeKaBadge from "@/ka/GroupeKaBadge";
11 +import KaFooter from "@/ka/KaFooter";
10 12 import Link from "next/link";
11 13 import { SITE_URL } from "@/lib/seo";
12 14
@@ -23,7 +25,7 @@ const jetbrains = JetBrains_Mono({
23 25 export const metadata: Metadata = {
24 26 metadataBase: new URL(SITE_URL),
25 27 title: {
26 − default: "Vrai-Prix — la vraie valeur, sans boîte noire",
28 + default: "Vrai-Prix — Un service Groupe KA",
27 29 template: "%s | Vrai-Prix",
28 30 },
29 31 description:
@@ -34,13 +36,13 @@ export const metadata: Metadata = {
34 36 siteName: "Vrai-Prix",
35 37 locale: "fr_CA",
36 38 url: SITE_URL,
37 − title: "Vrai-Prix — la vraie valeur, sans boîte noire",
39 + title: "Vrai-Prix — Un service Groupe KA",
38 40 description:
39 41 "Estimation immobilière transparente pour le Québec : modèle hédonique + comparables réels, fourchette honnête et indice de confiance.",
40 42 },
41 43 twitter: {
42 44 card: "summary",
43 − title: "Vrai-Prix — la vraie valeur, sans boîte noire",
45 + title: "Vrai-Prix — Un service Groupe KA",
44 46 description:
45 47 "Estimation immobilière transparente pour le Québec : 3,7 millions de propriétés estimées, calcul montré en entier.",
46 48 },
@@ -107,6 +109,11 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
107 109 Prix
108 110 </span>
109 111 </Link>
112 + {/* badge Groupe KA — desktop seulement (l'espace manque sous xl ;
113 + le menu mobile porte sa propre entrée) */}
114 + <span className="hidden xl:inline-flex">
115 + <GroupeKaBadge />
116 + </span>
110 117 <div className="ml-auto flex items-center gap-2">
111 118 <HeaderNav />
112 119 <AccountButton />
@@ -122,23 +129,33 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
122 129 </div>
123 130 </div>
124 131 <main className="mx-auto max-w-6xl px-4 pb-16 sm:px-6">{children}</main>
125 − <footer className="mt-6 bg-ink py-11 text-[13px] text-[rgba(245,243,238,0.75)]">
126 − <div className="mx-auto max-w-6xl px-4 sm:px-6">
127 − <p className="vp-display mb-3 text-[30px] font-bold tracking-[-0.04em] text-paper">
128 − Vrai<span className="text-lime">Prix</span>
132 + {/* rangée locale (papier) : marque + liens de navigation du site,
133 + puis le bloc encre final = KaFooter (commun Groupe KA) */}
134 + <div className="mx-auto max-w-6xl px-4 sm:px-6">
135 + <div className="border-t-2 border-ink pt-7 text-[13px] text-ink-2">
136 + <p className="vp-display mb-3 text-[26px] font-bold tracking-[-0.04em] text-ink">
137 + Vrai
138 + <span className="ml-1 inline-block rotate-[-2deg] rounded-md bg-ink px-[6px] pb-[3px] pt-[1px] text-lime">
139 + Prix
140 + </span>
129 141 </p>
130 142 <p className="max-w-2xl">
131 143 Estimations bâties sur les rôles d&apos;évaluation foncière du
132 144 Québec (MAMH, données ouvertes) et 745 119 transactions réelles.
133 145 Modèle hédonique + comparables ajustés, calcul montré en entier.
146 + Estimation statistique à titre indicatif.
134 147 </p>
135 148 <FooterNav />
136 − <p className="vp-mono mt-4 text-[11px] uppercase tracking-[0.08em] text-[rgba(245,243,238,0.45)]">
137 − vrai-prix.com — Simon-Pierre Boucher · contact@spboucher.ai —
138 − estimation statistique à titre indicatif
139 − </p>
140 149 </div>
141 − </footer>
150 + </div>
151 + <KaFooter
152 + siteId="vrai-prix"
153 + localLegal={[
154 + { label: "Conditions", href: "/conditions" },
155 + { label: "Confidentialité", href: "/confidentialite" },
156 + { label: "Méthodologie", href: "/methodologie" },
157 + ]}
158 + />
142 159 <CookieConsent />
143 160 </LangProvider>
144 161 </body>
modified src/components/FooterNav.tsx +5 −1
@@ -7,8 +7,9 @@ import { openCookiePrefs } from "./CookieConsent";
7 7 export default function FooterNav() {
8 8 const { lang } = useLang();
9 9 const fr = lang === "fr";
10 + // rangée locale sur fond papier (le bloc encre final est le KaFooter commun)
10 11 const cls =
11 − "vp-mono text-[11px] uppercase tracking-[0.08em] text-[rgba(245,243,238,0.65)] border-b border-transparent hover:text-lime hover:border-lime transition-colors";
12 + "vp-mono text-[11px] uppercase tracking-[0.08em] text-ink-2 border-b border-transparent hover:text-green-deep hover:border-green-deep transition-colors";
12 13 return (
13 14 <nav className="mt-5 flex flex-wrap items-center gap-x-6 gap-y-2">
14 15 <Link href="/ka" className={cls}>
@@ -32,6 +33,9 @@ export default function FooterNav() {
32 33 <Link href="/confidentialite" className={cls}>
33 34 {fr ? "Politique de confidentialité" : "Privacy policy"}
34 35 </Link>
36 + <Link href="/contact" className={cls}>
37 + Contact
38 + </Link>
35 39 <button onClick={openCookiePrefs} className={`${cls} cursor-pointer`}>
36 40 🍪 {fr ? "Préférences de témoins" : "Cookie preferences"}
37 41 </button>
modified src/components/HeaderNav.tsx +6 −1
@@ -10,6 +10,7 @@ import { useEffect, useRef } from "react";
10 10 import Link from "next/link";
11 11 import { usePathname } from "next/navigation";
12 12 import { useLang } from "./LangContext";
13 +import GroupeKaBadge from "../ka/GroupeKaBadge";
13 14
14 15 export default function HeaderNav() {
15 16 const { lang, setLang } = useLang();
@@ -134,6 +135,10 @@ export default function HeaderNav() {
134 135
135 136 {/* pied du menu */}
136 137 <div className="shrink-0 border-t-2 border-ink px-6 pb-[max(20px,env(safe-area-inset-bottom))] pt-4">
138 + {/* entrée « Un service Groupe KA » du menu mobile */}
139 + <div className="mb-3">
140 + <GroupeKaBadge />
141 + </div>
137 142 <button
138 143 onClick={() => setLang(fr ? "en" : "fr")}
139 144 className="vp-mono mb-3 rounded-full border-[1.5px] border-ink bg-surface px-4 py-2 text-[12px] font-bold uppercase tracking-[0.08em]"
@@ -145,7 +150,7 @@ export default function HeaderNav() {
145 150 <Link href="/confidentialite">
146 151 {fr ? "Confidentialité" : "Privacy"}
147 152 </Link>
148 − <span>contact@spboucher.ai</span>
153 + <Link href="/contact">Contact</Link>
149 154 </div>
150 155 </div>
151 156 </div>
added src/ka/GroupeKaBadge.tsx +21 −0
@@ -0,0 +1,21 @@
1 +// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
2 +// ka-ui/react/GroupeKaBadge.tsx — badge « Un service Groupe KA », cliquable
3 +// vers le hub. À placer dans le header de chaque site (à côté du logo de la
4 +// marque). Variante dark pour les surfaces encre. Zone de protection : le
5 +// padding interne du badge suffit ; ne rien coller à moins de 8 px du badge.
6 +export default function GroupeKaBadge({ dark = false }: { dark?: boolean }) {
7 + return (
8 + <a
9 + className={`gk-badge${dark ? " gk-badge--dark" : ""}`}
10 + href="https://www.groupe-ka.com"
11 + target="_blank"
12 + rel="noopener noreferrer"
13 + aria-label="Un service Groupe KA — visiter le portail de l'écosystème"
14 + >
15 + Un service
16 + <b>
17 + Groupe<span className="ka">KA</span>
18 + </b>
19 + </a>
20 + );
21 +}
added src/ka/KaFooter.tsx +91 −0
@@ -0,0 +1,91 @@
1 +// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
2 +// ka-ui/react/KaFooter.tsx — footer commun Groupe KA (fond encre), à vendorer
3 +// dans chaque app Vite/React sous frontend/src/ka/. Consomme ecosystem.json :
4 +// toute modification des infos de contact se fait dans ka-ui/ecosystem.json
5 +// puis se resynchronise sur les 12 sites (voir ka-ui/README.md).
6 +import eco from "./ecosystem.json";
7 +
8 +type LocalLink = { label: string; href: string };
9 +
10 +export default function KaFooter({
11 + siteId,
12 + localLegal = [],
13 +}: {
14 + /** id du site courant dans ecosystem.json (ex. "resto-ka") */
15 + siteId: string;
16 + /** pages légales PROPRES au site (ex. /conditions), affichées avant celles du hub */
17 + localLegal?: LocalLink[];
18 +}) {
19 + const year = new Date().getFullYear();
20 + const site = eco.sites.find((s) => s.id === siteId);
21 + const others = eco.sites.filter((s) => s.id !== siteId);
22 + return (
23 + <footer className="ka-footer" id="contact">
24 + <div className="container">
25 + <a
26 + className="wordmark"
27 + href={eco.hub.url}
28 + target={siteId === "groupe-ka" ? undefined : "_blank"}
29 + rel="noopener noreferrer"
30 + aria-label="Groupe KA — le portail de l'écosystème"
31 + >
32 + Groupe <span className="ka">KA</span>
33 + </a>
34 + <p className="desc">
35 + {eco.org.tagline} Des centaines de connecteurs lisent les sites à la
36 + source, normalisent la donnée et se resynchronisent seuls.{" "}
37 + {site ? (
38 + <>
39 + <b style={{ color: "var(--paper)" }}>{site.wordmark}</b> —{" "}
40 + {site.tagline} — est un service Groupe KA.
41 + </>
42 + ) : null}
43 + </p>
44 + <p className="notice">
45 + <b>{eco.org.disclaimer}</b>
46 + </p>
47 + <ul className="sites">
48 + {others.map((s) => (
49 + <li key={s.id}>
50 + <a href={`https://${s.domain}`} target="_blank" rel="noopener noreferrer">
51 + {s.wordmark}
52 + </a>
53 + </li>
54 + ))}
55 + {eco.extraFooterLinks.map((l) => (
56 + <li key={l.href}>
57 + <a href={l.href} target="_blank" rel="noopener noreferrer">
58 + {l.label}
59 + </a>
60 + </li>
61 + ))}
62 + </ul>
63 + <div className="contacts">
64 + {eco.contacts.map((c) => (
65 + <p key={c.email} style={{ margin: 0 }}>
66 + <a href={`mailto:${c.email}`}>{c.email}</a>
67 + <span>{c.role}</span>
68 + </p>
69 + ))}
70 + </div>
71 + <p className="legal">
72 + © {year} {eco.org.copyrightHolder}
73 + {localLegal.map((l) => (
74 + <span key={l.href}>
75 + {" · "}
76 + <a href={l.href}>{l.label}</a>
77 + </span>
78 + ))}
79 + {eco.legal.map((l) => (
80 + <span key={l.href}>
81 + {" · "}
82 + <a href={l.href} target="_blank" rel="noopener noreferrer">
83 + {l.label}
84 + </a>
85 + </span>
86 + ))}
87 + </p>
88 + </div>
89 + </footer>
90 + );
91 +}
added src/ka/ecosystem.json +45 −0
@@ -0,0 +1,45 @@
1 +{
2 + "org": {
3 + "name": "Groupe KA",
4 + "legalName": "Groupe KA — Simon-Pierre Boucher",
5 + "tagline": "Holding québécois d'agrégateurs de produits et services entièrement automatisés.",
6 + "disclaimer": "Groupe KA est un agrégateur de contenu : nous ne vendons rien, ne louons rien et ne sommes partie à aucune transaction.",
7 + "copyrightHolder": "Groupe KA — Simon-Pierre Boucher"
8 + },
9 + "hub": {
10 + "url": "https://www.groupe-ka.com",
11 + "loginPath": "/connexion",
12 + "signupNote": "La création de compte KA ID se fait sur le hub groupe-ka.com ; chaque site délègue sa connexion via /api/auth/ka/login."
13 + },
14 + "contacts": [
15 + { "email": "contact@groupe-ka.com", "role": "Projets, partenariats & données" },
16 + { "email": "info@groupe-ka.com", "role": "Médias & questions générales" },
17 + { "email": "admin@groupe-ka.com", "role": "Légal, vie privée & Loi 25" }
18 + ],
19 + "legal": [
20 + { "label": "Conditions d'utilisation", "href": "https://www.groupe-ka.com/conditions" },
21 + { "label": "Politique de confidentialité", "href": "https://www.groupe-ka.com/confidentialite" },
22 + { "label": "Protection des renseignements personnels (Loi 25)", "href": "https://www.groupe-ka.com/loi-25" },
23 + { "label": "Transparence des robots d'indexation", "href": "https://www.groupe-ka.com/bots" }
24 + ],
25 + "sites": [
26 + { "id": "groupe-ka", "wordmark": "Groupe KA", "domain": "www.groupe-ka.com", "accent": "#d9f26b", "accentSoft": "#f0f9d2", "accentDeep": "#123f2e", "onAccent": "#141814", "tagline": "Le portail de l'écosystème ·Ka" },
27 + { "id": "trouve-ka", "wordmark": "Trouve·Ka", "domain": "www.trouve-ka.com", "accent": "#1c7ed6", "accentSoft": "#e7f2fd", "accentDeep": "#14508f", "onAccent": "#ffffff", "tagline": "Le moteur de recherche du web québécois" },
28 + { "id": "lou-ka", "wordmark": "Lou·Ka", "domain": "www.lou-ka.com", "accent": "#ff6a00", "accentSoft": "#fff1e6", "accentDeep": "#cc5500", "onAccent": "#ffffff", "tagline": "Tous les logements à louer" },
29 + { "id": "immo-ka", "wordmark": "Immo·Ka", "domain": "www.immo-ka.com", "accent": "#e23744", "accentSoft": "#fbe0e2", "accentDeep": "#a8232e", "onAccent": "#ffffff", "tagline": "Toutes les propriétés à vendre" },
30 + { "id": "vrai-prix", "wordmark": "Vrai-Prix", "domain": "www.vrai-prix.com", "accent": "#ff5148", "accentSoft": "#ffe3e0", "accentDeep": "#9e2a25", "onAccent": "#ffffff", "tagline": "La valeur réelle de chaque propriété" },
31 + { "id": "auto-ka", "wordmark": "Auto·Ka", "domain": "www.auto-ka.com", "accent": "#ff5a2a", "accentSoft": "#ffe8de", "accentDeep": "#cc3f16", "onAccent": "#ffffff", "tagline": "Les voitures usagées du Québec" },
32 + { "id": "fabri-ka", "wordmark": "Fabri·Ka", "domain": "www.fabri-ka.com", "accent": "#c4532e", "accentSoft": "#f7e3da", "accentDeep": "#a94525", "onAccent": "#ffffff", "tagline": "Les produits fabriqués au Québec" },
33 + { "id": "food-ka", "wordmark": "Food·Ka", "domain": "www.food-ka.com", "accent": "#1f9d55", "accentSoft": "#e2f5ea", "accentDeep": "#157a40", "onAccent": "#ffffff", "tagline": "Les prix d'épicerie, suivis à la source" },
34 + { "id": "resto-ka", "wordmark": "Resto·Ka", "domain": "www.resto-ka.com", "accent": "#f08c00", "accentSoft": "#fdeed7", "accentDeep": "#b96a00", "onAccent": "#141814", "tagline": "Chaque resto, chaque plat, chaque prix" },
35 + { "id": "sorti-ka", "wordmark": "Sorti·Ka", "domain": "www.sorti-ka.com", "accent": "#d6336c", "accentSoft": "#fbe0eb", "accentDeep": "#a12551", "onAccent": "#ffffff", "tagline": "Toutes les sorties, dans les 17 régions" },
36 + { "id": "crea-ka", "wordmark": "Créa·Ka", "domain": "www.crea-ka.com", "accent": "#7048e8", "accentSoft": "#ece5fc", "accentDeep": "#5433b8", "onAccent": "#ffffff", "tagline": "Les créateurs d'ici, tous leurs liens" },
37 + { "id": "api-ka", "wordmark": "API·Ka", "domain": "www.api-ka.com", "accent": "#3b5bdb", "accentSoft": "#e4eafb", "accentDeep": "#2b44a8", "onAccent": "#ffffff", "tagline": "La donnée de l'écosystème, par API" }
38 + ],
39 + "extraFooterLinks": [
40 + { "label": "ValoPlex", "href": "https://www.valoplex.com" },
41 + { "label": "Ka2", "href": "https://www.ka2.bot" },
42 + { "label": "Ka4", "href": "https://www.ka4.bot" },
43 + { "label": "Ka6", "href": "https://www.ka6.bot" }
44 + ]
45 +}
added src/ka/tokens.css +229 −0
@@ -0,0 +1,229 @@
1 +/* -----------------------------------------------------------------------------
2 + Auteur : Simon-Pierre Boucher — contact@spboucher.ai
3 + Fichier : ka-ui/tokens.css — SOURCE CANONIQUE (repo ka-ui sur spbgit)
4 + Desc. : Design system commun GROUPE KA « éditorial sharp » — tokens + socle
5 + de composants partagés par les 12 plateformes. Chaque site importe ce
6 + fichier PUIS surcharge uniquement son accent (voir accents.css).
7 +
8 + · Typo : display Space Grotesk / texte Inter / micro-étiquettes JetBrains Mono
9 + · Palette: papier #f5f3ee · encre #141814 · vert profond #1c5c41 + ACCENT du site
10 + · Signature : bordures encre 1,5–2 px + ombres décalées dures, grain de film,
11 + surlignés d'accent inclinés (néo-brutalisme raffiné)
12 + · Breakpoints communs : 360 / 768 / 1024 / 1440 px (mobile-first)
13 + · Zones tactiles ≥ 44×44 px, safe-areas iOS, typographie fluide (clamp)
14 +----------------------------------------------------------------------------- */
15 +
16 +:root {
17 + /* ---- Palette fixe Groupe KA (identique sur les 12 sites) ---- */
18 + --paper: #f5f3ee;
19 + --surface: #ffffff;
20 + --surface-2: #faf9f5;
21 + --ink: #141814;
22 + --ink-2: #4d5551;
23 + --ink-3: #8b928c;
24 + --line: rgba(20, 24, 20, 0.14);
25 + --line-strong: rgba(20, 24, 20, 0.85);
26 + --green: #1c5c41;
27 + --green-deep: #123f2e;
28 + --amber: #e8a33d;
29 + --amber-soft: #fdf3e2;
30 + --danger: #b3423a;
31 + --danger-soft: #fbe9e7;
32 +
33 + /* ---- ACCENT du site — SEULES variables surchargées par marque ---- */
34 + --accent: #d9f26b; /* défaut : lime Groupe KA */
35 + --accent-soft: #f0f9d2;
36 + --accent-deep: #123f2e;
37 + --on-accent: var(--ink); /* couleur du texte posé SUR l'accent */
38 +
39 + /* alias rétro-compatibles (les satellites historiques utilisent --lime) */
40 + --lime: var(--accent);
41 + --lime-soft: var(--accent-soft);
42 +
43 + /* ---- Géométrie sharp ---- */
44 + --r-card: 10px;
45 + --r-ctl: 6px;
46 + --r-pill: 999px;
47 +
48 + /* ---- Ombres décalées — la signature du groupe ---- */
49 + --shadow-flat: 0 1px 2px rgba(20, 24, 20, 0.05);
50 + --shadow-off: 6px 6px 0 var(--ink);
51 + --shadow-off-soft: 8px 8px 0 rgba(20, 24, 20, 0.08);
52 + --shadow-off-mid: 4px 4px 0 rgba(20, 24, 20, 0.18);
53 +
54 + /* ---- Typographie ---- */
55 + --font-display: "Space Grotesk", system-ui, sans-serif;
56 + --font-body: "Inter", system-ui, sans-serif;
57 + --font-mono: "JetBrains Mono", ui-monospace, monospace;
58 +
59 + /* Échelle fluide (mobile-first, clamp) */
60 + --fs-h1: clamp(30px, 3.2vw + 18px, 54px);
61 + --fs-h2: clamp(23px, 1.8vw + 14px, 34px);
62 + --fs-h3: clamp(17px, 0.9vw + 12px, 22px);
63 + --fs-body: 15px;
64 + --fs-small: 13px;
65 +
66 + /* Espacements */
67 + --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
68 + --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
69 +
70 + /* Cible tactile minimale */
71 + --touch: 44px;
72 +}
73 +
74 +/* ---- Socle ---- */
75 +* { box-sizing: border-box; }
76 +html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
77 +body {
78 + margin: 0;
79 + background: var(--paper);
80 + color: var(--ink);
81 + font-family: var(--font-body);
82 + font-size: var(--fs-body);
83 + line-height: 1.55;
84 + -webkit-font-smoothing: antialiased;
85 + padding-bottom: env(safe-area-inset-bottom);
86 + overflow-x: clip; /* jamais de débordement horizontal */
87 +}
88 +img, svg, video { max-width: 100%; height: auto; display: block; }
89 +h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; margin: 0 0 0.5em; }
90 +h1 { font-size: var(--fs-h1); line-height: 1.06; }
91 +h2 { font-size: var(--fs-h2); line-height: 1.15; }
92 +h3 { font-size: var(--fs-h3); line-height: 1.25; }
93 +a { color: inherit; }
94 +::selection { background: var(--accent); color: var(--on-accent); }
95 +:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
96 +
97 +/* Grain de film pleine page — ⚠️ jamais de z-index sur body > * (position:
98 + relative seulement), sinon les utilitaires z-* sont écrasés. */
99 +body::before {
100 + content: "";
101 + position: fixed; inset: 0; pointer-events: none; opacity: 0.35; z-index: 9999;
102 + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
103 +}
104 +body > * { position: relative; }
105 +
106 +/* ---- Conteneur commun ---- */
107 +.container { max-width: 1152px; margin: 0 auto; padding: 0 var(--sp-4); }
108 +@media (min-width: 768px) { .container { padding: 0 var(--sp-5); } }
109 +
110 +/* ---- Micro-typographie signature ---- */
111 +.kicker {
112 + display: inline-flex; align-items: center; gap: 10px;
113 + font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
114 + text-transform: uppercase; letter-spacing: 0.12em; color: var(--green);
115 +}
116 +.kicker::before { content: ""; width: 22px; height: 2px; background: var(--green); }
117 +.klabel {
118 + font-family: var(--font-mono); font-size: 10px; font-weight: 700;
119 + text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
120 +}
121 +.hl {
122 + display: inline-block; background: var(--accent); color: var(--on-accent);
123 + border-radius: 8px; padding: 0 10px 2px; transform: rotate(-1deg);
124 +}
125 +.outline-txt { color: transparent; -webkit-text-stroke: 2px var(--ink); }
126 +
127 +/* ---- Boutons (cible ≥ 44 px) ---- */
128 +.btn {
129 + display: inline-flex; align-items: center; justify-content: center; gap: 8px;
130 + min-height: var(--touch); padding: 10px 18px;
131 + font-family: var(--font-display); font-weight: 700; font-size: 14px;
132 + border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
133 + background: var(--surface); color: var(--ink);
134 + cursor: pointer; text-decoration: none;
135 + transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
136 +}
137 +.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off-mid); }
138 +.btn:active { transform: translate(0, 0); box-shadow: none; }
139 +.btn:disabled { opacity: 0.45; pointer-events: none; }
140 +.btn-primary { background: var(--ink); color: var(--accent); }
141 +.btn-primary:hover { background: var(--accent-deep); }
142 +.btn-accent { background: var(--accent); color: var(--on-accent); }
143 +.btn-ghost { background: transparent; border-color: var(--line); }
144 +.btn-ghost:hover { border-color: var(--ink); }
145 +
146 +/* ---- Cartes ---- */
147 +.card {
148 + background: var(--surface); border: 1.5px solid var(--ink);
149 + border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);
150 + overflow: hidden;
151 +}
152 +.card-hover { transition: transform 0.15s, box-shadow 0.15s; }
153 +.card-hover:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); }
154 +
155 +/* ---- Chips / badges ---- */
156 +.chip {
157 + display: inline-flex; align-items: center; gap: 6px;
158 + padding: 4px 11px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
159 + text-transform: uppercase; letter-spacing: 0.06em;
160 + border: 1.5px solid var(--ink); border-radius: var(--r-pill);
161 + background: var(--surface); color: var(--ink);
162 +}
163 +.chip-accent { background: var(--accent); color: var(--on-accent); }
164 +.chip-soft { background: var(--accent-soft); border-color: var(--line); }
165 +
166 +/* ---- Champs ---- */
167 +.input, .select, .textarea {
168 + width: 100%; min-height: var(--touch); padding: 10px 14px;
169 + font: inherit; color: var(--ink); background: var(--surface);
170 + border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
171 +}
172 +.input:focus, .select:focus, .textarea:focus {
173 + outline: none; box-shadow: 3px 3px 0 var(--accent); border-color: var(--ink);
174 +}
175 +.input::placeholder { color: var(--ink-3); }
176 +
177 +/* ---- Badge « Un service Groupe KA » (header, cliquable → hub) ---- */
178 +.gk-badge {
179 + display: inline-flex; align-items: center; gap: 7px;
180 + min-height: 30px; padding: 3px 10px 4px;
181 + font-family: var(--font-mono); font-size: 10px; font-weight: 700;
182 + letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
183 + border: 1.5px solid var(--ink); border-radius: var(--r-pill);
184 + background: var(--surface); color: var(--ink-2); white-space: nowrap;
185 +}
186 +.gk-badge b {
187 + font-family: var(--font-display); font-size: 12px; letter-spacing: -0.02em;
188 + text-transform: none; color: var(--ink);
189 +}
190 +.gk-badge b .ka {
191 + display: inline-block; background: var(--ink); color: var(--accent);
192 + border-radius: 5px; padding: 0 5px 1px; margin-left: 3px; transform: rotate(-2deg);
193 +}
194 +.gk-badge:hover .ka { transform: rotate(0); }
195 +.gk-badge--dark { background: transparent; border-color: rgba(245,243,238,0.4); color: rgba(245,243,238,0.75); }
196 +.gk-badge--dark b { color: var(--paper); }
197 +
198 +/* ---- Footer commun (fond encre — voir react/KaFooter.tsx) ---- */
199 +.ka-footer { margin-top: var(--sp-8); background: var(--ink); padding: 44px 0; font-size: 13px; color: rgba(245,243,238,0.75); }
200 +.ka-footer a { text-decoration: none; }
201 +.ka-footer .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.04em; color: var(--paper); text-decoration: none; }
202 +.ka-footer .wordmark .ka { color: var(--accent); }
203 +.ka-footer .desc { max-width: 640px; margin-top: var(--sp-4); }
204 +.ka-footer .notice { max-width: 640px; margin-top: var(--sp-4); border-left: 2px solid var(--accent); padding-left: var(--sp-4); }
205 +.ka-footer .notice b { color: var(--paper); }
206 +.ka-footer .sites { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
207 +.ka-footer .sites a { color: rgba(245,243,238,0.65); }
208 +.ka-footer .sites a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
209 +.ka-footer .contacts { display: grid; gap: 14px 32px; border-top: 1px solid rgba(245,243,238,0.15); margin-top: 30px; padding-top: 26px; }
210 +@media (min-width: 768px) { .ka-footer .contacts { grid-template-columns: repeat(3, 1fr); } }
211 +.ka-footer .contacts a { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: rgba(245,243,238,0.85); }
212 +.ka-footer .contacts a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
213 +.ka-footer .contacts span { display: block; margin-top: 3px; font-size: 11px; color: rgba(245,243,238,0.5); }
214 +.ka-footer .legal { margin-top: 30px; font-family: var(--font-mono); font-size: 11px; color: rgba(245,243,238,0.45); }
215 +.ka-footer .legal a { color: inherit; }
216 +.ka-footer .legal a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
217 +
218 +/* ---- Tableaux → cartes empilées sous 768 px ---- */
219 +.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
220 +@media (max-width: 767px) {
221 + .tbl-stack thead { display: none; }
222 + .tbl-stack tr { display: block; border: 1.5px solid var(--ink); border-radius: var(--r-card); margin-bottom: var(--sp-3); background: var(--surface); }
223 + .tbl-stack td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 8px 12px; border: 0; }
224 + .tbl-stack td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
225 +}
226 +
227 +/* ---- Utilitaires responsive ---- */
228 +.only-mobile { display: initial; } .only-desktop { display: none; }
229 +@media (min-width: 768px) { .only-mobile { display: none; } .only-desktop { display: initial; } }
230