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>
1 changed file +166 −0
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 | 2114 | /* --- Listes à liseré (inondation) alignées sur le reste --- */ |
| 2115 | 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 | |