spb/poster-ka Public
Posters de présentation des marques du Groupe KA — HTML autonomes, impression A3 portrait
HTML 100%
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 }3536 /* ---------- 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 }5859 .mono { font-family: var(--mono); }60 .display { font-family: var(--display); }6162 /* ---------- 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 }9596 /* ---------- 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); }132133 /* ---------- 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; } }168169 .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 }212213 .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 }248249 /* ---------- 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; } }276277 /* ---------- 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); }318319 /* ---------- 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">332333 <!-- 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>338339 <!-- Titre -->340 <p class="kicker">Holding d’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’est l’agrégation.</strong> Des centaines de connecteurs344 lisent les sites à la source, normalisent la donnée et se resynchronisent345 seuls, jour et nuit. Se loger, acheter, évaluer, rouler, consommer local,346 faire l’épicerie — sept plateformes, zéro saisie manuelle, zéro boîte noire.347 </p>348349 <!-- La figure d'agrégation -->350 <div class="figure">351352 <!-- 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>365366 <!-- 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>379380 <!-- 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>386387 <!-- 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>397398 <!-- 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>409410 <!-- 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’observations immobilières</span>415 <span class="chip">375 000+ annonces & produits</span>416 <span class="chip">3 bots éclaireurs · ka2 · ka4 · ka6</span>417 </div>418419 <!-- 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 était425 éparpillé sur des centaines de sites. <strong>2.</strong> Marque de fabrique426 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ébec434 </div>435 </footer>436 </div>437</body>438</html>439