feat: posters HTML des 7 plateformes, chacun au thème de son app
lou-ka (lime/encre), immo-ka (rouge #e23744/chocolat), vrai-prix (corail #ff5148), valoplex (orange #ff9f45), auto-ka (orangé #ff5a2a/ encre bleutée), fabri-ka (terracotta/pin, Fraunces+Outfit), food-ka (vert épicerie/lime/tomate). Couleurs et typos extraites des repos des apps (local + SSH nœuds). Mention « by Groupe KA », figure d'agrégation, 4 caractéristiques, chips de chiffres, bande manifeste. Imprimables A3 portrait, hors site. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
7 changed files +1,814 −0
added
assets/poster/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; border-width: 0; width: 100%; min-height: auto; } | |
| 103 | + .beams line { animation: none; } | |
| 104 | + .chip .dot { animation: none; } | |
| 105 | + @page { size: A3 portrait; 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’inventaire de 124 concessionnaires et marchands | |
| 124 | + d’occasion, lu directement sur leurs sites</strong> — jamais via les | |
| 125 | + plateformes d’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’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’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’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’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’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’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
assets/poster/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; border-width: 0; width: 100%; min-height: auto; } | |
| 105 | + .beams line { animation: none; } | |
| 106 | + .chip .dot { animation: none; } | |
| 107 | + @page { size: A3 portrait; 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’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’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’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’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’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’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
assets/poster/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; border-width: 0; width: 100%; min-height: auto; } | |
| 105 | + .beams line { animation: none; } | |
| 106 | + .chip .dot { animation: none; } | |
| 107 | + @page { size: A3 portrait; 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’épicerie · Québec</p> | |
| 123 | + <h1>Tous les prix<br /><span class="outline">d’é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’é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’é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’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’é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’épicerie. <strong>2.</strong> L’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
assets/poster/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; border-width: 0; width: 100%; min-height: auto; } | |
| 103 | + .beams line { animation: none; } | |
| 104 | + .chip .dot { animation: none; } | |
| 105 | + @page { size: A3 portrait; 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’inventaire des agences de courtage du Québec</strong> — RE/MAX, | |
| 124 | + Sutton, Via Capitale, Proprio Direct et des dizaines d’autres — agrégé à | |
| 125 | + la source, normalisé et géolocalisé. Chaque fiche renvoie à l’inscription | |
| 126 | + originale du courtier ; une propriété vendue disparaît d’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’agences</span> | |
| 150 | + <div class="k">Immo<span class="box">Ka</span></div> | |
| 151 | + <div class="eq">= tout l’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’inventaire de dizaines d’agences d’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’original</h3> | |
| 174 | + <p>Chaque fiche renvoie à <strong>l’inscription originale de l’agence</strong> — rien d’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’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’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’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’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
assets/poster/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; border-width: 0; width: 100%; min-height: auto; } | |
| 389 | + .beams line { animation: none; } | |
| 390 | + .chip .dot { animation: none; } | |
| 391 | + @page { size: A3 portrait; 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’agrégateur indépendant du locatif québécois :</strong> | |
| 412 | + les annonces d’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’inventé, tout est traçable | |
| 415 | + jusqu’à l’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’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’<strong>historique des loyers</strong> est conservé : les | |
| 469 | + baisses remontent d’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’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
assets/poster/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; border-width: 0; width: 100%; min-height: auto; } | |
| 103 | + .beams line { animation: none; } | |
| 104 | + .chip .dot { animation: none; } | |
| 105 | + @page { size: A3 portrait; 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’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 à 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’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’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> | |
| 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’é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é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’é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
assets/poster/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; border-width: 0; width: 100%; min-height: auto; } | |
| 103 | + .beams line { animation: none; } | |
| 104 | + .chip .dot { animation: none; } | |
| 105 | + @page { size: A3 portrait; 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’é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’un faux prix unique : l’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’un coup d’œil à quel point l’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’évaluation résidentielle du Groupe | |
| 200 | + KA. <strong>2.</strong> L’une des sept plateformes du groupe — | |
| 201 | + un score magique n’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 | ||