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 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; }2324 .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 }3839 .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); }4748 .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); }5253 /* ---------- 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; }7172 .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); }8485 .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; } }8990 .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; }9596 .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); }101102 @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>122123 <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>126127 <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>141142 <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>148149 <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 groupe154 </p>155 </div>156157 <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ébec167 </div>168 </footer>169 </div>170</body>171</html>172