SPB Git
spboucher.ai

spb/lou-ka

Public

Lou·Ka — tous les logements à louer du Québec, un seul endroit.

www.lou-ka.com
webappreal-estatequebecrental

feat(fiche): styles du dossier d'intelligence locative — coût réel, historique, immeuble, gestionnaire, hiver

Complète les snapshots ka2 (backend 8efd8cb + composants 0ee1a2d) : pastilles
de statut de donnée (observé/estimé/inconnu), tableau du coût réel, timeline
Lou-Ka, distribution des avis Google, score hiver.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Simon-Pierre Boucher committed (Aug 24, 2026) parent 0ee1a2d Browse files

1 changed file +166 −0

Unified Split
modified frontend/src/styles.css +166 −0
@@ -2113,3 +2113,169 @@ html { scroll-padding-top: 76px; } /* header sticky au-dessus des ancres */
2113 2113
2114 /* --- Listes à liseré (inondation) alignées sur le reste --- */ 2114 /* --- Listes à liseré (inondation) alignées sur le reste --- */
2115 .zi-liste li { padding: 6px 0; } 2115 .zi-liste li { padding: 6px 0; }
2116+
2117+/* ============================================================================
2118+ Dossier d'intelligence locative — Coût réel, Historique Lou-Ka, Immeuble,
2119+ Gestionnaire, Vie quotidienne en hiver
2120+ ========================================================================== */
2121+
2122+/* --- Pastilles de statut de donnée (observed / estimated / …) --- */
2123+.st-pill {
2124+ display: inline-block;
2125+ font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
2126+ text-transform: uppercase; letter-spacing: 0.06em;
2127+ padding: 2px 7px; border: 1px solid currentColor; border-radius: var(--r-pill, 999px);
2128+ white-space: nowrap;
2129+}
2130+.st-included { color: #2e7d4a; background: #eef7f0; }
2131+.st-observed { color: var(--ink); background: var(--surface); }
2132+.st-estimated { color: var(--accent-deep, #cc5500); background: var(--accent-soft, #fff1e6); }
2133+.st-unknown { color: var(--ink-3); background: var(--surface-2, #faf9f5); border-style: dashed; }
2134+
2135+/* --- Coût réel mensuel --- */
2136+.cr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
2137+.cr-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
2138+.cr-table tbody tr:nth-child(even) td { background: var(--surface-2, #faf9f5); }
2139+.cr-poste { color: var(--ink-2); }
2140+.cr-montant {
2141+ text-align: right; font-family: var(--font-mono); font-weight: 600;
2142+ white-space: nowrap;
2143+}
2144+.cr-table tfoot td {
2145+ border-bottom: none; border-top: 1.5px solid var(--ink);
2146+ font-weight: 700; padding-top: 9px;
2147+}
2148+.cr-annuel { color: var(--ink-3); font-weight: 500; font-size: 12px; }
2149+.cr-inconnus {
2150+ margin: 10px 0 0; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2);
2151+ background: var(--accent-soft, #fff1e6);
2152+ border-left: 3px solid var(--accent, #ff6a00);
2153+ border-radius: var(--r-ctl);
2154+}
2155+.cr-pi2 { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
2156+.cr-pi2 b { font-family: var(--font-mono); }
2157+
2158+/* --- Historique Lou-Ka : timeline --- */
2159+.hl-timeline {
2160+ list-style: none; margin: 12px 0 0; padding: 0 0 0 14px;
2161+ border-left: 2px solid var(--line);
2162+ display: flex; flex-direction: column; gap: 8px;
2163+}
2164+.hl-item { position: relative; font-size: 13px; color: var(--ink-2); }
2165+.hl-item::before {
2166+ content: ""; position: absolute; left: -19.5px; top: 5px;
2167+ width: 9px; height: 9px; border-radius: 50%;
2168+ background: var(--surface); border: 2px solid var(--ink-3);
2169+}
2170+.hl-item.hl-prix::before { border-color: var(--accent, #ff6a00); background: var(--accent-soft, #fff1e6); }
2171+.hl-item.hl-disparition::before { border-color: #b3552e; background: #fdeee7; }
2172+.hl-item.hl-reapparition::before { border-color: #2e7d4a; background: #eef7f0; }
2173+.hl-date {
2174+ font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
2175+ text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3);
2176+ display: inline-block; min-width: 92px;
2177+}
2178+.hl-texte b { font-family: var(--font-mono); }
2179+
2180+/* --- Vies antérieures (annonces recyclées) --- */
2181+.hl-recyclees { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
2182+.hl-recyclees h3 {
2183+ margin: 0 0 8px; font-size: 13px; font-weight: 700;
2184+ text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2);
2185+}
2186+.hl-match {
2187+ border: 1px solid var(--line); border-left: 3px solid var(--accent, #ff6a00);
2188+ border-radius: var(--r-ctl); background: var(--surface-2, #faf9f5);
2189+ padding: 8px 12px; margin: 0 0 8px; font-size: 13px;
2190+}
2191+.hl-signaux {
2192+ margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px;
2193+ color: var(--ink-3); letter-spacing: 0.02em;
2194+}
2195+
2196+/* --- Passeport de l'immeuble --- */
2197+.im-parcc { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
2198+.im-indicateurs { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
2199+.im-indic { font-size: 13px; }
2200+.im-indic > .k {
2201+ font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
2202+ text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
2203+ display: inline-block; margin-right: 4px;
2204+}
2205+.im-detail { color: var(--ink-2); font-size: 12.5px; }
2206+
2207+/* --- Qui gère ce logement? --- */
2208+.gest-head { margin-bottom: 10px; }
2209+.gest-nom { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
2210+.gest-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
2211+.gest-google { display: flex; align-items: baseline; gap: 10px; margin: 8px 0; }
2212+.gest-note {
2213+ font-family: var(--font-display); font-weight: 700; font-size: 22px;
2214+ color: var(--accent-deep, #cc5500);
2215+}
2216+.gest-navis { font-size: 12.5px; color: var(--ink-2); }
2217+.gest-bars { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }
2218+.gest-bar { display: flex; align-items: center; gap: 8px; }
2219+.gb-n {
2220+ font-family: var(--font-mono); font-size: 11px; font-weight: 600;
2221+ color: var(--ink-2); min-width: 26px; text-align: right;
2222+}
2223+.gb-track {
2224+ flex: 1 1 auto; height: 12px;
2225+ background: var(--surface-2, #faf9f5); border: 1px solid var(--line);
2226+ overflow: hidden; display: block;
2227+}
2228+.gb-fill { display: block; height: 100%; background: var(--ink-3); min-width: 0; }
2229+.gb-fill.pos { background: linear-gradient(90deg, #6fbc85, #2e7d4a); }
2230+.gb-fill.neg { background: linear-gradient(90deg, #e08a48, #c96a1f); }
2231+.gb-c {
2232+ font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
2233+ min-width: 24px;
2234+}
2235+.gest-stats {
2236+ display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
2237+ font-size: 13px; color: var(--ink-2); margin: 8px 0;
2238+}
2239+.gest-themes { font-size: 13px; margin: 8px 0; }
2240+.gest-themes > .k { color: var(--ink-2); }
2241+.gest-themes .zi-badge { margin: 2px 4px 2px 0; }
2242+.gest-avis { margin-top: 10px; }
2243+.gest-avis summary {
2244+ cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);
2245+}
2246+.gest-citation {
2247+ margin: 10px 0 0; padding: 8px 12px; font-size: 13px; color: var(--ink-2);
2248+ border-left: 3px solid var(--line); background: var(--surface-2, #faf9f5);
2249+ border-radius: var(--r-ctl);
2250+}
2251+.gest-citation footer {
2252+ margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px;
2253+ color: var(--ink-3);
2254+}
2255+
2256+/* --- Vie quotidienne en hiver --- */
2257+.hiver-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
2258+.hiver-score {
2259+ font-family: var(--font-display); font-weight: 700; font-size: 34px;
2260+ line-height: 1; color: var(--ink);
2261+}
2262+.hiver-sur { font-size: 12.5px; color: var(--ink-3); }
2263+.hiver-detail {
2264+ list-style: none; margin: 12px 0 0; padding: 0;
2265+ display: flex; flex-direction: column; gap: 6px;
2266+}
2267+.hiver-detail li {
2268+ display: flex; align-items: baseline; gap: 8px;
2269+ font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line);
2270+}
2271+.hiver-detail li:last-child { border-bottom: none; }
2272+.hd-crit {
2273+ font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
2274+ text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
2275+ min-width: 110px;
2276+}
2277+.hd-val { flex: 1 1 auto; color: var(--ink-2); }
2278+.hd-score {
2279+ font-family: var(--font-mono); font-weight: 700; font-size: 12px;
2280+ min-width: 28px; text-align: right;
2281+}
2116 2282
Menu

Theme
↑↓ navigate ↵ open esc close / or ⌘K anywhere