feat(design): passe « éditorial sharp » sur la fiche — cartes, KPI, tableaux, pastilles · fc02d70 · immo-ka

feat(design): passe « éditorial sharp » sur la fiche — cartes, KPI, tableaux, pastilles

Transposition de la passe v3 de lou-ka (872a202) aux sélecteurs immo-ka :
blocs en cartes encre à ombre décalée (galerie et héros exclus), titres à
carré accent + filet, tuiles KPI blanches à ombre dure, tableaux zébrés à
en-têtes mono, barres en dégradé accent, pastilles mono à point d'état,
mini-cartes à liseré pour les zones d'inondation, pastilles d'inclusions
alignées. Validé Playwright desktop 1440 + iPhone 14 : zéro débordement,
ordre DOM = ordre visuel (check-order OK), aucun `order`.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Simon-Pierre Boucher committed 1 mo ago (Aug 24, 2026) parent c7fe6f5

1 changed file +112 −0

modified frontend/src/styles.css +112 −0

		`@@ -952,3 +952,115 @@ table.rooms tr:nth-child(even) td { background: var(--surface-2); }`
952	952	.hydro-montant small { font-size: 14px; font-weight: 500; color: var(--ink-3); }
953	953	.hydro-an { font-size: 14px; font-weight: 600; color: var(--ink-2, #4c4a45); }
954	954	.hydro-vide { color: var(--ink-3, #8a877f); }
	955	+
	956	+
	957	+/* ============================================================================
	958	+ PASSE DE DESIGN — « éditorial sharp » appliqué à toute la fiche
	959	+ Blocs = cartes encre (bordure 1,5 px + ombre décalée douce), titres à
	960	+ marqueur accent + filet, tuiles KPI blanches à ombre dure, tableaux zébrés,
	961	+ barres en dégradé, pastilles unifiées (mono, point d'état, liseré).
	962	+ Aucune propriété `order` (règle Groupe Ka : ordre DOM = ordre visuel).
	963	+ ========================================================================== */
	964	+
	965	+/* --- Blocs de la fiche : cartes posées sur le papier --- */
	966	+.f-bloc:not(.f-galerie):not(.f-hero),
	967	+.quartier {
	968	+ background: var(--surface);
	969	+ border: 1.5px solid var(--ink);
	970	+ border-radius: var(--r-card);
	971	+ padding: 18px 20px 16px;
	972	+ box-shadow: var(--shadow-off-soft);
	973	+}
	974	+@media (max-width: 640px) {
	975	+ .f-bloc:not(.f-galerie):not(.f-hero),
	976	+ .quartier { padding: 15px 15px 13px; }
	977	+}
	978	+/* blocs pleine largeur sous la grille : respiration entre les cartes */
	979	+.detail > .f-bloc { margin-top: 22px; }
	980	+
	981	+/* --- Titres de section : carré accent + filet éditorial --- */
	982	+.f-bloc h2, .quartier h2 {
	983	+ display: flex; align-items: center; gap: 10px;
	984	+ font-size: 19px; letter-spacing: -0.015em; margin-bottom: 14px;
	985	+ border-left: 0; padding-left: 0;
	986	+}
	987	+.f-bloc h2::before, .quartier h2::before {
	988	+ content: ""; flex: 0 0 9px; width: 9px; height: 9px;
	989	+ background: var(--accent); border: 1.5px solid var(--ink);
	990	+ box-shadow: 2px 2px 0 var(--ink);
	991	+}
	992	+.f-bloc h2::after, .quartier h2::after {
	993	+ content: ""; flex: 1 1 auto; height: 1.5px; min-width: 20px;
	994	+ background: var(--line);
	995	+}
	996	+
	997	+/* --- Tuiles KPI : blanches, bord encre, ombre dure accent --- */
	998	+.rdl-kpi {
	999	+ background: var(--surface);
	1000	+ border: 1.5px solid var(--ink);
	1001	+ border-radius: var(--r-ctl);
	1002	+ box-shadow: 3px 3px 0 var(--accent-soft);
	1003	+}
	1004	+.rdl-kpi-v { font-family: var(--font-display); }
	1005	+.q-cell { box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.1); border-radius: var(--r-ctl); }
	1006	+.q-val { font-size: 20px; }
	1007	+
	1008	+/* --- Tableaux : en-têtes mono, zébrure, survol accent --- */
	1009	+.rdl-table td { padding: 7px 8px 7px 0; }
	1010	+.rdl-table tbody tr:nth-child(even) td,
	1011	+.rdl-table > tr:nth-child(even) td { background: var(--surface-2); }
	1012	+.rdl-table tr:hover td { background: var(--accent-soft); }
	1013	+.gaz-head th {
	1014	+ font-family: var(--font-mono); font-size: 10px; font-weight: 700;
	1015	+ text-transform: uppercase; letter-spacing: 0.08em;
	1016	+ border-bottom: 1.5px solid var(--ink);
	1017	+}
	1018	+.rdl-cap { font-family: var(--font-display); }
	1019	+table.rooms tbody tr:hover td { background: var(--accent-soft); }
	1020	+
	1021	+/* --- Barres : pistes bordées + remplissage en dégradé --- */
	1022	+.q-bar-track, .q-crime-barre, .air-barre {
	1023	+ background: var(--surface-2);
	1024	+ border: 1px solid var(--line);
	1025	+ height: 12px;
	1026	+}
	1027	+.q-bar-fill {
	1028	+ background: linear-gradient(90deg, var(--accent), var(--accent-deep));
	1029	+}
	1030	+.q-crime-barre i {
	1031	+ background: linear-gradient(90deg, #f0808a, var(--accent));
	1032	+ opacity: 0.9;
	1033	+}
	1034	+.air-barre i { background: linear-gradient(90deg, #6fbc85, #2e7d4a); }
	1035	+.air-barre i.air-sur { background: linear-gradient(90deg, #e08a48, #c96a1f); }
	1036	+
	1037	+/* --- Pastilles d'état unifiées (zi-badge & cie) : mono + point d'état --- */
	1038	+.zi-badge {
	1039	+ display: inline-flex; align-items: center; gap: 6px;
	1040	+ font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
	1041	+ text-transform: uppercase; letter-spacing: 0.06em;
	1042	+ padding: 4px 10px; border: 1.5px solid currentColor;
	1043	+}
	1044	+.zi-badge::before {
	1045	+ content: ""; width: 6px; height: 6px; border-radius: 50%;
	1046	+ background: currentColor;
	1047	+}
	1048	+.gaz-best { border: 1px solid currentColor; }
	1049	+
	1050	+/* --- Listes riches (zones d'inondation) : mini-cartes à liseré accent --- */
	1051	+.zi-liste { display: flex; flex-direction: column; gap: 8px; }
	1052	+.zi-liste li {
	1053	+ border: 1px solid var(--line); border-left: 3px solid var(--accent);
	1054	+ border-top: 1px solid var(--line);
	1055	+ border-radius: var(--r-ctl); padding: 9px 12px;
	1056	+ background: var(--surface-2);
	1057	+}
	1058	+
	1059	+/* --- Inclusions : icône et libellé alignés sur une seule ligne --- */
	1060	+.amenity { display: inline-flex; align-items: center; gap: 6px; }
	1061	+
	1062	+/* --- Notes de bas de bloc : filet pointillé --- */
	1063	+.f-bloc .fine, .quartier .fine {
	1064	+ margin-top: 12px; padding-top: 9px;
	1065	+ border-top: 1px dashed var(--line);
	1066	+}
955	1067