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 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 }3839 /* ---------- 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 }6061 .mono { font-family: var(--mono); }6263 /* ---------- 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 }9697 /* ---------- 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); }133134 /* ---------- 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; } }168169 /* ---------- 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); }255256 /* ---------- 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; }288289 /* ---------- 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; } }316317 /* ---------- 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); }358359 /* ---------- 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">372373 <!-- 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>378379 <!-- 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’agréger, il faut découvrir.</strong> ka2, ka4 et ka6 sont384 les bots IA du Groupe KA : ils explorent le web québécois, identifient les385 entités — entreprises, organisations, personnes, créateurs, sites — et386 cartographient le terrain avant que les connecteurs ·Ka ne s’y branchent.387 </p>388389 <!-- La figure : le terrain → les trois bots -->390 <div class="figure">391392 <!-- 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>403404 <!-- 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>416417 <!-- 3. Les trois cartes d'identité -->418 <div class="bots">419420 <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’IA</strong>, pas seulement copiée</li>428 <li>Crawl plafonné : budget quotidien, délais entre requêtes</li>429 </ul>430 </article>431432 <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’entités</strong> : + données générales</li>439 <li><strong>Tableau de bord public</strong> : l’exploration se regarde en direct</li>440 <li>Bascule automatique entre backends de lecture</li>441 </ul>442 </article>443444 <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 & influenceurs du Québec</p>449 <ul>450 <li><strong>Cartographie l’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>456457 <!-- 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 trouvez463 </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>471472 <!-- 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>480481 <!-- 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 web488 québécois — une nouvelle boutique, un gestionnaire, un créateur — et489 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ébec496 </div>497 </footer>498 </div>499</body>500</html>501