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 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; }2930 .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 }4445 .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); }5253 .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); }5960 .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; } }6667 .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; }7273 .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); }7980 .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; } }8485 .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; }9091 .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); }99100 @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">111112 <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>119120 <p class="kicker">Évaluation d’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’évaluation spécialisé pour les immeubles à revenus124 du Québec :</strong> entraîné exclusivement sur ~91 060 ventes réelles de125 plex, avec les variables qui comptent — portes, aire habitable par porte,126 chambres locatives, mixité commerciale.127 </p>128129 <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’unité du plex : la porte</div>150 </div>151 </div>152153 <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’unité d’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>175176 <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>182183 <div class="strip">184 <p class="eq">185 Un plex ne s’évalue pas comme une maison.<br />186 <span class="acc">Il s’é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écouvert192 </p>193 </div>194195 <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’évaluation du Groupe KA dédié aux200 immeubles à revenus. <strong>2.</strong> Le compagnon de Vrai-Prix201 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ébec209 </div>210 </footer>211 </div>212</body>213</html>214