SPB Git forge
spboucher.ai ↗

spb/groupe-ka

Public

Groupe KA — site du holding + KA ID (compte unique & SSO des 7 plateformes). Next.js 16, SQLite, Google & Apple login.

nextjstypescriptsqliteoauthssoapplegoogle
81commits 1branches 0releases
89.2 MBsize
maindefault branch
22 days agolast push
TypeScript 70.4% HTML 18.4% JavaScript 4% Python 3.8% CSS 3.4%

feat: poster HTML des bots éclaireurs ka2 · ka4 · ka6 (hors site)

Affiche autonome assets/poster/ka-bots-poster.html : « Tout le web.
Trois éclaireurs. », trois cartes d'identité (ka2 lime, ka4 orange,
ka6 rouge), socle commun Claude Haiku 4.5 + Firecrawl/Scrapfly,
engagements (robots.txt, données publiques, Loi 25), définition
« éclaireur ». Imprimable A3 portrait.

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

1 changed file +500 −0

added assets/poster/ka-bots-poster.html +500 −0
@@ -0,0 +1,500 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster de présentation des bots du Groupe KA (ka2 · ka4 · ka6) — fichier autonome, hors site. Imprimer en A3 portrait. -->
4 +<html lang="fr">
5 +<head>
6 +<meta charset="UTF-8" />
7 +<meta name="viewport" content="width=device-width, initial-scale=1" />
8 +<title>Groupe KA — Les bots éclaireurs : ka2 · ka4 · ka6 (poster)</title>
9 +<link rel="preconnect" href="https://fonts.googleapis.com" />
10 +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11 +<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" />
12 +<style>
13 + :root {
14 + --paper: #f5f3ee;
15 + --ink: #141814;
16 + --ink-2: #4d5551;
17 + --ink-3: #8b928c;
18 + --green: #1c5c41;
19 + --green-deep: #123f2e;
20 + --lime: #d9f26b;
21 + --lime-soft: #f0f9d2;
22 + --ka2: #d9f26b;
23 + --ka4: #ff9f45;
24 + --ka6: #ff5148;
25 + --display: "Space Grotesk", system-ui, sans-serif;
26 + --body: "Inter", system-ui, sans-serif;
27 + --mono: "JetBrains Mono", ui-monospace, monospace;
28 + }
29 + * { margin: 0; padding: 0; box-sizing: border-box; }
30 + html, body { background: #1a1e1a; }
31 + body {
32 + font-family: var(--body);
33 + color: var(--ink);
34 + display: flex;
35 + justify-content: center;
36 + padding: 40px 16px;
37 + }
38 +
39 + /* ---------- Le poster (ratio √2, façon A3 portrait) ---------- */
40 + .poster {
41 + width: 860px;
42 + min-height: 1216px;
43 + background: var(--paper);
44 + border: 3px solid var(--ink);
45 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
46 + padding: 44px 48px 36px;
47 + display: flex;
48 + flex-direction: column;
49 + position: relative;
50 + overflow: hidden;
51 + }
52 + .poster::after {
53 + content: "";
54 + position: absolute; inset: 0;
55 + pointer-events: none;
56 + opacity: 0.05;
57 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
58 + background-size: 5px 5px;
59 + }
60 +
61 + .mono { font-family: var(--mono); }
62 +
63 + /* ---------- En-tête : wordmark ---------- */
64 + .head {
65 + display: flex;
66 + align-items: baseline;
67 + justify-content: space-between;
68 + border-bottom: 2px solid var(--ink);
69 + padding-bottom: 18px;
70 + }
71 + .wordmark {
72 + font-family: var(--display);
73 + font-weight: 700;
74 + font-size: 34px;
75 + letter-spacing: -0.04em;
76 + display: inline-flex;
77 + align-items: baseline;
78 + gap: 7px;
79 + }
80 + .kabox {
81 + display: inline-block;
82 + background: var(--ink);
83 + color: var(--lime);
84 + border-radius: 8px;
85 + padding: 0 10px 4px;
86 + transform: rotate(-2deg);
87 + }
88 + .head .url {
89 + font-family: var(--mono);
90 + font-weight: 700;
91 + font-size: 12px;
92 + letter-spacing: 0.12em;
93 + text-transform: uppercase;
94 + color: var(--ink-2);
95 + }
96 +
97 + /* ---------- Titre ---------- */
98 + .kicker {
99 + font-family: var(--mono);
100 + font-weight: 700;
101 + font-size: 11px;
102 + letter-spacing: 0.18em;
103 + text-transform: uppercase;
104 + color: var(--green);
105 + margin-top: 26px;
106 + }
107 + h1 {
108 + font-family: var(--display);
109 + font-weight: 700;
110 + font-size: 64px;
111 + line-height: 0.97;
112 + letter-spacing: -0.035em;
113 + text-transform: uppercase;
114 + margin-top: 10px;
115 + }
116 + h1 .outline {
117 + color: transparent;
118 + -webkit-text-stroke: 2px var(--ink);
119 + }
120 + h1 .hl {
121 + background: var(--lime);
122 + box-shadow: 0 0 0 4px var(--lime);
123 + border-radius: 2px;
124 + }
125 + .lede {
126 + margin-top: 16px;
127 + max-width: 600px;
128 + font-size: 15px;
129 + line-height: 1.55;
130 + color: var(--ink-2);
131 + }
132 + .lede strong { color: var(--ink); }
133 +
134 + /* ---------- Le terrain : le web québécois ---------- */
135 + .figure {
136 + margin-top: 24px;
137 + flex: 1;
138 + display: flex;
139 + flex-direction: column;
140 + }
141 + .sources {
142 + display: flex;
143 + flex-wrap: wrap;
144 + justify-content: center;
145 + gap: 8px 10px;
146 + }
147 + .src {
148 + font-family: var(--mono);
149 + font-size: 10.5px;
150 + font-weight: 500;
151 + color: var(--ink-2);
152 + background: #fff;
153 + border: 1.5px solid var(--ink);
154 + border-radius: 999px;
155 + padding: 5px 12px;
156 + box-shadow: 3px 3px 0 rgba(20,24,20,0.2);
157 + white-space: nowrap;
158 + }
159 + .beams { display: block; width: 100%; height: 74px; }
160 + .beams line {
161 + stroke: var(--ink);
162 + stroke-width: 1.6;
163 + stroke-dasharray: 5 6;
164 + opacity: 0.55;
165 + animation: flow 1.6s linear infinite;
166 + }
167 + @keyframes flow { to { stroke-dashoffset: -22; } }
168 +
169 + /* ---------- Les trois cartes d'identité ---------- */
170 + .bots {
171 + display: grid;
172 + grid-template-columns: repeat(3, 1fr);
173 + gap: 16px;
174 + }
175 + .bot {
176 + background: #fff;
177 + border: 2px solid var(--ink);
178 + border-radius: 12px;
179 + box-shadow: 5px 5px 0 var(--ink);
180 + padding: 18px 18px 20px;
181 + display: flex;
182 + flex-direction: column;
183 + }
184 + .bot .tag {
185 + font-family: var(--mono);
186 + font-weight: 700;
187 + font-size: 10px;
188 + letter-spacing: 0.16em;
189 + text-transform: uppercase;
190 + color: var(--green);
191 + display: flex;
192 + justify-content: space-between;
193 + }
194 + .bot .mark {
195 + font-family: var(--display);
196 + font-weight: 700;
197 + font-size: 40px;
198 + letter-spacing: -0.04em;
199 + display: inline-flex;
200 + align-items: baseline;
201 + gap: 4px;
202 + margin-top: 12px;
203 + }
204 + .bot .digit {
205 + display: inline-block;
206 + background: var(--ink);
207 + border-radius: 8px;
208 + padding: 0 9px 3px;
209 + transform: rotate(-2deg);
210 + }
211 + .bot .dom {
212 + font-family: var(--mono);
213 + font-weight: 700;
214 + font-size: 11px;
215 + color: var(--ink-2);
216 + margin-top: 8px;
217 + }
218 + .bot .role {
219 + font-family: var(--display);
220 + font-weight: 700;
221 + font-size: 14.5px;
222 + line-height: 1.25;
223 + text-transform: uppercase;
224 + letter-spacing: -0.01em;
225 + margin-top: 12px;
226 + min-height: 54px;
227 + }
228 + .bot ul {
229 + list-style: none;
230 + margin-top: 12px;
231 + padding-top: 12px;
232 + border-top: 1.5px dashed rgba(20,24,20,0.3);
233 + display: flex;
234 + flex-direction: column;
235 + gap: 7px;
236 + flex: 1;
237 + }
238 + .bot li {
239 + position: relative;
240 + padding-left: 15px;
241 + font-size: 11.5px;
242 + line-height: 1.45;
243 + color: var(--ink-2);
244 + }
245 + .bot li::before {
246 + content: "";
247 + position: absolute;
248 + left: 0; top: 5px;
249 + width: 5px; height: 5px;
250 + transform: rotate(45deg);
251 + border: 1px solid var(--ink);
252 + background: var(--accent, var(--lime));
253 + }
254 + .bot li strong { color: var(--ink); }
255 +
256 + /* ---------- Le socle commun des bots ---------- */
257 + .stack {
258 + margin-top: 22px;
259 + background: var(--ink);
260 + color: var(--paper);
261 + border-radius: 14px;
262 + padding: 20px 26px;
263 + box-shadow: 6px 6px 0 rgba(20,24,20,0.28);
264 + display: flex;
265 + align-items: center;
266 + justify-content: space-between;
267 + gap: 24px;
268 + }
269 + .stack .eq {
270 + font-family: var(--display);
271 + font-weight: 700;
272 + font-size: 24px;
273 + line-height: 1.12;
274 + letter-spacing: -0.02em;
275 + text-transform: uppercase;
276 + white-space: nowrap;
277 + }
278 + .stack .eq .lime { color: var(--lime); }
279 + .stack .specs {
280 + font-family: var(--mono);
281 + font-weight: 500;
282 + font-size: 11px;
283 + line-height: 2.05;
284 + color: rgba(245,243,238,0.78);
285 + text-align: right;
286 + }
287 + .stack .specs strong { color: var(--lime); font-weight: 700; }
288 +
289 + /* ---------- Chips d'engagements ---------- */
290 + .stats {
291 + display: flex;
292 + flex-wrap: wrap;
293 + justify-content: center;
294 + gap: 9px;
295 + margin-top: 22px;
296 + }
297 + .chip {
298 + font-family: var(--mono);
299 + font-weight: 700;
300 + font-size: 11.5px;
301 + border: 1.5px solid var(--ink);
302 + border-radius: 999px;
303 + padding: 7px 14px;
304 + background: var(--lime-soft);
305 + white-space: nowrap;
306 + }
307 + .chip .dot {
308 + display: inline-block;
309 + width: 7px; height: 7px;
310 + border-radius: 999px;
311 + background: var(--green);
312 + margin-right: 7px;
313 + animation: pulse 1.8s ease-in-out infinite;
314 + }
315 + @keyframes pulse { 50% { opacity: 0.35; } }
316 +
317 + /* ---------- Pied ---------- */
318 + .foot {
319 + margin-top: 24px;
320 + border-top: 2px dashed rgba(20,24,20,0.35);
321 + padding-top: 18px;
322 + display: flex;
323 + justify-content: space-between;
324 + align-items: flex-end;
325 + gap: 24px;
326 + }
327 + .def { max-width: 540px; }
328 + .def .term {
329 + font-family: var(--display);
330 + font-weight: 700;
331 + font-size: 22px;
332 + letter-spacing: -0.03em;
333 + }
334 + .def .phon {
335 + font-family: var(--mono);
336 + font-weight: 500;
337 + font-size: 11.5px;
338 + color: var(--ink-3);
339 + margin-left: 6px;
340 + }
341 + .def p {
342 + margin-top: 5px;
343 + font-size: 12.5px;
344 + line-height: 1.5;
345 + color: var(--ink-2);
346 + }
347 + .def p strong { color: var(--ink); }
348 + .contact {
349 + text-align: right;
350 + font-family: var(--mono);
351 + font-size: 11px;
352 + font-weight: 700;
353 + line-height: 1.9;
354 + color: var(--ink-2);
355 + white-space: nowrap;
356 + }
357 + .contact .big { font-size: 13px; color: var(--ink); }
358 +
359 + /* ---------- Impression ---------- */
360 + @media print {
361 + html, body { background: none; padding: 0; }
362 + body { padding: 0; }
363 + .poster { box-shadow: none; border-width: 0; width: 100%; min-height: auto; }
364 + .beams line { animation: none; }
365 + .chip .dot { animation: none; }
366 + @page { size: A3 portrait; margin: 0; }
367 + }
368 +</style>
369 +</head>
370 +<body>
371 + <div class="poster">
372 +
373 + <!-- En-tête -->
374 + <header class="head">
375 + <span class="wordmark">Groupe <span class="kabox">KA</span></span>
376 + <span class="url">Les bots éclaireurs · www.groupe-ka.com</span>
377 + </header>
378 +
379 + <!-- Titre -->
380 + <p class="kicker">Agents de découverte web · IA · Québec</p>
381 + <h1>Tout le web.<br /><span class="outline">Trois</span> <span class="hl">éclaireurs.</span></h1>
382 + <p class="lede">
383 + <strong>Avant d&rsquo;agréger, il faut découvrir.</strong> ka2, ka4 et ka6 sont
384 + les bots IA du Groupe KA : ils explorent le web québécois, identifient les
385 + entités — entreprises, organisations, personnes, créateurs, sites — et
386 + cartographient le terrain avant que les connecteurs ·Ka ne s&rsquo;y branchent.
387 + </p>
388 +
389 + <!-- La figure : le terrain → les trois bots -->
390 + <div class="figure">
391 +
392 + <!-- 1. Le web québécois -->
393 + <div class="sources">
394 + <span class="src">entreprises.qc</span>
395 + <span class="src">organisations.qc</span>
396 + <span class="src">boutiques-en-ligne.qc</span>
397 + <span class="src">createurs.qc</span>
398 + <span class="src">agences.qc</span>
399 + <span class="src">marques.qc</span>
400 + <span class="src">medias.qc</span>
401 + <span class="src">sites-web.qc</span>
402 + </div>
403 +
404 + <!-- 2. Le faisceau qui converge vers les trois bots -->
405 + <svg class="beams" viewBox="0 0 860 74" preserveAspectRatio="none" aria-hidden="true">
406 + <line x1="70" y1="6" x2="145" y2="70" />
407 + <line x1="180" y1="6" x2="145" y2="70" />
408 + <line x1="290" y1="6" x2="145" y2="70" />
409 + <line x1="345" y1="6" x2="430" y2="70" />
410 + <line x1="430" y1="6" x2="430" y2="70" />
411 + <line x1="515" y1="6" x2="430" y2="70" />
412 + <line x1="580" y1="6" x2="715" y2="70" />
413 + <line x1="690" y1="6" x2="715" y2="70" />
414 + <line x1="790" y1="6" x2="715" y2="70" />
415 + </svg>
416 +
417 + <!-- 3. Les trois cartes d'identité -->
418 + <div class="bots">
419 +
420 + <article class="bot" style="--accent: var(--ka2)">
421 + <span class="tag"><span>BOT · 01</span><span>4 types</span></span>
422 + <span class="mark">ka<span class="digit" style="color: var(--ka2)">2</span></span>
423 + <span class="dom">www.ka2.bot</span>
424 + <p class="role">Cartographie générale du web québécois</p>
425 + <ul>
426 + <li><strong>Découvre et classe</strong> : entreprises, organisations, personnes, sites web</li>
427 + <li>Chaque page lue est <strong>comprise par l&rsquo;IA</strong>, pas seulement copiée</li>
428 + <li>Crawl plafonné : budget quotidien, délais entre requêtes</li>
429 + </ul>
430 + </article>
431 +
432 + <article class="bot" style="--accent: var(--ka4)">
433 + <span class="tag"><span>BOT · 02</span><span>5 types</span></span>
434 + <span class="mark">ka<span class="digit" style="color: var(--ka4)">4</span></span>
435 + <span class="dom">www.ka4.bot</span>
436 + <p class="role">Cartographie élargie, activité en direct</p>
437 + <ul>
438 + <li><strong>Cinq types d&rsquo;entités</strong> : + données générales</li>
439 + <li><strong>Tableau de bord public</strong> : l&rsquo;exploration se regarde en direct</li>
440 + <li>Bascule automatique entre backends de lecture</li>
441 + </ul>
442 + </article>
443 +
444 + <article class="bot" style="--accent: var(--ka6)">
445 + <span class="tag"><span>BOT · 03</span><span>Influence</span></span>
446 + <span class="mark">ka<span class="digit" style="color: var(--ka6)">6</span></span>
447 + <span class="dom">www.ka6.bot</span>
448 + <p class="role">Créateurs &amp; influenceurs du Québec</p>
449 + <ul>
450 + <li><strong>Cartographie l&rsquo;influence</strong> : créateurs, agences, marques</li>
451 + <li>Activité publique seulement — <strong>jamais la vie privée</strong></li>
452 + <li><strong>Droit de retrait renforcé</strong>, traité en priorité</li>
453 + </ul>
454 + </article>
455 + </div>
456 +
457 + <!-- 4. Le socle commun -->
458 + <div class="stack">
459 + <p class="eq">
460 + Les bots découvrent<br />
461 + <span class="lime">→ ·Ka agrège</span><br />
462 + → vous trouvez
463 + </p>
464 + <p class="specs">
465 + Moteur : <strong>Claude Haiku 4.5</strong> (Anthropic)<br />
466 + Lecture : <strong>Firecrawl · Scrapfly</strong><br />
467 + Journalisation complète · <strong>zéro boîte noire</strong>
468 + </p>
469 + </div>
470 + </div>
471 +
472 + <!-- Engagements -->
473 + <div class="stats">
474 + <span class="chip"><span class="dot"></span>3 bots en exploration</span>
475 + <span class="chip">robots.txt toujours respecté</span>
476 + <span class="chip">100 % données publiques</span>
477 + <span class="chip">Loi 25 · LPRPDE</span>
478 + <span class="chip">retrait sur demande · 48-72 h</span>
479 + </div>
480 +
481 + <!-- Pied -->
482 + <footer class="foot">
483 + <div class="def">
484 + <span class="term">éclaireur</span><span class="phon">/e.klɛ.ʁœʁ/ nom</span>
485 + <p>
486 + <strong>1.</strong> Celui qui part devant pour reconnaître le terrain.
487 + <strong>2.</strong> Chez Groupe KA : bot IA qui cartographie le web
488 + québécois — une nouvelle boutique, un gestionnaire, un créateur — et
489 + le signale aux plateformes ·Ka. « Les bots découvrent, ·Ka agrège. »
490 + </p>
491 + </div>
492 + <div class="contact">
493 + <span class="big">contact@groupe-ka.com</span><br />
494 + ka2.bot · ka4.bot · ka6.bot<br />
495 + © 2026 Groupe KA · Québec
496 + </div>
497 + </footer>
498 + </div>
499 +</body>
500 +</html>
501