SPB Git
spboucher.ai

spb/job-ka

Public

feat(fiche): refonte premium mobile-first de la fiche d'offre (2026-09-07)

Même socle que les fiches Lou-Ka v3 / Immo-Ka v3 (frontend/src/fiche/,
préfixe jk-, tokens --jk-*, fond papier, cartes blanches bord 1 px, cyan
réservé aux CTA/salaire ; header encre conservé en version compacte) :
héro (logo + employeur · lieu, salaire en exergue + équivalent annuel,
capsules marché / nouveau / offre directe, titre, actions favoris / partage /
Postuler) ; « En bref » déterministe (salaire vs médiane de la catégorie,
source directe ou portail, exigences, mode/type/niveau, fraîcheur et date
limite, volume de l'employeur, avantages) ; navigation sticky ; « Salaire et
marché » (KPI, jauge P25–P75 du point médian, historique du salaire affiché,
méthodologie — jamais d'estimation) ; « Le poste » (grille icône/valeur,
rangées, avantages, description tronquée, champs bruts en accordéon) ; « Où
travailler » (carte OSM) ; Dossier de l'offre ; Sources et méthodologie. CTA
sticky après le héro, aside desktop sticky, « Demander à Ka » via le widget
KA Agent. Header compact sur /emploi/ (favoris + partage via fiche/current.ts,
badge masqué). Rangées d'offres de la liste : surface blanche, bord 1 px,
ombre légère au survol. Icons.tsx (pictos partagés) ajouté. Aucun order CSS ;
pas de scrollIntoView à l'ouverture. Scripts QA : preview.mjs,
check-order.mjs, shots.mjs, interactions.mjs (Playwright via lien vers
vrai-prix/node_modules).

Validé sur M3U96a : tsc + vite build, check-order OK, interactions OK,
captures 6 largeurs ; dist basculé, aucun changement API.
Simon-Pierre Boucher committed (Sep 7, 2026) parent 68cad94 Browse files

18 changed files +2,150 −193

18 changed files
Unified Split
added frontend/scripts/check-order.mjs +55 −0
@@ -0,0 +1,55 @@
1+// Validation ordre des sections — fiche Job·Ka (ordre DOM = ordre visuel)
2+// Refonte 2026-09-07 : sections `.jk-*` / ids ; vérifie sur mobile que
3+// l'ordre visuel est croissant, que la page s'ouvre en haut (scrollY 0), que
4+// le héro (prix + galerie) est le premier contenu, qu'aucune section ne porte
5+// un `order` CSS et qu'il n'y a pas de débordement horizontal.
6+// Usage : node frontend/scripts/check-order.mjs <uid> [baseUrl]
7+import { chromium, devices } from "playwright";
8+
9+const UID = process.argv[2];
10+if (!UID) { console.error("usage: node check-order.mjs <uid> [baseUrl]"); process.exit(2); }
11+const BASE = process.argv[3] || process.env.BASE || "http://localhost:8096";
12+const URL = `${BASE}/emploi/${encodeURIComponent(UID)}`;
13+
14+async function check(name, ctxOpts) {
15+ const browser = await chromium.launch();
16+ const ctx = await browser.newContext(ctxOpts);
17+ const page = await ctx.newPage();
18+ const errors = [];
19+ page.on("pageerror", (e) => errors.push(String(e)));
20+ page.on("console", (m) => { if (m.type() === "error") errors.push(m.text()); });
21+ await page.goto(URL, { waitUntil: "networkidle" });
22+ await page.waitForSelector(".jk-hero", { timeout: 20000 });
23+ await page.waitForTimeout(2500);
24+ const data = await page.evaluate(() => {
25+ const sel = [".jk-hero", "#resume", ".jk-nav", "#salaire", "#poste", "#avantages", "#description", "#carte", "#dossier", "#sources"];
26+ const out = [];
27+ for (const s of sel) {
28+ const el = document.querySelector(s);
29+ if (!el) { out.push({ s, missing: true }); continue; }
30+ const r = el.getBoundingClientRect();
31+ out.push({ s, hidden: r.height === 0 && r.width === 0, top: Math.round(r.top + window.scrollY),
32+ left: Math.round(r.left), order: getComputedStyle(el).order });
33+ }
34+ return { out, scrollY: window.scrollY, overflow: document.documentElement.scrollWidth - window.innerWidth };
35+ });
36+ console.log(`\n=== ${name} === scrollY initial: ${data.scrollY} · débordement horizontal: ${data.overflow}px`);
37+ for (const b of data.out)
38+ console.log(b.missing ? `${b.s.padEnd(14)} (non rendue)` : b.hidden ? `${b.s.padEnd(14)} (vide/masquée)` :
39+ `${b.s.padEnd(14)} top=${String(b.top).padStart(6)} left=${String(b.left).padStart(4)} order=${b.order}`);
40+ if (errors.length) console.log("console errors:", errors.slice(0, 5));
41+ await browser.close();
42+ return { ...data, errors };
43+}
44+
45+const mob = await check("iPhone 14 (mobile)", { ...devices["iPhone 14"] });
46+const desk = await check("Desktop 1440px", { viewport: { width: 1440, height: 900 } });
47+
48+const vis = mob.out.filter((b) => !b.missing && !b.hidden);
49+const sorted = vis.every((b, i) => i === 0 || b.top >= vis[i - 1].top);
50+const noOrder = vis.every((b) => b.order === "0");
51+const ok = sorted && mob.scrollY === 0 && vis[0].s === ".jk-hero" && vis[0].top < 200 && noOrder
52+ && mob.overflow <= 0 && desk.overflow <= 0;
53+console.log(`\nMOBILE: ordre visuel ${sorted ? "CROISSANT ✓" : "DÉSORDONNÉ ✗"} · scrollY=${mob.scrollY} · 1re section=${vis[0].s} top=${vis[0].top} · sans order CSS=${noOrder} · overflow mobile=${mob.overflow} desktop=${desk.overflow}`);
54+console.log(ok ? "VALIDATION OK" : "VALIDATION ÉCHEC");
55+process.exit(ok ? 0 : 1);
added frontend/scripts/interactions.mjs +34 −0
@@ -0,0 +1,34 @@
1+// Parcours d'interactions Playwright sur la fiche (mobile) : galerie plein
2+// écran, panneau « Voir les N lieux », « Demander à Ka », accordéons — vérifie
3+// l'absence d'erreur JS et que chaque panneau s'ouvre puis se ferme.
4+// Usage : node frontend/scripts/interactions.mjs <uid> [baseUrl]
5+import { chromium, devices } from "playwright";
6+const UID = process.argv[2]; const BASE = process.argv[3] || "http://127.0.0.1:8096";
7+if (!UID) { console.error("usage: node interactions.mjs <uid> [baseUrl]"); process.exit(2); }
8+const browser = await chromium.launch();
9+const ctx = await browser.newContext({ ...devices["iPhone 14"] }); const page = await ctx.newPage();
10+const errs = [];
11+page.on("pageerror", (e) => errs.push("PAGEERROR " + e.message));
12+page.on("console", (m) => { if (m.type() === "error") errs.push(m.text().slice(0, 160)); });
13+await page.goto(`${BASE}/emploi/${encodeURIComponent(UID)}`, { waitUntil: "networkidle" });
14+await page.waitForSelector(".jk-hero");
15+const step = async (name, fn) => { try { await fn(); console.log("OK ", name); } catch (e) { console.log("FAIL", name, String(e).split("\n")[0]); } };
16+await step("accordéon méthodologie salaire", async () => {
17+ const b = page.locator("#salaire .jk-acc-btn").first(); await b.scrollIntoViewIfNeeded(); await b.click();
18+ await page.waitForSelector("#salaire .jk-acc-body.open", { timeout: 2000 });
19+});
20+await step("accordéon dossier", async () => {
21+ const b = page.locator("#dossier .jk-acc-btn").first(); await b.scrollIntoViewIfNeeded(); await b.click();
22+ await page.waitForSelector("#dossier .jk-acc-body.open", { timeout: 2000 });
23+});
24+await step("Demander à Ka : sheet", async () => {
25+ await page.evaluate(() => window.scrollTo(0, 1200)); await page.waitForTimeout(500);
26+ await page.click(".jk-ka-btn"); await page.waitForSelector(".jk-sheet", { timeout: 3000 });
27+ await page.click(".jk-sheet-x"); await page.waitForSelector(".jk-sheet", { state: "detached", timeout: 3000 });
28+});
29+await step("404", async () => {
30+ await page.goto(`${BASE}/emploi/inexistant:0`, { waitUntil: "networkidle" }); await page.waitForSelector(".jk-page-error", { timeout: 8000 });
31+});
32+console.log("erreurs console:", errs.length, errs.slice(0, 5));
33+await browser.close();
34+process.exit(errs.filter((e) => !/Failed to fetch|api-ka|kaa/.test(e)).length ? 1 : 0);
added frontend/scripts/preview.mjs +28 −0
@@ -0,0 +1,28 @@
1+// Serveur de prévisualisation QA (zéro dépendance) : sert un build Vite
2+// (dist-next par défaut) et relaie /api vers le backend local — permet de
3+// valider une fiche avec Playwright SANS toucher au dist/ servi en production.
4+// Usage : node frontend/scripts/preview.mjs [dir=dist-next] [port=18096] [api=http://127.0.0.1:8096]
5+import http from "node:http";
6+import { createReadStream, existsSync, statSync } from "node:fs";
7+import { extname, join, resolve } from "node:path";
8+
9+const DIR = resolve(process.argv[2] || "dist-next");
10+const PORT = Number(process.argv[3] || 18096);
11+const API = new URL(process.argv[4] || "http://127.0.0.1:8096");
12+const MIME = { ".html": "text/html; charset=utf-8", ".js": "text/javascript", ".css": "text/css", ".svg": "image/svg+xml",
13+ ".png": "image/png", ".json": "application/json", ".geojson": "application/geo+json", ".woff2": "font/woff2", ".ico": "image/x-icon" };
14+
15+http.createServer((req, res) => {
16+ const url = new URL(req.url, "http://x");
17+ if (url.pathname.startsWith("/api/")) {
18+ const p = http.request({ host: API.hostname, port: API.port, path: req.url, method: req.method, headers: { ...req.headers, host: API.host } },
19+ (r) => { res.writeHead(r.statusCode, r.headers); r.pipe(res); });
20+ p.on("error", () => { res.writeHead(502); res.end("api down"); });
21+ req.pipe(p);
22+ return;
23+ }
24+ let f = join(DIR, decodeURIComponent(url.pathname));
25+ if (!existsSync(f) || statSync(f).isDirectory()) f = join(DIR, "index.html");
26+ res.writeHead(200, { "content-type": MIME[extname(f)] || "application/octet-stream" });
27+ createReadStream(f).pipe(res);
28+}).listen(PORT, "127.0.0.1", () => console.log(`preview ${DIR} → http://127.0.0.1:${PORT} (api → ${API.origin})`));
added frontend/scripts/shots.mjs +40 −0
@@ -0,0 +1,40 @@
1+// Captures Playwright de la fiche propriété à 6 largeurs (QA visuelle).
2+// Usage : node frontend/scripts/shots.mjs <uid> [baseUrl] [outDir]
3+import { chromium, devices } from "playwright";
4+const UID = process.argv[2];
5+if (!UID) { console.error("usage: node shots.mjs <uid> [baseUrl] [outDir]"); process.exit(2); }
6+const BASE = process.argv[3] || "http://127.0.0.1:8096";
7+const OUT = process.argv[4] || "/tmp";
8+const shots = [
9+ ["iphone14", { ...devices["iPhone 14"] }],
10+ ["w375", { viewport: { width: 375, height: 812 }, deviceScaleFactor: 2, isMobile: true, hasTouch: true }],
11+ ["w430", { viewport: { width: 430, height: 932 }, deviceScaleFactor: 2, isMobile: true, hasTouch: true }],
12+ ["w768", { viewport: { width: 768, height: 1024 }, deviceScaleFactor: 1 }],
13+ ["w1024", { viewport: { width: 1024, height: 800 }, deviceScaleFactor: 1 }],
14+ ["w1440", { viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 }],
15+];
16+const browser = await chromium.launch();
17+for (const [name, opts] of shots) {
18+ const ctx = await browser.newContext(opts); const page = await ctx.newPage();
19+ const errs = [];
20+ page.on("pageerror", (e) => errs.push("PAGEERROR " + e.message));
21+ page.on("console", (m) => { if (m.type() === "error") errs.push(m.text().slice(0, 200)); });
22+ await page.goto(`${BASE}/emploi/${encodeURIComponent(UID)}`, { waitUntil: "networkidle" });
23+ await page.waitForSelector(".jk-hero", { timeout: 20000 });
24+ // html{scroll-behavior:smooth} du site fausse le retour en haut scripté → défilement instantané pour les captures
25+ await page.evaluate(() => { document.documentElement.style.scrollBehavior = "auto"; });
26+ // défilement complet (déclenche les chargements différés) puis retour en haut
27+ await page.evaluate(async () => {
28+ for (let y = 0; y < document.body.scrollHeight; y += 600) { window.scrollTo(0, y); await new Promise((r) => setTimeout(r, 120)); }
29+ window.scrollTo({ top: 0, behavior: "instant" });
30+ });
31+ await page.waitForTimeout(3500);
32+ const ov = await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth);
33+ await page.screenshot({ path: `${OUT}/jk-${name}-full.png`, fullPage: true });
34+ await page.screenshot({ path: `${OUT}/jk-${name}-top.png` });
35+ await page.evaluate(() => window.scrollTo({ top: 900, behavior: "instant" })); await page.waitForTimeout(600);
36+ await page.screenshot({ path: `${OUT}/jk-${name}-scrolled.png` });
37+ console.log(name, "overflow", ov, "errors", errs.length, errs.slice(0, 3).join(" | "));
38+ await ctx.close();
39+}
40+await browser.close();
modified frontend/src/App.tsx +35 −3
@@ -19,7 +19,9 @@ import Contact from "./pages/Contact";
19 import Employeurs from "./pages/Employeurs"; 19 import Employeurs from "./pages/Employeurs";
20 import VillePage, { VillesPage } from "./pages/Ville"; 20 import VillePage, { VillesPage } from "./pages/Ville";
21 import FavorisPage from "./pages/Favoris"; 21 import FavorisPage from "./pages/Favoris";
22−import { FavProvider } from "./favorites"; 22+import { FavProvider, jobFavItem, useFav } from "./favorites";
23+import { Ico, IcoHeart } from "./components/Icons";
24+import { useCurrentListing } from "./fiche/current";
23 import GroupeKaBadge from "./ka/GroupeKaBadge"; 25 import GroupeKaBadge from "./ka/GroupeKaBadge";
24 import KaFooter from "./ka/KaFooter"; 26 import KaFooter from "./ka/KaFooter";
25 27
@@ -67,6 +69,33 @@ function KaAuth() {
67 ); 69 );
68 } 70 }
69 71
72+/** Actions du header sur une fiche d'offre : favoris + partage (compactes).
73+ L'offre affichée est publiée par la page fiche (fiche/current.ts). */
74+function FicheHeaderActions() {
75+ const job = useCurrentListing();
76+ const { ids, toggle } = useFav();
77+ if (!job) return null;
78+ const fav = ids.has(job.uid);
79+ const share = async () => {
80+ const url = `https://www.job-ka.com/emploi/${encodeURIComponent(job.uid)}`;
81+ try {
82+ if (navigator.share) await navigator.share({ title: document.title, url });
83+ else await navigator.clipboard.writeText(url);
84+ } catch { /* annulé */ }
85+ };
86+ return (
87+ <div className="hdr-actions">
88+ <button type="button" className={`hdr-btn ${fav ? "on" : ""}`} aria-pressed={fav}
89+ aria-label={fav ? "Retirer des favoris" : "Ajouter aux favoris"} onClick={() => toggle(jobFavItem(job))}>
90+ <IcoHeart size={18} filled={fav} />
91+ </button>
92+ <button type="button" className="hdr-btn" aria-label="Partager" onClick={share}>
93+ <Ico name="share" size={17} />
94+ </button>
95+ </div>
96+ );
97+}
98+
70 /** Liens de navigation principaux (header desktop + menu mobile). */ 99 /** Liens de navigation principaux (header desktop + menu mobile). */
71 const NAV_LINKS: Array<{ to: string; label: string; end?: boolean }> = [ 100 const NAV_LINKS: Array<{ to: string; label: string; end?: boolean }> = [
72 { to: "/", label: "Offres", end: true }, 101 { to: "/", label: "Offres", end: true },
@@ -81,6 +110,8 @@ const NAV_LINKS: Array<{ to: string; label: string; end?: boolean }> = [
81 export default function App() { 110 export default function App() {
82 const [menuOpen, setMenuOpen] = useState(false); 111 const [menuOpen, setMenuOpen] = useState(false);
83 const location = useLocation(); 112 const location = useLocation();
113+ // fiche d'offre : header compact (56 px), sans badge ; favoris + partage
114+ const isFiche = location.pathname.startsWith("/emploi/");
84 115
85 // Hauteur réelle du header → --header-h sur <html> (la carte s'y cale : 116 // Hauteur réelle du header → --header-h sur <html> (la carte s'y cale :
86 // le 58 px codé en dur était faux quand le header wrappe sur 2 lignes). 117 // le 58 px codé en dur était faux quand le header wrappe sur 2 lignes).
@@ -120,10 +151,11 @@ export default function App() {
120 151
121 return ( 152 return (
122 <FavProvider> 153 <FavProvider>
123− <header className={menuOpen ? "site menu-open" : "site"}> 154+ <header className={`site ${menuOpen ? "menu-open" : ""} ${isFiche ? "header--fiche" : ""}`}>
124 <div className="container"> 155 <div className="container">
125 <NavLink to="/" className="logo">Job<em>·</em>Ka</NavLink> 156 <NavLink to="/" className="logo">Job<em>·</em>Ka</NavLink>
126− <GroupeKaBadge dark /> 157+ {!isFiche && <GroupeKaBadge dark />}
158+ {isFiche && <FicheHeaderActions />}
127 <nav className="main"> 159 <nav className="main">
128 {NAV_LINKS.map((l) => ( 160 {NAV_LINKS.map((l) => (
129 <NavLink 161 <NavLink
added frontend/src/components/Icons.tsx +291 −0
@@ -0,0 +1,291 @@
1+// -----------------------------------------------------------------------------
2+// Groupe KA — iconographie partagée (portée depuis Immo-Ka)
3+// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
4+// components/Icons.tsx : iconographie MAISON — traits 1,7 px sur grille 24,
5+// dessinée pour les plateformes Groupe KA (zéro emoji, zéro pack générique). Chaque icône est
6+// un tracé « stroke » net qui hérite de la couleur du texte (currentColor).
7+// -----------------------------------------------------------------------------
8+import { ReactNode } from "react";
9+
10+const P: Record<string, ReactNode> = {
11+ // --- navigation -----------------------------------------------------------
12+ home: (<>
13+ <path d="M3.5 10.6 12 3.4l8.5 7.2" />
14+ <path d="M5.6 9.4V20h12.8V9.4" />
15+ <path d="M10 20v-5.6h4V20" />
16+ </>),
17+ map: (<>
18+ <path d="M3.2 6.4 9 4.2l6 2.2 5.8-2.2v13.4L15 19.8l-6-2.2-5.8 2.2z" />
19+ <path d="M9 4.2v13.4M15 6.4v13.4" />
20+ </>),
21+ chart: (<>
22+ <path d="M4 20h16" />
23+ <path d="M7.2 20v-5.6M12 20V8.8M16.8 20V12" />
24+ </>),
25+ building: (<>
26+ <path d="M5 20V5.6A1.6 1.6 0 0 1 6.6 4h6.2a1.6 1.6 0 0 1 1.6 1.6V20" />
27+ <path d="M14.4 9.4h3.4A1.6 1.6 0 0 1 19.4 11v9" />
28+ <path d="M3.2 20h17.6" />
29+ <path d="M8 8h2.4M8 11.6h2.4M8 15.2h2.4M16.4 13h.9M16.4 16.2h.9" />
30+ </>),
31+
32+ // --- specs propriété --------------------------------------------------------
33+ bed: (<>
34+ <path d="M3.4 6.8V18.6" />
35+ <path d="M3.4 15.4h17.2v3.2" />
36+ <path d="M3.4 12.2h6.2v3.2" />
37+ <circle cx="6.5" cy="9.9" r="1.35" />
38+ <path d="M11.4 12.2h5.8a3.4 3.4 0 0 1 3.4 3.2" />
39+ </>),
40+ bath: (<>
41+ <path d="M3.6 12.4h16.8v1.4a5.2 5.2 0 0 1-5.2 5.2H8.8a5.2 5.2 0 0 1-5.2-5.2z" />
42+ <path d="M5.8 12.4V5.9a2.1 2.1 0 0 1 4-1" />
43+ <path d="m7 19.4-1 2.1M17 19.4l1 2.1" />
44+ </>),
45+ drop: (<>
46+ <path d="M12 3.6s6 6.4 6 10.6a6 6 0 1 1-12 0C6 10 12 3.6 12 3.6z" />
47+ <path d="M9.4 14.2a2.7 2.7 0 0 0 2 2.6" />
48+ </>),
49+ area: (<>
50+ <path d="M4.4 19.6 19.6 4.4" />
51+ <path d="M4.4 14v5.6H10" />
52+ <path d="M19.6 10V4.4H14" />
53+ </>),
54+ land: (<>
55+ <path d="M4.4 9.6v9.8M9.5 9.6v9.8M14.5 9.6v9.8M19.6 9.6v9.8" />
56+ <path d="M3 12.6h18M3 16.4h18" />
57+ <path d="M4.4 9.6 12 5.2l7.6 4.4" />
58+ </>),
59+ calendar: (<>
60+ <rect x="4" y="5.6" width="16" height="14.8" rx="2" />
61+ <path d="M4 10.2h16M8.2 3.4v4M15.8 3.4v4" />
62+ </>),
63+ tag: (<>
64+ <path d="m12.9 3.6 7.5 7.5a1.8 1.8 0 0 1 0 2.5l-6.8 6.8a1.8 1.8 0 0 1-2.5 0L3.6 12.9V3.6z" />
65+ <circle cx="8" cy="8" r="1.5" />
66+ </>),
67+ camera: (<>
68+ <rect x="3.4" y="7" width="17.2" height="13" rx="2" />
69+ <path d="M8.6 7 10 4.4h4L15.4 7" />
70+ <circle cx="12" cy="13.2" r="3.4" />
71+ </>),
72+
73+ // --- actions / états ----------------------------------------------------------
74+ search: (<>
75+ <circle cx="10.6" cy="10.6" r="6.2" />
76+ <path d="m15.3 15.3 5.3 5.3" />
77+ </>),
78+ arrow: (<>
79+ <path d="M4 12h15.2" />
80+ <path d="m13.8 6.4 5.4 5.6-5.4 5.6" />
81+ </>),
82+ check: (<path d="m5 12.8 4.3 4.4L19 7.4" />),
83+ alert: (<>
84+ <path d="M12 4.2 2.9 19.4h18.2z" />
85+ <path d="M12 10.2v4.4" />
86+ <path d="M12 17.4v.05" />
87+ </>),
88+ phone: (<path d="M5.2 4h3.6L10.4 8.4 8.3 10.1a12.5 12.5 0 0 0 5.6 5.6l1.7-2.1 4.4 1.6v3.6a1.8 1.8 0 0 1-1.9 1.8A16.4 16.4 0 0 1 3.4 5.9 1.8 1.8 0 0 1 5.2 4z" />),
89+ trendup: (<>
90+ <path d="m3.6 17.4 6-6.4 4 3.6 6.8-7.8" />
91+ <path d="M15.6 6.8h4.8v4.8" />
92+ </>),
93+ trenddown: (<>
94+ <path d="m3.6 6.8 6 6.4 4-3.6 6.8 7.8" />
95+ <path d="M15.6 17.4h4.8v-4.8" />
96+ </>),
97+ external: (<>
98+ <path d="M14.4 4h5.6v5.6" />
99+ <path d="M20 4 11.4 12.6" />
100+ <path d="M18.6 13.6V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7.4a2 2 0 0 1 2-2h4.4" />
101+ </>),
102+ pin: (<>
103+ <path d="M12 21.2S5.4 15.7 5.4 10.8a6.6 6.6 0 0 1 13.2 0c0 4.9-6.6 10.4-6.6 10.4z" />
104+ <circle cx="12" cy="10.6" r="2.3" />
105+ </>),
106+ download: (<>
107+ <path d="M12 3.6v11.2" />
108+ <path d="m7.2 10.4 4.8 4.8 4.8-4.8" />
109+ <path d="M4.4 19.2h15.2" />
110+ </>),
111+
112+ // --- quartier ---------------------------------------------------------------------
113+ leaf: (<>
114+ <path d="M5 19.2C5 9.6 12 5 20 4.2c0 9-4.2 15-13.2 15z" />
115+ <path d="M5 19.2C7 14 11 10 15 8" />
116+ </>),
117+ thermo: (<>
118+ <path d="M10.4 4.2a1.9 1.9 0 0 1 3.8 0v8.8a4.2 4.2 0 1 1-3.8 0z" />
119+ <path d="M12.3 8.4v7" />
120+ </>),
121+ sun: (<>
122+ <circle cx="12" cy="12" r="4.2" />
123+ <path d="M12 3.2v2M12 18.8v2M3.2 12h2M18.8 12h2M5.8 5.8l1.4 1.4M16.8 16.8l1.4 1.4M18.2 5.8l-1.4 1.4M7.2 16.8l-1.4 1.4" />
124+ </>),
125+ shield: (<>
126+ <path d="M12 3.4 5.2 5.9v5.9c0 4.6 3 7.6 6.8 8.8 3.8-1.2 6.8-4.2 6.8-8.8V5.9z" />
127+ <path d="m9.2 12 2 2 3.8-4" />
128+ </>),
129+ cart: (<>
130+ <circle cx="9.6" cy="19.6" r="1.35" />
131+ <circle cx="17" cy="19.6" r="1.35" />
132+ <path d="M3.4 4.4h2.2l2.5 10.8h9.6l2.7-7.8H7" />
133+ </>),
134+ bus: (<>
135+ <rect x="4.6" y="3.8" width="14.8" height="13.4" rx="2.4" />
136+ <path d="M4.6 10.4h14.8" />
137+ <path d="M7.6 20.2v-3M16.4 20.2v-3" />
138+ <path d="M8.3 14h.05M15.7 14h.05" />
139+ </>),
140+ tree: (<>
141+ <path d="M12 3.4 6.8 11.4h2.8L5.4 17.8h13.2l-4.2-6.4h2.8z" />
142+ <path d="M12 17.8v3.4" />
143+ </>),
144+ school: (<>
145+ <path d="m12 4.2 9.8 4.4L12 13 2.2 8.6z" />
146+ <path d="M6.6 10.8v5c0 1.6 2.4 3 5.4 3s5.4-1.4 5.4-3v-5" />
147+ <path d="M21.8 8.6v5.4" />
148+ </>),
149+ health: (<>
150+ <circle cx="12" cy="12" r="8.4" />
151+ <path d="M12 8.4v7.2M8.4 12h7.2" />
152+ </>),
153+ pill: (<>
154+ <rect x="3.2" y="8.6" width="17.6" height="6.8" rx="3.4" transform="rotate(-33 12 12)" />
155+ <path d="M12 8.6v6.8" transform="rotate(-33 12 12)" />
156+ </>),
157+ people: (<>
158+ <circle cx="9" cy="8" r="3.2" />
159+ <path d="M3.6 20a5.4 5.4 0 0 1 10.8 0" />
160+ <path d="M15.4 5.4a3.2 3.2 0 0 1 0 5.9M17 14.8a5.4 5.4 0 0 1 3.4 5.2" />
161+ </>),
162+
163+ // --- fiche propriété (refonte premium 2026-09-07) — même trait 1,7, grille 24 ---
164+ chevdown: <path d="m6 9 6 6 6-6" />,
165+ chevleft: <path d="m14.5 5-7 7 7 7" />,
166+ chevright: <path d="m9.5 5 7 7-7 7" />,
167+ close: <path d="M18 6 6 18M6 6l12 12" />,
168+ expand: <path d="M15 3.5h5.5V9M9 20.5H3.5V15M20.5 3.5l-7 7M3.5 20.5l7-7" />,
169+ share: (<>
170+ <circle cx="18" cy="5" r="2.5" /><circle cx="6" cy="12" r="2.5" /><circle cx="18" cy="19" r="2.5" />
171+ <path d="M8.2 10.8 15.8 6.3M8.2 13.2l7.6 4.5" />
172+ </>),
173+ sparkles: (<>
174+ <path d="M12 3l1.9 5.6 5.6 1.9-5.6 1.9L12 18l-1.9-5.6-5.6-1.9 5.6-1.9L12 3z" />
175+ <path d="M19 16l.8 2.2 2.2.8-2.2.8L19 22l-.8-2.2-2.2-.8 2.2-.8L19 16z" />
176+ </>),
177+ scale: <path d="M12 3v18M5 21h14M12 6l7 2-3 7h-4M12 6 5 8l3 7h4" />,
178+ wallet: (<>
179+ <path d="M3 7a2 2 0 0 1 2-2h13v4" />
180+ <rect x="3" y="7" width="18" height="12" rx="2" />
181+ <path d="M16 13h.01" />
182+ </>),
183+ droplets: <path d="M12 3s-6 6.5-6 10.5a6 6 0 0 0 12 0C18 9.5 12 3 12 3z" />,
184+ wind: (<>
185+ <path d="M3 8h10a3 3 0 1 0-3-3" />
186+ <path d="M3 12h15a3 3 0 1 1-3 3" />
187+ <path d="M3 16h7" />
188+ </>),
189+ fuel: (<>
190+ <path d="M4 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16" />
191+ <path d="M3 21h12M6 8h6" />
192+ <path d="M14 10h2a2 2 0 0 1 2 2v5a1.5 1.5 0 0 0 3 0V9l-2.5-2.5" />
193+ </>),
194+ train: (<>
195+ <rect x="4" y="3" width="16" height="14" rx="3" />
196+ <path d="M4 11h16M8 21l2-4M16 21l-2-4M9 7h6" />
197+ <path d="M8.5 14h.01M15.5 14h.01" />
198+ </>),
199+ folder: <path d="M3 6h6l2 2.5h10V19H3z" />,
200+ doc: (<>
201+ <path d="M6 3h8l4 4v14H6z" />
202+ <path d="M14 3v4h4" />
203+ <path d="M9 12h6M9 15.5h6" />
204+ </>),
205+ layers: (<>
206+ <path d="m12 3 9 5-9 5-9-5 9-5z" /><path d="m3 13 9 5 9-5M3 17.5l9 5 9-5" />
207+ </>),
208+ info: (<>
209+ <circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 8h.01" />
210+ </>),
211+ ruler: (<>
212+ <path d="M3.5 16 16 3.5l4.5 4.5L8 20.5 3.5 16z" />
213+ <path d="M7.5 16l1.5 1.5M10.5 13l1.5 1.5M13.5 10l1.5 1.5M16.5 7 18 8.5" />
214+ </>),
215+ key: (<>
216+ <circle cx="8" cy="15" r="4.5" />
217+ <path d="m11.2 11.8 8.3-8.3M15.5 7.5l3 3M18 5l2 2" />
218+ </>),
219+ bank: (<>
220+ <path d="m3 9.5 9-5.5 9 5.5H3z" />
221+ <path d="M5 9.5v8M9.7 9.5v8M14.3 9.5v8M19 9.5v8M3.5 20.5h17" />
222+ </>),
223+ percent: (<>
224+ <path d="M19 5 5 19" /><circle cx="7" cy="7" r="2.5" /><circle cx="17" cy="17" r="2.5" />
225+ </>),
226+ car: (<>
227+ <path d="M4 16v-4.5l2-5A1.6 1.6 0 0 1 7.5 5.5h9a1.6 1.6 0 0 1 1.5 1l2 5V16" />
228+ <path d="M3 16h18M6.2 16v2.6M17.8 16v2.6M4.5 11.5h15" />
229+ <path d="M7.5 13.8h.01M16.5 13.8h.01" />
230+ </>),
231+ hammer: (<>
232+ <path d="m14.5 3.5 6 6-2.5 2.5-6-6z" />
233+ <path d="M13 8 4.5 16.5a1.8 1.8 0 0 0 2.5 2.5L15.5 10.5" />
234+ </>),
235+ store: (<>
236+ <path d="M3 9 5 4h14l2 5M3 9h18v3a2.5 2.5 0 0 1-5 0 2.5 2.5 0 0 1-5 0 2.5 2.5 0 0 1-5 0 2.5 2.5 0 0 1-3 2.4V9z" />
237+ <path d="M5 14v6h14v-6M10 20v-4h4v4" />
238+ </>),
239+ coffee: <path d="M4 9h12v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9zM16 10h2a2.5 2.5 0 0 1 0 5h-2M7 3v3M11 3v3" />,
240+ book: (<>
241+ <path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2V5z" />
242+ <path d="M4 19a2 2 0 0 0 2 2h13" />
243+ </>),
244+ dumbbell: <path d="M6.7 6.7v10.6M17.3 6.7v10.6M3.5 9.2v5.6M20.5 9.2v5.6M6.7 12h10.6" />,
245+ baby: (<>
246+ <circle cx="12" cy="9" r="5" />
247+ <path d="M7 20a5 5 0 0 1 10 0M10 8.5h.01M14 8.5h.01M10.5 11.5c.8.7 2.2.7 3 0" />
248+ </>),
249+ history: (<>
250+ <path d="M3.5 12a8.5 8.5 0 1 0 2.5-6" />
251+ <path d="M3.5 4v4h4M12 7.5V12l3 2" />
252+ </>),
253+};
254+
255+export type IconName = keyof typeof P;
256+
257+export function Ico({ name, size = 18, className = "", stroke = 1.7 }:
258+ { name: IconName | string; size?: number; className?: string; stroke?: number }) {
259+ const paths = P[name as IconName];
260+ if (!paths) return null;
261+ return (
262+ <svg
263+ className={`ico ${className}`}
264+ width={size} height={size} viewBox="0 0 24 24"
265+ fill="none" stroke="currentColor" strokeWidth={stroke}
266+ strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
267+ >
268+ {paths}
269+ </svg>
270+ );
271+}
272+
273+/** Cœur (favoris) — plein quand actif ; même grille que le reste. */
274+export function IcoHeart({ size = 18, filled = false, className = "" }:
275+ { size?: number; filled?: boolean; className?: string }) {
276+ return (
277+ <svg className={`ico ${className}`} width={size} height={size} viewBox="0 0 24 24"
278+ fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth={1.7}
279+ strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
280+ <path d="M12 20.5C7 16.5 3.5 13 3.5 9.3 3.5 6.8 5.5 5 7.8 5c1.7 0 3.2 1 4.2 2.6C13 6 14.5 5 16.2 5c2.3 0 4.3 1.8 4.3 4.3 0 3.7-3.5 7.2-8.5 11.2z" />
281+ </svg>
282+ );
283+}
284+
285+/** Version « chaîne HTML » pour les popups MapLibre (hors React). */
286+export function icoHTML(name: IconName, size = 30): string {
287+ const d: Record<string, string> = {
288+ home: '<path d="M3.5 10.6 12 3.4l8.5 7.2"/><path d="M5.6 9.4V20h12.8V9.4"/><path d="M10 20v-5.6h4V20"/>',
289+ };
290+ return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">${d[name] ?? d.home}</svg>`;
291+}
added frontend/src/fiche/BottomSheet.tsx +68 −0
@@ -0,0 +1,68 @@
1+// -----------------------------------------------------------------------------
2+// Job·Ka — Agrégateur d'offres d'emploi (province de Québec)
3+// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
4+// fiche/BottomSheet.tsx : panneau générique — bottom sheet sur mobile (hauteur
5+// initiale 68 % du viewport, glisser vers le haut = plein écran, glisser
6+// vers le bas = fermeture), modale centrée à partir de 900 px (CSS).
7+// Portail à la racine, verrou du défilement (.ka-scroll-lock), Escape,
8+// focus initial, aria-modal. Utilisé pour lieux, stations, assistant Ka.
9+// -----------------------------------------------------------------------------
10+import { ReactNode, useEffect, useRef, useState } from "react";
11+import { createPortal } from "react-dom";
12+import { Ico } from "../components/Icons";
13+
14+export default function BottomSheet({ open, onClose, title, sub, children, footer, tall = false }: {
15+ open: boolean; onClose: () => void; title: ReactNode; sub?: ReactNode;
16+ children: ReactNode; footer?: ReactNode; tall?: boolean;
17+}) {
18+ const [full, setFull] = useState(tall);
19+ const panel = useRef<HTMLDivElement>(null);
20+ const drag = useRef<{ y0: number; t0: number } | null>(null);
21+
22+ useEffect(() => {
23+ if (!open) return;
24+ setFull(tall);
25+ document.documentElement.classList.add("ka-scroll-lock");
26+ const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
27+ window.addEventListener("keydown", onKey);
28+ const t = setTimeout(() => panel.current?.focus(), 30);
29+ return () => {
30+ document.documentElement.classList.remove("ka-scroll-lock");
31+ window.removeEventListener("keydown", onKey);
32+ clearTimeout(t);
33+ };
34+ }, [open, onClose, tall]);
35+
36+ if (!open) return null;
37+
38+ const onDown = (e: React.PointerEvent) => { drag.current = { y0: e.clientY, t0: Date.now() }; };
39+ const onUp = (e: React.PointerEvent) => {
40+ if (!drag.current) return;
41+ const dy = e.clientY - drag.current.y0;
42+ drag.current = null;
43+ if (dy > 90) onClose();
44+ else if (dy < -60) setFull(true);
45+ };
46+
47+ return createPortal(
48+ <>
49+ <div className="jk-sheet-backdrop" onClick={onClose} aria-hidden="true" />
50+ <div className={`jk-sheet ${full ? "full" : ""}`} role="dialog" aria-modal="true"
51+ aria-label={typeof title === "string" ? title : undefined} ref={panel} tabIndex={-1}>
52+ <div className="jk-sheet-handle" onPointerDown={onDown} onPointerUp={onUp} onPointerCancel={onUp} />
53+ <div className="jk-sheet-head" onPointerDown={onDown} onPointerUp={onUp} onPointerCancel={onUp}>
54+ <div style={{ minWidth: 0 }}>
55+ <h3 className="jk-sheet-title">{title}</h3>
56+ {sub && <p className="jk-sheet-sub">{sub}</p>}
57+ </div>
58+ <button type="button" className="jk-sheet-x" onClick={onClose} aria-label="Fermer">
59+ <Ico name="close" size={18} />
60+ </button>
61+ </div>
62+ <div className="jk-sheet-body">{children}</div>
63+ {footer && <div className="jk-sheet-foot">{footer}</div>}
64+ </div>
65+ </>,
66+ document.body,
67+ );
68+}
added frontend/src/fiche/Closing.tsx +200 −0
@@ -0,0 +1,200 @@
1+/**
2+ * =============================================================================
3+ * Job·Ka — Groupe KA
4+ * Auteur : Simon-Pierre Boucher
5+ * Contact : contact@spboucher.ai
6+ * Fichier : frontend/src/fiche/Closing.tsx
7+ * Rôle : « En bref », Où travailler (carte OSM), Dossier de l'offre,
8+ * Sources et méthodologie, CTA sticky mobile, aside desktop et
9+ * « Demander à Ka » (widget KA Agent partagé).
10+ * Créé : 2026-09-07
11+ * =============================================================================
12+ */
13+import { useEffect, useMemo, useState } from "react";
14+import { Job, displayTitle, formatDate, formatSalary } from "../api";
15+import { Ico, IcoHeart } from "../components/Icons";
16+import BottomSheet from "./BottomSheet";
17+import { EmployerLogo, SalaryCapsule } from "./JobHero";
18+import { ComparaisonSalaire, Constat } from "./synthese";
19+import { Accordion, SectionCard, SkeletonLines, SourceLine, relTime } from "./ui";
20+
21+export function BriefList({ items, compact = false }: { items: Constat[]; compact?: boolean }) {
22+ const glyph = (t: Constat["tone"]) => (t === "good" ? "✓" : t === "bad" ? "✕" : t === "warn" ? "!" : "○");
23+ return (
24+ <ul className="jk-brief">
25+ {items.map((c) => (
26+ <li key={c.cle}>
27+ <span className={`jk-brief-ico ${c.tone === "info" ? "neutral" : c.tone}`} aria-hidden="true">{glyph(c.tone)}</span>
28+ <div><div className="jk-brief-t">{c.titre}</div>{!compact && c.detail && <div className="jk-brief-d">{c.detail}</div>}</div>
29+ </li>
30+ ))}
31+ </ul>
32+ );
33+}
34+
35+export function Summary({ items, loading }: { items: Constat[]; loading: boolean }) {
36+ return (
37+ <SectionCard id="resume" title="En bref">
38+ {items.length > 0 ? <BriefList items={items} /> : loading ? <SkeletonLines n={3} /> : <p className="jk-fine">Pas encore de synthèse pour cette offre.</p>}
39+ </SectionCard>
40+ );
41+}
42+
43+export function LocationCard({ job }: { job: Job }) {
44+ const src = useMemo(() => {
45+ if (job.lat == null || job.lng == null) return null;
46+ const d = 0.02;
47+ const bbox = [job.lng - d, job.lat - d, job.lng + d, job.lat + d].join(",");
48+ return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${job.lat},${job.lng}`;
49+ }, [job.lat, job.lng]);
50+ if (!src) return null;
51+ return (
52+ <SectionCard id="carte" title="Où travailler" icon={<Ico name="pin" size={18} />}
53+ sub={`${[job.address, job.city, job.region].filter(Boolean).join(" · ")}${job.work_mode === "teletravail" ? " — poste en télétravail" : ""}`}>
54+ <div className="jk-map"><iframe className="jk-map-embed" src={src} title={`Carte — ${job.employer}`} loading="lazy" /></div>
55+ <SourceLine name="OpenStreetMap" href="https://www.openstreetmap.org" date="position géocodée de l'adresse publiée" />
56+ </SectionCard>
57+ );
58+}
59+
60+export function Dossier({ job }: { job: Job }) {
61+ const first = job.first_seen ? new Date(job.first_seen * 1000).toLocaleDateString("fr-CA", { day: "numeric", month: "long", year: "numeric" }) : null;
62+ return (
63+ <SectionCard id="dossier" title="Dossier de l'offre" icon={<Ico name="folder" size={18} />} sub="Ce que Job·Ka observe réellement : employeur, suivi, identifiants">
64+ <Accordion title={<><Ico name="store" size={15} className="jk-acc-ico" />Employeur</>} meta={job.employer}>
65+ <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
66+ <EmployerLogo job={job} size={44} />
67+ <div><b style={{ fontSize: 15 }}>{job.employer}</b>{typeof job.employer_jobs === "number" && job.employer_jobs > 0 && <div className="jk-fine" style={{ margin: 0 }}>{job.employer_jobs} offre{job.employer_jobs > 1 ? "s" : ""} active{job.employer_jobs > 1 ? "s" : ""} suivie{job.employer_jobs > 1 ? "s" : ""} par Job·Ka</div>}</div>
68+ </div>
69+ <p style={{ margin: 0 }}>{job.is_direct !== false ? "Offre collectée directement sur la page carrière de l'employeur" : `Offre relayée par ${job.ats || job.source}`}{job.ats ? ` · plateforme ${job.ats}` : ""}. <a href="/sources">Tous les employeurs suivis</a></p>
70+ </Accordion>
71+ <Accordion title={<><Ico name="history" size={15} className="jk-acc-ico" />Suivi Job·Ka</>} meta={first ? `depuis le ${first}` : undefined}>
72+ <div className="jk-facts-rows" style={{ marginTop: 0 }}>
73+ {first && <div className="jk-kv"><span className="k">Première collecte</span><span className="v">{first}</span></div>}
74+ {job.date_posted && <div className="jk-kv"><span className="k">Date de publication (employeur)</span><span className="v">{formatDate(job.date_posted)}</span></div>}
75+ <div className="jk-kv"><span className="k">Statut</span><span className="v">{job.active ? "En ligne chez l'employeur" : "Retirée"}</span></div>
76+ {job.dup_sources && job.dup_sources.length > 0 && <div className="jk-kv"><span className="k">Aussi publiée sur</span><span className="v">{job.dup_sources.join(", ")}</span></div>}
77+ </div>
78+ </Accordion>
79+ <Accordion title={<><Ico name="tag" size={15} className="jk-acc-ico" />Identifiants</>} meta={job.external_id}>
80+ <div className="jk-facts-rows" style={{ marginTop: 0 }}>
81+ <div className="jk-kv"><span className="k">Identifiant source</span><span className="v">{job.external_id}</span></div>
82+ <div className="jk-kv"><span className="k">Identifiant Job·Ka</span><span className="v">{job.uid}</span></div>
83+ <div className="jk-kv"><span className="k">Offre originale</span><span className="v"><a href={job.url} target="_blank" rel="noopener noreferrer">{job.source} ↗</a></span></div>
84+ </div>
85+ </Accordion>
86+ </SectionCard>
87+ );
88+}
89+
90+export function Sources({ job, onShare }: { job: Job; onShare: () => void }) {
91+ const maj = relTime(job.first_seen ?? null);
92+ const srcs = [
93+ { n: job.employer, r: "Offre, salaire, exigences et description (source originale)", d: maj ?? undefined, href: job.url },
94+ { n: "Job·Ka", r: "Référence de marché par catégorie, normalisation du titre et des conditions, détection des doublons — calculs maison, indicatifs" },
95+ { n: "OpenStreetMap", r: "Carte de localisation" },
96+ ];
97+ return (
98+ <SectionCard id="sources" title="Sources et méthodologie" icon={<Ico name="folder" size={18} />} sub="Chaque donnée de cette fiche renvoie à sa source ; les calculs Job·Ka sont indicatifs et documentés">
99+ <ul className="jk-sources">
100+ {srcs.map((s) => (
101+ <li key={s.n}>
102+ <span className="n">{s.href ? <a href={s.href} target="_blank" rel="noopener noreferrer">{s.n}</a> : s.n}</span>
103+ {s.d && <span className="d">{s.d}</span>}
104+ <span className="r">{s.r}</span>
105+ </li>
106+ ))}
107+ </ul>
108+ <div className="jk-end" style={{ marginTop: 14 }}>
109+ <a href="/sources"><Ico name="folder" size={18} />Employeurs suivis<small>Toutes les sources Job·Ka</small></a>
110+ <a href={`/contact?sujet=${encodeURIComponent(`Erreur sur l'offre ${job.uid}`)}`}><Ico name="alert" size={18} />Signaler une erreur<small>Salaire, lieu, lien…</small></a>
111+ <button type="button" onClick={onShare}><Ico name="share" size={18} />Partager cette offre<small>Lien de la fiche</small></button>
112+ <a href="/stats"><Ico name="chart" size={18} />Statistiques du marché<small>Salaires, régions, catégories</small></a>
113+ </div>
114+ <p className="jk-fine" style={{ marginTop: 12 }}>Les offres sont celles publiées par les employeurs — chaque fiche renvoie à l'offre originale. Job·Ka est un agrégateur indépendant, sans intermédiation.</p>
115+ </SectionCard>
116+ );
117+}
118+
119+export function usePastElement(watch: React.RefObject<HTMLElement>): boolean {
120+ const [past, setPast] = useState(false);
121+ useEffect(() => {
122+ const check = () => { const el = watch.current; if (el) setPast(el.getBoundingClientRect().bottom < 0); };
123+ check();
124+ window.addEventListener("scroll", check, { passive: true });
125+ window.addEventListener("resize", check);
126+ return () => { window.removeEventListener("scroll", check); window.removeEventListener("resize", check); };
127+ }, [watch]);
128+ return past;
129+}
130+
131+export function StickyCTA({ job, cmp, show }: { job: Job; cmp: ComparaisonSalaire | null; show: boolean }) {
132+ const salaire = formatSalary(job);
133+ return (
134+ <div className={`jk-cta-bar ${show ? "show" : ""}`} aria-hidden={!show}>
135+ <div className="jk-cta-txt">
136+ <div className="jk-cta-price" style={salaire ? undefined : { fontSize: 14 }}>{salaire ?? displayTitle(job)}</div>
137+ {cmp ? <div className={`jk-cta-sub ${cmp.tone === "good" ? "good" : ""}`}>{cmp.court}</div> : <div className="jk-cta-sub">{job.employer}</div>}
138+ </div>
139+ <a className="jk-btn jk-btn-primary" href={job.apply_url || job.url} target="_blank" rel="noopener noreferrer" tabIndex={show ? 0 : -1}>Postuler <Ico name="external" size={15} /></a>
140+ </div>
141+ );
142+}
143+
144+export function DesktopAside({ job, cmp, brief, fav, onFav, onShare }: {
145+ job: Job; cmp: ComparaisonSalaire | null; brief: Constat[]; fav: boolean; onFav: () => void; onShare: () => void;
146+}) {
147+ const salaire = formatSalary(job);
148+ return (
149+ <aside className="jk-aside" aria-label="Résumé et actions">
150+ <div className="jk-card jk-aside-card">
151+ <div>
152+ <div className="jk-price" style={salaire ? undefined : { fontSize: 20 }}>{salaire ?? "Salaire non affiché"}</div>
153+ <div className="jk-price-row" style={{ marginTop: 8 }}><SalaryCapsule cmp={cmp} /></div>
154+ </div>
155+ <div className="jk-aside-addr"><b style={{ color: "var(--jk-text)" }}>{displayTitle(job)}</b><br />{[job.employer, job.location_label || job.city].filter(Boolean).join(" · ")}</div>
156+ <a className="jk-btn jk-btn-primary" href={job.apply_url || job.url} target="_blank" rel="noopener noreferrer">Postuler chez {job.employer} <Ico name="external" size={16} /></a>
157+ <div className="jk-actions">
158+ <button type="button" className={`jk-btn jk-btn-ghost ${fav ? "on" : ""}`} style={{ flex: 1 }} aria-pressed={fav} onClick={onFav}><IcoHeart size={17} filled={fav} /> {fav ? "Favori" : "Favoris"}</button>
159+ <button type="button" className="jk-btn jk-btn-ghost" style={{ flex: 1 }} onClick={onShare}><Ico name="share" size={16} /> Partager</button>
160+ </div>
161+ <button type="button" className="jk-btn jk-btn-ghost jk-ka-inline" onClick={() => window.dispatchEvent(new Event("jk:askka"))}><Ico name="sparkles" size={16} /> Demander à Ka</button>
162+ {brief.length > 0 && <><hr className="jk-aside-sep" /><BriefList items={brief.slice(0, 4)} compact /></>}
163+ {job.date_posted && <div className="jk-aside-meta">Publiée le {formatDate(job.date_posted)} · {job.ats || job.source}</div>}
164+ </div>
165+ </aside>
166+ );
167+}
168+
169+const SUGGESTIONS = ["Ce salaire est-il compétitif ?", "Résume les exigences du poste", "Quelles questions poser en entrevue ?", "Trouve des offres similaires", "Aide-moi à adapter mon CV"];
170+function envoyerAKa(question: string): boolean {
171+ const btn = document.querySelector<HTMLButtonElement>(".kaa-btn");
172+ const ta = document.querySelector<HTMLTextAreaElement>(".kaa-panel textarea");
173+ const send = document.querySelector<HTMLButtonElement>(".kaa-in button");
174+ if (!btn || !ta || !send) return false;
175+ btn.click(); ta.value = question; setTimeout(() => send.click(), 60);
176+ return true;
177+}
178+export function KaAssistant({ job, hidden }: { job: Job; hidden?: boolean }) {
179+ const [open, setOpen] = useState(false);
180+ const [q, setQ] = useState("");
181+ const [err, setErr] = useState(false);
182+ useEffect(() => { const on = () => setOpen(true); window.addEventListener("jk:askka", on); return () => window.removeEventListener("jk:askka", on); }, []);
183+ const contexte = () => `(Offre consultée sur Job·Ka : ${displayTitle(job)} chez ${job.employer}${job.city ? `, ${job.city}` : ""}${formatSalary(job) ? ` — ${formatSalary(job)}` : ""} — https://www.job-ka.com/emploi/${encodeURIComponent(job.uid)})`;
184+ const poser = (question: string) => { const ok = envoyerAKa(`${question}\n\n${contexte()}`); if (ok) { setOpen(false); setQ(""); setErr(false); } else setErr(true); };
185+ return (
186+ <>
187+ <button type="button" className={`jk-ka-btn ${hidden ? "hide" : ""}`} onClick={() => setOpen(true)} aria-label="Demander à Ka, l'assistant Groupe KA"><Ico name="sparkles" size={16} /> Demander à Ka</button>
188+ <BottomSheet open={open} onClose={() => setOpen(false)} title="Demander à Ka" sub="Assistant Groupe KA · connaît cette fiche"
189+ footer={<form className="jk-ka-in" onSubmit={(e) => { e.preventDefault(); if (q.trim()) poser(q.trim()); }}>
190+ <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Posez votre question sur cette offre…" aria-label="Votre question" />
191+ <button type="submit" aria-label="Envoyer" disabled={!q.trim()}><Ico name="chevright" size={20} /></button></form>}>
192+ <div className="jk-ka-intro"><span className="jk-ka-avatar" aria-hidden="true"><Ico name="sparkles" size={18} /></span>
193+ <p>Je peux situer ce salaire dans le marché, résumer les exigences, préparer l'entrevue et chercher des offres semblables chez d'autres employeurs.</p></div>
194+ <div className="jk-ka-ctx">{job.company_logo && <img src={job.company_logo} alt="" style={{ objectFit: "contain", background: "#fff" }} />}<span style={{ minWidth: 0 }}><b>{displayTitle(job)}</b>{[job.employer, job.city, formatSalary(job)].filter(Boolean).join(" · ")}</span></div>
195+ <div className="jk-ka-sugs">{SUGGESTIONS.map((s) => <button type="button" className="jk-ka-sug" key={s} onClick={() => poser(s)}>{s} <Ico name="chevright" size={16} /></button>)}</div>
196+ {err && <p className="jk-note warn">L'assistant n'est pas encore chargé — réessayez dans un instant.</p>}
197+ </BottomSheet>
198+ </>
199+ );
200+}
added frontend/src/fiche/JobFacts.tsx +90 −0
@@ -0,0 +1,90 @@
1+/**
2+ * =============================================================================
3+ * Job·Ka — Groupe KA
4+ * Auteur : Simon-Pierre Boucher
5+ * Contact : contact@spboucher.ai
6+ * Fichier : frontend/src/fiche/JobFacts.tsx
7+ * Rôle : « Le poste » — grille icône/valeur (mode, type, séniorité, langue,
8+ * expérience, scolarité, catégorie, région), rangées (publiée, date
9+ * limite, plateforme, lieu), avantages, description (tronquée),
10+ * champs bruts des exigences en accordéon.
11+ * Créé : 2026-09-07
12+ * =============================================================================
13+ */
14+import { ReactNode, useState } from "react";
15+import { Job, LANG_FR, MODE_FR, SENIORITY_FR, TYPE_FR, agoLabel, daysSince, formatDate } from "../api";
16+import { Ico } from "../components/Icons";
17+import { Accordion, MoreButton, SectionCard } from "./ui";
18+
19+export default function JobFacts({ job }: { job: Job }) {
20+ const [open, setOpen] = useState(false);
21+ const r = job.requirements ?? {};
22+ const facts: { ico: ReactNode; v: string; l: string }[] = [];
23+ if (job.work_mode) facts.push({ ico: <Ico name="home" size={17} />, v: MODE_FR[job.work_mode] ?? job.work_mode, l: "Mode de travail" });
24+ if (job.employment_type) facts.push({ ico: <Ico name="calendar" size={17} />, v: TYPE_FR[job.employment_type] ?? job.employment_type, l: "Type d'emploi" });
25+ if (job.seniority) facts.push({ ico: <Ico name="layers" size={17} />, v: SENIORITY_FR[job.seniority] ?? job.seniority, l: "Niveau" });
26+ if (job.language) facts.push({ ico: <Ico name="book" size={17} />, v: LANG_FR[job.language] ?? job.language, l: "Langue de l'offre" });
27+ if (typeof r.experience_years === "number") facts.push({ ico: <Ico name="history" size={17} />, v: `${r.experience_years} an${r.experience_years > 1 ? "s" : ""} min.`, l: "Expérience exigée" });
28+ if (typeof r.education === "string" && r.education) facts.push({ ico: <Ico name="school" size={17} />, v: r.education, l: "Scolarité exigée" });
29+ if (Array.isArray(r.languages) && r.languages.length) facts.push({ ico: <Ico name="people" size={17} />, v: r.languages.length === 2 ? "Bilingue" : r.languages.join(", "), l: "Langues exigées" });
30+ if (job.category) facts.push({ ico: <Ico name="tag" size={17} />, v: job.category, l: "Catégorie" });
31+ if (job.region) facts.push({ ico: <Ico name="pin" size={17} />, v: job.region, l: "Région" });
32+
33+ const days = daysSince(job.date_posted);
34+ const rows: [string, string][] = [];
35+ if (job.location_label || job.address) rows.push(["Lieu", job.location_label || [job.address, job.city].filter(Boolean).join(", ")]);
36+ if (job.date_posted) rows.push(["Publiée", `${formatDate(job.date_posted)}${days != null ? ` (${agoLabel(days)})` : ""}`]);
37+ if (job.date_deadline) rows.push(["Date limite", formatDate(job.date_deadline)]);
38+ if (job.ats) rows.push(["Plateforme de recrutement", job.ats]);
39+ const det = job.details ?? {};
40+ if (typeof det.industry === "string" && det.industry) rows.push(["Secteur", det.industry as string]);
41+ if (typeof det.employment_label === "string" && det.employment_label) rows.push(["Statut annoncé", det.employment_label as string]);
42+
43+ const texte = (job.description || "").trim();
44+ const long = texte.length > 700;
45+ const bruts = Object.entries(r).filter(([k, v]) => !["experience_years", "education", "languages"].includes(k) && v != null && String(v).trim() && typeof v !== "object");
46+
47+ return (
48+ <SectionCard id="poste" title="Le poste">
49+ {facts.length > 0 && (
50+ <div className="jk-facts" role="list">
51+ {facts.map((x) => (
52+ <div className="jk-fact" role="listitem" key={x.l}>
53+ <span className="jk-fact-ico" aria-hidden="true">{x.ico}</span>
54+ <span className="jk-fact-txt"><div className="jk-fact-v" title={x.v}>{x.v}</div><div className="jk-fact-l">{x.l}</div></span>
55+ </div>
56+ ))}
57+ </div>
58+ )}
59+ {rows.length > 0 && (
60+ <div className="jk-facts-rows">
61+ {rows.map(([k, v]) => <div className="jk-kv" key={k}><span className="k">{k}</span><span className="v">{v}</span></div>)}
62+ </div>
63+ )}
64+ {(job.benefits?.length ?? 0) > 0 && (
65+ <>
66+ <h3 className="jk-card-sub jk-subtitle" id="avantages">Avantages annoncés <small>· {job.benefits.length}</small></h3>
67+ <div className="jk-amen" role="list">
68+ {job.benefits.map((b) => (
69+ <div className="jk-amen-it" role="listitem" key={b}><span className="jk-amen-ico" aria-hidden="true"><Ico name="check" size={14} /></span><span className="jk-amen-txt">{b}</span></div>
70+ ))}
71+ </div>
72+ </>
73+ )}
74+ <h3 className="jk-card-sub jk-subtitle" id="description">Description du poste</h3>
75+ {texte ? (
76+ <>
77+ <div className={`jk-desc ${long && !open ? "clamped" : ""}`}><div className="jk-desc-body"><p>{texte}</p></div></div>
78+ {long && <MoreButton onClick={() => setOpen(!open)} expanded={open}>{open ? "Réduire" : "Lire la suite"}</MoreButton>}
79+ </>
80+ ) : <p className="jk-fine" style={{ marginTop: 0 }}>L'employeur ne fournit pas de description exploitable — consultez l'offre originale.</p>}
81+ {bruts.length > 0 && (
82+ <Accordion title="Autres champs publiés par l'employeur" meta={`${bruts.length}`}>
83+ <div className="jk-facts-rows" style={{ marginTop: 0 }}>
84+ {bruts.map(([k, v]) => <div className="jk-kv" key={k}><span className="k">{k}</span><span className="v">{String(v)}</span></div>)}
85+ </div>
86+ </Accordion>
87+ )}
88+ </SectionCard>
89+ );
90+}
added frontend/src/fiche/JobHero.tsx +78 −0
@@ -0,0 +1,78 @@
1+/**
2+ * =============================================================================
3+ * Job·Ka — Groupe KA
4+ * Auteur : Simon-Pierre Boucher
5+ * Contact : contact@spboucher.ai
6+ * Fichier : frontend/src/fiche/JobHero.tsx
7+ * Rôle : Héro de la fiche — logo + employeur · lieu, salaire en exergue
8+ * (+ équivalent annuel), capsules (marché, nouveau, offre directe),
9+ * titre du poste (H1) + résumé, actions (favoris · partager ·
10+ * Postuler). Ordre DOM = ordre visuel.
11+ * Créé : 2026-09-07
12+ * =============================================================================
13+ */
14+import { useState } from "react";
15+import { Job, daysSince, displayTitle, formatSalary, yearlyEquiv } from "../api";
16+import { Ico, IcoHeart } from "../components/Icons";
17+import { ComparaisonSalaire, ligneResume } from "./synthese";
18+import { NBSP } from "./ui";
19+
20+export function SalaryCapsule({ cmp, short = false }: { cmp: ComparaisonSalaire | null; short?: boolean }) {
21+ if (!cmp) return null;
22+ return (
23+ <span className={`jk-capsule ${cmp.tone}`}>
24+ {short ? <b>{cmp.court}</b> : <><b>{cmp.label}</b><span aria-hidden="true">·</span>{cmp.court}</>}
25+ </span>
26+ );
27+}
28+
29+export function EmployerLogo({ job, size = 56 }: { job: Job; size?: number }) {
30+ const [ok, setOk] = useState(true);
31+ if (!job.company_logo || !ok)
32+ return <span className="jk-logo jk-logo-fallback" style={{ width: size, height: size }} aria-hidden="true">{(job.employer || "?").charAt(0).toUpperCase()}</span>;
33+ return <img className="jk-logo" src={job.company_logo} alt={`Logo ${job.employer}`} style={{ width: size, height: size }} onError={() => setOk(false)} />;
34+}
35+
36+export default function JobHero({ job, cmp, fav, onFav, onShare, actionsRef }: {
37+ job: Job; cmp: ComparaisonSalaire | null; fav: boolean;
38+ onFav: () => void; onShare: () => void; actionsRef: React.RefObject<HTMLDivElement>;
39+}) {
40+ const salaire = formatSalary(job);
41+ const yearly = yearlyEquiv(job);
42+ const days = daysSince(job.date_posted);
43+ const resume = ligneResume(job);
44+ return (
45+ <header className="jk-hero" aria-label="Résumé de l'offre">
46+ <div className="jk-hero-emp">
47+ <EmployerLogo job={job} />
48+ <div style={{ minWidth: 0 }}>
49+ <div className="jk-kicker">{job.employer}{job.location_label ? ` — ${job.location_label}` : job.city ? ` — ${job.city}` : ""}</div>
50+ <div className="jk-price">
51+ {salaire ?? <span style={{ fontSize: "0.62em", fontWeight: 600, color: "var(--jk-text-2)" }}>Salaire non affiché</span>}
52+ {yearly && <small>{yearly}</small>}
53+ </div>
54+ </div>
55+ </div>
56+ <div className="jk-price-row" style={{ marginTop: 8 }}>
57+ <SalaryCapsule cmp={cmp} />
58+ {days != null && days <= 3 && <span className="jk-capsule brand">{days === 0 ? "Aujourd'hui" : "Nouveau"}</span>}
59+ {job.is_direct !== false && <span className="jk-capsule ok">Offre directe</span>}
60+ {job.active === 0 && <span className="jk-capsule high">Offre retirée</span>}
61+ {job.ka_reco && <span className="jk-capsule brand">Recommandé pour vous</span>}
62+ </div>
63+ <h1 className="jk-h1 jk-h1-big">
64+ {displayTitle(job)}
65+ {resume.length > 0 && <span className="jk-city">{resume.join(" · ")}</span>}
66+ </h1>
67+ <div className="jk-actions" ref={actionsRef}>
68+ <button type="button" className={`jk-btn jk-btn-ghost jk-btn-icon ${fav ? "on" : ""}`} aria-pressed={fav}
69+ aria-label={fav ? "Retirer des favoris" : "Ajouter aux favoris"} onClick={onFav}><IcoHeart size={19} filled={fav} /></button>
70+ <button type="button" className="jk-btn jk-btn-ghost jk-btn-icon" aria-label="Partager" onClick={onShare}><Ico name="share" size={18} /></button>
71+ <a className="jk-btn jk-btn-primary" href={job.apply_url || job.url} target="_blank" rel="noopener noreferrer">
72+ Postuler <Ico name="external" size={16} /><span className="visually-hidden"> chez {job.employer}</span>
73+ </a>
74+ </div>
75+ <p className="jk-fine" style={{ margin: "2px 0 0" }}>La candidature se fait chez l'employeur{job.ats ? ` (${job.ats})` : ""} — Job·Ka n'est pas un intermédiaire.{NBSP}</p>
76+ </header>
77+ );
78+}
added frontend/src/fiche/SalaryCard.tsx +80 −0
@@ -0,0 +1,80 @@
1+/**
2+ * =============================================================================
3+ * Job·Ka — Groupe KA
4+ * Auteur : Simon-Pierre Boucher
5+ * Contact : contact@spboucher.ai
6+ * Fichier : frontend/src/fiche/SalaryCard.tsx
7+ * Rôle : « Salaire et marché » — KPI (salaire affiché, médiane de la
8+ * catégorie, fourchette P25–P75), jauge de position du point médian
9+ * de l'offre dans la fenêtre interquartile, historique du salaire
10+ * affiché, méthodologie. Jamais d'estimation : sans salaire publié,
11+ * la carte le dit et montre seulement le marché.
12+ * Créé : 2026-09-07
13+ * =============================================================================
14+ */
15+import { Job, compactMoney, formatSalary, yearlyEquiv } from "../api";
16+import { Ico } from "../components/Icons";
17+import { SalaryCapsule } from "./JobHero";
18+import { ComparaisonSalaire } from "./synthese";
19+import { Accordion, SectionCard, StatTile, NBSP } from "./ui";
20+
21+function Gauge({ p25, p75, mid }: { p25: number; p75: number; mid: number }) {
22+ const lo = Math.min(p25 * 0.75, mid * 0.95), hi = Math.max(p75 * 1.25, mid * 1.05);
23+ const W = 320, H = 54;
24+ const x = (v: number) => 8 + ((Math.min(Math.max(v, lo), hi) - lo) / (hi - lo)) * (W - 16);
25+ const anchor = (px: number) => (px < 60 ? "start" : px > W - 60 ? "end" : "middle");
26+ return (
27+ <div className="jk-gauge">
28+ <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`Fenêtre P25–P75 de ${compactMoney(p25)} à ${compactMoney(p75)}, cette offre à ${compactMoney(mid)} par an`}>
29+ <rect className="jk-gauge-track" x="8" y="24" width={W - 16} height="8" rx="4" />
30+ <rect className="jk-gauge-box" x={x(p25)} y="22" width={Math.max(4, x(p75) - x(p25))} height="12" rx="4" />
31+ <text className="jk-gauge-txt" x={x(p25)} y="12" textAnchor={anchor(x(p25))}>P25 {compactMoney(p25)}</text>
32+ <text className="jk-gauge-txt" x={x(p75)} y="12" textAnchor={anchor(x(p75))}>P75 {compactMoney(p75)}</text>
33+ <circle className="jk-gauge-me" cx={x(mid)} cy="28" r="7" />
34+ <text className="jk-gauge-txt me" x={x(mid)} y="52" textAnchor={anchor(x(mid))}>cette offre ≈ {compactMoney(mid)}/an</text>
35+ </svg>
36+ </div>
37+ );
38+}
39+
40+export default function SalaryCard({ job, cmp }: { job: Job; cmp: ComparaisonSalaire | null }) {
41+ const ctx = job.salary_context;
42+ const salaire = formatSalary(job);
43+ const yearly = yearlyEquiv(job);
44+ const hist = (job.salary_history ?? []).filter((h) => h.s_min != null);
45+ if (!salaire && !ctx) return null;
46+ return (
47+ <SectionCard id="salaire" title="Salaire et marché" icon={<Ico name="scale" size={18} />} aside={cmp && <SalaryCapsule cmp={cmp} short />}>
48+ <div className="jk-kpis cols-3">
49+ <StatTile accent value={salaire ?? "Non affiché"} label={salaire ? (yearly ? `Salaire affiché · ${yearly}` : "Salaire affiché par l'employeur") : "L'employeur n'a pas publié de salaire"} />
50+ {ctx && <StatTile value={`${compactMoney(ctx.median)}/an`} label={`Médiane · ${ctx.category || "toutes catégories"}`} />}
51+ {ctx && <StatTile value={`${compactMoney(ctx.p25)} – ${compactMoney(ctx.p75)}`} label={`Fourchette P25–P75 · ${ctx.n.toLocaleString("fr-CA")} offres`} />}
52+ </div>
53+ {ctx && ctx.job_mid != null && <Gauge p25={ctx.p25} p75={ctx.p75} mid={ctx.job_mid} />}
54+ {ctx && ctx.job_mid == null && salaire == null && (
55+ <p className="jk-note info">Sans salaire publié, Job·Ka n'estime rien : seule la référence du marché de la catégorie est affichée.</p>
56+ )}
57+ {hist.length > 1 && (
58+ <>
59+ <h3 className="jk-card-sub jk-subtitle">Évolution du salaire affiché</h3>
60+ <ul className="jk-tl">
61+ {hist.map((h, i) => (
62+ <li key={i}>
63+ <span className="jk-tl-date">{new Date(h.ts * 1000).toLocaleDateString("fr-CA", { day: "numeric", month: "short", year: "numeric" })}</span>
64+ <b>{formatSalary({ salary_min: h.s_min, salary_max: h.s_max, salary_unit: h.unit })}</b>
65+ </li>
66+ ))}
67+ </ul>
68+ </>
69+ )}
70+ <Accordion title="Méthodologie" small>
71+ <p>
72+ Le salaire est celui publié par l'employeur (jamais estimé). La référence de marché est calculée par Job·Ka
73+ sur les offres actives de la même catégorie qui affichent un salaire, converties en équivalent annuel :
74+ médiane et quartiles P25–P75 ; l'écart compare le point médian de la fourchette de l'offre à cette médiane.
75+ Les avantages, primes et horaires ne sont pas pris en compte.{NBSP}
76+ </p>
77+ </Accordion>
78+ </SectionCard>
79+ );
80+}
added frontend/src/fiche/SectionNav.tsx +60 −0
@@ -0,0 +1,60 @@
1+// -----------------------------------------------------------------------------
2+// Job·Ka — Agrégateur d'offres d'emploi (province de Québec)
3+// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
4+// fiche/SectionNav.tsx : navigation sticky par sections — pastilles
5+// défilables horizontalement, section active suivie au scroll
6+// (IntersectionObserver), défilement doux au clic sans modifier l'URL
7+// (pas de #hash : la page s'ouvre toujours en haut).
8+// -----------------------------------------------------------------------------
9+import { useEffect, useRef, useState } from "react";
10+
11+export interface NavItem { id: string; label: string; }
12+
13+export default function SectionNav({ items }: { items: NavItem[] }) {
14+ const [active, setActive] = useState(items[0]?.id);
15+ const track = useRef<HTMLDivElement>(null);
16+
17+ useEffect(() => {
18+ const els = items.map((i) => document.getElementById(i.id)).filter((e): e is HTMLElement => !!e);
19+ if (els.length === 0) return;
20+ const visible = new Map<string, number>();
21+ const io = new IntersectionObserver((entries) => {
22+ for (const e of entries) visible.set((e.target as HTMLElement).id, e.isIntersecting ? e.intersectionRatio : 0);
23+ // section active = la première (ordre DOM) visible sous le header
24+ const first = items.find((i) => (visible.get(i.id) ?? 0) > 0);
25+ if (first) setActive(first.id);
26+ }, { rootMargin: "-120px 0px -55% 0px", threshold: [0, 0.1, 0.5] });
27+ els.forEach((e) => io.observe(e));
28+ return () => io.disconnect();
29+ }, [items]);
30+
31+ // garder la pastille active visible dans la barre — défilement HORIZONTAL de
32+ // la piste seulement (jamais scrollIntoView : il ferait défiler la page
33+ // verticalement, y compris à l'ouverture)
34+ useEffect(() => {
35+ const t = track.current, a = t?.querySelector<HTMLElement>(".on");
36+ if (!t || !a) return;
37+ const left = a.offsetLeft, right = left + a.offsetWidth;
38+ if (left < t.scrollLeft) t.scrollTo({ left: Math.max(0, left - 12), behavior: "smooth" });
39+ else if (right > t.scrollLeft + t.clientWidth) t.scrollTo({ left: right - t.clientWidth + 12, behavior: "smooth" });
40+ }, [active]);
41+
42+ const go = (id: string) => (e: React.MouseEvent) => {
43+ e.preventDefault();
44+ document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
45+ setActive(id);
46+ };
47+
48+ return (
49+ <nav className="jk-nav" aria-label="Sections de la fiche">
50+ <div className="jk-nav-track" ref={track}>
51+ {items.map((i) => (
52+ <a key={i.id} href={`#${i.id}`} className={active === i.id ? "on" : ""}
53+ aria-current={active === i.id ? "true" : undefined} onClick={go(i.id)}>
54+ {i.label}
55+ </a>
56+ ))}
57+ </div>
58+ </nav>
59+ );
60+}
added frontend/src/fiche/current.ts +26 −0
@@ -0,0 +1,26 @@
1+// -----------------------------------------------------------------------------
2+// Job·Ka — Agrégateur d'offres d'emploi (province de Québec)
3+// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
4+// fiche/current.ts : mini-magasin « fiche affichée » partagé entre la page
5+// fiche et le header compact (favoris ♥ + partage). Le toggle favoris du
6+// compte KA exige l'objet Job complet (titre, image, prix pour le hub) :
7+// la page le publie ici, le header le lit sans re-fetch.
8+// -----------------------------------------------------------------------------
9+import { useSyncExternalStore } from "react";
10+import type { Job } from "../api";
11+
12+let current: Job | null = null;
13+const subs = new Set<() => void>();
14+
15+export function setCurrentListing(l: Job | null) {
16+ current = l;
17+ subs.forEach((f) => f());
18+}
19+
20+export function useCurrentListing(): Job | null {
21+ return useSyncExternalStore(
22+ (cb) => { subs.add(cb); return () => { subs.delete(cb); }; },
23+ () => current,
24+ () => null,
25+ );
26+}
added frontend/src/fiche/fiche.css +674 −0
@@ -0,0 +1,674 @@
1+/* -----------------------------------------------------------------------------
2+ Job·Ka — Agrégateur d'offres d'emploi (province de Québec)
3+ Auteur : Simon-Pierre Boucher — contact@spboucher.ai
4+ fiche/fiche.css : fiche d'offre premium (refonte 2026-09-07, même socle que
5+ les fiches Lou-Ka v3 / Immo-Ka v3)
6+ · Tokens `--jk-*` posés sur :root, styles SCOPÉS sous `.jk-fiche` / `.jk-*`.
7+ · Fond papier Groupe KA #F5F3EE, cartes blanches à bord 1 px, ombres
8+ légères, rayons 10/14/18/22 ; CYAN Job·Ka réservé aux CTA / salaire /
9+ états actifs. Le header encre du site est conservé, compact (56 px).
10+ · Mobile-first ; desktop ≥ 1024 px : colonne principale + aside sticky.
11+ · Aucune propriété `order` : ordre DOM = ordre visuel (standard Groupe Ka).
12+----------------------------------------------------------------------------- */
13+:root {
14+ --jk-bg: #f5f3ee; --jk-surface: #ffffff; --jk-surface-2: #faf9f5;
15+ --jk-border: #e6e3dc; --jk-border-2: #d3cfc6;
16+ --jk-text: #141814; --jk-text-2: #4d5551; --jk-muted: #7c837e;
17+ --jk-accent: #0c8599; --jk-accent-deep: #095c6b; --jk-accent-soft: #def0f4;
18+ --jk-success: #1e7b4a; --jk-success-soft: #e7f4ec;
19+ --jk-warning: #a8690a; --jk-warning-soft: #fcf3e1;
20+ --jk-danger: #b3423a; --jk-danger-soft: #fbe9e7;
21+ --jk-info: #3b5bdb; --jk-info-soft: #e9edfb;
22+ --jk-r-sm: 10px; --jk-r-md: 14px; --jk-r-lg: 18px; --jk-r-xl: 22px;
23+ --jk-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04); --jk-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.07);
24+ --jk-header-h: 56px; --jk-nav-h: 52px;
25+}
26+
27+/* ---- page : fond papier, header compact, chrome global effacé ---- */
28+body.jk-fiche-page { background: var(--jk-bg); }
29+body.jk-fiche-page .prefooter { margin-top: 8px; }
30+body.jk-fiche-page .kaa-btn, body.jk-fiche-page .kaa-hello { display: none !important; } /* remplacé par « Demander à Ka » */
31+header.site.header--fiche .container { min-height: var(--jk-header-h); padding-top: 4px; padding-bottom: 4px; gap: 4px 10px; flex-wrap: nowrap; }
32+header.site.header--fiche .gk-badge { display: none; }
33+header.site.header--fiche nav.main { display: none; }
34+@media (min-width: 980px) { header.site.header--fiche nav.main { display: flex; margin-left: 0; } }
35+header.site.header--fiche .auth-box { margin-left: 0; }
36+header.site.header--fiche .menu-btn { display: flex; }
37+.hdr-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
38+.hdr-btn {
39+ display: inline-grid; place-items: center; width: 40px; height: 40px;
40+ border-radius: 999px; border: 1px solid rgba(245, 243, 238, 0.28); background: transparent;
41+ color: #f5f3ee; cursor: pointer; padding: 0; transition: background 0.15s, transform 0.15s;
42+}
43+.hdr-btn:active { transform: scale(0.95); }
44+.hdr-btn.on { color: var(--jk-accent-soft); border-color: var(--jk-accent); background: rgba(12, 133, 153, 0.25); }
45+@media (hover: hover) { .hdr-btn:hover { background: rgba(245, 243, 238, 0.1); } }
46+@media (max-width: 760px) {
47+ header.site.header--fiche .btn-ka { padding: 0; width: 40px; height: 40px; min-height: 40px; justify-content: center; border-radius: 999px; font-size: 0; gap: 0; }
48+ header.site.header--fiche .btn-ka b { font-size: 12px; }
49+}
50+
51+/* ---- gabarit ---- */
52+.jk-fiche { padding: 10px 0 110px; color: var(--jk-text); }
53+.jk-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
54+.jk-grid { display: block; }
55+.jk-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
56+.jk-aside { display: none; }
57+@media (min-width: 768px) {
58+ .jk-wrap { padding: 0 24px; }
59+ .jk-fiche { padding-top: 18px; }
60+ .jk-main { gap: 16px; }
61+}
62+@media (min-width: 1024px) {
63+ .jk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 32px; align-items: start; }
64+ .jk-aside { display: block; position: sticky; top: calc(var(--jk-header-h) + 16px); }
65+ .jk-fiche { padding-bottom: 80px; }
66+}
67+.jk-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--jk-muted); margin: 0 0 10px; }
68+.jk-crumbs a { color: var(--jk-text-2); }
69+.jk-crumbs span:last-child { color: var(--jk-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
70+.jk-fiche section[id] { scroll-margin-top: calc(var(--jk-header-h) + var(--jk-nav-h) + 10px); }
71+
72+/* ---- carte de section ---- */
73+.jk-card {
74+ background: var(--jk-surface); border: 1px solid var(--jk-border);
75+ border-radius: var(--jk-r-lg); box-shadow: var(--jk-shadow-sm);
76+ padding: 16px; min-width: 0;
77+}
78+@media (min-width: 768px) { .jk-card { padding: 20px 22px; } }
79+.jk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
80+.jk-card-title { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -0.02em; color: var(--jk-text); }
81+.jk-card-title svg { color: var(--jk-accent-deep); flex: none; }
82+.jk-card-sub { font-size: 12.5px; color: var(--jk-muted); margin: 3px 0 0; }
83+.jk-card-aside { flex: none; display: flex; align-items: center; gap: 8px; }
84+.jk-link { background: none; border: 0; padding: 0; color: var(--jk-text-2); font: 600 13px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--jk-border-2); }
85+.jk-link:hover { color: var(--jk-accent-deep); }
86+.jk-more {
87+ display: inline-flex; align-items: center; justify-content: center; gap: 8px;
88+ width: 100%; min-height: 44px; margin-top: 12px; padding: 8px 14px;
89+ border: 1px solid var(--jk-border); border-radius: var(--jk-r-sm); background: var(--jk-surface);
90+ color: var(--jk-text); font: 600 13.5px var(--font-body); cursor: pointer;
91+ transition: background 0.15s, border-color 0.15s;
92+}
93+.jk-more:hover { background: var(--jk-surface-2); border-color: var(--jk-border-2); }
94+.jk-more svg { color: var(--jk-muted); }
95+
96+/* ---- boutons ---- */
97+.jk-btn {
98+ display: inline-flex; align-items: center; justify-content: center; gap: 8px;
99+ min-height: 46px; padding: 10px 16px; border-radius: 12px; border: 1px solid transparent;
100+ font: 600 14.5px var(--font-body); cursor: pointer; text-decoration: none;
101+ transition: transform 0.12s, background 0.15s, box-shadow 0.15s; white-space: nowrap;
102+}
103+.jk-btn:active { transform: translateY(1px); }
104+.jk-btn-primary { background: var(--jk-accent); color: #fff; box-shadow: 0 6px 18px rgba(226, 55, 68, 0.22); }
105+.jk-btn-primary:hover { background: var(--jk-accent-deep); }
106+.jk-btn-ghost { background: var(--jk-surface); border-color: var(--jk-border); color: var(--jk-text); }
107+.jk-btn-ghost:hover { background: var(--jk-surface-2); border-color: var(--jk-border-2); }
108+.jk-btn-icon { width: 46px; padding: 0; flex: none; }
109+.jk-btn-icon.on { color: var(--jk-accent); border-color: var(--jk-accent); background: var(--jk-accent-soft); }
110+
111+/* ---- héro ---- */
112+.jk-hero { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 0; }
113+.jk-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
114+.jk-price { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 8.4vw, 38px); line-height: 1; letter-spacing: -0.035em; color: var(--jk-text); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
115+.jk-price small { font: 500 14px var(--font-body); color: var(--jk-muted); letter-spacing: 0; }
116+.jk-price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
117+.jk-capsule {
118+ display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
119+ border-radius: 999px; font: 600 12.5px var(--font-body); border: 1px solid transparent; white-space: nowrap;
120+}
121+.jk-capsule b { font-weight: 700; }
122+.jk-capsule.good { background: var(--jk-success-soft); color: var(--jk-success); }
123+.jk-capsule.ok { background: var(--jk-surface); color: var(--jk-text-2); border-color: var(--jk-border); }
124+.jk-capsule.high { background: var(--jk-warning-soft); color: var(--jk-warning); }
125+.jk-capsule.neutral { background: var(--jk-surface-2); color: var(--jk-muted); border-color: var(--jk-border); }
126+.jk-capsule.brand { background: var(--jk-accent-soft); color: var(--jk-accent-deep); }
127+.jk-h1 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.35; letter-spacing: 0; color: var(--jk-text); }
128+.jk-h1 .jk-city { display: block; font-weight: 500; font-size: 14px; color: var(--jk-text-2); }
129+.jk-summary { margin: 0; font-size: 14px; color: var(--jk-text-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
130+.jk-summary .sep { color: var(--jk-border-2); }
131+.jk-actions { display: flex; gap: 8px; align-items: center; }
132+.jk-actions .jk-btn-primary { flex: 1; }
133+.jk-hero .jk-actions { margin-top: 2px; }
134+@media (min-width: 1024px) {
135+ .jk-hero .jk-actions { display: none; } /* actions dans l'aside sticky */
136+}
137+
138+/* ---- galerie ---- */
139+.jk-gallery { position: relative; border-radius: var(--jk-r-lg); overflow: hidden; background: #ecece8; }
140+.jk-gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; aspect-ratio: 4 / 3; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
141+.jk-gallery-track::-webkit-scrollbar { display: none; }
142+.jk-gallery-track img, .jk-gallery > img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; cursor: zoom-in; display: block; }
143+.jk-gallery > img { aspect-ratio: 4 / 3; }
144+@media (min-width: 768px) { .jk-gallery-track, .jk-gallery > img { aspect-ratio: 16 / 9; } }
145+.jk-gallery-count {
146+ position: absolute; left: 12px; bottom: 12px; z-index: 2;
147+ background: rgba(20, 24, 20, 0.66); color: #fff; font: 600 12px var(--font-body);
148+ padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
149+ font-variant-numeric: tabular-nums;
150+}
151+.jk-gallery-full, .jk-gallery-nav {
152+ position: absolute; z-index: 2; display: grid; place-items: center;
153+ width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
154+ background: rgba(255, 255, 255, 0.92); color: var(--jk-text); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
155+}
156+.jk-gallery-full { right: 12px; bottom: 12px; }
157+.jk-gallery-nav { top: 50%; transform: translateY(-50%); display: none; }
158+.jk-gallery-nav.prev { left: 12px; } .jk-gallery-nav.next { right: 12px; }
159+@media (hover: hover) and (min-width: 768px) { .jk-gallery-nav { display: grid; } }
160+.jk-thumbs { display: none; }
161+@media (min-width: 768px) {
162+ .jk-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-top: 8px; }
163+ .jk-thumbs button { border: 0; padding: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: #ecece8; cursor: pointer; outline-offset: 2px; opacity: 0.75; transition: opacity 0.15s; }
164+ .jk-thumbs button.on, .jk-thumbs button:hover { opacity: 1; }
165+ .jk-thumbs button.on { outline: 2px solid var(--jk-accent); }
166+ .jk-thumbs img { width: 100%; height: 100%; object-fit: cover; }
167+}
168+/* lightbox (plein écran) */
169+.jk-lightbox { position: fixed; inset: 0; z-index: var(--z-modal, 900); background: rgba(12, 14, 12, 0.96); }
170+.jk-lightbox-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%; scrollbar-width: none; touch-action: pan-x pinch-zoom; }
171+.jk-lightbox-track::-webkit-scrollbar { display: none; }
172+.jk-lightbox-cell { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: max(56px, env(safe-area-inset-top)) 10px max(28px, env(safe-area-inset-bottom)); overflow: hidden; }
173+.jk-lightbox-cell img { max-width: 100%; max-height: 100%; border-radius: 10px; user-select: none; -webkit-user-drag: none; will-change: transform; }
174+.jk-lightbox-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.5); color: #fff; display: grid; place-items: center; cursor: pointer; }
175+.jk-lightbox-count { position: fixed; top: max(22px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 3; color: #fff; font: 600 13px var(--font-body); background: rgba(0, 0, 0, 0.45); padding: 4px 12px; border-radius: 999px; }
176+.jk-lightbox .jk-gallery-nav { display: none; }
177+@media (hover: hover) { .jk-lightbox .jk-gallery-nav { display: grid; position: fixed; } }
178+
179+/* ---- Score ---- */
180+.jk-score { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
181+.jk-score-ring { position: relative; width: 88px; height: 88px; flex: none; }
182+.jk-score-ring svg { width: 88px; height: 88px; transform: rotate(-90deg); }
183+.jk-score-ring .bg { fill: none; stroke: var(--jk-surface-2); stroke-width: 7; }
184+.jk-score-ring .arc { fill: none; stroke: var(--jk-accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
185+.jk-score-ring .arc.partial { stroke: var(--jk-text-2); }
186+.jk-score-val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 27px; letter-spacing: -0.03em; line-height: 1; }
187+.jk-score-val small { display: block; text-align: center; font: 600 10px var(--font-body); color: var(--jk-muted); margin-top: 2px; letter-spacing: 0.04em; }
188+.jk-score-lbl { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
189+.jk-score-sub { font-size: 13px; color: var(--jk-text-2); margin-top: 2px; line-height: 1.4; }
190+.jk-score-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
191+.jk-score-part { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 9px; border-radius: 8px; background: var(--jk-surface-2); border: 1px solid var(--jk-border); color: var(--jk-text-2); }
192+.jk-score-part b { color: var(--jk-text); font-variant-numeric: tabular-nums; }
193+.jk-score-part.na { color: var(--jk-muted); border-style: dashed; }
194+
195+/* ---- En bref ---- */
196+.jk-brief { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
197+.jk-brief li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
198+.jk-brief-ico { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
199+.jk-brief-ico.good { background: var(--jk-success-soft); color: var(--jk-success); }
200+.jk-brief-ico.warn { background: var(--jk-warning-soft); color: var(--jk-warning); }
201+.jk-brief-ico.bad { background: var(--jk-danger-soft); color: var(--jk-danger); }
202+.jk-brief-ico.neutral { background: var(--jk-surface-2); color: var(--jk-muted); border: 1px solid var(--jk-border); }
203+.jk-brief-t { font-weight: 600; font-size: 14px; line-height: 1.35; }
204+.jk-brief-d { font-size: 13px; color: var(--jk-text-2); line-height: 1.4; margin-top: 1px; }
205+
206+/* ---- navigation par sections (sticky) ---- */
207+.jk-nav {
208+ position: sticky; top: var(--jk-header-h); z-index: var(--z-sticky, 300);
209+ margin: 0 -16px; padding: 6px 16px;
210+ background: rgba(245, 243, 238, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
211+ border-bottom: 1px solid var(--jk-border);
212+}
213+@media (min-width: 768px) { .jk-nav { margin: 0 -24px; padding: 6px 24px; } }
214+@media (min-width: 1024px) { .jk-nav { margin: 0; padding: 6px 0; border-radius: 0; } }
215+.jk-nav-track { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
216+.jk-nav-track::-webkit-scrollbar { display: none; }
217+.jk-nav a {
218+ flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 13px;
219+ border-radius: 999px; font: 600 13px var(--font-body); color: var(--jk-text-2);
220+ border: 1px solid transparent; transition: background 0.15s, color 0.15s; scroll-snap-align: start;
221+}
222+.jk-nav a:hover { background: var(--jk-surface); border-color: var(--jk-border); }
223+.jk-nav a.on { background: var(--jk-text); color: #fff; border-color: var(--jk-text); }
224+
225+/* ---- caractéristiques ---- */
226+.jk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
227+@media (min-width: 560px) { .jk-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
228+@media (min-width: 900px) { .jk-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
229+.jk-fact { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--jk-border); border-radius: 12px; background: var(--jk-surface-2); min-width: 0; }
230+.jk-fact-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--jk-surface); border: 1px solid var(--jk-border); display: grid; place-items: center; color: var(--jk-accent-deep); flex: none; }
231+.jk-fact-v { font-weight: 700; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
232+.jk-fact-l { font-size: 11.5px; color: var(--jk-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
233+.jk-fact-txt { min-width: 0; }
234+.jk-facts-rows { margin-top: 12px; }
235+.jk-kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--jk-border); font-size: 13.5px; }
236+.jk-kv .k { color: var(--jk-muted); } .jk-kv .v { font-weight: 600; text-align: right; }
237+.jk-note { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
238+.jk-note.good { background: var(--jk-success-soft); color: var(--jk-success); }
239+.jk-note.info { background: var(--jk-info-soft); color: var(--jk-info); }
240+.jk-note.warn { background: var(--jk-warning-soft); color: var(--jk-warning); }
241+
242+/* ---- description ---- */
243+.jk-desc { position: relative; }
244+.jk-desc-body p { font-size: 15px; line-height: 1.6; color: var(--jk-text-2); margin: 0 0 10px; white-space: pre-line; }
245+.jk-desc-body h4 { margin: 12px 0 3px; font: 700 14px var(--font-body); color: var(--jk-text); }
246+.jk-desc-lead { font-size: 15.5px !important; color: var(--jk-text) !important; font-weight: 500; }
247+.jk-desc.clamped .jk-desc-body { max-height: 200px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
248+.jk-desc-orig { margin-top: 8px; }
249+.jk-desc-orig p { font-size: 13.5px; color: var(--jk-muted); }
250+
251+/* ---- inclusions ---- */
252+.jk-amen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
253+@media (min-width: 640px) { .jk-amen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
254+.jk-amen-it { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 5px 0; border-bottom: 1px solid var(--jk-border); font-size: 13.5px; min-width: 0; }
255+.jk-amen-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--jk-accent-soft); color: var(--jk-accent-deep); display: grid; place-items: center; flex: none; }
256+.jk-amen-it.unconfirmed { color: var(--jk-text-2); }
257+.jk-amen-it.unconfirmed .jk-amen-ico { background: var(--jk-surface-2); color: var(--jk-muted); border: 1px dashed var(--jk-border-2); }
258+.jk-amen-txt { min-width: 0; line-height: 1.25; }
259+.jk-amen-conf { margin-left: auto; color: var(--jk-success); flex: none; }
260+
261+/* ---- KPI / tuiles ---- */
262+.jk-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
263+@media (min-width: 600px) { .jk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .jk-kpi-v { font-size: 20px; } }
264+.jk-kpis.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
265+.jk-kpi { padding: 10px 12px; border: 1px solid var(--jk-border); border-radius: 12px; background: var(--jk-surface); min-width: 0; }
266+.jk-kpi.accent { background: var(--jk-accent-soft); border-color: #f5c2c6; }
267+.jk-kpi-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 4.8vw, 20px); letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--jk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
268+.jk-kpi-v.wrap { white-space: normal; font-size: 16px; line-height: 1.2; }
269+.jk-kpi-v small { font: 600 11px var(--font-body); color: var(--jk-muted); margin-left: 3px; }
270+.jk-kpi-l { font-size: 11.5px; color: var(--jk-muted); margin-top: 3px; line-height: 1.3; }
271+.jk-kpi.anim .jk-kpi-v { animation: jk-rise 0.5s ease both; }
272+@keyframes jk-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
273+
274+/* ---- rangées compactes (accessibilité, mesures) ---- */
275+.jk-rows { display: flex; flex-direction: column; gap: 4px; }
276+.jk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 30px; font-size: 13.5px; }
277+.jk-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--jk-text); }
278+.jk-row-name small { color: var(--jk-muted); font-size: 12px; margin-left: 4px; }
279+.jk-row-bar { width: 78px; height: 6px; border-radius: 3px; background: var(--jk-surface-2); border: 1px solid var(--jk-border); overflow: hidden; }
280+.jk-row-bar i { display: block; height: 100%; background: var(--jk-text); border-radius: 3px; }
281+.jk-row-bar i.good { background: var(--jk-success); }
282+.jk-row-bar i.warn { background: var(--jk-warning); }
283+.jk-row-bar i.bad { background: var(--jk-danger); }
284+.jk-row-val { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
285+.jk-row-lbl { font-size: 12px; color: var(--jk-muted); min-width: 68px; text-align: right; }
286+.jk-row-lbl.good { color: var(--jk-success); } .jk-row-lbl.warn { color: var(--jk-warning); } .jk-row-lbl.bad { color: var(--jk-danger); }
287+
288+/* ---- pastilles d'état ---- */
289+.jk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12px var(--font-body); border: 1px solid transparent; white-space: nowrap; }
290+.jk-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
291+.jk-badge.good { background: var(--jk-success-soft); color: var(--jk-success); }
292+.jk-badge.warn { background: var(--jk-warning-soft); color: var(--jk-warning); }
293+.jk-badge.bad { background: var(--jk-danger-soft); color: var(--jk-danger); }
294+.jk-badge.neutral { background: var(--jk-surface-2); color: var(--jk-text-2); border-color: var(--jk-border); }
295+.jk-badge.info { background: var(--jk-info-soft); color: var(--jk-info); }
296+.jk-badge.lg { font-size: 13.5px; padding: 6px 12px; }
297+.jk-pill { display: inline-block; font: 600 10.5px var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: 1px; }
298+.jk-pill.included { background: var(--jk-success-soft); color: var(--jk-success); }
299+.jk-pill.observed { background: var(--jk-surface-2); color: var(--jk-text-2); border: 1px solid var(--jk-border); }
300+.jk-pill.estimated { background: var(--jk-accent-soft); color: var(--jk-accent-deep); }
301+.jk-pill.unknown { background: var(--jk-surface-2); color: var(--jk-muted); border: 1px dashed var(--jk-border-2); }
302+
303+/* ---- listes d'items (lieux, comparables, stations) ---- */
304+.jk-list { list-style: none; margin: 0; padding: 0; }
305+.jk-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--jk-border); min-width: 0; }
306+.jk-list > .jk-item:first-child { border-top: 0; padding-top: 2px; }
307+.jk-item-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--jk-surface-2); border: 1px solid var(--jk-border); color: var(--jk-text-2); }
308+.jk-item-ico svg.cm-ico { width: 26px; height: 26px; }
309+.jk-item-main { flex: 1; min-width: 0; }
310+.jk-item-t { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
311+.jk-item-s { font-size: 12.5px; color: var(--jk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
312+.jk-item-r { text-align: right; flex: none; }
313+.jk-item-v { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
314+.jk-item-m { font-size: 12px; color: var(--jk-muted); }
315+.jk-item-best { color: var(--jk-success); font-weight: 700; font-size: 11.5px; margin-left: 6px; }
316+
317+/* ---- carrousel horizontal ---- */
318+.jk-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 2px 16px 6px; }
319+.jk-carousel::-webkit-scrollbar { display: none; }
320+@media (min-width: 768px) { .jk-carousel { margin: 0; padding: 2px 0 6px; } }
321+.jk-ccard { flex: 0 0 44%; min-width: 148px; max-width: 210px; scroll-snap-align: start; border: 1px solid var(--jk-border); border-radius: var(--jk-r-md); padding: 12px; background: var(--jk-surface); display: flex; flex-direction: column; gap: 6px; min-height: 104px; }
322+@media (min-width: 768px) { .jk-ccard { flex-basis: 176px; } }
323+.jk-ccard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
324+.jk-ccard-c { font: 600 10.5px var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--jk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
325+.jk-ccard-d { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
326+.jk-ccard-n { font-size: 12.5px; color: var(--jk-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
327+.jk-ccard-m { font-size: 11.5px; color: var(--jk-muted); }
328+
329+/* ---- filtres (chips) ---- */
330+.jk-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
331+.jk-chips::-webkit-scrollbar { display: none; }
332+.jk-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--jk-border); background: var(--jk-surface); color: var(--jk-text-2); font: 600 12.5px var(--font-body); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
333+.jk-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--jk-text)); flex: none; }
334+.jk-chip small { font-weight: 600; opacity: 0.65; }
335+.jk-chip.on { background: var(--jk-text); color: #fff; border-color: var(--jk-text); }
336+.jk-chip:disabled { opacity: 0.45; cursor: default; }
337+
338+/* ---- carte ---- */
339+.jk-map { position: relative; height: 340px; border-radius: var(--jk-r-lg); overflow: hidden; border: 1px solid var(--jk-border); background: #ecece8; }
340+@media (min-width: 768px) { .jk-map { height: 440px; } }
341+@media (min-width: 1024px) { .jk-map { height: 520px; } }
342+.jk-map .ka-map {
343+ position: absolute; inset: 0;
344+ --ka-accent: var(--jk-accent); --ka-on-accent: #fff; --ka-surface: var(--jk-surface);
345+ --ka-ink: var(--jk-text); --ka-line: var(--jk-border-2); --ka-radius: 10px;
346+ --ka-shadow: 0 8px 24px rgba(20, 24, 20, 0.14); --ka-font: var(--font-body);
347+}
348+.jk-map-legend { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--jk-border); font: 500 11px var(--font-body); color: var(--jk-text-2); pointer-events: none; }
349+.jk-map-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--jk-accent); }
350+.jk-map-skel { position: absolute; inset: 0; }
351+.jk-map-hint { font-size: 12px; color: var(--jk-muted); margin: 8px 0 0; }
352+
353+/* ---- accordéon ---- */
354+.jk-acc { border-top: 1px solid var(--jk-border); }
355+.jk-acc:first-child { border-top: 0; }
356+.jk-acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 0; background: none; border: 0; font: 600 14px var(--font-body); color: var(--jk-text); cursor: pointer; text-align: left; }
357+.jk-acc-btn .jk-acc-meta { font-weight: 500; font-size: 12.5px; color: var(--jk-muted); margin-left: auto; white-space: nowrap; }
358+.jk-acc-btn .chev { color: var(--jk-muted); flex: none; transition: transform 0.2s ease; }
359+.jk-acc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
360+.jk-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; }
361+.jk-acc-body.open { grid-template-rows: 1fr; }
362+.jk-acc-body > div { min-height: 0; overflow: hidden; }
363+.jk-acc-inner { padding: 0 0 14px; font-size: 13.5px; color: var(--jk-text-2); line-height: 1.5; }
364+.jk-acc-inner p { margin: 0 0 8px; }
365+.jk-acc-inner a { color: var(--jk-text-2); text-decoration: underline; text-underline-offset: 2px; }
366+.jk-acc.sm .jk-acc-btn { min-height: 40px; font-size: 13px; color: var(--jk-text-2); }
367+
368+/* ---- bottom sheet (mobile) / modale (desktop) ---- */
369+.jk-sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay, 800); background: rgba(20, 24, 20, 0.42); animation: jk-fade 0.18s ease; }
370+.jk-sheet {
371+ position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900);
372+ height: var(--jk-sheet-h, 68dvh); max-height: 94dvh;
373+ background: var(--jk-surface); border-radius: 20px 20px 0 0;
374+ display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
375+ animation: jk-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
376+ padding-bottom: env(safe-area-inset-bottom);
377+ touch-action: pan-y;
378+}
379+.jk-sheet.full { height: 94dvh; }
380+.jk-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--jk-border-2); margin: 8px auto 0; flex: none; }
381+.jk-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 10px; border-bottom: 1px solid var(--jk-border); flex: none; }
382+.jk-sheet-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; margin: 0; }
383+.jk-sheet-sub { font-size: 12.5px; color: var(--jk-muted); margin: 2px 0 0; }
384+.jk-sheet-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--jk-border); background: var(--jk-surface-2); display: grid; place-items: center; cursor: pointer; color: var(--jk-text); flex: none; }
385+.jk-sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 16px 18px; }
386+.jk-sheet-foot { flex: none; padding: 10px 16px; border-top: 1px solid var(--jk-border); background: var(--jk-surface); }
387+@keyframes jk-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
388+@keyframes jk-fade { from { opacity: 0; } to { opacity: 1; } }
389+@keyframes jk-pop { from { transform: translate(-50%, -50%) scale(0.97); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
390+@media (min-width: 900px) {
391+ .jk-sheet, .jk-sheet.full {
392+ left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%);
393+ width: min(680px, calc(100vw - 48px)); height: auto; max-height: min(82vh, 780px);
394+ border-radius: var(--jk-r-lg); animation: jk-pop 0.18s ease; padding-bottom: 0;
395+ }
396+ .jk-sheet-handle { display: none; }
397+ .jk-sheet-head { padding: 16px 20px 12px; }
398+ .jk-sheet-body { padding: 14px 20px 20px; }
399+}
400+.jk-sheet-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
401+.jk-seg { display: inline-flex; border: 1px solid var(--jk-border); border-radius: 999px; overflow: hidden; background: var(--jk-surface); }
402+.jk-seg button { border: 0; background: transparent; padding: 7px 12px; min-height: 36px; font: 600 12.5px var(--font-body); color: var(--jk-text-2); cursor: pointer; }
403+.jk-seg button.on { background: var(--jk-text); color: #fff; }
404+.jk-seg button + button { border-left: 1px solid var(--jk-border); }
405+
406+/* ---- CTA sticky ---- */
407+.jk-cta-bar {
408+ position: fixed; left: 0; right: 0; bottom: var(--consent-h, 0px); z-index: var(--z-bottombar, 600);
409+ display: flex; align-items: center; gap: 12px;
410+ padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
411+ background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
412+ border-top: 1px solid var(--jk-border);
413+ transform: translateY(110%); transition: transform 0.25s ease; will-change: transform;
414+}
415+.jk-cta-bar.show { transform: none; }
416+.jk-cta-txt { min-width: 0; flex: 0 1 auto; }
417+.jk-cta-price { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
418+.jk-cta-price small { font: 500 11px var(--font-body); color: var(--jk-muted); letter-spacing: 0; }
419+.jk-cta-sub { font-size: 12px; color: var(--jk-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
420+.jk-cta-sub.good { color: var(--jk-success); font-weight: 600; }
421+.jk-cta-bar .jk-btn-primary { flex: 1; min-height: 44px; margin-left: auto; max-width: 260px; }
422+@media (min-width: 1024px) { .jk-cta-bar { display: none; } }
423+
424+/* ---- Demander à Ka ---- */
425+.jk-ka-btn {
426+ position: fixed; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom) + var(--consent-h, 0px)); z-index: var(--z-dropdown, 700);
427+ display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 14px 8px 12px;
428+ border-radius: 999px; border: 0; background: var(--jk-text); color: #fff;
429+ font: 600 13px var(--font-body); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
430+ transition: transform 0.15s, opacity 0.2s;
431+}
432+.jk-ka-btn svg { color: var(--jk-accent); }
433+.jk-ka-btn:active { transform: scale(0.97); }
434+.jk-ka-btn.hide { opacity: 0; pointer-events: none; transform: translateY(8px); }
435+@media (min-width: 1024px) { .jk-ka-btn { display: none; } } /* desktop : bouton dans l'aside */
436+.jk-ka-intro { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0 12px; }
437+.jk-ka-avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--jk-text); color: var(--jk-accent); display: grid; place-items: center; flex: none; }
438+.jk-ka-intro p { margin: 0; font-size: 13.5px; color: var(--jk-text-2); line-height: 1.45; }
439+.jk-ka-ctx { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--jk-surface-2); border: 1px solid var(--jk-border); font-size: 12.5px; color: var(--jk-text-2); margin-bottom: 12px; }
440+.jk-ka-ctx img { width: 44px; height: 34px; object-fit: cover; border-radius: 6px; flex: none; }
441+.jk-ka-ctx b { color: var(--jk-text); display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
442+.jk-ka-sugs { display: flex; flex-direction: column; gap: 6px; }
443+.jk-ka-sug { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--jk-border); background: var(--jk-surface); font: 500 14px var(--font-body); color: var(--jk-text); cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; }
444+.jk-ka-sug:hover { background: var(--jk-accent-soft); border-color: #f5c2c6; }
445+.jk-ka-sug svg { color: var(--jk-muted); flex: none; }
446+.jk-ka-in { display: flex; gap: 8px; align-items: center; }
447+.jk-ka-in input { flex: 1; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--jk-border); background: var(--jk-surface); font: 400 16px var(--font-body); color: var(--jk-text); }
448+.jk-ka-in input:focus { outline: 2px solid var(--jk-accent); outline-offset: 1px; }
449+.jk-ka-in button { width: 46px; height: 46px; border-radius: 12px; border: 0; background: var(--jk-accent); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
450+.jk-ka-in button:disabled { opacity: 0.4; cursor: default; }
451+
452+/* ---- aside desktop ---- */
453+.jk-aside-card { display: flex; flex-direction: column; gap: 12px; }
454+.jk-aside .jk-btn-primary { white-space: normal; text-align: center; line-height: 1.25; }
455+.jk-aside .jk-ka-inline { justify-content: flex-start; }
456+.jk-aside .jk-ka-inline svg { color: var(--jk-accent); }
457+.jk-aside .jk-price { font-size: 32px; }
458+.jk-aside-addr { font-size: 14px; color: var(--jk-text-2); line-height: 1.4; }
459+.jk-aside-sep { border: 0; border-top: 1px solid var(--jk-border); margin: 4px 0; }
460+.jk-aside-score { display: flex; align-items: center; gap: 12px; }
461+.jk-aside-score .jk-score-ring { width: 56px; height: 56px; }
462+.jk-aside-score .jk-score-ring svg { width: 56px; height: 56px; }
463+.jk-aside-score .jk-score-val { font-size: 18px; }
464+.jk-aside-score .jk-score-val small { display: none; }
465+.jk-aside-score-txt { font-size: 13px; color: var(--jk-text-2); line-height: 1.4; }
466+.jk-aside-score-txt b { display: block; color: var(--jk-text); font-size: 14px; }
467+.jk-aside .jk-brief { gap: 8px; }
468+.jk-aside .jk-brief-t { font-size: 13.5px; }
469+.jk-aside .jk-brief-d { display: none; }
470+.jk-aside-meta { font-size: 12px; color: var(--jk-muted); text-align: center; }
471+
472+/* ---- source & méthodologie (pied de section) ---- */
473+.jk-source { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--jk-border); font-size: 12px; color: var(--jk-muted); }
474+.jk-source b { font-weight: 600; color: var(--jk-text-2); }
475+.jk-source a, .jk-source button { color: var(--jk-text-2); background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--jk-border-2); cursor: pointer; }
476+.jk-source a:hover, .jk-source button:hover { color: var(--jk-accent-deep); }
477+.jk-fine { font-size: 12.5px; color: var(--jk-muted); line-height: 1.5; margin: 8px 0 0; }
478+.jk-fine a { color: var(--jk-text-2); text-decoration: underline; text-underline-offset: 2px; }
479+.jk-fine.meth { margin-top: 0; }
480+
481+/* ---- états : squelettes, vides, erreurs ---- */
482+.jk-skel { border-radius: 10px; background: linear-gradient(90deg, #ecece8 25%, #f4f4f1 50%, #ecece8 75%); background-size: 400% 100%; animation: jk-shimmer 1.3s infinite linear; }
483+@keyframes jk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
484+.jk-skel-lines { display: flex; flex-direction: column; gap: 8px; }
485+.jk-skel-lines .jk-skel { height: 12px; }
486+.jk-skel-lines .jk-skel.short { width: 55%; }
487+.jk-empty { padding: 14px; border-radius: 12px; background: var(--jk-surface-2); border: 1px dashed var(--jk-border-2); color: var(--jk-muted); font-size: 13.5px; text-align: center; line-height: 1.45; }
488+.jk-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--jk-warning-soft); color: var(--jk-warning); font-size: 13.5px; }
489+.jk-error button { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: 6px 12px; font: 600 12.5px var(--font-body); cursor: pointer; min-height: 36px; }
490+.jk-page-error { max-width: 520px; margin: 60px auto; text-align: center; padding: 0 16px; }
491+.jk-page-error h2 { font-family: var(--font-display); letter-spacing: -0.02em; }
492+.jk-page-error p { color: var(--jk-text-2); }
493+.jk-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom) + var(--consent-h, 0px)); transform: translateX(-50%); z-index: var(--z-toast, 950); background: var(--jk-text); color: #fff; font: 600 13px var(--font-body); padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); animation: jk-up 0.25s ease; max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
494+
495+/* ---- prix / marché ---- */
496+.jk-market-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
497+.jk-market-big { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; line-height: 1; }
498+.jk-market-big small { font: 500 13px var(--font-body); color: var(--jk-muted); margin-left: 4px; letter-spacing: 0; }
499+.jk-market-sub { font-size: 13px; color: var(--jk-text-2); margin-top: 4px; }
500+.jk-histo { display: block; width: 100%; max-width: 520px; height: auto; margin: 12px 0 4px; }
501+.jk-histo-bar { fill: #dedfd9; }
502+.jk-histo-bar.on { fill: var(--jk-accent); }
503+.jk-histo-lbl { font: 700 10px var(--font-body); fill: var(--jk-text); }
504+.jk-histo-lbl.fv { fill: var(--jk-text-2); }
505+.jk-histo-axis { font: 500 9.5px var(--font-body); fill: var(--jk-muted); }
506+.jk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--jk-text-2); margin: 6px 0 0; }
507+.jk-meta b { color: var(--jk-text); }
508+
509+/* jauge du registre des loyers */
510+.jk-gauge { margin: 14px 0 6px; }
511+.jk-gauge-lbls { display: flex; justify-content: space-between; font: 600 11px var(--font-body); color: var(--jk-muted); margin-bottom: 6px; }
512+.jk-gauge-lbls .good { color: var(--jk-success); } .jk-gauge-lbls .bad { color: var(--jk-danger); }
513+.jk-gauge svg { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; }
514+.jk-gauge, .jk-gauge-lbls { max-width: 520px; }
515+.jk-gauge-track { fill: var(--jk-surface-2); stroke: var(--jk-border); }
516+.jk-gauge-box { fill: #ecece8; }
517+.jk-gauge-med { stroke: var(--jk-text-2); stroke-width: 1.5; }
518+.jk-gauge-me { fill: var(--jk-accent); stroke: #fff; stroke-width: 2.5; }
519+.jk-gauge-txt { font: 600 10.5px var(--font-body); fill: var(--jk-muted); }
520+.jk-gauge-txt.me { fill: var(--jk-text); font-weight: 700; }
521+.jk-bars { display: block; width: 100%; max-width: 520px; height: auto; margin: 6px 0 0; }
522+.jk-bar { fill: #dedfd9; }
523+.jk-bar.on { fill: var(--jk-accent); }
524+.jk-bar-val { font: 600 10px var(--font-body); fill: var(--jk-text-2); }
525+.jk-bar-cat { font: 600 11px var(--font-body); fill: var(--jk-text-2); }
526+.jk-bar-cat.on { fill: var(--jk-text); font-weight: 700; }
527+.jk-bar-n { font: 500 9.5px var(--font-body); fill: var(--jk-muted); }
528+.jk-bars-axe { stroke: var(--jk-border); }
529+
530+/* ---- risques / environnement ---- */
531+.jk-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
532+.jk-status-t { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
533+.jk-status-d { font-size: 13.5px; color: var(--jk-text-2); margin: 8px 0 0; line-height: 1.5; }
534+.jk-air { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
535+@media (max-width: 400px) { .jk-air { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
536+.jk-air-c { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--jk-border); background: var(--jk-surface-2); min-width: 0; }
537+.jk-air-p { font: 600 11.5px var(--font-body); color: var(--jk-muted); text-transform: uppercase; letter-spacing: 0.05em; }
538+.jk-air-v { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
539+.jk-air-v small { font: 500 11px var(--font-body); color: var(--jk-muted); margin-left: 3px; }
540+.jk-air-s { font-size: 11.5px; margin-top: 3px; line-height: 1.3; }
541+.jk-air-s.good { color: var(--jk-success); } .jk-air-s.warn { color: var(--jk-warning); } .jk-air-s.bad { color: var(--jk-danger); } .jk-air-s.neutral { color: var(--jk-muted); }
542+
543+/* ---- coût réel ---- */
544+.jk-cost { list-style: none; margin: 0; padding: 0; }
545+.jk-cost li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--jk-border); font-size: 13.5px; }
546+.jk-cost li:first-child { border-top: 0; }
547+.jk-cost .n { color: var(--jk-text-2); min-width: 0; }
548+.jk-cost .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
549+.jk-cost .v.na { color: var(--jk-muted); font-weight: 500; }
550+.jk-cost li.total { border-top: 1px solid var(--jk-border-2); margin-top: 4px; padding-top: 10px; font-size: 15px; }
551+.jk-cost li.total .n, .jk-cost li.total .v { color: var(--jk-text); font-weight: 700; }
552+.jk-cost li.annuel { font-size: 12.5px; color: var(--jk-muted); border-top: 0; padding-top: 0; }
553+.jk-cost-note { font-size: 12.5px; color: var(--jk-text-2); margin: 8px 0 0; }
554+
555+/* ---- dossier de l'immeuble (accordéons) ---- */
556+.jk-tl { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--jk-border); display: flex; flex-direction: column; gap: 8px; }
557+.jk-tl li { position: relative; font-size: 13px; color: var(--jk-text-2); }
558+.jk-tl li::before { content: ""; position: absolute; left: -17.5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--jk-surface); border: 2px solid var(--jk-border-2); }
559+.jk-tl li.prix::before { border-color: var(--jk-accent); }
560+.jk-tl li.disparition::before { border-color: var(--jk-danger); }
561+.jk-tl li.reapparition::before { border-color: var(--jk-success); }
562+.jk-tl-date { display: inline-block; min-width: 84px; font: 600 11.5px var(--font-body); color: var(--jk-muted); }
563+.jk-star { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--jk-text); display: inline-flex; align-items: center; gap: 5px; }
564+.jk-star svg { color: #e0a800; }
565+.jk-quote { margin: 10px 0 0; padding: 8px 12px; font-size: 13px; color: var(--jk-text-2); border-left: 3px solid var(--jk-border-2); background: var(--jk-surface-2); border-radius: 8px; }
566+.jk-quote footer { margin-top: 4px; font-size: 11.5px; color: var(--jk-muted); }
567+.jk-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
568+.jk-tag { font: 600 11.5px var(--font-body); padding: 2px 8px; border-radius: 999px; background: var(--jk-danger-soft); color: var(--jk-danger); }
569+.jk-tag.n { background: var(--jk-surface-2); color: var(--jk-text-2); border: 1px solid var(--jk-border); }
570+
571+/* ---- KA Scores (cercles compacts) ---- */
572+.jk-ks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
573+@media (max-width: 400px) { .jk-ks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
574+.jk-ks-c { text-align: center; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--jk-border); background: var(--jk-surface-2); min-width: 0; }
575+.jk-ks-c svg { width: 52px; height: 52px; transform: rotate(-90deg); }
576+.jk-ks-c .bg { fill: none; stroke: #e6e6e1; stroke-width: 5; }
577+.jk-ks-c .arc { fill: none; stroke: var(--jk-text); stroke-width: 5; stroke-linecap: round; }
578+.jk-ks-c.haut .arc { stroke: var(--jk-success); } .jk-ks-c.bon .arc { stroke: var(--jk-text); } .jk-ks-c.moyen .arc { stroke: var(--jk-warning); } .jk-ks-c.bas .arc { stroke: var(--jk-danger); }
579+.jk-ks-wrap { position: relative; width: 52px; height: 52px; margin: 0 auto; }
580+.jk-ks-v { position: absolute; inset: 0; display: grid; place-items: center; font: 700 15px var(--font-display); letter-spacing: -0.02em; }
581+.jk-ks-n { font: 600 11.5px var(--font-body); margin-top: 6px; color: var(--jk-text); }
582+.jk-ks-l { font-size: 10.5px; color: var(--jk-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
583+.jk-ks-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 18px; }
584+.jk-ks-detail h4 { margin: 8px 0 4px; font: 700 12.5px var(--font-body); color: var(--jk-text); }
585+.jk-ks-detail ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--jk-text-2); }
586+.jk-ks-detail li { margin: 2px 0; }
587+
588+/* ---- fin de fiche ---- */
589+.jk-end { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
590+@media (min-width: 640px) { .jk-end { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
591+.jk-end a, .jk-end button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--jk-border); background: var(--jk-surface); color: var(--jk-text); font: 600 13px var(--font-body); cursor: pointer; text-align: left; min-height: 64px; }
592+.jk-end a:hover, .jk-end button:hover { background: var(--jk-surface-2); }
593+.jk-end svg { color: var(--jk-accent-deep); }
594+.jk-end small { font-weight: 500; color: var(--jk-muted); font-size: 12px; }
595+.jk-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
596+.jk-sources li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--jk-border); font-size: 13px; align-items: center; }
597+.jk-sources li:first-child { border-top: 0; }
598+.jk-sources .n { font-weight: 600; grid-column: 1; grid-row: 1; }
599+.jk-sources .r { font-size: 12.5px; color: var(--jk-text-2); grid-column: 1; grid-row: 2; }
600+.jk-sources .d { font-size: 12px; color: var(--jk-muted); grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; align-self: start; }
601+.jk-sources a { color: var(--jk-text-2); text-decoration: underline; text-underline-offset: 2px; }
602+
603+
604+/* ---- ajouts Immo-Ka : héro, galerie, formulaire, tableaux, rôle ---- */
605+.jk-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--jk-muted); margin-bottom: 4px; }
606+.jk-gallery-empty { display: grid; place-items: center; aspect-ratio: 4 / 3; }
607+@media (min-width: 768px) { .jk-gallery-empty { aspect-ratio: 16 / 9; } }
608+.jk-gallery-empty .type-fallback { position: static; width: 100%; height: 100%; }
609+.jk-gallery-caption {
610+ position: absolute; left: 12px; top: 12px; z-index: 2; max-width: calc(100% - 24px);
611+ background: rgba(20, 24, 20, 0.62); color: #fff; font: 500 12px var(--font-body);
612+ padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
613+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
614+}
615+.jk-subtitle { margin: 14px 0 8px !important; font-weight: 600 !important; color: var(--jk-text-2) !important; font-size: 13px !important; }
616+.jk-subtitle small { font-weight: 500; color: var(--jk-muted); }
617+.jk-more .flip { transform: rotate(180deg); }
618+.jk-acc-ico { vertical-align: -2px; margin-right: 8px; color: var(--jk-muted); }
619+.jk-role { margin-top: 14px; }
620+.jk-tl li.baisse::before { border-color: var(--jk-success); }
621+.jk-tl li.hausse::before { border-color: var(--jk-warning); }
622+/* formulaire du calculateur */
623+.jk-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
624+@media (min-width: 640px) { .jk-form { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
625+.jk-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
626+.jk-form label span { font-size: 11.5px; color: var(--jk-muted); font-weight: 600; }
627+.jk-form input, .jk-form select {
628+ min-height: 42px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--jk-border); background: var(--jk-surface);
629+ font: 500 15px var(--font-body); color: var(--jk-text); width: 100%; min-width: 0; appearance: none; -webkit-appearance: none;
630+}
631+.jk-form select { background-image: linear-gradient(45deg, transparent 50%, var(--jk-muted) 50%), linear-gradient(135deg, var(--jk-muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
632+.jk-form input:focus, .jk-form select:focus { outline: 2px solid var(--jk-accent); outline-offset: 1px; }
633+/* tableaux (pièces, banques, amortissement) */
634+.jk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
635+.jk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
636+.jk-table th { text-align: left; font: 600 11.5px var(--font-body); color: var(--jk-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; border-bottom: 1px solid var(--jk-border); white-space: nowrap; }
637+.jk-table td { padding: 8px 8px; border-bottom: 1px solid var(--jk-border); vertical-align: top; color: var(--jk-text-2); }
638+.jk-table td:first-child { color: var(--jk-text); font-weight: 500; }
639+.jk-table tr:last-child td { border-bottom: 0; }
640+.jk-table a { color: var(--jk-text-2); text-decoration: underline; text-underline-offset: 2px; }
641+/* aside : courtier */
642+.jk-aside-broker { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--jk-text-2); }
643+.jk-aside-broker-k { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--jk-muted); }
644+.jk-aside-broker b { color: var(--jk-text); }
645+.jk-aside-broker a { display: inline-flex; align-items: center; gap: 6px; color: var(--jk-text-2); }
646+/* jauge Vrai-Prix : libellés */
647+.jk-gauge-lbls { margin-top: 4px; margin-bottom: 0; }
648+.jk-kv .v a { color: var(--jk-text-2); text-decoration: underline; text-underline-offset: 2px; }
649+.jk-kv .v { min-width: 0; overflow-wrap: anywhere; }
650+
651+.jk-fiche h3[id] { scroll-margin-top: calc(var(--jk-header-h) + var(--jk-nav-h) + 10px); }
652+
653+
654+/* ---- ajouts Job·Ka : logo employeur, titre en exergue, carte ---- */
655+.jk-hero-emp { display: flex; align-items: center; gap: 14px; }
656+.jk-logo { width: 56px; height: 56px; flex: none; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--jk-border); padding: 4px; }
657+.jk-logo-fallback { display: grid; place-items: center; font: 700 22px var(--font-display); color: var(--jk-accent-deep); background: var(--jk-accent-soft); border-color: transparent; }
658+.jk-hero .jk-price { font-size: clamp(24px, 6.4vw, 32px); }
659+.jk-h1-big { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 5.6vw, 34px); letter-spacing: -0.03em; line-height: 1.1; }
660+.jk-h1-big .jk-city { font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: 0; margin-top: 6px; }
661+.jk-map { height: 300px; }
662+@media (min-width: 768px) { .jk-map { height: 360px; } }
663+.jk-map-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
664+.jk-ka-ctx img { object-fit: contain; background: #fff; }
665+.jk-gauge svg text.jk-gauge-txt { font-size: 10px; }
666+
667+/* ---- accessibilité mouvement réduit ---- */
668+@media (prefers-reduced-motion: reduce) {
669+ .jk-sheet, .jk-sheet-backdrop, .jk-toast, .jk-kpi.anim .jk-kpi-v { animation: none; }
670+ .jk-score-ring .arc, .jk-acc-body, .jk-cta-bar { transition: none; }
671+}
672+
673+/* ---- utilitaire a11y ---- */
674+.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
added frontend/src/fiche/synthese.ts +111 −0
@@ -0,0 +1,111 @@
1+/**
2+ * =============================================================================
3+ * Job·Ka — Groupe KA
4+ * Auteur : Simon-Pierre Boucher
5+ * Contact : contact@spboucher.ai
6+ * Fichier : frontend/src/fiche/synthese.ts
7+ * Rôle : Synthèse DÉTERMINISTE de la fiche d'offre (aucun LLM, aucune donnée
8+ * inventée) : position du salaire face au marché de sa catégorie
9+ * (salary_context calculé côté API), constats « En bref », résumé.
10+ * Créé : 2026-09-07
11+ * =============================================================================
12+ */
13+import {
14+ Job, LANG_FR, MODE_FR, SENIORITY_FR, TYPE_FR, compactMoney, daysSince, formatDate, formatSalary,
15+} from "../api";
16+import { Tone, NBSP } from "./ui";
17+
18+export interface ComparaisonSalaire {
19+ tone: "good" | "ok" | "high"; // good = au-dessus du marché (avantage candidat)
20+ pct: number; // écart signé en % vs médiane de la catégorie
21+ label: string;
22+ court: string;
23+ ref: number; // médiane ($/an)
24+ n: number;
25+ categorie: string;
26+}
27+
28+export function comparaisonSalaire(job: Job): ComparaisonSalaire | null {
29+ const ctx = job.salary_context;
30+ if (!ctx || ctx.job_mid == null || ctx.delta_pct == null || ctx.n < 20) return null;
31+ const pct = Math.round(ctx.delta_pct);
32+ const tone = pct >= 5 ? "good" : pct >= -5 ? "ok" : "high";
33+ return {
34+ tone, pct, ref: ctx.median, n: ctx.n, categorie: ctx.category || "toutes catégories",
35+ label: tone === "good" ? "Au-dessus du marché" : tone === "ok" ? "Dans le marché" : "Sous le marché",
36+ court: `${pct > 0 ? "↑" : pct < 0 ? "↓" : "≈"} ${Math.abs(pct)}${NBSP}% vs médiane`,
37+ };
38+}
39+
40+export interface Constat { tone: Tone; titre: string; detail: string; cle: string; }
41+
42+export function enBref(job: Job): Constat[] {
43+ const out: Constat[] = [];
44+ const salaire = formatSalary(job);
45+ const cmp = comparaisonSalaire(job);
46+
47+ // 1. salaire
48+ if (salaire && cmp) {
49+ out.push({ cle: "salaire", tone: cmp.tone === "good" ? "good" : cmp.tone === "high" ? "warn" : "neutral",
50+ titre: cmp.tone === "good" ? `Salaire ${Math.abs(cmp.pct)}${NBSP}% au-dessus du marché` : cmp.tone === "high" ? `Salaire ${Math.abs(cmp.pct)}${NBSP}% sous le marché` : "Salaire dans le marché",
51+ detail: `${salaire} · médiane ${compactMoney(cmp.ref)}/an sur ${cmp.n.toLocaleString("fr-CA")} offres (${cmp.categorie})` });
52+ } else if (salaire) {
53+ out.push({ cle: "salaire", tone: "good", titre: "Salaire affiché", detail: `${salaire} — publié par l'employeur, jamais estimé par Job·Ka` });
54+ } else {
55+ out.push({ cle: "salaire", tone: "neutral", titre: "Salaire non affiché", detail: "L'employeur n'a pas publié de rémunération" });
56+ }
57+
58+ // 2. offre directe / source
59+ if (job.is_direct !== false)
60+ out.push({ cle: "direct", tone: "good", titre: "Offre publiée à la source", detail: `Page carrière de ${job.employer}${job.ats ? ` (${job.ats})` : ""} — pas un portail intermédiaire` });
61+ else
62+ out.push({ cle: "direct", tone: "neutral", titre: "Offre relayée par un portail", detail: `${job.ats || job.source} — la candidature se fait chez l'employeur` });
63+
64+ // 3. exigences
65+ const r = job.requirements ?? {};
66+ const ex: string[] = [];
67+ if (typeof r.experience_years === "number") ex.push(`${r.experience_years} an${r.experience_years > 1 ? "s" : ""} d'expérience`);
68+ if (typeof r.education === "string" && r.education && r.education.toLowerCase() !== "aucun") ex.push(r.education);
69+ if (Array.isArray(r.languages) && r.languages.length) ex.push(r.languages.length === 2 ? "bilingue" : r.languages.join(", "));
70+ if (ex.length) out.push({ cle: "exig", tone: "neutral", titre: "Exigences explicites", detail: ex.join(" · ") });
71+ else if (typeof r.education === "string" && r.education.toLowerCase() === "aucun") out.push({ cle: "exig", tone: "good", titre: "Aucun diplôme exigé", detail: "Extrait du texte de l'offre" });
72+
73+ // 4. mode et type
74+ const mode: string[] = [];
75+ if (job.work_mode) mode.push(MODE_FR[job.work_mode] ?? job.work_mode);
76+ if (job.employment_type) mode.push(TYPE_FR[job.employment_type] ?? job.employment_type);
77+ if (job.seniority) mode.push(SENIORITY_FR[job.seniority] ?? job.seniority);
78+ if (mode.length) out.push({ cle: "mode", tone: job.work_mode === "teletravail" ? "good" : "info", titre: mode.join(" · "), detail: job.language ? `Langue de travail : ${LANG_FR[job.language] ?? job.language}` : "Conditions publiées par l'employeur" });
79+
80+ // 5. fraîcheur et date limite
81+ const days = daysSince(job.date_posted);
82+ const deadlineIn = job.date_deadline ? Math.round((new Date(`${job.date_deadline}T12:00:00`).getTime() - Date.now()) / 86400000) : null;
83+ if (deadlineIn != null && deadlineIn >= 0 && deadlineIn <= 7)
84+ out.push({ cle: "limite", tone: "warn", titre: deadlineIn === 0 ? "Dernier jour pour postuler" : `Plus que ${deadlineIn} jour${deadlineIn > 1 ? "s" : ""} pour postuler`, detail: `Date limite : ${formatDate(job.date_deadline)}` });
85+ else if (deadlineIn != null && deadlineIn < 0)
86+ out.push({ cle: "limite", tone: "bad", titre: "Date limite dépassée", detail: `Limite publiée : ${formatDate(job.date_deadline)} — l'offre peut rester affichée par l'employeur` });
87+ else if (days != null && days <= 3)
88+ out.push({ cle: "frais", tone: "good", titre: days === 0 ? "Publiée aujourd'hui" : `Publiée il y a ${days} jour${days > 1 ? "s" : ""}`, detail: "Offre récente — candidatures probablement encore ouvertes" });
89+ else if (days != null && days >= 45)
90+ out.push({ cle: "frais", tone: "neutral", titre: `En ligne depuis ${days} jours`, detail: "Offre ancienne — vérifiez qu'elle est toujours ouverte" });
91+
92+ // 6. employeur
93+ if (typeof job.employer_jobs === "number" && job.employer_jobs > 1)
94+ out.push({ cle: "emp", tone: "info", titre: `${job.employer} recrute pour ${job.employer_jobs} postes`, detail: "Offres actives suivies par Job·Ka chez cet employeur" });
95+
96+ // 7. avantages
97+ if (job.benefits && job.benefits.length >= 3)
98+ out.push({ cle: "benef", tone: "good", titre: `${job.benefits.length} avantages annoncés`, detail: job.benefits.slice(0, 3).join(" · ") });
99+
100+ return out.slice(0, 6);
101+}
102+
103+/** Ligne résumé : « Présentiel · Temps plein · Senior · Montréal » */
104+export function ligneResume(job: Job): string[] {
105+ const p: string[] = [];
106+ if (job.work_mode) p.push(MODE_FR[job.work_mode] ?? job.work_mode);
107+ if (job.employment_type) p.push(TYPE_FR[job.employment_type] ?? job.employment_type);
108+ if (job.seniority) p.push(SENIORITY_FR[job.seniority] ?? job.seniority);
109+ if (job.city) p.push(job.city);
110+ return p;
111+}
added frontend/src/fiche/ui.tsx +177 −0
@@ -0,0 +1,177 @@
1+// -----------------------------------------------------------------------------
2+// Job·Ka — Agrégateur d'offres d'emploi (province de Québec)
3+// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
4+// fiche/ui.tsx : primitives d'interface de la fiche d'offre (refonte
5+// premium 2026-09-07, même socle que la fiche Lou-Ka v3) :
6+// SectionCard · Accordion · StatTile · StatusBadge · Skeleton · EmptyState ·
7+// ErrorState · MoreButton · SourceLine · useToast — sans dépendance externe,
8+// ARIA correcte, cibles tactiles ≥ 44 px, animations légères.
9+// -----------------------------------------------------------------------------
10+import { ReactNode, useCallback, useEffect, useId, useState } from "react";
11+import { createPortal } from "react-dom";
12+import { Ico } from "../components/Icons";
13+
14+export type Tone = "good" | "warn" | "bad" | "neutral" | "info";
15+
16+/* --- carte de section ------------------------------------------------------ */
17+export function SectionCard({ id, title, icon, sub, aside, children, className = "", label }: {
18+ id?: string; title?: ReactNode; icon?: ReactNode; sub?: ReactNode; aside?: ReactNode;
19+ children: ReactNode; className?: string; label?: string;
20+}) {
21+ return (
22+ <section id={id} className={`jk-card ${className}`} aria-label={label}>
23+ {(title || aside) && (
24+ <div className="jk-card-head">
25+ <div>
26+ {title && <h2 className="jk-card-title">{icon}{title}</h2>}
27+ {sub && <p className="jk-card-sub">{sub}</p>}
28+ </div>
29+ {aside && <div className="jk-card-aside">{aside}</div>}
30+ </div>
31+ )}
32+ {children}
33+ </section>
34+ );
35+}
36+
37+/* --- accordéon accessible (bouton + région, animation grid-rows) ----------- */
38+export function Accordion({ title, meta, children, defaultOpen = false, small = false, onToggle }: {
39+ title: ReactNode; meta?: ReactNode; children: ReactNode; defaultOpen?: boolean;
40+ small?: boolean; onToggle?: (open: boolean) => void;
41+}) {
42+ const [open, setOpen] = useState(defaultOpen);
43+ const id = useId();
44+ return (
45+ <div className={`jk-acc ${small ? "sm" : ""}`}>
46+ <button type="button" className="jk-acc-btn" aria-expanded={open}
47+ aria-controls={`${id}-body`} id={`${id}-btn`}
48+ onClick={() => { setOpen(!open); onToggle?.(!open); }}>
49+ <span>{title}</span>
50+ {meta && <span className="jk-acc-meta">{meta}</span>}
51+ <Ico name="chevdown" size={18} className="chev" />
52+ </button>
53+ <div className={`jk-acc-body ${open ? "open" : ""}`} id={`${id}-body`}
54+ role="region" aria-labelledby={`${id}-btn`}>
55+ <div><div className="jk-acc-inner">{children}</div></div>
56+ </div>
57+ </div>
58+ );
59+}
60+
61+/* --- tuile KPI ------------------------------------------------------------- */
62+export function StatTile({ value, unit, label, accent = false, anim = true }: {
63+ value: ReactNode; unit?: ReactNode; label: ReactNode; accent?: boolean; anim?: boolean;
64+}) {
65+ return (
66+ <div className={`jk-kpi ${accent ? "accent" : ""} ${anim ? "anim" : ""}`}>
67+ <div className={`jk-kpi-v ${typeof value === "string" && value.length > 8 ? "wrap" : ""}`}>{value}{unit && <small>{unit}</small>}</div>
68+ <div className="jk-kpi-l">{label}</div>
69+ </div>
70+ );
71+}
72+
73+/* --- pastille d'état ------------------------------------------------------- */
74+export function StatusBadge({ tone = "neutral", children, lg = false }: {
75+ tone?: Tone; children: ReactNode; lg?: boolean;
76+}) {
77+ return <span className={`jk-badge ${tone} ${lg ? "lg" : ""}`}>{children}</span>;
78+}
79+
80+/* --- squelettes ------------------------------------------------------------ */
81+export function Skeleton({ h = 14, w, r, className = "" }: { h?: number | string; w?: number | string; r?: number; className?: string }) {
82+ return <div className={`jk-skel ${className}`} style={{ height: h, width: w ?? "100%", borderRadius: r }} aria-hidden="true" />;
83+}
84+export function SkeletonLines({ n = 3 }: { n?: number }) {
85+ return (
86+ <div className="jk-skel-lines" aria-busy="true">
87+ {Array.from({ length: n }).map((_, i) => (
88+ <div key={i} className={`jk-skel ${i === n - 1 ? "short" : ""}`} />
89+ ))}
90+ </div>
91+ );
92+}
93+
94+/* --- états vides / erreur -------------------------------------------------- */
95+export function EmptyState({ children = "Aucune donnée disponible pour ce secteur." }: { children?: ReactNode }) {
96+ return <div className="jk-empty">{children}</div>;
97+}
98+export function ErrorState({ onRetry, children = "Données temporairement indisponibles." }: {
99+ onRetry?: () => void; children?: ReactNode;
100+}) {
101+ return (
102+ <div className="jk-error" role="alert">
103+ <span>{children}</span>
104+ {onRetry && <button type="button" onClick={onRetry}>Réessayer</button>}
105+ </div>
106+ );
107+}
108+
109+/* --- bouton « Voir plus » pleine largeur ----------------------------------- */
110+export function MoreButton({ children, onClick, expanded }: {
111+ children: ReactNode; onClick: () => void; expanded?: boolean;
112+}) {
113+ return (
114+ <button type="button" className="jk-more" onClick={onClick} aria-expanded={expanded}>
115+ {children}
116+ <Ico name="chevdown" size={16} className={expanded ? "flip" : ""} />
117+ </button>
118+ );
119+}
120+
121+/* --- ligne « Source : … · Méthodologie » en pied de section ---------------- */
122+export function SourceLine({ name, href, date, onMethod, methodLabel = "Méthodologie" }: {
123+ name: ReactNode; href?: string; date?: ReactNode; onMethod?: () => void; methodLabel?: string;
124+}) {
125+ return (
126+ <div className="jk-source">
127+ <span>
128+ Source : <b>{href ? <a href={href} target="_blank" rel="noopener noreferrer">{name}</a> : name}</b>
129+ {date && <> · {date}</>}
130+ </span>
131+ {onMethod && <button type="button" onClick={onMethod}>{methodLabel}</button>}
132+ </div>
133+ );
134+}
135+
136+/* --- toast minimal (retour d'action : favoris, lien copié) ------------------ */
137+export function useToast(): [ReactNode, (msg: string) => void] {
138+ const [msg, setMsg] = useState<string | null>(null);
139+ useEffect(() => {
140+ if (!msg) return;
141+ const t = setTimeout(() => setMsg(null), 2200);
142+ return () => clearTimeout(t);
143+ }, [msg]);
144+ const show = useCallback((m: string) => setMsg(m), []);
145+ const node = msg
146+ ? createPortal(<div className="jk-toast" role="status" aria-live="polite">{msg}</div>, document.body)
147+ : null;
148+ return [node, show];
149+}
150+
151+/* --- utilitaires de format -------------------------------------------------- */
152+export const NBSP = " ";
153+export const fmtN = (v: number, d = 0) =>
154+ v.toLocaleString("fr-CA", { maximumFractionDigits: d, minimumFractionDigits: d });
155+export const fmtPct = (v: number, signed = true) =>
156+ `${signed ? (v > 0 ? "+" : v < 0 ? "−" : "") : ""}${Math.abs(Math.round(v))}${NBSP}%`;
157+/** ≈ minutes de marche (vol d'oiseau × 1,3 de détour, 4,8 km/h) */
158+export const marcheMin = (m: number) => Math.max(1, Math.round((m * 1.3) / 80));
159+export const fmtMarche = (m: number) => `${marcheMin(m)}${NBSP}min`;
160+export const relTime = (ts: number | null | undefined): string | null => {
161+ if (!ts) return null;
162+ const s = Date.now() / 1000 - ts;
163+ if (s < 3600) return "à l'instant";
164+ if (s < 86400) return `il y a ${Math.round(s / 3600)}${NBSP}h`;
165+ const j = Math.round(s / 86400);
166+ if (j < 30) return `il y a ${j}${NBSP}jour${j > 1 ? "s" : ""}`;
167+ return new Date(ts * 1000).toLocaleDateString("fr-CA", { day: "numeric", month: "short", year: "numeric" });
168+};
169+/** « 19 989 $ (2026) » → 19989 ; « 1 640 pi² » → 1640 ; sinon null */
170+export const parseMontant = (v: unknown): number | null => {
171+ if (v == null) return null;
172+ const s = String(v).replace(/\(.*?\)/g, "").replace(/[^\d.,]/g, "").replace(/\s/g, "");
173+ if (!s) return null;
174+ // « 19 989 » et « 19989,50 » : la virgule est décimale, le point aussi
175+ const n = parseFloat(s.replace(/,(\d{1,2})$/, ".$1").replace(/,/g, ""));
176+ return Number.isFinite(n) && n > 0 ? n : null;
177+};
modified frontend/src/pages/Job.tsx +97 −185
@@ -4,44 +4,39 @@
4 * Auteur : Simon-Pierre Boucher 4 * Auteur : Simon-Pierre Boucher
5 * Contact : contact@spboucher.ai 5 * Contact : contact@spboucher.ai
6 * Fichier : frontend/src/pages/Job.tsx 6 * Fichier : frontend/src/pages/Job.tsx
7− * Rôle : Fiche d'une offre — panneau de métriques « En un coup d'œil » 7+ * Rôle : Fiche d'une offre — refonte premium 2026-09-07 (même socle que
8− * (salaire vs marché, exigences, fraîcheur), description, lien vers 8+ * les fiches Lou-Ka v3 / Immo-Ka v3). Ordre DOM = ordre visuel,
9− * l'offre originale, cœur ♥ favoris « Mon univers Ka » 9+ * identique mobile ET desktop (aucun `order`) : héro (employeur ·
10− * Créé : 2026-08-17 Modifié : 2026-08-25 10+ * salaire · capsules · titre · actions) → En bref → navigation
11+ * sticky → Salaire et marché → Le poste (+ avantages, description) →
12+ * Où travailler → Dossier → Sources. Desktop ≥ 1024 px : colonne
13+ * principale + aside sticky. Aucun scrollIntoView à l'ouverture.
14+ * Créé : 2026-08-17 Modifié : 2026-09-07
11 * ============================================================================= 15 * =============================================================================
12 */ 16 */
13−import { ReactNode, useEffect, useState } from "react"; 17+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
14 import { Link, useParams } from "react-router-dom"; 18 import { Link, useParams } from "react-router-dom";
15−import { 19+import { Job, displayTitle, fetchJob, formatSalary } from "../api";
16− agoLabel, compactMoney, daysSince, displayTitle, fetchJob, formatDate, 20+import { Ico } from "../components/Icons";
17− formatSalary, Job, LANG_FR, MODE_FR, SENIORITY_FR, TYPE_FR, yearlyEquiv, 21+import { jobFavItem, useFav } from "../favorites";
18−} from "../api"; 22+import "../fiche/fiche.css";
19−import { FavButton } from "../favorites"; 23+import { setCurrentListing } from "../fiche/current";
24+import { comparaisonSalaire, enBref } from "../fiche/synthese";
25+import JobHero from "../fiche/JobHero";
26+import SectionNav, { NavItem } from "../fiche/SectionNav";
27+import SalaryCard from "../fiche/SalaryCard";
28+import JobFacts from "../fiche/JobFacts";
29+import { DesktopAside, Dossier, KaAssistant, LocationCard, Sources, StickyCTA, Summary, usePastElement } from "../fiche/Closing";
30+import { Skeleton, useToast } from "../fiche/ui";
20 31
21−/** Tuile métrique : valeur mise en avant + libellé mono + précision optionnelle. */ 32+function FicheSkeleton() {
22−function Metric({ label, value, sub, title }: {
23− label: string; value: ReactNode; sub?: ReactNode; title?: string;
24−}) {
25 return ( 33 return (
26− <div className="metric" title={title}> 34+ <div className="jk-fiche"><div className="jk-wrap" aria-busy="true" aria-label="Chargement de la fiche">
27− <div className="m-value">{value}</div> 35+ <Skeleton h={14} w={180} /><div style={{ height: 10 }} />
28− <div className="m-label">{label}</div> 36+ <Skeleton h={38} w={260} /><div style={{ height: 10 }} />
29− {sub && <div className="m-sub">{sub}</div>} 37+ <Skeleton h={22} w="80%" /><div style={{ height: 14 }} /><Skeleton h={46} /><div style={{ height: 14 }} />
30− </div> 38+ <div className="jk-card"><Skeleton h={14} /><div style={{ height: 8 }} /><Skeleton h={14} w="80%" /><div style={{ height: 8 }} /><Skeleton h={14} w="60%" /></div>
31− ); 39+ </div></div>
32−}
33−
34−/** Barre de position du salaire de l'offre dans la fourchette P25–P75 de sa
35− * catégorie (fenêtre interquartile = zone « normale » du marché). */
36−function MarketBar({ p25, p75, mid }: { p25: number; p75: number; mid: number }) {
37− const lo = p25 * 0.75, hi = p75 * 1.25; // marges autour des quartiles
38− const pct = (v: number) => Math.min(100, Math.max(0, ((v - lo) / (hi - lo)) * 100));
39− return (
40− <div className="market-bar" aria-hidden="true">
41− <div className="mb-track" />
42− <div className="mb-window" style={{ left: `${pct(p25)}%`, width: `${pct(p75) - pct(p25)}%` }} />
43− <div className="mb-marker" style={{ left: `${pct(mid)}%` }} />
44− </div>
45 ); 40 );
46 } 41 }
47 42
@@ -49,168 +44,85 @@ export default function JobPage() {
49 const { uid = "" } = useParams(); 44 const { uid = "" } = useParams();
50 const [job, setJob] = useState<Job | null>(null); 45 const [job, setJob] = useState<Job | null>(null);
51 const [error, setError] = useState(""); 46 const [error, setError] = useState("");
47+ const { ids, toggle, connected } = useFav();
48+ const [toast, showToast] = useToast();
49+ const actionsRef = useRef<HTMLDivElement>(null);
50+ const pastHero = usePastElement(actionsRef);
52 51
53 useEffect(() => { 52 useEffect(() => {
54− setJob(null); 53+ setJob(null); setError(""); setCurrentListing(null);
55− fetchJob(uid).then(setJob).catch((e) => setError(String(e))); 54+ fetchJob(uid).then((j) => { setJob(j); setCurrentListing(j); }).catch((e) => setError(String(e)));
56 window.scrollTo(0, 0); 55 window.scrollTo(0, 0);
56+ return () => setCurrentListing(null);
57 }, [uid]); 57 }, [uid]);
58+ useEffect(() => { document.body.classList.add("jk-fiche-page"); return () => document.body.classList.remove("jk-fiche-page"); }, []);
59+ useEffect(() => { if (job) document.title = `${displayTitle(job)} — ${job.employer}${formatSalary(job) ? ` · ${formatSalary(job)}` : ""} | Job·Ka`; }, [job]);
58 60
59− if (error) return <div className="container empty"><h2>Offre introuvable</h2><Link to="/">← Retour aux offres</Link></div>; 61+ const fav = !!(job && ids.has(job.uid));
60− if (!job) return <div className="container empty">Chargement…</div>; 62+ const onFav = useCallback(() => {
63+ if (!job) return;
64+ toggle(jobFavItem(job));
65+ if (connected) showToast(fav ? "Retiré des favoris" : "Ajouté à vos favoris");
66+ }, [job, toggle, connected, fav, showToast]);
67+ const onShare = useCallback(async () => {
68+ if (!job) return;
69+ const url = `https://www.job-ka.com/emploi/${encodeURIComponent(job.uid)}`;
70+ try {
71+ if (navigator.share) { await navigator.share({ title: `${displayTitle(job)} — ${job.employer} | Job·Ka`, url }); return; }
72+ await navigator.clipboard.writeText(url); showToast("Lien copié");
73+ } catch { /* annulé */ }
74+ }, [job, showToast]);
61 75
62− const salary = formatSalary(job); 76+ const cmp = useMemo(() => (job ? comparaisonSalaire(job) : null), [job]);
63− const yearly = yearlyEquiv(job); 77+ const brief = useMemo(() => (job ? enBref(job) : []), [job]);
64− const days = daysSince(job.date_posted);
65− const deadlineDays = job.date_deadline ? daysSince(job.date_deadline) : null;
66− const deadlineIn = job.date_deadline
67− ? Math.round((new Date(`${job.date_deadline}T12:00:00`).getTime() - Date.now()) / 86400000)
68− : null;
69− const ctx = job.salary_context;
70− const reqs = job.requirements ?? {};
71− const langsReq = reqs.languages;
72− const history = (job.salary_history ?? []).filter((h) => h.s_min != null);
73 78
74− return ( 79+ if (error)
75− <main className="container"> 80+ return (
76− <div className="sheet"> 81+ <div className="jk-fiche"><div className="jk-page-error">
77− <p className="muted"><Link to="/">← Toutes les offres</Link></p> 82+ <Ico name="alert" size={40} />
78− <div style={{ display: "flex", alignItems: "center", gap: 14 }}> 83+ <h2>Offre introuvable</h2>
79− {job.company_logo && ( 84+ <p>Cette offre n'existe pas ou a été retirée par l'employeur.</p>
80− <img 85+ <Link className="jk-btn jk-btn-primary" to="/">Retour aux offres</Link>
81− src={job.company_logo} 86+ </div></div>
82− alt={`Logo ${job.employer}`} 87+ );
83− style={{ width: 56, height: 56, objectFit: "contain", borderRadius: 8, background: "#fff", border: "1.5px solid var(--ink)", flexShrink: 0 }} 88+ if (!job) return <FicheSkeleton />;
84− onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
85− />
86− )}
87− <h1 style={{ margin: 0, flex: 1 }}>{displayTitle(job)}</h1>
88− <FavButton job={job} big />
89− </div>
90− <p style={{ margin: "6px 0 0" }}>
91− <span className="employer" style={{ color: "var(--accent-deep)", fontWeight: 600 }}>{job.employer}</span>
92− {typeof job.employer_jobs === "number" && job.employer_jobs > 1 && (
93− <span className="muted"> · {job.employer_jobs} offres actives</span>
94− )}
95− {job.location_label && <span className="muted"> — {job.location_label}</span>}
96− {job.region && job.region !== "Québec" && <span className="muted"> ({job.region})</span>}
97− </p>
98 89
99− <div className="facts"> 90+ const geo = job.lat != null && job.lng != null;
100− {days !== null && days <= 3 && <span className="badge new">Nouveau</span>} 91+ const nav: NavItem[] = [
101− {job.is_direct !== false && <span className="badge direct">Offre directe</span>} 92+ { id: "resume", label: "Résumé" },
102− {job.seniority && <span className="badge seniority">{SENIORITY_FR[job.seniority] ?? job.seniority}</span>} 93+ ...(formatSalary(job) || job.salary_context ? [{ id: "salaire", label: "Salaire" }] : []),
103− {job.work_mode && <span className="badge mode">{MODE_FR[job.work_mode] ?? job.work_mode}</span>} 94+ { id: "poste", label: "Poste" },
104− {job.employment_type && <span className="badge">{TYPE_FR[job.employment_type] ?? job.employment_type}</span>} 95+ ...(job.benefits?.length ? [{ id: "avantages", label: "Avantages" }] : []),
105− {job.language && <span className="badge">{LANG_FR[job.language] ?? job.language}</span>} 96+ { id: "description", label: "Description" },
106− {job.category && <span className="badge">{job.category}</span>} 97+ ...(geo ? [{ id: "carte", label: "Carte" }] : []),
107− {job.active === 0 && <span className="badge" style={{ background: "#fde8e8", color: "#a02222" }}>Offre retirée</span>} 98+ { id: "dossier", label: "Dossier" }, { id: "sources", label: "Sources" },
108− </div> 99+ ];
109 100
110− {/* --- En un coup d'œil : métriques claires, jamais inventées --------- */} 101+ return (
111− <h2 className="section-title" style={{ marginTop: 18 }}>En un coup d'œil</h2> 102+ <div className="jk-fiche">
112− <div className="metrics"> 103+ <div className="jk-wrap">
113− <Metric 104+ <nav className="jk-crumbs" aria-label="Fil d'Ariane">
114− label="Salaire affiché" 105+ <Link to="/">Offres</Link><span aria-hidden="true">›</span>
115− value={salary ?? "Non affiché"} 106+ {job.city && <><Link to={`/ville/${encodeURIComponent(job.city)}`}>{job.city}</Link><span aria-hidden="true">›</span></>}
116− sub={salary 107+ <span>{displayTitle(job)}</span>
117− ? (yearly ?? (job.salary_hour_min != null && job.salary_unit !== "hour" 108+ </nav>
118− ? `≈ ${job.salary_hour_min.toLocaleString("fr-CA", { maximumFractionDigits: 2 })} $/h` 109+ <div className="jk-grid">
119− : null)) 110+ <div className="jk-main">
120− : "L'employeur n'a pas publié de salaire"} 111+ <JobHero job={job} cmp={cmp} fav={fav} onFav={onFav} onShare={onShare} actionsRef={actionsRef} />
121− title="Salaire tel que publié par l'employeur — jamais estimé par Job·Ka" 112+ <Summary items={brief} loading={false} />
122− /> 113+ <SectionNav items={nav} />
123− {ctx && ctx.job_mid != null && ctx.delta_pct != null && ( 114+ <SalaryCard job={job} cmp={cmp} />
124− <Metric 115+ <JobFacts job={job} />
125− label={`Vs marché ${ctx.category || "toutes catégories"}`} 116+ <LocationCard job={job} />
126− value={ 117+ <Dossier job={job} />
127− <span className={ctx.delta_pct >= 0 ? "delta-up" : "delta-down"}> 118+ <Sources job={job} onShare={onShare} />
128− {ctx.delta_pct > 0 ? "+" : ""}{ctx.delta_pct.toLocaleString("fr-CA")} % 119+ </div>
129− </span> 120+ <DesktopAside job={job} cmp={cmp} brief={brief} fav={fav} onFav={onFav} onShare={onShare} />
130− }
131− sub={
132− <>
133− <MarketBar p25={ctx.p25} p75={ctx.p75} mid={ctx.job_mid} />
134− médiane {compactMoney(ctx.median)} · P25 {compactMoney(ctx.p25)} – P75 {compactMoney(ctx.p75)} · {ctx.n.toLocaleString("fr-CA")} offres comparées
135− </>
136− }
137− title="Écart entre le point médian de la fourchette de l'offre et la médiane des salaires affichés de la même catégorie sur Job·Ka"
138− />
139− )}
140− {typeof reqs.experience_years === "number" && (
141− <Metric
142− label="Expérience exigée"
143− value={`${reqs.experience_years} an${reqs.experience_years > 1 ? "s" : ""} min.`}
144− sub="Extrait du texte de l'offre"
145− />
146− )}
147− {typeof reqs.education === "string" && (
148− <Metric label="Scolarité exigée" value={reqs.education} sub="Plus bas diplôme accepté" />
149− )}
150− {Array.isArray(langsReq) && langsReq.length > 0 && (
151− <Metric
152− label="Langues exigées"
153− value={langsReq.length === 2 ? "Bilingue" : langsReq.join(", ")}
154− sub={langsReq.length === 2 ? "Français et anglais" : undefined}
155− />
156− )}
157− {days !== null && (
158− <Metric
159− label="Fraîcheur"
160− value={agoLabel(days)}
161− sub={`Publiée le ${formatDate(job.date_posted)}`}
162− />
163− )}
164− {deadlineIn !== null && deadlineDays !== null && (
165− <Metric
166− label="Date limite"
167− value={deadlineIn >= 0 ? `dans ${deadlineIn} jour${deadlineIn > 1 ? "s" : ""}` : "dépassée"}
168− sub={formatDate(job.date_deadline)}
169− title="Date limite pour postuler, publiée par l'employeur"
170− />
171− )}
172 </div> 121 </div>
173−
174− <p>
175− <a className="btn btn-apply" href={job.apply_url || job.url} target="_blank" rel="noopener noreferrer">
176− Postuler chez {job.employer} ↗
177− </a>
178− </p>
179− <p className="muted">
180− Offre collectée directement sur la page carrière ({job.ats}) — Job·Ka
181− n'est pas un intermédiaire, la candidature se fait chez l'employeur.
182− </p>
183−
184− {history.length > 1 && (
185− <>
186− <h2 className="section-title">Évolution du salaire affiché</h2>
187− <ul className="salary-history">
188− {history.map((h, i) => (
189− <li key={i}>
190− <span className="muted">{new Date(h.ts * 1000).toLocaleDateString("fr-CA")}</span>
191− {" — "}
192− {formatSalary({ salary_min: h.s_min, salary_max: h.s_max, salary_unit: h.unit })}
193− </li>
194− ))}
195− </ul>
196− </>
197− )}
198−
199− {job.benefits && job.benefits.length > 0 && (
200− <>
201− <h2 className="section-title">Avantages</h2>
202− <ul>
203− {job.benefits.map((b, i) => <li key={i}>{b}</li>)}
204− </ul>
205− </>
206− )}
207− {job.description && (
208− <>
209− <h2 className="section-title">Description du poste</h2>
210− <div className="description">{job.description}</div>
211− </>
212− )}
213 </div> 122 </div>
214− </main> 123+ <StickyCTA job={job} cmp={cmp} show={pastHero} />
124+ <KaAssistant job={job} hidden={!pastHero} />
125+ {toast}
126+ </div>
215 ); 127 );
216 } 128 }
modified frontend/src/styles.css +6 −5
@@ -409,16 +409,17 @@ header.site.menu-open .menu-btn { visibility: hidden; }
409 .sort-quiet select:focus { outline: none; color: var(--accent-deep); } 409 .sort-quiet select:focus { outline: none; color: var(--accent-deep); }
410 410
411 /* --- liste d'offres : rangées éditoriales (fini les cartes bordées) ------------- */ 411 /* --- liste d'offres : rangées éditoriales (fini les cartes bordées) ------------- */
412−.job-list { margin: 0 0 30px; border-top: 2px solid var(--ink); } 412+.job-list { margin: 0 0 30px; display: flex; flex-direction: column; gap: 10px; }
413 .job-row { 413 .job-row {
414 position: relative; 414 position: relative;
415 display: grid; grid-template-columns: minmax(0, 1fr) auto auto; 415 display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
416 grid-template-areas: "main side fav"; 416 grid-template-areas: "main side fav";
417 gap: 2px 26px; align-items: start; 417 gap: 2px 26px; align-items: start;
418− padding: 19px 10px 19px 18px; 418+ padding: 18px 16px 18px 18px;
419− border-bottom: 1px solid var(--line); 419+ background: var(--surface); border: 1px solid rgba(20, 24, 20, 0.1); border-radius: 14px;
420+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); overflow: hidden;
420 color: inherit; text-decoration: none; 421 color: inherit; text-decoration: none;
421− transition: background 0.14s; 422+ transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
422 } 423 }
423 .job-row .jr-main { grid-area: main; } 424 .job-row .jr-main { grid-area: main; }
424 .job-row .jr-side { grid-area: side; } 425 .job-row .jr-side { grid-area: side; }
@@ -428,7 +429,7 @@ header.site.menu-open .menu-btn { visibility: hidden; }
428 background: var(--accent); transform: scaleY(0); transform-origin: top; 429 background: var(--accent); transform: scaleY(0); transform-origin: top;
429 transition: transform 0.16s ease; 430 transition: transform 0.16s ease;
430 } 431 }
431−.job-row:hover { background: var(--surface); text-decoration: none; } 432+.job-row:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); border-color: rgba(20, 24, 20, 0.18); text-decoration: none; }
432 .job-row:hover::before { transform: scaleY(1); } 433 .job-row:hover::before { transform: scaleY(1); }
433 .jr-main { min-width: 0; } 434 .jr-main { min-width: 0; }
434 .jr-title { 435 .jr-title {
435 436
Menu

Theme
↑↓ navigate ↵ open esc close / or ⌘K anywhere