SPB Git

spb/poster-ka Public

Posters de présentation des marques du Groupe KA — HTML autonomes, impression A3 portrait

groupe-kaposterhtmldesign
HTML 100%

feat: initial commit

Simon-Pierre Boucher committed 2 h ago (Aug 13, 2026)

Showing 35 changed files with +3,997 and −0

added .gitignore +1 −0
@@ -0,0 +1 @@
1 +.DS_Store
added README.md +43 −0
@@ -0,0 +1,43 @@
1 +# Poster KA
2 +
3 +Collection de posters de présentation pour les marques du **Groupe KA** — des fichiers HTML **100 % autonomes** (hors site), pensés pour être ouverts dans un navigateur et imprimés en **A3 portrait** (ratio √2, 860 × 1216 px).
4 +
5 +Auteur : Simon-Pierre Boucher — contact@spboucher.ai
6 +
7 +## Contenu
8 +
9 +Deux familles de posters par marque :
10 +
11 +- `<marque>-poster.html` — poster **de marque** : positionnement, proposition de valeur, identité visuelle.
12 +- `<marque>-app-poster.html` — poster **« l'app en action »** : captures d'écran desktop + mobile de l'application.
13 +
14 +| Marque | Poster de marque | Poster app |
15 +|---|---|---|
16 +| Groupe KA (holding) | `groupe-ka-poster.html` — *Mille sites. Un seul ·Ka.* | — |
17 +| Bots éclaireurs (ka2 · ka4 · ka6) | `ka-bots-poster.html` | — |
18 +| Auto·Ka — voitures usagées du Québec | `auto-ka-poster.html` | `auto-ka-app-poster.html` |
19 +| Fabri·Ka — produits québécois | `fabri-ka-poster.html` | `fabri-ka-app-poster.html` |
20 +| Food·Ka — prix d'épicerie du Québec | `food-ka-poster.html` | `food-ka-app-poster.html` |
21 +| Immo·Ka — propriétés à vendre du Québec | `immo-ka-poster.html` | `immo-ka-app-poster.html` |
22 +| Lou·Ka — logements à louer du Québec | `lou-ka-poster.html` | `lou-ka-app-poster.html` |
23 +| ValoPlex — la vraie valeur de votre plex | `valoplex-poster.html` | `valoplex-app-poster.html` |
24 +| Vrai-Prix — la vraie valeur de votre propriété | `vrai-prix-poster.html` | `vrai-prix-app-poster.html` |
25 +
26 +Le dossier `img/` contient les captures d'écran (desktop + mobile) et icônes utilisées par les posters « app en action ».
27 +
28 +## Utilisation
29 +
30 +1. Ouvrir n'importe quel fichier `.html` directement dans un navigateur (double-clic suffit — aucun serveur, aucune dépendance locale).
31 +2. Imprimer en **A3 portrait** (ou exporter en PDF) pour obtenir le poster final.
32 +
33 +Seule dépendance externe : les polices Google Fonts (Space Grotesk, Inter, JetBrains Mono), chargées en ligne. Sans connexion, les posters restent lisibles avec les polices système de repli.
34 +
35 +## Design
36 +
37 +- Papier crème (`#f5f3ee`), encre presque noire, vert profond et lime — la palette Groupe KA.
38 +- Bordures franches, ombre portée dure, grain discret en surimpression.
39 +- Typographie : Space Grotesk (titres), Inter (texte), JetBrains Mono (accents techniques).
40 +
41 +## Licence
42 +
43 +MIT © Simon-Pierre Boucher
added auto-ka-app-poster.html +171 −0
@@ -0,0 +1,171 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster vitrine auto-ka (by Groupe KA) — logo + captures d'écran de l'app en direct. -->
4 +<html lang="fr">
5 +<head>
6 +<meta charset="UTF-8" />
7 +<meta name="viewport" content="width=device-width, initial-scale=1" />
8 +<title>Auto·Ka by Groupe KA — l'app en action (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: #f4f2ec; --ink: #17181c; --ink-2: #4c4f57; --ink-3: #8b8e96;
15 + --sec: #cc3f16; --accent: #ff5a2a; --accent-soft: #ffe8de; --on-accent: #ffffff;
16 + --display: "Space Grotesk", system-ui, sans-serif;
17 + --body: "Inter", system-ui, sans-serif;
18 + --mono: "JetBrains Mono", ui-monospace, monospace;
19 + }
20 + * { margin: 0; padding: 0; box-sizing: border-box; }
21 + html, body { background: #17181c; }
22 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
23 +
24 + .poster {
25 + width: 860px; min-height: 1216px;
26 + background: var(--paper);
27 + border: 3px solid var(--ink);
28 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
29 + padding: 44px 48px 36px;
30 + display: flex; flex-direction: column;
31 + position: relative; overflow: hidden;
32 + }
33 + .poster::after {
34 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
35 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
36 + background-size: 5px 5px;
37 + }
38 +
39 + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
40 + .brand { display: flex; align-items: center; gap: 14px; }
41 + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); }
42 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; }
43 + .kabox { display: inline-block; background: #17181c; color: #ff5a2a; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); }
44 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; }
45 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; }
46 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
47 +
48 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; }
49 + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; }
50 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
51 + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
52 +
53 + /* ---------- L'app à l'écran ---------- */
54 + .shot { margin-top: 26px; position: relative; }
55 + .browser {
56 + width: 730px;
57 + background: #fff;
58 + border: 2.5px solid var(--ink);
59 + border-radius: 14px;
60 + box-shadow: 8px 8px 0 var(--ink);
61 + overflow: hidden;
62 + }
63 + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); }
64 + .bbar .dots { display: flex; gap: 5px; }
65 + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); }
66 + .bbar .dots span:nth-child(1) { background: var(--accent); }
67 + .bbar .dots span:nth-child(2) { background: var(--accent-soft); }
68 + .bbar .dots span:nth-child(3) { background: #fff; }
69 + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; }
70 + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; }
71 +
72 + .phone {
73 + position: absolute; right: 0; bottom: -34px;
74 + width: 196px;
75 + background: var(--ink);
76 + border-radius: 26px;
77 + padding: 7px;
78 + box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
79 + transform: rotate(2deg);
80 + }
81 + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; }
82 + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; }
83 + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
84 +
85 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; }
86 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
87 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
88 + @keyframes pulse { 50% { opacity: 0.35; } }
89 +
90 + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
91 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
92 + .strip .eq .acc { color: var(--accent); }
93 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; }
94 + .strip .side strong { color: var(--accent); font-weight: 700; }
95 +
96 + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
97 + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; }
98 + .foot .left strong { color: var(--ink); }
99 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
100 + .contact .big { font-size: 13px; color: var(--ink); }
101 +
102 + @media print {
103 + html, body { background: none; padding: 0; }
104 + .poster { box-shadow: none; min-height: 1221px; }
105 + .chip .dot { animation: none; }
106 + @page { size: 860px 1221px; margin: 0; }
107 + }
108 +</style>
109 +</head>
110 +<body>
111 + <div class="poster">
112 + <header class="head">
113 + <div class="brand">
114 + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo Auto·Ka"><rect width="64" height="64" rx="12" fill="#17181c"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#ff5a2a" text-anchor="middle">AK</text></svg>
115 + <div>
116 + <span class="wordmark">Auto<span class="kabox">Ka</span></span><br />
117 + <span class="by">by Groupe <span class="minibox">KA</span></span>
118 + </div>
119 + </div>
120 + <span class="url">www.auto-ka.com</span>
121 + </header>
122 +
123 + <p class="kicker">Agrégateur de voitures usagées · Québec</p>
124 + <h1>L'occasion au complet,<br /><span class="hl">en une recherche.</span></h1>
125 + <p class="lede">17 000+ véhicules de 125 concessionnaires, lus directement sur leurs sites — VIN, kilométrage et équipements normalisés, aubaines détectées.</p>
126 +
127 + <div class="shot">
128 + <div class="browser">
129 + <div class="bbar">
130 + <div class="dots"><span></span><span></span><span></span></div>
131 + <span class="addr">https://www.auto-ka.com</span>
132 + </div>
133 + <img src="img/auto-ka-desktop.png" alt="Auto·Ka — vue bureau" />
134 + </div>
135 + <div class="phone">
136 + <span class="notch"></span>
137 + <img src="img/auto-ka-mobile.png" alt="Auto·Ka — vue mobile" />
138 + </div>
139 + <span class="caption">L'app en direct · capturée le 13 août 2026</span>
140 + </div>
141 +
142 + <div class="stats">
143 + <span class="chip"><span class="dot"></span>17 000+ véhicules</span>
144 + <span class="chip">125 concessionnaires</span>
145 + <span class="chip">18 régions</span>
146 + <span class="chip">suivi des baisses de prix</span>
147 + </div>
148 +
149 + <div class="strip">
150 + <p class="eq">Toutes les voitures usagées.<br /><span class="acc">Un seul endroit.</span></p>
151 + <p class="side">
152 + 100 % automatisé, <strong>zéro boîte noire</strong><br />
153 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
154 + </p>
155 + </div>
156 +
157 + <footer class="foot">
158 + <p class="left">
159 + <strong>Auto·Ka</strong> est l'une des sept plateformes du Groupe KA —
160 + des agrégateurs entièrement automatisés qui lisent les sites à la source.
161 + « Tout ce qui finit en ·Ka agrège. »
162 + </p>
163 + <div class="contact">
164 + <span class="big">www.auto-ka.com</span><br />
165 + by Groupe KA · www.groupe-ka.com<br />
166 + © 2026 Groupe KA · Québec
167 + </div>
168 + </footer>
169 + </div>
170 +</body>
171 +</html>
added auto-ka-poster.html +216 −0
@@ -0,0 +1,216 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster de présentation Auto·Ka (by Groupe KA) — thème orangé/encre bleutée de www.auto-ka.com. 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>Auto·Ka by Groupe KA — Toutes les voitures usagées du Québec (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: #f4f2ec;
15 + --ink: #17181c;
16 + --ink-2: #4c4f57;
17 + --ink-3: #8b8e96;
18 + --sec: #cc3f16;
19 + --accent: #ff5a2a;
20 + --accent-soft: #ffe8de;
21 + --on-accent: #ffffff;
22 + --display: "Space Grotesk", system-ui, sans-serif;
23 + --body: "Inter", system-ui, sans-serif;
24 + --mono: "JetBrains Mono", ui-monospace, monospace;
25 + }
26 + * { margin: 0; padding: 0; box-sizing: border-box; }
27 + html, body { background: #17181c; }
28 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
29 +
30 + .poster {
31 + width: 860px; min-height: 1216px;
32 + background: var(--paper);
33 + border: 3px solid var(--ink);
34 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
35 + padding: 44px 48px 36px;
36 + display: flex; flex-direction: column;
37 + position: relative; overflow: hidden;
38 + }
39 + .poster::after {
40 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
41 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
42 + background-size: 5px 5px;
43 + }
44 +
45 + .head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
46 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; }
47 + .kabox { display: inline-block; background: var(--ink); color: var(--accent); border-radius: 8px; padding: 0 10px 4px; transform: rotate(-2deg); }
48 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; }
49 + .by .minika { font-family: var(--display); font-size: 13px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink); }
50 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); }
51 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
52 +
53 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 26px; }
54 + h1 { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 0.99; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 10px; }
55 + h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
56 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
57 + .lede { margin-top: 16px; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
58 + .lede strong { color: var(--ink); }
59 +
60 + .figure { margin-top: 24px; display: flex; flex-direction: column; }
61 + .sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
62 + .src { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 12px; box-shadow: 3px 3px 0 rgba(23,24,28,0.2); white-space: nowrap; }
63 + .beams { display: block; width: 100%; height: 78px; }
64 + .beams line { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: 0.55; animation: flow 1.6s linear infinite; }
65 + @keyframes flow { to { stroke-dashoffset: -22; } }
66 +
67 + .core { align-self: center; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 34px 20px; text-align: center; box-shadow: 6px 6px 0 rgba(23,24,28,0.28); transform: rotate(-1deg); position: relative; z-index: 1; }
68 + .core .k { font-family: var(--display); font-weight: 700; font-size: 42px; letter-spacing: -0.04em; line-height: 1; }
69 + .core .k .box { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 0 8px 3px; transform: rotate(-2deg); }
70 + .core .eq { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,242,236,0.75); margin-top: 7px; }
71 + .core .pill { position: absolute; top: -13px; right: -26px; background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; padding: 4px 11px; transform: rotate(3deg); white-space: nowrap; }
72 +
73 + .features { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
74 + .feat { background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); padding: 16px 18px 18px; }
75 + .feat .n { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--sec); }
76 + .feat h3 { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; text-transform: uppercase; margin-top: 6px; }
77 + .feat p { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
78 + .feat p strong { color: var(--ink); }
79 +
80 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 24px; }
81 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
82 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
83 + @keyframes pulse { 50% { opacity: 0.35; } }
84 +
85 + .strip { margin-top: 24px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 26px; box-shadow: 6px 6px 0 rgba(23,24,28,0.28); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
86 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
87 + .strip .eq .acc { color: var(--accent); }
88 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(244,242,236,0.78); text-align: right; white-space: nowrap; }
89 + .strip .side strong { color: var(--accent); font-weight: 700; }
90 +
91 + .foot { margin-top: auto; border-top: 2px dashed rgba(23,24,28,0.35); padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
92 + .def { max-width: 540px; }
93 + .def .term { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
94 + .def .phon { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
95 + .def p { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
96 + .def p strong { color: var(--ink); }
97 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
98 + .contact .big { font-size: 13px; color: var(--ink); }
99 +
100 + @media print {
101 + html, body { background: none; padding: 0; }
102 + .poster { box-shadow: none; min-height: 1347px; }
103 + .beams line { animation: none; }
104 + .chip .dot { animation: none; }
105 + @page { size: 860px 1347px; margin: 0; }
106 + }
107 +</style>
108 +</head>
109 +<body>
110 + <div class="poster">
111 +
112 + <header class="head">
113 + <div>
114 + <span class="wordmark">Auto<span class="kabox">Ka</span></span><br />
115 + <span class="by">by <span class="minika">Groupe <span class="minibox">KA</span></span></span>
116 + </div>
117 + <span class="url">www.auto-ka.com</span>
118 + </header>
119 +
120 + <p class="kicker">Agrégateur de voitures usagées · Québec</p>
121 + <h1>Toutes les voitures<br /><span class="outline">usagées.</span> <span class="hl">Un seul endroit.</span></h1>
122 + <p class="lede">
123 + <strong>L&rsquo;inventaire de 124 concessionnaires et marchands
124 + d&rsquo;occasion, lu directement sur leurs sites</strong> — jamais via les
125 + plateformes d&rsquo;annonces. Photos complètes, équipements, VIN,
126 + kilométrage normalisés ; les baisses de prix et les ventes sont détectées
127 + automatiquement.
128 + </p>
129 +
130 + <div class="figure">
131 + <div class="sources">
132 + <span class="src">concessionnaire.qc</span>
133 + <span class="src">marchand-occasion.ca</span>
134 + <span class="src">groupe-auto.qc</span>
135 + <span class="src">vehicules-usages.ca</span>
136 + <span class="src">inventaire-vo.qc</span>
137 + <span class="src">autos-regions.qc</span>
138 + <span class="src">occasion-certifiee.ca</span>
139 + </div>
140 + <svg class="beams" viewBox="0 0 860 78" preserveAspectRatio="none" aria-hidden="true">
141 + <line x1="90" y1="6" x2="430" y2="76" />
142 + <line x1="205" y1="6" x2="430" y2="76" />
143 + <line x1="320" y1="6" x2="430" y2="76" />
144 + <line x1="430" y1="6" x2="430" y2="76" />
145 + <line x1="540" y1="6" x2="430" y2="76" />
146 + <line x1="655" y1="6" x2="430" y2="76" />
147 + <line x1="770" y1="6" x2="430" y2="76" />
148 + </svg>
149 + <div class="core">
150 + <span class="pill">124 concessionnaires lus en direct</span>
151 + <div class="k">Auto<span class="box">Ka</span></div>
152 + <div class="eq">= tout le marché de l&rsquo;occasion, au même endroit</div>
153 + </div>
154 + </div>
155 +
156 + <div class="features">
157 + <article class="feat">
158 + <span class="n">01</span>
159 + <h3>Filtres complets</h3>
160 + <p><strong>Marque, modèle, année, kilométrage, carburant, région</strong> : le marché de l&rsquo;occasion au complet, filtrable finement.</p>
161 + </article>
162 + <article class="feat">
163 + <span class="n">02</span>
164 + <h3>Aubaines détectées</h3>
165 + <p>Le <strong>suivi des baisses de prix</strong> est automatique — les aubaines remontent d&rsquo;elles-mêmes, sans chercher.</p>
166 + </article>
167 + <article class="feat">
168 + <span class="n">03</span>
169 + <h3>Fiches enrichies</h3>
170 + <p><strong>Galeries complètes, équipements, moteur, Carfax</strong> : la fiche telle que le concessionnaire la publie, normalisée.</p>
171 + </article>
172 + <article class="feat">
173 + <span class="n">04</span>
174 + <h3>Rapport du marché</h3>
175 + <p>Un <strong>rapport PDF du marché de l&rsquo;occasion</strong>, téléchargeable — prix, volumes et tendances par région.</p>
176 + </article>
177 + </div>
178 +
179 + <div class="stats">
180 + <span class="chip"><span class="dot"></span>15 900+ véhicules en ligne</span>
181 + <span class="chip">124 concessionnaires</span>
182 + <span class="chip">18 régions couvertes</span>
183 + <span class="chip">VIN · km · équipements normalisés</span>
184 + </div>
185 +
186 + <div class="strip">
187 + <p class="eq">
188 + Lu chez le concessionnaire,<br />
189 + <span class="acc">jamais via les plateformes d&rsquo;annonces.</span>
190 + </p>
191 + <p class="side">
192 + Ventes et retraits <strong>détectés automatiquement</strong><br />
193 + Chaque fiche renvoie au <strong>site du marchand</strong><br />
194 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
195 + </p>
196 + </div>
197 +
198 + <footer class="foot">
199 + <div class="def">
200 + <span class="term">Auto·Ka</span><span class="phon">/o.to.ka/ — « auto + agrège »</span>
201 + <p>
202 + <strong>1.</strong> Plateforme du Groupe KA dédiée aux voitures
203 + usagées. <strong>2.</strong> L&rsquo;une des sept plateformes ·Ka :
204 + Lou·Ka loge, Immo·Ka vend, Auto·Ka roule, Fabri·Ka fabrique,
205 + Food·Ka nourrit. « Tout ce qui finit en ·Ka agrège. »
206 + </p>
207 + </div>
208 + <div class="contact">
209 + <span class="big">www.auto-ka.com</span><br />
210 + by Groupe KA · www.groupe-ka.com<br />
211 + © 2026 Groupe KA · Québec
212 + </div>
213 + </footer>
214 + </div>
215 +</body>
216 +</html>
added fabri-ka-app-poster.html +171 −0
@@ -0,0 +1,171 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster vitrine fabri-ka (by Groupe KA) — logo + captures d'écran de l'app en direct. -->
4 +<html lang="fr">
5 +<head>
6 +<meta charset="UTF-8" />
7 +<meta name="viewport" content="width=device-width, initial-scale=1" />
8 +<title>Fabri·Ka by Groupe KA — l'app en action (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=Fraunces:opsz,wght@9..144,600;9..144,700&family=Outfit:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" />
12 +<style>
13 + :root {
14 + --paper: #FAF6F0; --ink: #1E1B16; --ink-2: #6E6455; --ink-3: #9a8f7e;
15 + --sec: #234438; --accent: #C4532E; --accent-soft: #F1E9DD; --on-accent: #FAF6F0;
16 + --display: "Fraunces", Georgia, serif;
17 + --body: "Outfit", system-ui, sans-serif;
18 + --mono: "JetBrains Mono", ui-monospace, monospace;
19 + }
20 + * { margin: 0; padding: 0; box-sizing: border-box; }
21 + html, body { background: #1E1B16; }
22 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
23 +
24 + .poster {
25 + width: 860px; min-height: 1216px;
26 + background: var(--paper);
27 + border: 3px solid var(--ink);
28 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
29 + padding: 44px 48px 36px;
30 + display: flex; flex-direction: column;
31 + position: relative; overflow: hidden;
32 + }
33 + .poster::after {
34 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
35 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
36 + background-size: 5px 5px;
37 + }
38 +
39 + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
40 + .brand { display: flex; align-items: center; gap: 14px; }
41 + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); }
42 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; }
43 + .kabox { display: inline-block; background: #1E1B16; color: #C4532E; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); }
44 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; }
45 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; }
46 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
47 +
48 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; }
49 + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.015em; margin-top: 8px; }
50 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
51 + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
52 +
53 + /* ---------- L'app à l'écran ---------- */
54 + .shot { margin-top: 26px; position: relative; }
55 + .browser {
56 + width: 730px;
57 + background: #fff;
58 + border: 2.5px solid var(--ink);
59 + border-radius: 14px;
60 + box-shadow: 8px 8px 0 var(--ink);
61 + overflow: hidden;
62 + }
63 + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); }
64 + .bbar .dots { display: flex; gap: 5px; }
65 + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); }
66 + .bbar .dots span:nth-child(1) { background: var(--accent); }
67 + .bbar .dots span:nth-child(2) { background: var(--accent-soft); }
68 + .bbar .dots span:nth-child(3) { background: #fff; }
69 + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; }
70 + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; }
71 +
72 + .phone {
73 + position: absolute; right: 0; bottom: -34px;
74 + width: 196px;
75 + background: var(--ink);
76 + border-radius: 26px;
77 + padding: 7px;
78 + box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
79 + transform: rotate(2deg);
80 + }
81 + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; }
82 + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; }
83 + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
84 +
85 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; }
86 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
87 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
88 + @keyframes pulse { 50% { opacity: 0.35; } }
89 +
90 + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
91 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; }
92 + .strip .eq .acc { color: var(--accent); }
93 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; }
94 + .strip .side strong { color: var(--accent); font-weight: 700; }
95 +
96 + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
97 + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; }
98 + .foot .left strong { color: var(--ink); }
99 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
100 + .contact .big { font-size: 13px; color: var(--ink); }
101 +
102 + @media print {
103 + html, body { background: none; padding: 0; }
104 + .poster { box-shadow: none; min-height: 1221px; }
105 + .chip .dot { animation: none; }
106 + @page { size: 860px 1221px; margin: 0; }
107 + }
108 +</style>
109 +</head>
110 +<body>
111 + <div class="poster">
112 + <header class="head">
113 + <div class="brand">
114 + <img class="tile" src="img/fabri-ka-icon.svg" alt="Logo Fabri·Ka" />
115 + <div>
116 + <span class="wordmark">Fabri<span class="kabox">Ka</span></span><br />
117 + <span class="by">by Groupe <span class="minibox">KA</span></span>
118 + </div>
119 + </div>
120 + <span class="url">www.fabri-ka.com</span>
121 + </header>
122 +
123 + <p class="kicker">La vitrine des fabricants d'ici · Québec</p>
124 + <h1>Le Québec qui fabrique,<br /><span class="hl">en vitrine.</span></h1>
125 + <p class="lede">291 000+ produits de 1 266 boutiques en ligne québécoises, indexés par région et catégorie — chaque produit renvoie à la boutique du fabricant.</p>
126 +
127 + <div class="shot">
128 + <div class="browser">
129 + <div class="bbar">
130 + <div class="dots"><span></span><span></span><span></span></div>
131 + <span class="addr">https://www.fabri-ka.com</span>
132 + </div>
133 + <img src="img/fabri-ka-desktop.png" alt="Fabri·Ka — vue bureau" />
134 + </div>
135 + <div class="phone">
136 + <span class="notch"></span>
137 + <img src="img/fabri-ka-mobile.png" alt="Fabri·Ka — vue mobile" />
138 + </div>
139 + <span class="caption">L'app en direct · capturée le 13 août 2026</span>
140 + </div>
141 +
142 + <div class="stats">
143 + <span class="chip"><span class="dot"></span>291 000+ produits</span>
144 + <span class="chip">1 266 boutiques</span>
145 + <span class="chip">17 régions</span>
146 + <span class="chip">lien direct fabricant</span>
147 + </div>
148 +
149 + <div class="strip">
150 + <p class="eq">Tous les produits québécois.<br /><span class="acc">Un seul endroit.</span></p>
151 + <p class="side">
152 + 100 % automatisé, <strong>zéro boîte noire</strong><br />
153 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
154 + </p>
155 + </div>
156 +
157 + <footer class="foot">
158 + <p class="left">
159 + <strong>Fabri·Ka</strong> est l'une des sept plateformes du Groupe KA —
160 + des agrégateurs entièrement automatisés qui lisent les sites à la source.
161 + « Tout ce qui finit en ·Ka agrège. »
162 + </p>
163 + <div class="contact">
164 + <span class="big">www.fabri-ka.com</span><br />
165 + by Groupe KA · www.groupe-ka.com<br />
166 + © 2026 Groupe KA · Québec
167 + </div>
168 + </footer>
169 + </div>
170 +</body>
171 +</html>
added fabri-ka-poster.html +217 −0
@@ -0,0 +1,217 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster de présentation Fabri·Ka (by Groupe KA) — thème terracotta/pin, Fraunces + Outfit, de www.fabri-ka.com. 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>Fabri·Ka by Groupe KA — Tous les produits québécois (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=Fraunces:opsz,wght@9..144,600;9..144,700&family=Outfit:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" />
12 +<style>
13 + :root {
14 + --paper: #FAF6F0;
15 + --ink: #1E1B16;
16 + --ink-2: #6E6455;
17 + --ink-3: #9a8f7e;
18 + --sec: #234438;
19 + --accent: #C4532E;
20 + --accent-dark: #A94525;
21 + --sand: #F1E9DD;
22 + --border: #E4D9C8;
23 + --on-accent: #FAF6F0;
24 + --display: "Fraunces", Georgia, serif;
25 + --body: "Outfit", system-ui, sans-serif;
26 + --mono: "JetBrains Mono", ui-monospace, monospace;
27 + }
28 + * { margin: 0; padding: 0; box-sizing: border-box; }
29 + html, body { background: #1E1B16; }
30 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
31 +
32 + .poster {
33 + width: 860px; min-height: 1216px;
34 + background: var(--paper);
35 + border: 3px solid var(--ink);
36 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
37 + padding: 44px 48px 36px;
38 + display: flex; flex-direction: column;
39 + position: relative; overflow: hidden;
40 + }
41 + .poster::after {
42 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
43 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
44 + background-size: 5px 5px;
45 + }
46 +
47 + .head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
48 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; }
49 + .kabox { display: inline-block; background: var(--ink); color: var(--accent); border-radius: 8px; padding: 0 10px 5px; transform: rotate(-2deg); }
50 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; }
51 + .by .minika { font-family: var(--display); font-size: 13px; display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink); }
52 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); }
53 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
54 +
55 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 26px; }
56 + h1 { font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 1.02; letter-spacing: -0.015em; margin-top: 10px; }
57 + h1 .outline { color: transparent; -webkit-text-stroke: 1.6px var(--ink); }
58 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
59 + .lede { margin-top: 16px; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
60 + .lede strong { color: var(--ink); }
61 +
62 + .figure { margin-top: 24px; display: flex; flex-direction: column; }
63 + .sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
64 + .src { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: #fff; border: 1.5px solid var(--border); border-radius: 999px; padding: 5px 12px; box-shadow: 0 3px 8px rgba(30,27,22,0.08); white-space: nowrap; }
65 + .beams { display: block; width: 100%; height: 78px; }
66 + .beams line { stroke: var(--sec); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: 0.5; animation: flow 1.6s linear infinite; }
67 + @keyframes flow { to { stroke-dashoffset: -22; } }
68 +
69 + .core { align-self: center; background: var(--sec); color: var(--paper); border-radius: 14px; padding: 18px 34px 20px; text-align: center; box-shadow: 0 10px 26px rgba(35,68,56,0.35); transform: rotate(-1deg); position: relative; z-index: 1; }
70 + .core .k { font-family: var(--display); font-weight: 700; font-size: 42px; letter-spacing: -0.02em; line-height: 1; }
71 + .core .k .box { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 0 8px 4px; transform: rotate(-2deg); }
72 + .core .eq { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,246,240,0.75); margin-top: 7px; }
73 + .core .pill { position: absolute; top: -13px; right: -26px; background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; padding: 4px 11px; transform: rotate(3deg); white-space: nowrap; }
74 +
75 + .features { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
76 + .feat { background: #fff; border: 1.5px solid var(--border); border-radius: 12px; box-shadow: 0 6px 18px rgba(30,27,22,0.08); padding: 16px 18px 18px; }
77 + .feat .n { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--accent); }
78 + .feat h3 { font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; margin-top: 6px; color: var(--sec); }
79 + .feat p { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
80 + .feat p strong { color: var(--ink); }
81 +
82 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 24px; }
83 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--border); border-radius: 999px; padding: 7px 14px; background: var(--sand); color: var(--ink); white-space: nowrap; }
84 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
85 + @keyframes pulse { 50% { opacity: 0.35; } }
86 +
87 + .strip { margin-top: 24px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 26px; box-shadow: 0 10px 26px rgba(30,27,22,0.3); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
88 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
89 + .strip .eq .acc { color: var(--accent); }
90 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(250,246,240,0.78); text-align: right; white-space: nowrap; }
91 + .strip .side strong { color: var(--accent); font-weight: 700; }
92 +
93 + .foot { margin-top: auto; border-top: 2px dashed var(--border); padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
94 + .def { max-width: 540px; }
95 + .def .term { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--sec); }
96 + .def .phon { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
97 + .def p { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
98 + .def p strong { color: var(--ink); }
99 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
100 + .contact .big { font-size: 13px; color: var(--ink); }
101 +
102 + @media print {
103 + html, body { background: none; padding: 0; }
104 + .poster { box-shadow: none; min-height: 1323px; }
105 + .beams line { animation: none; }
106 + .chip .dot { animation: none; }
107 + @page { size: 860px 1323px; margin: 0; }
108 + }
109 +</style>
110 +</head>
111 +<body>
112 + <div class="poster">
113 +
114 + <header class="head">
115 + <div>
116 + <span class="wordmark">Fabri<span class="kabox">Ka</span></span><br />
117 + <span class="by">by <span class="minika">Groupe <span class="minibox">KA</span></span></span>
118 + </div>
119 + <span class="url">www.fabri-ka.com</span>
120 + </header>
121 +
122 + <p class="kicker">La vitrine des fabricants d&rsquo;ici · Québec</p>
123 + <h1>Tous les produits<br /><span class="outline">québécois.</span> <span class="hl">Un seul endroit.</span></h1>
124 + <p class="lede">
125 + <strong>La vitrine des fabricants et artisans d&rsquo;ici :</strong> plus de
126 + 280 000 produits provenant de 1 200 boutiques en ligne québécoises,
127 + indexés par région et par catégorie. Chaque produit renvoie directement à
128 + la boutique du fabricant — acheter local n&rsquo;a jamais été aussi simple.
129 + </p>
130 +
131 + <div class="figure">
132 + <div class="sources">
133 + <span class="src">savonnerie-artisanale.qc</span>
134 + <span class="src">microbrasserie.qc</span>
135 + <span class="src">ebenisterie.qc</span>
136 + <span class="src">ferme-locale.qc</span>
137 + <span class="src">créateurs-mode.qc</span>
138 + <span class="src">céramique-dici.qc</span>
139 + <span class="src">érablière.qc</span>
140 + </div>
141 + <svg class="beams" viewBox="0 0 860 78" preserveAspectRatio="none" aria-hidden="true">
142 + <line x1="90" y1="6" x2="430" y2="76" />
143 + <line x1="205" y1="6" x2="430" y2="76" />
144 + <line x1="320" y1="6" x2="430" y2="76" />
145 + <line x1="430" y1="6" x2="430" y2="76" />
146 + <line x1="540" y1="6" x2="430" y2="76" />
147 + <line x1="655" y1="6" x2="430" y2="76" />
148 + <line x1="770" y1="6" x2="430" y2="76" />
149 + </svg>
150 + <div class="core">
151 + <span class="pill">1 204 boutiques indexées</span>
152 + <div class="k">Fabri<span class="box">Ka</span></div>
153 + <div class="eq">= le Québec qui fabrique, au même endroit</div>
154 + </div>
155 + </div>
156 +
157 + <div class="features">
158 + <article class="feat">
159 + <span class="n">01</span>
160 + <h3>Découverte par région</h3>
161 + <p><strong>Région, catégorie, mot-clé</strong> : explorez ce qui se fabrique près de chez vous, ou partout au Québec.</p>
162 + </article>
163 + <article class="feat">
164 + <span class="n">02</span>
165 + <h3>Sans intermédiaire</h3>
166 + <p>Chaque produit renvoie <strong>directement à la boutique du fabricant</strong> — aucune commission, aucun détour.</p>
167 + </article>
168 + <article class="feat">
169 + <span class="n">03</span>
170 + <h3>Tout le territoire</h3>
171 + <p><strong>Des Îles-de-la-Madeleine à l&rsquo;Abitibi</strong> : 17 régions, et le savoir-faire de chacune.</p>
172 + </article>
173 + <article class="feat">
174 + <span class="n">04</span>
175 + <h3>Registre public</h3>
176 + <p>Un <strong>registre public de 3 200+ boutiques d&rsquo;ici</strong>, la carte la plus complète du commerce en ligne québécois.</p>
177 + </article>
178 + </div>
179 +
180 + <div class="stats">
181 + <span class="chip"><span class="dot"></span>281 000+ produits indexés</span>
182 + <span class="chip">1 204 boutiques en ligne</span>
183 + <span class="chip">17 régions du Québec</span>
184 + <span class="chip">registre de 3 200+ boutiques</span>
185 + </div>
186 +
187 + <div class="strip">
188 + <p class="eq">
189 + Acheter local,<br />
190 + <span class="acc">sans chercher pendant des heures.</span>
191 + </p>
192 + <p class="side">
193 + Chaque produit renvoie à <strong>la boutique du fabricant</strong><br />
194 + Indexé par <strong>région et catégorie</strong>, en continu<br />
195 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
196 + </p>
197 + </div>
198 +
199 + <footer class="foot">
200 + <div class="def">
201 + <span class="term">Fabri·Ka</span><span class="phon">/fa.bʁi.ka/ — « fabrique + agrège »</span>
202 + <p>
203 + <strong>1.</strong> Plateforme du Groupe KA dédiée aux produits
204 + québécois. <strong>2.</strong> L&rsquo;une des sept plateformes ·Ka :
205 + Lou·Ka loge, Immo·Ka vend, Auto·Ka roule, Fabri·Ka fabrique,
206 + Food·Ka nourrit. « Tout ce qui finit en ·Ka agrège. »
207 + </p>
208 + </div>
209 + <div class="contact">
210 + <span class="big">www.fabri-ka.com</span><br />
211 + by Groupe KA · www.groupe-ka.com<br />
212 + © 2026 Groupe KA · Québec
213 + </div>
214 + </footer>
215 + </div>
216 +</body>
217 +</html>
added food-ka-app-poster.html +171 −0
@@ -0,0 +1,171 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster vitrine food-ka (by Groupe KA) — logo + captures d'écran de l'app en direct. -->
4 +<html lang="fr">
5 +<head>
6 +<meta charset="UTF-8" />
7 +<meta name="viewport" content="width=device-width, initial-scale=1" />
8 +<title>Food·Ka by Groupe KA — l'app en action (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: #faf6ee; --ink: #14231a; --ink-2: #47564c; --ink-3: #839187;
15 + --sec: #1f7a4d; --accent: #d9f26b; --accent-soft: #eef6d4; --on-accent: #14231a;
16 + --display: "Space Grotesk", system-ui, sans-serif;
17 + --body: "Inter", system-ui, sans-serif;
18 + --mono: "JetBrains Mono", ui-monospace, monospace;
19 + }
20 + * { margin: 0; padding: 0; box-sizing: border-box; }
21 + html, body { background: #14231a; }
22 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
23 +
24 + .poster {
25 + width: 860px; min-height: 1216px;
26 + background: var(--paper);
27 + border: 3px solid var(--ink);
28 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
29 + padding: 44px 48px 36px;
30 + display: flex; flex-direction: column;
31 + position: relative; overflow: hidden;
32 + }
33 + .poster::after {
34 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
35 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
36 + background-size: 5px 5px;
37 + }
38 +
39 + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
40 + .brand { display: flex; align-items: center; gap: 14px; }
41 + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); }
42 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; }
43 + .kabox { display: inline-block; background: #14231a; color: #d9f26b; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); }
44 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; }
45 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; }
46 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
47 +
48 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; }
49 + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; }
50 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
51 + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
52 +
53 + /* ---------- L'app à l'écran ---------- */
54 + .shot { margin-top: 26px; position: relative; }
55 + .browser {
56 + width: 730px;
57 + background: #fff;
58 + border: 2.5px solid var(--ink);
59 + border-radius: 14px;
60 + box-shadow: 8px 8px 0 var(--ink);
61 + overflow: hidden;
62 + }
63 + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); }
64 + .bbar .dots { display: flex; gap: 5px; }
65 + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); }
66 + .bbar .dots span:nth-child(1) { background: var(--accent); }
67 + .bbar .dots span:nth-child(2) { background: var(--accent-soft); }
68 + .bbar .dots span:nth-child(3) { background: #fff; }
69 + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; }
70 + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; }
71 +
72 + .phone {
73 + position: absolute; right: 0; bottom: -34px;
74 + width: 196px;
75 + background: var(--ink);
76 + border-radius: 26px;
77 + padding: 7px;
78 + box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
79 + transform: rotate(2deg);
80 + }
81 + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; }
82 + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; }
83 + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
84 +
85 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; }
86 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
87 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
88 + @keyframes pulse { 50% { opacity: 0.35; } }
89 +
90 + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
91 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
92 + .strip .eq .acc { color: var(--accent); }
93 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; }
94 + .strip .side strong { color: var(--accent); font-weight: 700; }
95 +
96 + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
97 + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; }
98 + .foot .left strong { color: var(--ink); }
99 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
100 + .contact .big { font-size: 13px; color: var(--ink); }
101 +
102 + @media print {
103 + html, body { background: none; padding: 0; }
104 + .poster { box-shadow: none; min-height: 1221px; }
105 + .chip .dot { animation: none; }
106 + @page { size: 860px 1221px; margin: 0; }
107 + }
108 +</style>
109 +</head>
110 +<body>
111 + <div class="poster">
112 + <header class="head">
113 + <div class="brand">
114 + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo Food·Ka"><rect width="64" height="64" rx="12" fill="#14523a"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#d9f26b" text-anchor="middle">FK</text></svg>
115 + <div>
116 + <span class="wordmark">Food<span class="kabox">Ka</span></span><br />
117 + <span class="by">by Groupe <span class="minibox">KA</span></span>
118 + </div>
119 + </div>
120 + <span class="url">www.food-ka.com</span>
121 + </header>
122 +
123 + <p class="kicker">Comparateur de prix d'épicerie · Québec</p>
124 + <h1>Votre épicerie,<br /><span class="hl">comparée en direct.</span></h1>
125 + <p class="lede">26 000+ produits, 24 bannières — Metro, IGA, Maxi, Super C, Provigo et plus — avec soldes et prix unitaires normalisés ($/100 g, $/L).</p>
126 +
127 + <div class="shot">
128 + <div class="browser">
129 + <div class="bbar">
130 + <div class="dots"><span></span><span></span><span></span></div>
131 + <span class="addr">https://www.food-ka.com</span>
132 + </div>
133 + <img src="img/food-ka-desktop.png" alt="Food·Ka — vue bureau" />
134 + </div>
135 + <div class="phone">
136 + <span class="notch"></span>
137 + <img src="img/food-ka-mobile.png" alt="Food·Ka — vue mobile" />
138 + </div>
139 + <span class="caption">L'app en direct · capturée le 13 août 2026</span>
140 + </div>
141 +
142 + <div class="stats">
143 + <span class="chip"><span class="dot"></span>26 000+ produits suivis</span>
144 + <span class="chip">24 bannières</span>
145 + <span class="chip">2 980+ soldes actifs</span>
146 + <span class="chip">$/100 g · $/L</span>
147 + </div>
148 +
149 + <div class="strip">
150 + <p class="eq">Tous les prix d'épicerie.<br /><span class="acc">Un seul panier.</span></p>
151 + <p class="side">
152 + 100 % automatisé, <strong>zéro boîte noire</strong><br />
153 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
154 + </p>
155 + </div>
156 +
157 + <footer class="foot">
158 + <p class="left">
159 + <strong>Food·Ka</strong> est l'une des sept plateformes du Groupe KA —
160 + des agrégateurs entièrement automatisés qui lisent les sites à la source.
161 + « Tout ce qui finit en ·Ka agrège. »
162 + </p>
163 + <div class="contact">
164 + <span class="big">www.food-ka.com</span><br />
165 + by Groupe KA · www.groupe-ka.com<br />
166 + © 2026 Groupe KA · Québec
167 + </div>
168 + </footer>
169 + </div>
170 +</body>
171 +</html>
added food-ka-poster.html +217 −0
@@ -0,0 +1,217 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster de présentation Food·Ka (by Groupe KA) — thème vert épicerie/lime/tomate de www.food-ka.com. 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>Food·Ka by Groupe KA — Tous les prix d'épicerie du Québec (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: #faf6ee;
15 + --ink: #14231a;
16 + --ink-2: #47564c;
17 + --ink-3: #839187;
18 + --sec: #1f7a4d;
19 + --green-deep: #14523a;
20 + --accent: #d9f26b;
21 + --accent-soft: #eef6d4;
22 + --on-accent: #14231a;
23 + --tomato: #e8542f;
24 + --display: "Space Grotesk", system-ui, sans-serif;
25 + --body: "Inter", system-ui, sans-serif;
26 + --mono: "JetBrains Mono", ui-monospace, monospace;
27 + }
28 + * { margin: 0; padding: 0; box-sizing: border-box; }
29 + html, body { background: #14231a; }
30 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
31 +
32 + .poster {
33 + width: 860px; min-height: 1216px;
34 + background: var(--paper);
35 + border: 3px solid var(--ink);
36 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
37 + padding: 44px 48px 36px;
38 + display: flex; flex-direction: column;
39 + position: relative; overflow: hidden;
40 + }
41 + .poster::after {
42 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
43 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
44 + background-size: 5px 5px;
45 + }
46 +
47 + .head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
48 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; }
49 + .kabox { display: inline-block; background: var(--ink); color: var(--accent); border-radius: 8px; padding: 0 10px 4px; transform: rotate(-2deg); }
50 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; }
51 + .by .minika { font-family: var(--display); font-size: 13px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink); }
52 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); }
53 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
54 +
55 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 26px; }
56 + h1 { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 0.99; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 10px; }
57 + h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
58 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
59 + .lede { margin-top: 16px; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
60 + .lede strong { color: var(--ink); }
61 +
62 + .figure { margin-top: 24px; display: flex; flex-direction: column; }
63 + .sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
64 + .src { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 12px; box-shadow: 3px 3px 0 rgba(20,35,26,0.2); white-space: nowrap; }
65 + .beams { display: block; width: 100%; height: 78px; }
66 + .beams line { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: 0.55; animation: flow 1.6s linear infinite; }
67 + @keyframes flow { to { stroke-dashoffset: -22; } }
68 +
69 + .core { align-self: center; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 34px 20px; text-align: center; box-shadow: 6px 6px 0 rgba(20,35,26,0.28); transform: rotate(-1deg); position: relative; z-index: 1; }
70 + .core .k { font-family: var(--display); font-weight: 700; font-size: 42px; letter-spacing: -0.04em; line-height: 1; }
71 + .core .k .box { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 0 8px 3px; transform: rotate(-2deg); }
72 + .core .eq { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,246,238,0.75); margin-top: 7px; }
73 + .core .pill { position: absolute; top: -13px; right: -26px; background: var(--tomato); color: #fff; border: 2px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; padding: 4px 11px; transform: rotate(3deg); white-space: nowrap; }
74 +
75 + .features { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
76 + .feat { background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); padding: 16px 18px 18px; }
77 + .feat .n { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--sec); }
78 + .feat h3 { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; text-transform: uppercase; margin-top: 6px; }
79 + .feat p { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
80 + .feat p strong { color: var(--ink); }
81 +
82 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 24px; }
83 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
84 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--tomato); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
85 + @keyframes pulse { 50% { opacity: 0.35; } }
86 +
87 + .strip { margin-top: 24px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 26px; box-shadow: 6px 6px 0 rgba(20,35,26,0.28); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
88 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
89 + .strip .eq .acc { color: var(--accent); }
90 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(250,246,238,0.78); text-align: right; white-space: nowrap; }
91 + .strip .side strong { color: var(--accent); font-weight: 700; }
92 +
93 + .foot { margin-top: auto; border-top: 2px dashed rgba(20,35,26,0.35); padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
94 + .def { max-width: 540px; }
95 + .def .term { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
96 + .def .phon { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
97 + .def p { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
98 + .def p strong { color: var(--ink); }
99 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
100 + .contact .big { font-size: 13px; color: var(--ink); }
101 +
102 + @media print {
103 + html, body { background: none; padding: 0; }
104 + .poster { box-shadow: none; min-height: 1283px; }
105 + .beams line { animation: none; }
106 + .chip .dot { animation: none; }
107 + @page { size: 860px 1283px; margin: 0; }
108 + }
109 +</style>
110 +</head>
111 +<body>
112 + <div class="poster">
113 +
114 + <header class="head">
115 + <div>
116 + <span class="wordmark">Food<span class="kabox">Ka</span></span><br />
117 + <span class="by">by <span class="minika">Groupe <span class="minibox">KA</span></span></span>
118 + </div>
119 + <span class="url">www.food-ka.com</span>
120 + </header>
121 +
122 + <p class="kicker">Comparateur de prix d&rsquo;épicerie · Québec</p>
123 + <h1>Tous les prix<br /><span class="outline">d&rsquo;épicerie.</span> <span class="hl">Un seul panier.</span></h1>
124 + <p class="lede">
125 + <strong>Les produits et circulaires des grandes bannières d&rsquo;épicerie</strong> —
126 + Metro, IGA, Maxi, Super C, Provigo et 15 autres — agrégés avec leurs prix,
127 + soldes et prix unitaires. Comparer son panier entre bannières devient un
128 + réflexe, pas une corvée.
129 + </p>
130 +
131 + <div class="figure">
132 + <div class="sources">
133 + <span class="src">metro.ca</span>
134 + <span class="src">iga.net</span>
135 + <span class="src">maxi.ca</span>
136 + <span class="src">superc.ca</span>
137 + <span class="src">provigo.ca</span>
138 + <span class="src">circulaires.qc</span>
139 + <span class="src">+ 15 bannières</span>
140 + </div>
141 + <svg class="beams" viewBox="0 0 860 78" preserveAspectRatio="none" aria-hidden="true">
142 + <line x1="90" y1="6" x2="430" y2="76" />
143 + <line x1="205" y1="6" x2="430" y2="76" />
144 + <line x1="320" y1="6" x2="430" y2="76" />
145 + <line x1="430" y1="6" x2="430" y2="76" />
146 + <line x1="540" y1="6" x2="430" y2="76" />
147 + <line x1="655" y1="6" x2="430" y2="76" />
148 + <line x1="770" y1="6" x2="430" y2="76" />
149 + </svg>
150 + <div class="core">
151 + <span class="pill">2 900+ soldes actifs</span>
152 + <div class="k">Food<span class="box">Ka</span></div>
153 + <div class="eq">= toute l&rsquo;épicerie, au même endroit</div>
154 + </div>
155 + </div>
156 +
157 + <div class="features">
158 + <article class="feat">
159 + <span class="n">01</span>
160 + <h3>Comparer les bannières</h3>
161 + <p><strong>Produit par produit</strong>, le même panier chiffré chez chaque bannière — la différence saute aux yeux.</p>
162 + </article>
163 + <article class="feat">
164 + <span class="n">02</span>
165 + <h3>Prix unitaires vrais</h3>
166 + <p>Prix normalisés en <strong>$/100 g et $/L</strong> pour comparer vraiment, au-delà des formats d&rsquo;emballage.</p>
167 + </article>
168 + <article class="feat">
169 + <span class="n">03</span>
170 + <h3>Soldes en un flux</h3>
171 + <p><strong>Soldes et circulaires de la semaine</strong> réunis en un seul flux — plus besoin de feuilleter 20 dépliants.</p>
172 + </article>
173 + <article class="feat">
174 + <span class="n">04</span>
175 + <h3>Catégories complètes</h3>
176 + <p>Des catégories d&rsquo;épicerie complètes, <strong>du frais au garde-manger</strong>, suivies en continu.</p>
177 + </article>
178 + </div>
179 +
180 + <div class="stats">
181 + <span class="chip"><span class="dot"></span>23 700+ produits suivis</span>
182 + <span class="chip">20 bannières comparées</span>
183 + <span class="chip">2 900+ soldes actifs</span>
184 + <span class="chip">$/100 g · $/L normalisés</span>
185 + </div>
186 +
187 + <div class="strip">
188 + <p class="eq">
189 + Le même panier,<br />
190 + <span class="acc">chiffré chez 20 bannières.</span>
191 + </p>
192 + <p class="side">
193 + Prix, soldes et circulaires <strong>agrégés en continu</strong><br />
194 + Prix unitaires <strong>normalisés</strong>, comparables pour vrai<br />
195 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
196 + </p>
197 + </div>
198 +
199 + <footer class="foot">
200 + <div class="def">
201 + <span class="term">Food·Ka</span><span class="phon">/fud.ka/ — « bouffe + agrège »</span>
202 + <p>
203 + <strong>1.</strong> Plateforme du Groupe KA dédiée aux prix
204 + d&rsquo;épicerie. <strong>2.</strong> L&rsquo;une des sept plateformes
205 + ·Ka : Lou·Ka loge, Immo·Ka vend, Auto·Ka roule, Fabri·Ka fabrique,
206 + Food·Ka nourrit. « Tout ce qui finit en ·Ka agrège. »
207 + </p>
208 + </div>
209 + <div class="contact">
210 + <span class="big">www.food-ka.com</span><br />
211 + by Groupe KA · www.groupe-ka.com<br />
212 + © 2026 Groupe KA · Québec
213 + </div>
214 + </footer>
215 + </div>
216 +</body>
217 +</html>
added groupe-ka-poster.html +438 −0
@@ -0,0 +1,438 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster de présentation Groupe KA — fichier autonome, hors site. Ouvrir dans un navigateur; 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 — Mille sites. Un seul ·Ka. (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 + --display: "Space Grotesk", system-ui, sans-serif;
23 + --body: "Inter", system-ui, sans-serif;
24 + --mono: "JetBrains Mono", ui-monospace, monospace;
25 + }
26 + * { margin: 0; padding: 0; box-sizing: border-box; }
27 + html, body { background: #1a1e1a; }
28 + body {
29 + font-family: var(--body);
30 + color: var(--ink);
31 + display: flex;
32 + justify-content: center;
33 + padding: 40px 16px;
34 + }
35 +
36 + /* ---------- Le poster (ratio √2, façon A3 portrait) ---------- */
37 + .poster {
38 + width: 860px;
39 + min-height: 1216px;
40 + background: var(--paper);
41 + border: 3px solid var(--ink);
42 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
43 + padding: 44px 48px 36px;
44 + display: flex;
45 + flex-direction: column;
46 + position: relative;
47 + overflow: hidden;
48 + }
49 + /* grain discret */
50 + .poster::after {
51 + content: "";
52 + position: absolute; inset: 0;
53 + pointer-events: none;
54 + opacity: 0.05;
55 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
56 + background-size: 5px 5px;
57 + }
58 +
59 + .mono { font-family: var(--mono); }
60 + .display { font-family: var(--display); }
61 +
62 + /* ---------- En-tête : wordmark ---------- */
63 + .head {
64 + display: flex;
65 + align-items: baseline;
66 + justify-content: space-between;
67 + border-bottom: 2px solid var(--ink);
68 + padding-bottom: 18px;
69 + }
70 + .wordmark {
71 + font-family: var(--display);
72 + font-weight: 700;
73 + font-size: 34px;
74 + letter-spacing: -0.04em;
75 + display: inline-flex;
76 + align-items: baseline;
77 + gap: 7px;
78 + }
79 + .kabox {
80 + display: inline-block;
81 + background: var(--ink);
82 + color: var(--lime);
83 + border-radius: 8px;
84 + padding: 0 10px 4px;
85 + transform: rotate(-2deg);
86 + }
87 + .head .url {
88 + font-family: var(--mono);
89 + font-weight: 700;
90 + font-size: 12px;
91 + letter-spacing: 0.12em;
92 + text-transform: uppercase;
93 + color: var(--ink-2);
94 + }
95 +
96 + /* ---------- Titre ---------- */
97 + .kicker {
98 + font-family: var(--mono);
99 + font-weight: 700;
100 + font-size: 11px;
101 + letter-spacing: 0.18em;
102 + text-transform: uppercase;
103 + color: var(--green);
104 + margin-top: 26px;
105 + }
106 + h1 {
107 + font-family: var(--display);
108 + font-weight: 700;
109 + font-size: 74px;
110 + line-height: 0.97;
111 + letter-spacing: -0.035em;
112 + text-transform: uppercase;
113 + margin-top: 10px;
114 + }
115 + h1 .outline {
116 + color: transparent;
117 + -webkit-text-stroke: 2px var(--ink);
118 + }
119 + h1 .hl {
120 + background: var(--lime);
121 + box-shadow: 0 0 0 4px var(--lime);
122 + border-radius: 2px;
123 + }
124 + .lede {
125 + margin-top: 16px;
126 + max-width: 560px;
127 + font-size: 15.5px;
128 + line-height: 1.55;
129 + color: var(--ink-2);
130 + }
131 + .lede strong { color: var(--ink); }
132 +
133 + /* ---------- La figure d'agrégation ---------- */
134 + .figure {
135 + margin-top: 28px;
136 + flex: 1;
137 + display: flex;
138 + flex-direction: column;
139 + position: relative;
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: 92px; }
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 + .core {
170 + align-self: center;
171 + background: var(--ink);
172 + color: var(--paper);
173 + border-radius: 14px;
174 + padding: 20px 34px 22px;
175 + text-align: center;
176 + box-shadow: 6px 6px 0 rgba(20,24,20,0.28);
177 + transform: rotate(-1deg);
178 + position: relative;
179 + z-index: 1;
180 + }
181 + .core .k {
182 + font-family: var(--display);
183 + font-weight: 700;
184 + font-size: 52px;
185 + letter-spacing: -0.04em;
186 + color: var(--lime);
187 + line-height: 1;
188 + }
189 + .core .eq {
190 + font-family: var(--mono);
191 + font-weight: 700;
192 + font-size: 11px;
193 + letter-spacing: 0.16em;
194 + text-transform: uppercase;
195 + color: rgba(245,243,238,0.75);
196 + margin-top: 6px;
197 + }
198 + .core .pill {
199 + position: absolute;
200 + top: -13px; right: -22px;
201 + background: var(--lime);
202 + color: var(--ink);
203 + border: 2px solid var(--ink);
204 + border-radius: 999px;
205 + font-family: var(--mono);
206 + font-weight: 700;
207 + font-size: 10.5px;
208 + padding: 4px 11px;
209 + transform: rotate(3deg);
210 + white-space: nowrap;
211 + }
212 +
213 + .platforms {
214 + display: flex;
215 + flex-wrap: wrap;
216 + justify-content: center;
217 + gap: 10px 12px;
218 + }
219 + .plat {
220 + font-family: var(--display);
221 + font-weight: 700;
222 + font-size: 19px;
223 + letter-spacing: -0.03em;
224 + display: inline-flex;
225 + align-items: baseline;
226 + gap: 4px;
227 + background: #fff;
228 + border: 2px solid var(--ink);
229 + border-radius: 10px;
230 + padding: 8px 14px 10px;
231 + box-shadow: 4px 4px 0 var(--ink);
232 + }
233 + .plat .box {
234 + display: inline-block;
235 + border-radius: 6px;
236 + padding: 0 6px 2px;
237 + transform: rotate(-2deg);
238 + font-size: 17px;
239 + }
240 + .plat .dom {
241 + font-family: var(--mono);
242 + font-weight: 500;
243 + font-size: 9px;
244 + color: var(--ink-3);
245 + align-self: center;
246 + margin-left: 4px;
247 + }
248 +
249 + /* ---------- Chiffres ---------- */
250 + .stats {
251 + display: flex;
252 + flex-wrap: wrap;
253 + justify-content: center;
254 + gap: 9px;
255 + margin-top: 26px;
256 + }
257 + .chip {
258 + font-family: var(--mono);
259 + font-weight: 700;
260 + font-size: 11.5px;
261 + border: 1.5px solid var(--ink);
262 + border-radius: 999px;
263 + padding: 7px 14px;
264 + background: var(--lime-soft);
265 + white-space: nowrap;
266 + }
267 + .chip .dot {
268 + display: inline-block;
269 + width: 7px; height: 7px;
270 + border-radius: 999px;
271 + background: var(--green);
272 + margin-right: 7px;
273 + animation: pulse 1.8s ease-in-out infinite;
274 + }
275 + @keyframes pulse { 50% { opacity: 0.35; } }
276 +
277 + /* ---------- Pied : définition + contact ---------- */
278 + .foot {
279 + margin-top: 28px;
280 + border-top: 2px dashed rgba(20,24,20,0.35);
281 + padding-top: 18px;
282 + display: flex;
283 + justify-content: space-between;
284 + align-items: flex-end;
285 + gap: 24px;
286 + }
287 + .def { max-width: 520px; }
288 + .def .term {
289 + font-family: var(--display);
290 + font-weight: 700;
291 + font-size: 24px;
292 + letter-spacing: -0.03em;
293 + }
294 + .def .phon {
295 + font-family: var(--mono);
296 + font-weight: 500;
297 + font-size: 11.5px;
298 + color: var(--ink-3);
299 + margin-left: 6px;
300 + }
301 + .def p {
302 + margin-top: 5px;
303 + font-size: 12.5px;
304 + line-height: 1.5;
305 + color: var(--ink-2);
306 + }
307 + .def p strong { color: var(--ink); }
308 + .contact {
309 + text-align: right;
310 + font-family: var(--mono);
311 + font-size: 11px;
312 + font-weight: 700;
313 + line-height: 1.9;
314 + color: var(--ink-2);
315 + white-space: nowrap;
316 + }
317 + .contact .big { font-size: 13px; color: var(--ink); }
318 +
319 + /* ---------- Impression ---------- */
320 + @media print {
321 + html, body { background: none; padding: 0; }
322 + body { padding: 0; }
323 + .poster { box-shadow: none; min-height: 1225px; }
324 + .beams line { animation: none; }
325 + .chip .dot { animation: none; }
326 + @page { size: 860px 1225px; margin: 0; }
327 + }
328 +</style>
329 +</head>
330 +<body>
331 + <div class="poster">
332 +
333 + <!-- En-tête -->
334 + <header class="head">
335 + <span class="wordmark">Groupe <span class="kabox">KA</span></span>
336 + <span class="url">www.groupe-ka.com</span>
337 + </header>
338 +
339 + <!-- Titre -->
340 + <p class="kicker">Holding d&rsquo;agrégateurs automatisés · Québec</p>
341 + <h1>Mille sites.<br /><span class="outline">Un seul</span> <span class="hl">·Ka.</span></h1>
342 + <p class="lede">
343 + <strong>Ka, c&rsquo;est l&rsquo;agrégation.</strong> Des centaines de connecteurs
344 + lisent les sites à la source, normalisent la donnée et se resynchronisent
345 + seuls, jour et nuit. Se loger, acheter, évaluer, rouler, consommer local,
346 + faire l&rsquo;épicerie — sept plateformes, zéro saisie manuelle, zéro boîte noire.
347 + </p>
348 +
349 + <!-- La figure d'agrégation -->
350 + <div class="figure">
351 +
352 + <!-- 1. Les sources éparpillées -->
353 + <div class="sources">
354 + <span class="src">gestionnaire-immo.qc</span>
355 + <span class="src">courtier-remax.ca</span>
356 + <span class="src">concessionnaire.qc</span>
357 + <span class="src">roles-evaluation.gouv</span>
358 + <span class="src">boutique-artisan.qc</span>
359 + <span class="src">circulaire-epicerie.ca</span>
360 + <span class="src">agence-sutton.ca</span>
361 + <span class="src">petites-annonces.qc</span>
362 + <span class="src">manufacturier.qc</span>
363 + <span class="src">registre-foncier.gouv</span>
364 + </div>
365 +
366 + <!-- 2. Le faisceau qui converge -->
367 + <svg class="beams" viewBox="0 0 860 92" preserveAspectRatio="none" aria-hidden="true">
368 + <line x1="60" y1="6" x2="430" y2="90" />
369 + <line x1="145" y1="6" x2="430" y2="90" />
370 + <line x1="230" y1="6" x2="430" y2="90" />
371 + <line x1="315" y1="6" x2="430" y2="90" />
372 + <line x1="395" y1="6" x2="430" y2="90" />
373 + <line x1="465" y1="6" x2="430" y2="90" />
374 + <line x1="545" y1="6" x2="430" y2="90" />
375 + <line x1="630" y1="6" x2="430" y2="90" />
376 + <line x1="715" y1="6" x2="430" y2="90" />
377 + <line x1="800" y1="6" x2="430" y2="90" />
378 + </svg>
379 +
380 + <!-- 3. La boîte KA -->
381 + <div class="core">
382 + <span class="pill">450+ connecteurs</span>
383 + <div class="k">·KA</div>
384 + <div class="eq">= agrégation</div>
385 + </div>
386 +
387 + <!-- 4. Le faisceau qui redistribue -->
388 + <svg class="beams" viewBox="0 0 860 92" preserveAspectRatio="none" aria-hidden="true">
389 + <line x1="430" y1="4" x2="90" y2="88" />
390 + <line x1="430" y1="4" x2="205" y2="88" />
391 + <line x1="430" y1="4" x2="320" y2="88" />
392 + <line x1="430" y1="4" x2="430" y2="88" />
393 + <line x1="430" y1="4" x2="540" y2="88" />
394 + <line x1="430" y1="4" x2="655" y2="88" />
395 + <line x1="430" y1="4" x2="770" y2="88" />
396 + </svg>
397 +
398 + <!-- 5. Les sept plateformes -->
399 + <div class="platforms">
400 + <span class="plat">Lou<span class="box" style="background:#141814;color:#d9f26b">Ka</span><span class="dom">lou-ka.com</span></span>
401 + <span class="plat">Immo<span class="box" style="background:#1a1214;color:#e23744">Ka</span><span class="dom">immo-ka.com</span></span>
402 + <span class="plat">Vrai<span class="box" style="background:#141814;color:#ff5148">Prix</span><span class="dom">vrai-prix.com</span></span>
403 + <span class="plat">Valo<span class="box" style="background:#141814;color:#ff9f45">Plex</span><span class="dom">valoplex.com</span></span>
404 + <span class="plat">Auto<span class="box" style="background:#17181c;color:#ff5a2a">Ka</span><span class="dom">auto-ka.com</span></span>
405 + <span class="plat">Fabri<span class="box" style="background:#1E1B16;color:#C4532E">Ka</span><span class="dom">fabri-ka.com</span></span>
406 + <span class="plat">Food<span class="box" style="background:#14231a;color:#d9f26b">Ka</span><span class="dom">food-ka.com</span></span>
407 + </div>
408 + </div>
409 +
410 + <!-- Les chiffres -->
411 + <div class="stats">
412 + <span class="chip"><span class="dot"></span>7 agrégateurs en ligne</span>
413 + <span class="chip">450+ connecteurs sources</span>
414 + <span class="chip">22 M+ d&rsquo;observations immobilières</span>
415 + <span class="chip">375 000+ annonces &amp; produits</span>
416 + <span class="chip">3 bots éclaireurs · ka2 · ka4 · ka6</span>
417 + </div>
418 +
419 + <!-- Pied : la définition + contact -->
420 + <footer class="foot">
421 + <div class="def">
422 + <span class="term">·Ka</span><span class="phon">/ka/ suffixe</span>
423 + <p>
424 + <strong>1. Agréger</strong> — rassembler en un seul endroit ce qui était
425 + éparpillé sur des centaines de sites. <strong>2.</strong> Marque de fabrique
426 + du groupe : Lou·Ka loge, Immo·Ka vend, Auto·Ka roule, Fabri·Ka fabrique,
427 + Food·Ka nourrit. « Tout ce qui finit en ·Ka agrège. »
428 + </p>
429 + </div>
430 + <div class="contact">
431 + <span class="big">contact@groupe-ka.com</span><br />
432 + www.groupe-ka.com<br />
433 + © 2026 Groupe KA · Québec
434 + </div>
435 + </footer>
436 + </div>
437 +</body>
438 +</html>
added img/auto-ka-desktop.png +0 −0

Binary file not shown.

added img/auto-ka-mobile.png +0 −0

Binary file not shown.

added img/fabri-ka-desktop.png +0 −0

Binary file not shown.

added img/fabri-ka-icon.svg +4 −0
@@ -0,0 +1,4 @@
1 +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
2 + <rect width="128" height="128" rx="28" fill="#C4532E"/>
3 + <text x="64" y="86" font-family="Georgia, 'Times New Roman', serif" font-size="64" font-weight="900" text-anchor="middle" fill="#FAF6F0">F·K</text>
4 +</svg>
added img/fabri-ka-mobile.png +0 −0

Binary file not shown.

added img/food-ka-desktop.png +0 −0

Binary file not shown.

added img/food-ka-mobile.png +0 −0

Binary file not shown.

added img/immo-ka-desktop.png +0 −0

Binary file not shown.

added img/immo-ka-mobile.png +0 −0

Binary file not shown.

added img/lou-ka-desktop.png +0 −0

Binary file not shown.

added img/lou-ka-mobile.png +0 −0

Binary file not shown.

added img/valoplex-desktop.png +0 −0

Binary file not shown.

added img/valoplex-favicon.ico +0 −0

Binary file not shown.

added img/valoplex-mobile.png +0 −0

Binary file not shown.

added img/vrai-prix-desktop.png +0 −0

Binary file not shown.

added img/vrai-prix-favicon.ico +0 −0

Binary file not shown.

added img/vrai-prix-mobile.png +0 −0

Binary file not shown.

added immo-ka-app-poster.html +171 −0
@@ -0,0 +1,171 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster vitrine immo-ka (by Groupe KA) — logo + captures d'écran de l'app en direct. -->
4 +<html lang="fr">
5 +<head>
6 +<meta charset="UTF-8" />
7 +<meta name="viewport" content="width=device-width, initial-scale=1" />
8 +<title>Immo·Ka by Groupe KA — l'app en action (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: #f7f1ef; --ink: #1a1214; --ink-2: #5a4d50; --ink-3: #9b8b8e;
15 + --sec: #b3202b; --accent: #e23744; --accent-soft: #fbe0e2; --on-accent: #ffffff;
16 + --display: "Space Grotesk", system-ui, sans-serif;
17 + --body: "Inter", system-ui, sans-serif;
18 + --mono: "JetBrains Mono", ui-monospace, monospace;
19 + }
20 + * { margin: 0; padding: 0; box-sizing: border-box; }
21 + html, body { background: #1e1416; }
22 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
23 +
24 + .poster {
25 + width: 860px; min-height: 1216px;
26 + background: var(--paper);
27 + border: 3px solid var(--ink);
28 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
29 + padding: 44px 48px 36px;
30 + display: flex; flex-direction: column;
31 + position: relative; overflow: hidden;
32 + }
33 + .poster::after {
34 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
35 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
36 + background-size: 5px 5px;
37 + }
38 +
39 + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
40 + .brand { display: flex; align-items: center; gap: 14px; }
41 + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); }
42 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; }
43 + .kabox { display: inline-block; background: #1a1214; color: #e23744; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); }
44 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; }
45 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; }
46 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
47 +
48 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; }
49 + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; }
50 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
51 + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
52 +
53 + /* ---------- L'app à l'écran ---------- */
54 + .shot { margin-top: 26px; position: relative; }
55 + .browser {
56 + width: 730px;
57 + background: #fff;
58 + border: 2.5px solid var(--ink);
59 + border-radius: 14px;
60 + box-shadow: 8px 8px 0 var(--ink);
61 + overflow: hidden;
62 + }
63 + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); }
64 + .bbar .dots { display: flex; gap: 5px; }
65 + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); }
66 + .bbar .dots span:nth-child(1) { background: var(--accent); }
67 + .bbar .dots span:nth-child(2) { background: var(--accent-soft); }
68 + .bbar .dots span:nth-child(3) { background: #fff; }
69 + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; }
70 + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; }
71 +
72 + .phone {
73 + position: absolute; right: 0; bottom: -34px;
74 + width: 196px;
75 + background: var(--ink);
76 + border-radius: 26px;
77 + padding: 7px;
78 + box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
79 + transform: rotate(2deg);
80 + }
81 + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; }
82 + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; }
83 + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
84 +
85 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; }
86 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
87 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
88 + @keyframes pulse { 50% { opacity: 0.35; } }
89 +
90 + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
91 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
92 + .strip .eq .acc { color: var(--accent); }
93 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; }
94 + .strip .side strong { color: var(--accent); font-weight: 700; }
95 +
96 + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
97 + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; }
98 + .foot .left strong { color: var(--ink); }
99 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
100 + .contact .big { font-size: 13px; color: var(--ink); }
101 +
102 + @media print {
103 + html, body { background: none; padding: 0; }
104 + .poster { box-shadow: none; min-height: 1221px; }
105 + .chip .dot { animation: none; }
106 + @page { size: 860px 1221px; margin: 0; }
107 + }
108 +</style>
109 +</head>
110 +<body>
111 + <div class="poster">
112 + <header class="head">
113 + <div class="brand">
114 + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo Immo·Ka"><rect width="64" height="64" rx="12" fill="#1a1214"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#e23744" text-anchor="middle">IK</text></svg>
115 + <div>
116 + <span class="wordmark">Immo<span class="kabox">Ka</span></span><br />
117 + <span class="by">by Groupe <span class="minibox">KA</span></span>
118 + </div>
119 + </div>
120 + <span class="url">www.immo-ka.com</span>
121 + </header>
122 +
123 + <p class="kicker">Agrégateur de propriétés à vendre · Québec</p>
124 + <h1>Le marché immobilier,<br /><span class="hl">en un coup d'œil.</span></h1>
125 + <p class="lede">63 000+ propriétés des agences de courtage — RE/MAX, Sutton, Via Capitale et plus — agrégées à la source, avec détection des ventes.</p>
126 +
127 + <div class="shot">
128 + <div class="browser">
129 + <div class="bbar">
130 + <div class="dots"><span></span><span></span><span></span></div>
131 + <span class="addr">https://www.immo-ka.com</span>
132 + </div>
133 + <img src="img/immo-ka-desktop.png" alt="Immo·Ka — vue bureau" />
134 + </div>
135 + <div class="phone">
136 + <span class="notch"></span>
137 + <img src="img/immo-ka-mobile.png" alt="Immo·Ka — vue mobile" />
138 + </div>
139 + <span class="caption">L'app en direct · capturée le 13 août 2026</span>
140 + </div>
141 +
142 + <div class="stats">
143 + <span class="chip"><span class="dot"></span>63 000+ propriétés</span>
144 + <span class="chip">65 connecteurs d’agences</span>
145 + <span class="chip">2 970+ villes</span>
146 + <span class="chip">détection vendu / retiré</span>
147 + </div>
148 +
149 + <div class="strip">
150 + <p class="eq">Toutes les propriétés à vendre.<br /><span class="acc">Un seul endroit.</span></p>
151 + <p class="side">
152 + 100 % automatisé, <strong>zéro boîte noire</strong><br />
153 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
154 + </p>
155 + </div>
156 +
157 + <footer class="foot">
158 + <p class="left">
159 + <strong>Immo·Ka</strong> est l'une des sept plateformes du Groupe KA —
160 + des agrégateurs entièrement automatisés qui lisent les sites à la source.
161 + « Tout ce qui finit en ·Ka agrège. »
162 + </p>
163 + <div class="contact">
164 + <span class="big">www.immo-ka.com</span><br />
165 + by Groupe KA · www.groupe-ka.com<br />
166 + © 2026 Groupe KA · Québec
167 + </div>
168 + </footer>
169 + </div>
170 +</body>
171 +</html>
added immo-ka-poster.html +215 −0
@@ -0,0 +1,215 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster de présentation Immo·Ka (by Groupe KA) — thème rouge/chocolat de www.immo-ka.com. 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>Immo·Ka by Groupe KA — Toutes les propriétés à vendre du Québec (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: #f7f1ef;
15 + --ink: #1a1214;
16 + --ink-2: #5a4d50;
17 + --ink-3: #9b8b8e;
18 + --sec: #b3202b;
19 + --accent: #e23744;
20 + --accent-soft: #fbe0e2;
21 + --on-accent: #ffffff;
22 + --display: "Space Grotesk", system-ui, sans-serif;
23 + --body: "Inter", system-ui, sans-serif;
24 + --mono: "JetBrains Mono", ui-monospace, monospace;
25 + }
26 + * { margin: 0; padding: 0; box-sizing: border-box; }
27 + html, body { background: #1e1416; }
28 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
29 +
30 + .poster {
31 + width: 860px; min-height: 1216px;
32 + background: var(--paper);
33 + border: 3px solid var(--ink);
34 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
35 + padding: 44px 48px 36px;
36 + display: flex; flex-direction: column;
37 + position: relative; overflow: hidden;
38 + }
39 + .poster::after {
40 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
41 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
42 + background-size: 5px 5px;
43 + }
44 +
45 + .head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
46 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; }
47 + .kabox { display: inline-block; background: var(--ink); color: var(--accent); border-radius: 8px; padding: 0 10px 4px; transform: rotate(-2deg); }
48 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; }
49 + .by .minika { font-family: var(--display); font-size: 13px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink); }
50 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); }
51 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
52 +
53 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 26px; }
54 + h1 { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 0.99; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 10px; }
55 + h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
56 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
57 + .lede { margin-top: 16px; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
58 + .lede strong { color: var(--ink); }
59 +
60 + .figure { margin-top: 24px; display: flex; flex-direction: column; }
61 + .sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
62 + .src { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 12px; box-shadow: 3px 3px 0 rgba(26,18,20,0.2); white-space: nowrap; }
63 + .beams { display: block; width: 100%; height: 78px; }
64 + .beams line { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: 0.55; animation: flow 1.6s linear infinite; }
65 + @keyframes flow { to { stroke-dashoffset: -22; } }
66 +
67 + .core { align-self: center; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 34px 20px; text-align: center; box-shadow: 6px 6px 0 rgba(226,55,68,0.25); transform: rotate(-1deg); position: relative; z-index: 1; }
68 + .core .k { font-family: var(--display); font-weight: 700; font-size: 42px; letter-spacing: -0.04em; line-height: 1; }
69 + .core .k .box { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 0 8px 3px; transform: rotate(-2deg); }
70 + .core .eq { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247,241,239,0.75); margin-top: 7px; }
71 + .core .pill { position: absolute; top: -13px; right: -26px; background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; padding: 4px 11px; transform: rotate(3deg); white-space: nowrap; }
72 +
73 + .features { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
74 + .feat { background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); padding: 16px 18px 18px; }
75 + .feat .n { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--sec); }
76 + .feat h3 { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; text-transform: uppercase; margin-top: 6px; }
77 + .feat p { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
78 + .feat p strong { color: var(--ink); }
79 +
80 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 24px; }
81 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
82 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
83 + @keyframes pulse { 50% { opacity: 0.35; } }
84 +
85 + .strip { margin-top: 24px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 26px; box-shadow: 6px 6px 0 rgba(226,55,68,0.25); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
86 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
87 + .strip .eq .acc { color: var(--accent); }
88 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(247,241,239,0.78); text-align: right; white-space: nowrap; }
89 + .strip .side strong { color: var(--accent); font-weight: 700; }
90 +
91 + .foot { margin-top: auto; border-top: 2px dashed rgba(26,18,20,0.35); padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
92 + .def { max-width: 540px; }
93 + .def .term { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
94 + .def .phon { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
95 + .def p { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
96 + .def p strong { color: var(--ink); }
97 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
98 + .contact .big { font-size: 13px; color: var(--ink); }
99 +
100 + @media print {
101 + html, body { background: none; padding: 0; }
102 + .poster { box-shadow: none; min-height: 1352px; }
103 + .beams line { animation: none; }
104 + .chip .dot { animation: none; }
105 + @page { size: 860px 1352px; margin: 0; }
106 + }
107 +</style>
108 +</head>
109 +<body>
110 + <div class="poster">
111 +
112 + <header class="head">
113 + <div>
114 + <span class="wordmark">Immo<span class="kabox">Ka</span></span><br />
115 + <span class="by">by <span class="minika">Groupe <span class="minibox">KA</span></span></span>
116 + </div>
117 + <span class="url">www.immo-ka.com</span>
118 + </header>
119 +
120 + <p class="kicker">Agrégateur de propriétés à vendre · Québec</p>
121 + <h1>Toutes les propriétés<br /><span class="outline">à vendre.</span> <span class="hl">Un seul endroit.</span></h1>
122 + <p class="lede">
123 + <strong>L&rsquo;inventaire des agences de courtage du Québec</strong> — RE/MAX,
124 + Sutton, Via Capitale, Proprio Direct et des dizaines d&rsquo;autres — agrégé à
125 + la source, normalisé et géolocalisé. Chaque fiche renvoie à l&rsquo;inscription
126 + originale du courtier ; une propriété vendue disparaît d&rsquo;elle-même.
127 + </p>
128 +
129 + <div class="figure">
130 + <div class="sources">
131 + <span class="src">remax-quebec.com</span>
132 + <span class="src">sutton.com</span>
133 + <span class="src">viacapitale.com</span>
134 + <span class="src">propriodirect.com</span>
135 + <span class="src">royallepage.ca</span>
136 + <span class="src">agence-courtage.qc</span>
137 + <span class="src">courtiers.qc</span>
138 + </div>
139 + <svg class="beams" viewBox="0 0 860 78" preserveAspectRatio="none" aria-hidden="true">
140 + <line x1="90" y1="6" x2="430" y2="76" />
141 + <line x1="205" y1="6" x2="430" y2="76" />
142 + <line x1="320" y1="6" x2="430" y2="76" />
143 + <line x1="430" y1="6" x2="430" y2="76" />
144 + <line x1="540" y1="6" x2="430" y2="76" />
145 + <line x1="655" y1="6" x2="430" y2="76" />
146 + <line x1="770" y1="6" x2="430" y2="76" />
147 + </svg>
148 + <div class="core">
149 + <span class="pill">65 connecteurs d&rsquo;agences</span>
150 + <div class="k">Immo<span class="box">Ka</span></div>
151 + <div class="eq">= tout l&rsquo;inventaire, au même endroit</div>
152 + </div>
153 + </div>
154 +
155 + <div class="features">
156 + <article class="feat">
157 + <span class="n">01</span>
158 + <h3>Recherche unifiée</h3>
159 + <p>Ville, type, prix, terrain, pièces : <strong>un seul moteur</strong> pour interroger l&rsquo;inventaire de dizaines d&rsquo;agences d&rsquo;un coup.</p>
160 + </article>
161 + <article class="feat">
162 + <span class="n">02</span>
163 + <h3>Carte province entière</h3>
164 + <p>Chaque propriété est <strong>géolocalisée</strong> : la province au complet en une carte, de <strong>Gatineau à Gaspé</strong>.</p>
165 + </article>
166 + <article class="feat">
167 + <span class="n">03</span>
168 + <h3>Ventes détectées</h3>
169 + <p>Les <strong>ventes et retraits</strong> sont détectés automatiquement : ce qui est vendu à la source disparaît du site tout seul.</p>
170 + </article>
171 + <article class="feat">
172 + <span class="n">04</span>
173 + <h3>Lien vers l&rsquo;original</h3>
174 + <p>Chaque fiche renvoie à <strong>l&rsquo;inscription originale de l&rsquo;agence</strong> — rien d&rsquo;inventé, tout est traçable.</p>
175 + </article>
176 + </div>
177 +
178 + <div class="stats">
179 + <span class="chip"><span class="dot"></span>54 000+ propriétés en ligne</span>
180 + <span class="chip">65 connecteurs d&rsquo;agences</span>
181 + <span class="chip">2 370 villes couvertes</span>
182 + <span class="chip">détection vendu / retiré</span>
183 + </div>
184 +
185 + <div class="strip">
186 + <p class="eq">
187 + Vendue à la source<br />
188 + <span class="acc">= disparue d&rsquo;Immo·Ka.</span>
189 + </p>
190 + <p class="side">
191 + Agrégé <strong>à la source</strong>, jamais recopié<br />
192 + Chaque fiche renvoie à <strong>l&rsquo;inscription du courtier</strong><br />
193 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
194 + </p>
195 + </div>
196 +
197 + <footer class="foot">
198 + <div class="def">
199 + <span class="term">Immo·Ka</span><span class="phon">/i.mo.ka/ — « immobilier + agrège »</span>
200 + <p>
201 + <strong>1.</strong> Plateforme du Groupe KA dédiée aux propriétés à
202 + vendre. <strong>2.</strong> L&rsquo;une des sept plateformes ·Ka :
203 + Lou·Ka loge, Immo·Ka vend, Auto·Ka roule, Fabri·Ka fabrique,
204 + Food·Ka nourrit. « Tout ce qui finit en ·Ka agrège. »
205 + </p>
206 + </div>
207 + <div class="contact">
208 + <span class="big">www.immo-ka.com</span><br />
209 + by Groupe KA · www.groupe-ka.com<br />
210 + © 2026 Groupe KA · Québec
211 + </div>
212 + </footer>
213 + </div>
214 +</body>
215 +</html>
added 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; min-height: 1331px; }
364 + .beams line { animation: none; }
365 + .chip .dot { animation: none; }
366 + @page { size: 860px 1331px; 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>
added lou-ka-app-poster.html +171 −0
@@ -0,0 +1,171 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster vitrine lou-ka (by Groupe KA) — logo + captures d'écran de l'app en direct. -->
4 +<html lang="fr">
5 +<head>
6 +<meta charset="UTF-8" />
7 +<meta name="viewport" content="width=device-width, initial-scale=1" />
8 +<title>Lou·Ka by Groupe KA — l'app en action (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; --ink: #141814; --ink-2: #4d5551; --ink-3: #8b928c;
15 + --sec: #1c5c41; --accent: #d9f26b; --accent-soft: #f0f9d2; --on-accent: #141814;
16 + --display: "Space Grotesk", system-ui, sans-serif;
17 + --body: "Inter", system-ui, sans-serif;
18 + --mono: "JetBrains Mono", ui-monospace, monospace;
19 + }
20 + * { margin: 0; padding: 0; box-sizing: border-box; }
21 + html, body { background: #1a1e1a; }
22 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
23 +
24 + .poster {
25 + width: 860px; min-height: 1216px;
26 + background: var(--paper);
27 + border: 3px solid var(--ink);
28 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
29 + padding: 44px 48px 36px;
30 + display: flex; flex-direction: column;
31 + position: relative; overflow: hidden;
32 + }
33 + .poster::after {
34 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
35 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
36 + background-size: 5px 5px;
37 + }
38 +
39 + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
40 + .brand { display: flex; align-items: center; gap: 14px; }
41 + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); }
42 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; }
43 + .kabox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); }
44 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; }
45 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; }
46 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
47 +
48 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; }
49 + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; }
50 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
51 + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
52 +
53 + /* ---------- L'app à l'écran ---------- */
54 + .shot { margin-top: 26px; position: relative; }
55 + .browser {
56 + width: 730px;
57 + background: #fff;
58 + border: 2.5px solid var(--ink);
59 + border-radius: 14px;
60 + box-shadow: 8px 8px 0 var(--ink);
61 + overflow: hidden;
62 + }
63 + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); }
64 + .bbar .dots { display: flex; gap: 5px; }
65 + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); }
66 + .bbar .dots span:nth-child(1) { background: var(--accent); }
67 + .bbar .dots span:nth-child(2) { background: var(--accent-soft); }
68 + .bbar .dots span:nth-child(3) { background: #fff; }
69 + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; }
70 + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; }
71 +
72 + .phone {
73 + position: absolute; right: 0; bottom: -34px;
74 + width: 196px;
75 + background: var(--ink);
76 + border-radius: 26px;
77 + padding: 7px;
78 + box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
79 + transform: rotate(2deg);
80 + }
81 + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; }
82 + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; }
83 + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
84 +
85 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; }
86 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
87 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
88 + @keyframes pulse { 50% { opacity: 0.35; } }
89 +
90 + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
91 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
92 + .strip .eq .acc { color: var(--accent); }
93 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; }
94 + .strip .side strong { color: var(--accent); font-weight: 700; }
95 +
96 + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
97 + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; }
98 + .foot .left strong { color: var(--ink); }
99 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
100 + .contact .big { font-size: 13px; color: var(--ink); }
101 +
102 + @media print {
103 + html, body { background: none; padding: 0; }
104 + .poster { box-shadow: none; min-height: 1221px; }
105 + .chip .dot { animation: none; }
106 + @page { size: 860px 1221px; margin: 0; }
107 + }
108 +</style>
109 +</head>
110 +<body>
111 + <div class="poster">
112 + <header class="head">
113 + <div class="brand">
114 + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo Lou·Ka"><rect width="64" height="64" rx="12" fill="#121712"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#d9f26b" text-anchor="middle">LK</text></svg>
115 + <div>
116 + <span class="wordmark">Lou<span class="kabox">Ka</span></span><br />
117 + <span class="by">by Groupe <span class="minibox">KA</span></span>
118 + </div>
119 + </div>
120 + <span class="url">www.lou-ka.com</span>
121 + </header>
122 +
123 + <p class="kicker">Agrégateur de logements locatifs · Québec</p>
124 + <h1>Le locatif du Québec,<br /><span class="hl">sous vos yeux.</span></h1>
125 + <p class="lede">23 000+ logements des gestionnaires immobiliers du Québec — Québec, Lévis, Grand Montréal — géolocalisés et resynchronisés à chaque heure — chaque annonce renvoie à l'originale.</p>
126 +
127 + <div class="shot">
128 + <div class="browser">
129 + <div class="bbar">
130 + <div class="dots"><span></span><span></span><span></span></div>
131 + <span class="addr">https://www.lou-ka.com</span>
132 + </div>
133 + <img src="img/lou-ka-desktop.png" alt="Lou·Ka — vue bureau" />
134 + </div>
135 + <div class="phone">
136 + <span class="notch"></span>
137 + <img src="img/lou-ka-mobile.png" alt="Lou·Ka — vue mobile" />
138 + </div>
139 + <span class="caption">L'app en direct · capturée le 13 août 2026</span>
140 + </div>
141 +
142 + <div class="stats">
143 + <span class="chip"><span class="dot"></span>23 000+ logements actifs</span>
144 + <span class="chip">108 connecteurs actifs</span>
145 + <span class="chip">MàJ horaire</span>
146 + <span class="chip">vue carte interactive</span>
147 + </div>
148 +
149 + <div class="strip">
150 + <p class="eq">Tous les logements à louer.<br /><span class="acc">Un seul endroit.</span></p>
151 + <p class="side">
152 + 100 % automatisé, <strong>zéro boîte noire</strong><br />
153 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
154 + </p>
155 + </div>
156 +
157 + <footer class="foot">
158 + <p class="left">
159 + <strong>Lou·Ka</strong> est l'une des sept plateformes du Groupe KA —
160 + des agrégateurs entièrement automatisés qui lisent les sites à la source.
161 + « Tout ce qui finit en ·Ka agrège. »
162 + </p>
163 + <div class="contact">
164 + <span class="big">www.lou-ka.com</span><br />
165 + by Groupe KA · www.groupe-ka.com<br />
166 + © 2026 Groupe KA · Québec
167 + </div>
168 + </footer>
169 + </div>
170 +</body>
171 +</html>
added lou-ka-poster.html +523 −0
@@ -0,0 +1,523 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster de présentation Lou·Ka (by Groupe KA) — 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>Lou·Ka by Groupe KA — Tous les logements à louer du Québec (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 + --display: "Space Grotesk", system-ui, sans-serif;
23 + --body: "Inter", system-ui, sans-serif;
24 + --mono: "JetBrains Mono", ui-monospace, monospace;
25 + }
26 + * { margin: 0; padding: 0; box-sizing: border-box; }
27 + html, body { background: #1a1e1a; }
28 + body {
29 + font-family: var(--body);
30 + color: var(--ink);
31 + display: flex;
32 + justify-content: center;
33 + padding: 40px 16px;
34 + }
35 +
36 + /* ---------- Le poster (ratio √2, façon A3 portrait) ---------- */
37 + .poster {
38 + width: 860px;
39 + min-height: 1216px;
40 + background: var(--paper);
41 + border: 3px solid var(--ink);
42 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
43 + padding: 44px 48px 36px;
44 + display: flex;
45 + flex-direction: column;
46 + position: relative;
47 + overflow: hidden;
48 + }
49 + .poster::after {
50 + content: "";
51 + position: absolute; inset: 0;
52 + pointer-events: none;
53 + opacity: 0.05;
54 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
55 + background-size: 5px 5px;
56 + }
57 +
58 + /* ---------- En-tête : wordmark + by Groupe KA ---------- */
59 + .head {
60 + display: flex;
61 + align-items: flex-end;
62 + justify-content: space-between;
63 + border-bottom: 2px solid var(--ink);
64 + padding-bottom: 18px;
65 + }
66 + .wordmark {
67 + font-family: var(--display);
68 + font-weight: 700;
69 + font-size: 40px;
70 + letter-spacing: -0.04em;
71 + display: inline-flex;
72 + align-items: baseline;
73 + gap: 7px;
74 + line-height: 1;
75 + }
76 + .kabox {
77 + display: inline-block;
78 + background: var(--ink);
79 + color: var(--lime);
80 + border-radius: 8px;
81 + padding: 0 10px 4px;
82 + transform: rotate(-2deg);
83 + }
84 + .by {
85 + display: inline-flex;
86 + align-items: baseline;
87 + gap: 5px;
88 + font-family: var(--mono);
89 + font-weight: 700;
90 + font-size: 11px;
91 + letter-spacing: 0.14em;
92 + text-transform: uppercase;
93 + color: var(--ink-2);
94 + margin-top: 10px;
95 + }
96 + .by .minika {
97 + font-family: var(--display);
98 + font-size: 13px;
99 + letter-spacing: -0.02em;
100 + display: inline-flex;
101 + align-items: baseline;
102 + gap: 3px;
103 + color: var(--ink);
104 + }
105 + .by .minibox {
106 + display: inline-block;
107 + background: var(--ink);
108 + color: var(--lime);
109 + border-radius: 4px;
110 + padding: 0 5px 2px;
111 + transform: rotate(-2deg);
112 + }
113 + .head .url {
114 + font-family: var(--mono);
115 + font-weight: 700;
116 + font-size: 12px;
117 + letter-spacing: 0.12em;
118 + text-transform: uppercase;
119 + color: var(--ink-2);
120 + }
121 +
122 + /* ---------- Titre ---------- */
123 + .kicker {
124 + font-family: var(--mono);
125 + font-weight: 700;
126 + font-size: 11px;
127 + letter-spacing: 0.18em;
128 + text-transform: uppercase;
129 + color: var(--green);
130 + margin-top: 26px;
131 + }
132 + h1 {
133 + font-family: var(--display);
134 + font-weight: 700;
135 + font-size: 58px;
136 + line-height: 0.99;
137 + letter-spacing: -0.035em;
138 + text-transform: uppercase;
139 + margin-top: 10px;
140 + }
141 + h1 .outline {
142 + color: transparent;
143 + -webkit-text-stroke: 2px var(--ink);
144 + }
145 + h1 .hl {
146 + background: var(--lime);
147 + box-shadow: 0 0 0 4px var(--lime);
148 + border-radius: 2px;
149 + }
150 + .lede {
151 + margin-top: 16px;
152 + max-width: 620px;
153 + font-size: 15px;
154 + line-height: 1.55;
155 + color: var(--ink-2);
156 + }
157 + .lede strong { color: var(--ink); }
158 +
159 + /* ---------- La figure d'agrégation ---------- */
160 + .figure {
161 + margin-top: 24px;
162 + display: flex;
163 + flex-direction: column;
164 + }
165 + .sources {
166 + display: flex;
167 + flex-wrap: wrap;
168 + justify-content: center;
169 + gap: 8px 10px;
170 + }
171 + .src {
172 + font-family: var(--mono);
173 + font-size: 10.5px;
174 + font-weight: 500;
175 + color: var(--ink-2);
176 + background: #fff;
177 + border: 1.5px solid var(--ink);
178 + border-radius: 999px;
179 + padding: 5px 12px;
180 + box-shadow: 3px 3px 0 rgba(20,24,20,0.2);
181 + white-space: nowrap;
182 + }
183 + .beams { display: block; width: 100%; height: 78px; }
184 + .beams line {
185 + stroke: var(--ink);
186 + stroke-width: 1.6;
187 + stroke-dasharray: 5 6;
188 + opacity: 0.55;
189 + animation: flow 1.6s linear infinite;
190 + }
191 + @keyframes flow { to { stroke-dashoffset: -22; } }
192 +
193 + .core {
194 + align-self: center;
195 + background: var(--ink);
196 + color: var(--paper);
197 + border-radius: 14px;
198 + padding: 18px 34px 20px;
199 + text-align: center;
200 + box-shadow: 6px 6px 0 rgba(20,24,20,0.28);
201 + transform: rotate(-1deg);
202 + position: relative;
203 + z-index: 1;
204 + }
205 + .core .k {
206 + font-family: var(--display);
207 + font-weight: 700;
208 + font-size: 42px;
209 + letter-spacing: -0.04em;
210 + line-height: 1;
211 + color: var(--paper);
212 + }
213 + .core .k .box {
214 + display: inline-block;
215 + background: var(--lime);
216 + color: var(--ink);
217 + border-radius: 8px;
218 + padding: 0 8px 3px;
219 + transform: rotate(-2deg);
220 + }
221 + .core .eq {
222 + font-family: var(--mono);
223 + font-weight: 700;
224 + font-size: 11px;
225 + letter-spacing: 0.16em;
226 + text-transform: uppercase;
227 + color: rgba(245,243,238,0.75);
228 + margin-top: 7px;
229 + }
230 + .core .pill {
231 + position: absolute;
232 + top: -13px; right: -26px;
233 + background: var(--lime);
234 + color: var(--ink);
235 + border: 2px solid var(--ink);
236 + border-radius: 999px;
237 + font-family: var(--mono);
238 + font-weight: 700;
239 + font-size: 10.5px;
240 + padding: 4px 11px;
241 + transform: rotate(3deg);
242 + white-space: nowrap;
243 + }
244 +
245 + /* ---------- Les caractéristiques (2×2) ---------- */
246 + .features {
247 + margin-top: 26px;
248 + display: grid;
249 + grid-template-columns: 1fr 1fr;
250 + gap: 14px;
251 + }
252 + .feat {
253 + background: #fff;
254 + border: 2px solid var(--ink);
255 + border-radius: 12px;
256 + box-shadow: 4px 4px 0 var(--ink);
257 + padding: 16px 18px 18px;
258 + }
259 + .feat .n {
260 + font-family: var(--mono);
261 + font-weight: 700;
262 + font-size: 11px;
263 + color: var(--green);
264 + }
265 + .feat h3 {
266 + font-family: var(--display);
267 + font-weight: 700;
268 + font-size: 15.5px;
269 + letter-spacing: -0.01em;
270 + text-transform: uppercase;
271 + margin-top: 6px;
272 + }
273 + .feat p {
274 + margin-top: 6px;
275 + font-size: 12px;
276 + line-height: 1.5;
277 + color: var(--ink-2);
278 + }
279 + .feat p strong { color: var(--ink); }
280 +
281 + /* ---------- Chiffres ---------- */
282 + .stats {
283 + display: flex;
284 + flex-wrap: wrap;
285 + justify-content: center;
286 + gap: 9px;
287 + margin-top: 24px;
288 + }
289 + .chip {
290 + font-family: var(--mono);
291 + font-weight: 700;
292 + font-size: 11.5px;
293 + border: 1.5px solid var(--ink);
294 + border-radius: 999px;
295 + padding: 7px 14px;
296 + background: var(--lime-soft);
297 + white-space: nowrap;
298 + }
299 + .chip .dot {
300 + display: inline-block;
301 + width: 7px; height: 7px;
302 + border-radius: 999px;
303 + background: var(--green);
304 + margin-right: 7px;
305 + animation: pulse 1.8s ease-in-out infinite;
306 + }
307 + @keyframes pulse { 50% { opacity: 0.35; } }
308 +
309 + /* ---------- Bande manifeste ---------- */
310 + .strip {
311 + margin-top: 24px;
312 + background: var(--ink);
313 + color: var(--paper);
314 + border-radius: 14px;
315 + padding: 18px 26px;
316 + box-shadow: 6px 6px 0 rgba(20,24,20,0.28);
317 + display: flex;
318 + align-items: center;
319 + justify-content: space-between;
320 + gap: 24px;
321 + }
322 + .strip .eq {
323 + font-family: var(--display);
324 + font-weight: 700;
325 + font-size: 21px;
326 + line-height: 1.15;
327 + letter-spacing: -0.02em;
328 + text-transform: uppercase;
329 + }
330 + .strip .eq .lime { color: var(--lime); }
331 + .strip .side {
332 + font-family: var(--mono);
333 + font-weight: 500;
334 + font-size: 11px;
335 + line-height: 2;
336 + color: rgba(245,243,238,0.78);
337 + text-align: right;
338 + white-space: nowrap;
339 + }
340 + .strip .side strong { color: var(--lime); font-weight: 700; }
341 +
342 + /* ---------- Pied ---------- */
343 + .foot {
344 + margin-top: auto;
345 + border-top: 2px dashed rgba(20,24,20,0.35);
346 + padding-top: 18px;
347 + display: flex;
348 + justify-content: space-between;
349 + align-items: flex-end;
350 + gap: 24px;
351 + }
352 + .def { max-width: 540px; }
353 + .def .term {
354 + font-family: var(--display);
355 + font-weight: 700;
356 + font-size: 22px;
357 + letter-spacing: -0.03em;
358 + }
359 + .def .phon {
360 + font-family: var(--mono);
361 + font-weight: 500;
362 + font-size: 11.5px;
363 + color: var(--ink-3);
364 + margin-left: 6px;
365 + }
366 + .def p {
367 + margin-top: 5px;
368 + font-size: 12.5px;
369 + line-height: 1.5;
370 + color: var(--ink-2);
371 + }
372 + .def p strong { color: var(--ink); }
373 + .contact {
374 + text-align: right;
375 + font-family: var(--mono);
376 + font-size: 11px;
377 + font-weight: 700;
378 + line-height: 1.9;
379 + color: var(--ink-2);
380 + white-space: nowrap;
381 + }
382 + .contact .big { font-size: 13px; color: var(--ink); }
383 +
384 + /* ---------- Impression ---------- */
385 + @media print {
386 + html, body { background: none; padding: 0; }
387 + body { padding: 0; }
388 + .poster { box-shadow: none; min-height: 1380px; }
389 + .beams line { animation: none; }
390 + .chip .dot { animation: none; }
391 + @page { size: 860px 1380px; margin: 0; }
392 + }
393 +</style>
394 +</head>
395 +<body>
396 + <div class="poster">
397 +
398 + <!-- En-tête -->
399 + <header class="head">
400 + <div>
401 + <span class="wordmark">Lou<span class="kabox">Ka</span></span><br />
402 + <span class="by">by <span class="minika">Groupe <span class="minibox">KA</span></span></span>
403 + </div>
404 + <span class="url">www.lou-ka.com</span>
405 + </header>
406 +
407 + <!-- Titre -->
408 + <p class="kicker">Agrégateur de logements locatifs · Québec</p>
409 + <h1>Tous les logements<br /><span class="outline">à louer.</span> <span class="hl">Un seul endroit.</span></h1>
410 + <p class="lede">
411 + <strong>Lou·Ka est l&rsquo;agrégateur indépendant du locatif québécois :</strong>
412 + les annonces d&rsquo;environ 74 gestionnaires immobiliers, normalisées,
413 + géolocalisées et synchronisées en continu. Une annonce retirée du site
414 + source disparaît du site — rien d&rsquo;inventé, tout est traçable
415 + jusqu&rsquo;à l&rsquo;annonce originale.
416 + </p>
417 +
418 + <!-- La figure d'agrégation -->
419 + <div class="figure">
420 + <div class="sources">
421 + <span class="src">gestionnaire-immo.qc</span>
422 + <span class="src">residences.qc</span>
423 + <span class="src">portail-annonces.ca</span>
424 + <span class="src">courtier-location.qc</span>
425 + <span class="src">gestion-locative.ca</span>
426 + <span class="src">immeubles.qc</span>
427 + <span class="src">appartements.qc</span>
428 + </div>
429 + <svg class="beams" viewBox="0 0 860 78" preserveAspectRatio="none" aria-hidden="true">
430 + <line x1="90" y1="6" x2="430" y2="76" />
431 + <line x1="205" y1="6" x2="430" y2="76" />
432 + <line x1="320" y1="6" x2="430" y2="76" />
433 + <line x1="430" y1="6" x2="430" y2="76" />
434 + <line x1="540" y1="6" x2="430" y2="76" />
435 + <line x1="655" y1="6" x2="430" y2="76" />
436 + <line x1="770" y1="6" x2="430" y2="76" />
437 + </svg>
438 + <div class="core">
439 + <span class="pill">108 connecteurs actifs</span>
440 + <div class="k">Lou<span class="box">Ka</span></div>
441 + <div class="eq">= tout le locatif, au même endroit</div>
442 + </div>
443 + </div>
444 +
445 + <!-- Les caractéristiques -->
446 + <div class="features">
447 + <article class="feat">
448 + <span class="n">01</span>
449 + <h3>Recherche unifiée</h3>
450 + <p>
451 + Ville, secteur, taille (<strong>3½, 4½, 5½…</strong>), loyer,
452 + gestionnaire : un seul moteur pour interroger des dizaines de sites
453 + d&rsquo;un coup.
454 + </p>
455 + </article>
456 + <article class="feat">
457 + <span class="n">02</span>
458 + <h3>Vue carte interactive</h3>
459 + <p>
460 + Chaque logement est <strong>géolocalisé</strong> : explorez le
461 + marché quartier par quartier, en carte ou en grille de résultats.
462 + </p>
463 + </article>
464 + <article class="feat">
465 + <span class="n">03</span>
466 + <h3>Baisses de prix suivies</h3>
467 + <p>
468 + L&rsquo;<strong>historique des loyers</strong> est conservé : les
469 + baisses remontent d&rsquo;elles-mêmes, et chaque annonce est située
470 + face au marché.
471 + </p>
472 + </article>
473 + <article class="feat">
474 + <span class="n">04</span>
475 + <h3>Zéro traceur</h3>
476 + <p>
477 + Aucun traceur publicitaire, aucun témoin tiers, aucune revente de
478 + données. <strong>On agrège des annonces, pas des personnes.</strong>
479 + </p>
480 + </article>
481 + </div>
482 +
483 + <!-- Les chiffres -->
484 + <div class="stats">
485 + <span class="chip"><span class="dot"></span>7 000+ annonces en ligne</span>
486 + <span class="chip">108 connecteurs actifs</span>
487 + <span class="chip">~74 gestionnaires immobiliers</span>
488 + <span class="chip">mise à jour horaire</span>
489 + </div>
490 +
491 + <!-- Bande manifeste -->
492 + <div class="strip">
493 + <p class="eq">
494 + Annonce retirée à la source<br />
495 + <span class="lime">= annonce retirée de Lou·Ka.</span>
496 + </p>
497 + <p class="side">
498 + Synchronisation <strong>horaire</strong>, jour et nuit<br />
499 + Chaque fiche renvoie à <strong>l&rsquo;annonce originale</strong><br />
500 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
501 + </p>
502 + </div>
503 +
504 + <!-- Pied -->
505 + <footer class="foot">
506 + <div class="def">
507 + <span class="term">Lou·Ka</span><span class="phon">/lu.ka/ — « loue + agrège »</span>
508 + <p>
509 + <strong>1.</strong> Plateforme du Groupe KA dédiée au logement
510 + locatif. <strong>2.</strong> Première des sept plateformes ·Ka :
511 + Lou·Ka loge, Immo·Ka vend, Auto·Ka roule, Fabri·Ka fabrique,
512 + Food·Ka nourrit. « Tout ce qui finit en ·Ka agrège. »
513 + </p>
514 + </div>
515 + <div class="contact">
516 + <span class="big">www.lou-ka.com</span><br />
517 + by Groupe KA · www.groupe-ka.com<br />
518 + © 2026 Groupe KA · Québec
519 + </div>
520 + </footer>
521 + </div>
522 +</body>
523 +</html>
added valoplex-app-poster.html +171 −0
@@ -0,0 +1,171 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster vitrine valoplex (by Groupe KA) — logo + captures d'écran de l'app en direct. -->
4 +<html lang="fr">
5 +<head>
6 +<meta charset="UTF-8" />
7 +<meta name="viewport" content="width=device-width, initial-scale=1" />
8 +<title>ValoPlex by Groupe KA — l'app en action (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; --ink: #141814; --ink-2: #4d5551; --ink-3: #8b928c;
15 + --sec: #b25f16; --accent: #ff9f45; --accent-soft: #ffedd9; --on-accent: #141814;
16 + --display: "Space Grotesk", system-ui, sans-serif;
17 + --body: "Inter", system-ui, sans-serif;
18 + --mono: "JetBrains Mono", ui-monospace, monospace;
19 + }
20 + * { margin: 0; padding: 0; box-sizing: border-box; }
21 + html, body { background: #1a1e1a; }
22 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
23 +
24 + .poster {
25 + width: 860px; min-height: 1216px;
26 + background: var(--paper);
27 + border: 3px solid var(--ink);
28 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
29 + padding: 44px 48px 36px;
30 + display: flex; flex-direction: column;
31 + position: relative; overflow: hidden;
32 + }
33 + .poster::after {
34 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
35 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
36 + background-size: 5px 5px;
37 + }
38 +
39 + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
40 + .brand { display: flex; align-items: center; gap: 14px; }
41 + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); }
42 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; }
43 + .kabox { display: inline-block; background: #141814; color: #ff9f45; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); }
44 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; }
45 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; }
46 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
47 +
48 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; }
49 + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; }
50 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
51 + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
52 +
53 + /* ---------- L'app à l'écran ---------- */
54 + .shot { margin-top: 26px; position: relative; }
55 + .browser {
56 + width: 730px;
57 + background: #fff;
58 + border: 2.5px solid var(--ink);
59 + border-radius: 14px;
60 + box-shadow: 8px 8px 0 var(--ink);
61 + overflow: hidden;
62 + }
63 + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); }
64 + .bbar .dots { display: flex; gap: 5px; }
65 + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); }
66 + .bbar .dots span:nth-child(1) { background: var(--accent); }
67 + .bbar .dots span:nth-child(2) { background: var(--accent-soft); }
68 + .bbar .dots span:nth-child(3) { background: #fff; }
69 + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; }
70 + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; }
71 +
72 + .phone {
73 + position: absolute; right: 0; bottom: -34px;
74 + width: 196px;
75 + background: var(--ink);
76 + border-radius: 26px;
77 + padding: 7px;
78 + box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
79 + transform: rotate(2deg);
80 + }
81 + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; }
82 + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; }
83 + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
84 +
85 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; }
86 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
87 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
88 + @keyframes pulse { 50% { opacity: 0.35; } }
89 +
90 + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
91 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
92 + .strip .eq .acc { color: var(--accent); }
93 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; }
94 + .strip .side strong { color: var(--accent); font-weight: 700; }
95 +
96 + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
97 + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; }
98 + .foot .left strong { color: var(--ink); }
99 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
100 + .contact .big { font-size: 13px; color: var(--ink); }
101 +
102 + @media print {
103 + html, body { background: none; padding: 0; }
104 + .poster { box-shadow: none; min-height: 1221px; }
105 + .chip .dot { animation: none; }
106 + @page { size: 860px 1221px; margin: 0; }
107 + }
108 +</style>
109 +</head>
110 +<body>
111 + <div class="poster">
112 + <header class="head">
113 + <div class="brand">
114 + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo ValoPlex"><rect width="64" height="64" rx="12" fill="#141814"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#ff9f45" text-anchor="middle">PX</text></svg>
115 + <div>
116 + <span class="wordmark">Valo<span class="kabox">Plex</span></span><br />
117 + <span class="by">by Groupe <span class="minibox">KA</span></span>
118 + </div>
119 + </div>
120 + <span class="url">www.valoplex.com</span>
121 + </header>
122 +
123 + <p class="kicker">Évaluation d'immeubles à revenus · Québec</p>
124 + <h1>Votre plex, évalué<br /><span class="hl">porte par porte.</span></h1>
125 + <p class="lede">393 865 plex et 1 733 744 portes couverts, un moteur entraîné sur ~91 060 ventes réelles de plex — et le calcul montré en entier.</p>
126 +
127 + <div class="shot">
128 + <div class="browser">
129 + <div class="bbar">
130 + <div class="dots"><span></span><span></span><span></span></div>
131 + <span class="addr">https://www.valoplex.com</span>
132 + </div>
133 + <img src="img/valoplex-desktop.png" alt="ValoPlex — vue bureau" />
134 + </div>
135 + <div class="phone">
136 + <span class="notch"></span>
137 + <img src="img/valoplex-mobile.png" alt="ValoPlex — vue mobile" />
138 + </div>
139 + <span class="caption">L'app en direct · capturée le 13 août 2026</span>
140 + </div>
141 +
142 + <div class="stats">
143 + <span class="chip"><span class="dot"></span>393 865 plex</span>
144 + <span class="chip">1 733 744 portes</span>
145 + <span class="chip">~337 G$ de parc</span>
146 + <span class="chip">fourchette calibrée 8/10</span>
147 + </div>
148 +
149 + <div class="strip">
150 + <p class="eq">La vraie valeur de votre plex.<br /><span class="acc">Porte par porte.</span></p>
151 + <p class="side">
152 + 100 % automatisé, <strong>zéro boîte noire</strong><br />
153 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
154 + </p>
155 + </div>
156 +
157 + <footer class="foot">
158 + <p class="left">
159 + <strong>ValoPlex</strong> est l'une des sept plateformes du Groupe KA —
160 + des agrégateurs entièrement automatisés qui lisent les sites à la source.
161 + « Tout ce qui finit en ·Ka agrège. »
162 + </p>
163 + <div class="contact">
164 + <span class="big">www.valoplex.com</span><br />
165 + by Groupe KA · www.groupe-ka.com<br />
166 + © 2026 Groupe KA · Québec
167 + </div>
168 + </footer>
169 + </div>
170 +</body>
171 +</html>
added valoplex-poster.html +213 −0
@@ -0,0 +1,213 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster de présentation ValoPlex (by Groupe KA) — thème orange brûlé de www.valoplex.com. 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>ValoPlex by Groupe KA — La vraie valeur de votre plex (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 + --sec: #b25f16;
19 + --accent: #ff9f45;
20 + --accent-soft: #ffedd9;
21 + --on-accent: #141814;
22 + --display: "Space Grotesk", system-ui, sans-serif;
23 + --body: "Inter", system-ui, sans-serif;
24 + --mono: "JetBrains Mono", ui-monospace, monospace;
25 + }
26 + * { margin: 0; padding: 0; box-sizing: border-box; }
27 + html, body { background: #1a1e1a; }
28 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
29 +
30 + .poster {
31 + width: 860px; min-height: 1216px;
32 + background: var(--paper);
33 + border: 3px solid var(--ink);
34 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
35 + padding: 44px 48px 36px;
36 + display: flex; flex-direction: column;
37 + position: relative; overflow: hidden;
38 + }
39 + .poster::after {
40 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
41 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
42 + background-size: 5px 5px;
43 + }
44 +
45 + .head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
46 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; }
47 + .kabox { display: inline-block; background: var(--ink); color: var(--accent); border-radius: 8px; padding: 0 10px 4px; transform: rotate(-2deg); }
48 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; }
49 + .by .minika { font-family: var(--display); font-size: 13px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink); }
50 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); }
51 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
52 +
53 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 26px; }
54 + h1 { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 0.99; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 10px; }
55 + h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
56 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
57 + .lede { margin-top: 16px; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
58 + .lede strong { color: var(--ink); }
59 +
60 + .figure { margin-top: 24px; display: flex; flex-direction: column; }
61 + .sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
62 + .src { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 12px; box-shadow: 3px 3px 0 rgba(20,24,20,0.2); white-space: nowrap; }
63 + .beams { display: block; width: 100%; height: 78px; }
64 + .beams line { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: 0.55; animation: flow 1.6s linear infinite; }
65 + @keyframes flow { to { stroke-dashoffset: -22; } }
66 +
67 + .core { align-self: center; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 34px 20px; text-align: center; box-shadow: 6px 6px 0 rgba(20,24,20,0.28); transform: rotate(-1deg); position: relative; z-index: 1; }
68 + .core .k { font-family: var(--display); font-weight: 700; font-size: 42px; letter-spacing: -0.04em; line-height: 1; }
69 + .core .k .box { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 0 8px 3px; transform: rotate(-2deg); }
70 + .core .eq { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,243,238,0.75); margin-top: 7px; }
71 + .core .pill { position: absolute; top: -13px; right: -26px; background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; padding: 4px 11px; transform: rotate(3deg); white-space: nowrap; }
72 +
73 + .features { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
74 + .feat { background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); padding: 16px 18px 18px; }
75 + .feat .n { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--sec); }
76 + .feat h3 { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; text-transform: uppercase; margin-top: 6px; }
77 + .feat p { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
78 + .feat p strong { color: var(--ink); }
79 +
80 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 24px; }
81 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
82 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
83 + @keyframes pulse { 50% { opacity: 0.35; } }
84 +
85 + .strip { margin-top: 24px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 26px; box-shadow: 6px 6px 0 rgba(20,24,20,0.28); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
86 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
87 + .strip .eq .acc { color: var(--accent); }
88 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(245,243,238,0.78); text-align: right; white-space: nowrap; }
89 + .strip .side strong { color: var(--accent); font-weight: 700; }
90 +
91 + .foot { margin-top: auto; border-top: 2px dashed rgba(20,24,20,0.35); padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
92 + .def { max-width: 540px; }
93 + .def .term { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
94 + .def .phon { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
95 + .def p { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
96 + .def p strong { color: var(--ink); }
97 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
98 + .contact .big { font-size: 13px; color: var(--ink); }
99 +
100 + @media print {
101 + html, body { background: none; padding: 0; }
102 + .poster { box-shadow: none; min-height: 1379px; }
103 + .beams line { animation: none; }
104 + .chip .dot { animation: none; }
105 + @page { size: 860px 1379px; margin: 0; }
106 + }
107 +</style>
108 +</head>
109 +<body>
110 + <div class="poster">
111 +
112 + <header class="head">
113 + <div>
114 + <span class="wordmark">Valo<span class="kabox">Plex</span></span><br />
115 + <span class="by">by <span class="minika">Groupe <span class="minibox">KA</span></span></span>
116 + </div>
117 + <span class="url">www.valoplex.com</span>
118 + </header>
119 +
120 + <p class="kicker">Évaluation d&rsquo;immeubles à revenus · Québec</p>
121 + <h1>La vraie valeur<br /><span class="outline">de votre plex.</span> <span class="hl">Porte par porte.</span></h1>
122 + <p class="lede">
123 + <strong>Le moteur d&rsquo;évaluation spécialisé pour les immeubles à revenus
124 + du Québec :</strong> entraîné exclusivement sur ~91 060 ventes réelles de
125 + plex, avec les variables qui comptent — portes, aire habitable par porte,
126 + chambres locatives, mixité commerciale.
127 + </p>
128 +
129 + <div class="figure">
130 + <div class="sources">
131 + <span class="src">ventes-de-plex.qc</span>
132 + <span class="src">rôles-évaluation.mamh</span>
133 + <span class="src">registre-foncier.gouv</span>
134 + <span class="src">portes-et-logements.qc</span>
135 + <span class="src">revenus-locatifs.qc</span>
136 + <span class="src">mixité-commerciale.qc</span>
137 + </div>
138 + <svg class="beams" viewBox="0 0 860 78" preserveAspectRatio="none" aria-hidden="true">
139 + <line x1="120" y1="6" x2="430" y2="76" />
140 + <line x1="245" y1="6" x2="430" y2="76" />
141 + <line x1="370" y1="6" x2="430" y2="76" />
142 + <line x1="490" y1="6" x2="430" y2="76" />
143 + <line x1="615" y1="6" x2="430" y2="76" />
144 + <line x1="740" y1="6" x2="430" y2="76" />
145 + </svg>
146 + <div class="core">
147 + <span class="pill">~91 060 ventes de plex</span>
148 + <div class="k">Valo<span class="box">Plex</span></div>
149 + <div class="eq">= la valeur, à l&rsquo;unité du plex : la porte</div>
150 + </div>
151 + </div>
152 +
153 + <div class="features">
154 + <article class="feat">
155 + <span class="n">01</span>
156 + <h3>Valeur par porte</h3>
157 + <p><strong>Valeur totale et valeur par porte</strong> — l&rsquo;unité d&rsquo;analyse du plex, celle que les investisseurs comparent vraiment.</p>
158 + </article>
159 + <article class="feat">
160 + <span class="n">02</span>
161 + <h3>Fourchette calibrée</h3>
162 + <p><strong>8 fois sur 10, le vrai prix tombe dedans</strong> : la fourchette est calibrée sur des ventes réelles, pas promise.</p>
163 + </article>
164 + <article class="feat">
165 + <span class="n">03</span>
166 + <h3>« Pourquoi ce prix ? »</h3>
167 + <p>Le calcul est <strong>montré en entier</strong> : comparables, ajustements, variables — zéro boîte noire.</p>
168 + </article>
169 + <article class="feat">
170 + <span class="n">04</span>
171 + <h3>Suivi de parc</h3>
172 + <p><strong>Suivi de parc immobilier</strong> et rapports institutionnels pour gestionnaires et investisseurs.</p>
173 + </article>
174 + </div>
175 +
176 + <div class="stats">
177 + <span class="chip"><span class="dot"></span>393 867 plex couverts</span>
178 + <span class="chip">1 733 744 portes</span>
179 + <span class="chip">~337 G$ de parc évalué</span>
180 + <span class="chip">hédonique monotone + comparables</span>
181 + </div>
182 +
183 + <div class="strip">
184 + <p class="eq">
185 + Un plex ne s&rsquo;évalue pas comme une maison.<br />
186 + <span class="acc">Il s&rsquo;évalue porte par porte.</span>
187 + </p>
188 + <p class="side">
189 + Entraîné <strong>exclusivement</strong> sur des ventes de plex<br />
190 + Fourchette <strong>calibrée 8/10</strong> sur ventes jamais vues<br />
191 + Estimation <strong>indicative</strong> — le calcul, à découvert
192 + </p>
193 + </div>
194 +
195 + <footer class="foot">
196 + <div class="def">
197 + <span class="term">ValoPlex</span><span class="phon">/va.lo.plɛks/ — « valeur + plex »</span>
198 + <p>
199 + <strong>1.</strong> Moteur d&rsquo;évaluation du Groupe KA dédié aux
200 + immeubles à revenus. <strong>2.</strong> Le compagnon de Vrai-Prix
201 + pour le locatif : duplex, triplex, multiplex — du 2 au 100 portes,
202 + la valeur expliquée en entier.
203 + </p>
204 + </div>
205 + <div class="contact">
206 + <span class="big">www.valoplex.com</span><br />
207 + by Groupe KA · www.groupe-ka.com<br />
208 + © 2026 Groupe KA · Québec
209 + </div>
210 + </footer>
211 + </div>
212 +</body>
213 +</html>
added vrai-prix-app-poster.html +171 −0
@@ -0,0 +1,171 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster vitrine vrai-prix (by Groupe KA) — logo + captures d'écran de l'app en direct. -->
4 +<html lang="fr">
5 +<head>
6 +<meta charset="UTF-8" />
7 +<meta name="viewport" content="width=device-width, initial-scale=1" />
8 +<title>Vrai-Prix by Groupe KA — l'app en action (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; --ink: #141814; --ink-2: #4d5551; --ink-3: #8b928c;
15 + --sec: #9e2a25; --accent: #ff5148; --accent-soft: #ffe3e0; --on-accent: #ffffff;
16 + --display: "Space Grotesk", system-ui, sans-serif;
17 + --body: "Inter", system-ui, sans-serif;
18 + --mono: "JetBrains Mono", ui-monospace, monospace;
19 + }
20 + * { margin: 0; padding: 0; box-sizing: border-box; }
21 + html, body { background: #1a1e1a; }
22 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
23 +
24 + .poster {
25 + width: 860px; min-height: 1216px;
26 + background: var(--paper);
27 + border: 3px solid var(--ink);
28 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
29 + padding: 44px 48px 36px;
30 + display: flex; flex-direction: column;
31 + position: relative; overflow: hidden;
32 + }
33 + .poster::after {
34 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
35 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
36 + background-size: 5px 5px;
37 + }
38 +
39 + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
40 + .brand { display: flex; align-items: center; gap: 14px; }
41 + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); }
42 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; }
43 + .kabox { display: inline-block; background: #141814; color: #ff5148; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); }
44 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; }
45 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; }
46 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
47 +
48 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; }
49 + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; }
50 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
51 + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
52 +
53 + /* ---------- L'app à l'écran ---------- */
54 + .shot { margin-top: 26px; position: relative; }
55 + .browser {
56 + width: 730px;
57 + background: #fff;
58 + border: 2.5px solid var(--ink);
59 + border-radius: 14px;
60 + box-shadow: 8px 8px 0 var(--ink);
61 + overflow: hidden;
62 + }
63 + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); }
64 + .bbar .dots { display: flex; gap: 5px; }
65 + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); }
66 + .bbar .dots span:nth-child(1) { background: var(--accent); }
67 + .bbar .dots span:nth-child(2) { background: var(--accent-soft); }
68 + .bbar .dots span:nth-child(3) { background: #fff; }
69 + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; }
70 + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; }
71 +
72 + .phone {
73 + position: absolute; right: 0; bottom: -34px;
74 + width: 196px;
75 + background: var(--ink);
76 + border-radius: 26px;
77 + padding: 7px;
78 + box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
79 + transform: rotate(2deg);
80 + }
81 + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; }
82 + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; }
83 + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
84 +
85 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; }
86 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
87 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
88 + @keyframes pulse { 50% { opacity: 0.35; } }
89 +
90 + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
91 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
92 + .strip .eq .acc { color: var(--accent); }
93 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; }
94 + .strip .side strong { color: var(--accent); font-weight: 700; }
95 +
96 + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
97 + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; }
98 + .foot .left strong { color: var(--ink); }
99 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
100 + .contact .big { font-size: 13px; color: var(--ink); }
101 +
102 + @media print {
103 + html, body { background: none; padding: 0; }
104 + .poster { box-shadow: none; min-height: 1221px; }
105 + .chip .dot { animation: none; }
106 + @page { size: 860px 1221px; margin: 0; }
107 + }
108 +</style>
109 +</head>
110 +<body>
111 + <div class="poster">
112 + <header class="head">
113 + <div class="brand">
114 + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo Vrai-Prix"><rect width="64" height="64" rx="12" fill="#141814"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#ff5148" text-anchor="middle">VP</text></svg>
115 + <div>
116 + <span class="wordmark">Vrai<span class="kabox">Prix</span></span><br />
117 + <span class="by">by Groupe <span class="minibox">KA</span></span>
118 + </div>
119 + </div>
120 + <span class="url">www.vrai-prix.com</span>
121 + </header>
122 +
123 + <p class="kicker">Estimation résidentielle · tout le Québec</p>
124 + <h1>La valeur de votre maison,<br /><span class="hl">expliquée.</span></h1>
125 + <p class="lede">3 747 008 propriétés couvertes, 745 119 ventes réelles, fourchette P10-P90 et indice de confiance — chaque ajustement affiché en dollars.</p>
126 +
127 + <div class="shot">
128 + <div class="browser">
129 + <div class="bbar">
130 + <div class="dots"><span></span><span></span><span></span></div>
131 + <span class="addr">https://www.vrai-prix.com</span>
132 + </div>
133 + <img src="img/vrai-prix-desktop.png" alt="Vrai-Prix — vue bureau" />
134 + </div>
135 + <div class="phone">
136 + <span class="notch"></span>
137 + <img src="img/vrai-prix-mobile.png" alt="Vrai-Prix — vue mobile" />
138 + </div>
139 + <span class="caption">L'app en direct · capturée le 13 août 2026</span>
140 + </div>
141 +
142 + <div class="stats">
143 + <span class="chip"><span class="dot"></span>3 747 008 propriétés</span>
144 + <span class="chip">745 119 ventes réelles</span>
145 + <span class="chip">MdAPE 11 %</span>
146 + <span class="chip">rapports PDF bancaires</span>
147 + </div>
148 +
149 + <div class="strip">
150 + <p class="eq">La vraie valeur.<br /><span class="acc">En toute transparence.</span></p>
151 + <p class="side">
152 + 100 % automatisé, <strong>zéro boîte noire</strong><br />
153 + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe
154 + </p>
155 + </div>
156 +
157 + <footer class="foot">
158 + <p class="left">
159 + <strong>Vrai-Prix</strong> est l'une des sept plateformes du Groupe KA —
160 + des agrégateurs entièrement automatisés qui lisent les sites à la source.
161 + « Tout ce qui finit en ·Ka agrège. »
162 + </p>
163 + <div class="contact">
164 + <span class="big">www.vrai-prix.com</span><br />
165 + by Groupe KA · www.groupe-ka.com<br />
166 + © 2026 Groupe KA · Québec
167 + </div>
168 + </footer>
169 + </div>
170 +</body>
171 +</html>
added vrai-prix-poster.html +213 −0
@@ -0,0 +1,213 @@
1 +<!DOCTYPE html>
2 +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->
3 +<!-- Poster de présentation Vrai-Prix (by Groupe KA) — thème corail de www.vrai-prix.com. 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>Vrai-Prix by Groupe KA — La vraie valeur de votre propriété (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 + --sec: #9e2a25;
19 + --accent: #ff5148;
20 + --accent-soft: #ffe3e0;
21 + --on-accent: #ffffff;
22 + --display: "Space Grotesk", system-ui, sans-serif;
23 + --body: "Inter", system-ui, sans-serif;
24 + --mono: "JetBrains Mono", ui-monospace, monospace;
25 + }
26 + * { margin: 0; padding: 0; box-sizing: border-box; }
27 + html, body { background: #1a1e1a; }
28 + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }
29 +
30 + .poster {
31 + width: 860px; min-height: 1216px;
32 + background: var(--paper);
33 + border: 3px solid var(--ink);
34 + box-shadow: 14px 14px 0 rgba(0,0,0,0.45);
35 + padding: 44px 48px 36px;
36 + display: flex; flex-direction: column;
37 + position: relative; overflow: hidden;
38 + }
39 + .poster::after {
40 + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
41 + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);
42 + background-size: 5px 5px;
43 + }
44 +
45 + .head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
46 + .wordmark { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; }
47 + .kabox { display: inline-block; background: var(--ink); color: var(--accent); border-radius: 8px; padding: 0 10px 4px; transform: rotate(-2deg); }
48 + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; }
49 + .by .minika { font-family: var(--display); font-size: 13px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink); }
50 + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); }
51 + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
52 +
53 + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 26px; }
54 + h1 { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 0.99; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 10px; }
55 + h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
56 + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }
57 + .lede { margin-top: 16px; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
58 + .lede strong { color: var(--ink); }
59 +
60 + .figure { margin-top: 24px; display: flex; flex-direction: column; }
61 + .sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
62 + .src { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 12px; box-shadow: 3px 3px 0 rgba(20,24,20,0.2); white-space: nowrap; }
63 + .beams { display: block; width: 100%; height: 78px; }
64 + .beams line { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: 0.55; animation: flow 1.6s linear infinite; }
65 + @keyframes flow { to { stroke-dashoffset: -22; } }
66 +
67 + .core { align-self: center; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 34px 20px; text-align: center; box-shadow: 6px 6px 0 rgba(20,24,20,0.28); transform: rotate(-1deg); position: relative; z-index: 1; }
68 + .core .k { font-family: var(--display); font-weight: 700; font-size: 42px; letter-spacing: -0.04em; line-height: 1; }
69 + .core .k .box { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 0 8px 3px; transform: rotate(-2deg); }
70 + .core .eq { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,243,238,0.75); margin-top: 7px; }
71 + .core .pill { position: absolute; top: -13px; right: -26px; background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; padding: 4px 11px; transform: rotate(3deg); white-space: nowrap; }
72 +
73 + .features { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
74 + .feat { background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); padding: 16px 18px 18px; }
75 + .feat .n { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--sec); }
76 + .feat h3 { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; text-transform: uppercase; margin-top: 6px; }
77 + .feat p { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
78 + .feat p strong { color: var(--ink); }
79 +
80 + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 24px; }
81 + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; }
82 + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }
83 + @keyframes pulse { 50% { opacity: 0.35; } }
84 +
85 + .strip { margin-top: 24px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 26px; box-shadow: 6px 6px 0 rgba(20,24,20,0.28); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
86 + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
87 + .strip .eq .acc { color: var(--accent); }
88 + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(245,243,238,0.78); text-align: right; white-space: nowrap; }
89 + .strip .side strong { color: var(--accent); font-weight: 700; }
90 +
91 + .foot { margin-top: auto; border-top: 2px dashed rgba(20,24,20,0.35); padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
92 + .def { max-width: 540px; }
93 + .def .term { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
94 + .def .phon { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
95 + .def p { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
96 + .def p strong { color: var(--ink); }
97 + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }
98 + .contact .big { font-size: 13px; color: var(--ink); }
99 +
100 + @media print {
101 + html, body { background: none; padding: 0; }
102 + .poster { box-shadow: none; min-height: 1283px; }
103 + .beams line { animation: none; }
104 + .chip .dot { animation: none; }
105 + @page { size: 860px 1283px; margin: 0; }
106 + }
107 +</style>
108 +</head>
109 +<body>
110 + <div class="poster">
111 +
112 + <header class="head">
113 + <div>
114 + <span class="wordmark">Vrai<span class="kabox">Prix</span></span><br />
115 + <span class="by">by <span class="minika">Groupe <span class="minibox">KA</span></span></span>
116 + </div>
117 + <span class="url">www.vrai-prix.com</span>
118 + </header>
119 +
120 + <p class="kicker">Estimation résidentielle · tout le Québec</p>
121 + <h1>La vraie valeur.<br /><span class="outline">En toute</span> <span class="hl">transparence.</span></h1>
122 + <p class="lede">
123 + <strong>Estimation résidentielle pour tout le Québec</strong>, bâtie sur les
124 + rôles d&rsquo;évaluation foncière du MAMH et 745 119 ventes réelles publiées
125 + de 2021 à 2026. Moteur hybride — modèle hédonique + comparables ajustés —
126 + dont chaque ajustement est affiché en dollars.
127 + </p>
128 +
129 + <div class="figure">
130 + <div class="sources">
131 + <span class="src">rôles-évaluation.mamh</span>
132 + <span class="src">ventes-publiées.qc</span>
133 + <span class="src">registre-foncier.gouv</span>
134 + <span class="src">caractéristiques.qc</span>
135 + <span class="src">comparables.qc</span>
136 + <span class="src">marchés-locaux.qc</span>
137 + </div>
138 + <svg class="beams" viewBox="0 0 860 78" preserveAspectRatio="none" aria-hidden="true">
139 + <line x1="120" y1="6" x2="430" y2="76" />
140 + <line x1="245" y1="6" x2="430" y2="76" />
141 + <line x1="370" y1="6" x2="430" y2="76" />
142 + <line x1="490" y1="6" x2="430" y2="76" />
143 + <line x1="615" y1="6" x2="430" y2="76" />
144 + <line x1="740" y1="6" x2="430" y2="76" />
145 + </svg>
146 + <div class="core">
147 + <span class="pill">MdAPE 11 % · validé sur ventes réelles</span>
148 + <div class="k">Vrai<span class="box">Prix</span></div>
149 + <div class="eq">= le calcul montré, dollar par dollar</div>
150 + </div>
151 + </div>
152 +
153 + <div class="features">
154 + <article class="feat">
155 + <span class="n">01</span>
156 + <h3>Fourchette honnête</h3>
157 + <p>Une <strong>fourchette P10-P90</strong> plutôt qu&rsquo;un faux prix unique : l&rsquo;incertitude est affichée, jamais cachée.</p>
158 + </article>
159 + <article class="feat">
160 + <span class="n">02</span>
161 + <h3>Confiance affichée</h3>
162 + <p>Un <strong>indice de confiance A-D</strong> sur une jauge, pour savoir d&rsquo;un coup d&rsquo;œil à quel point l&rsquo;estimation est solide.</p>
163 + </article>
164 + <article class="feat">
165 + <span class="n">03</span>
166 + <h3>Comparables détaillés</h3>
167 + <p>Chaque comparable est détaillé : <strong>marché, superficie, âge, poids</strong> — et chaque ajustement est chiffré en dollars.</p>
168 + </article>
169 + <article class="feat">
170 + <span class="n">04</span>
171 + <h3>Rapports PDF</h3>
172 + <p>Des <strong>rapports PDF de marque</strong>, au standard des formats bancaires, prêts à déposer au dossier.</p>
173 + </article>
174 + </div>
175 +
176 + <div class="stats">
177 + <span class="chip"><span class="dot"></span>3 747 008 propriétés couvertes</span>
178 + <span class="chip">745 119 ventes réelles</span>
179 + <span class="chip">MdAPE 11 %</span>
180 + <span class="chip">fourchette P10-P90</span>
181 + </div>
182 +
183 + <div class="strip">
184 + <p class="eq">
185 + Si le calcul ne peut pas être montré,<br />
186 + <span class="acc">il ne sort pas.</span>
187 + </p>
188 + <p class="side">
189 + Hédonique <strong>LightGBM</strong> + comparables réels ajustés<br />
190 + Validé sur des ventes <strong>jamais vues</strong>, pas promis<br />
191 + Estimation <strong>indicative</strong> — le calcul, à découvert
192 + </p>
193 + </div>
194 +
195 + <footer class="foot">
196 + <div class="def">
197 + <span class="term">Vrai-Prix</span><span class="phon">/vʁɛ.pʁi/ — « le prix, sans boîte noire »</span>
198 + <p>
199 + <strong>1.</strong> Moteur d&rsquo;évaluation résidentielle du Groupe
200 + KA. <strong>2.</strong> L&rsquo;une des sept plateformes du groupe —
201 + un score magique n&rsquo;est pas une réponse : chaque estimation
202 + montre ses comparables, ses ajustements et sa fourchette.
203 + </p>
204 + </div>
205 + <div class="contact">
206 + <span class="big">www.vrai-prix.com</span><br />
207 + by Groupe KA · www.groupe-ka.com<br />
208 + © 2026 Groupe KA · Québec
209 + </div>
210 + </footer>
211 + </div>
212 +</body>
213 +</html>
214