feat(design): passe « éditorial sharp » sur la fiche — cartes, KPI, tableaux, pastilles
Blocs de la fiche transformés en cartes encre (bordure 1,5 px + ombre décalée douce), titres de section à marqueur accent + filet, tuiles KPI blanches à ombre dure, tableaux zébrés avec survol accent, barres de proximité/crime/air en dégradé, pastilles d'état unifiées (mono, point, liseré), décisions TAL en mini-cartes. Vérifié Playwright desktop 1440 + mobile 390 (overflow 0, check-order OK). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 changed file +111 −0
modified
frontend/src/styles.css
+111 −0
@@ -2002,3 +2002,114 @@ html { scroll-padding-top: 76px; } /* header sticky au-dessus des ancres */ | ||
| 2002 | 2002 | .hydro-montant small { font-size: 14px; font-weight: 500; color: var(--ink-3); } |
| 2003 | 2003 | .hydro-an { font-size: 14px; font-weight: 600; color: var(--ink-2, #4c4a45); } |
| 2004 | 2004 | .hydro-vide { color: var(--ink-3, #8a877f); } |
| 2005 | + | |
| 2006 | + | |
| 2007 | +/* ============================================================================ | |
| 2008 | + PASSE DE DESIGN v3 — « éditorial sharp » appliqué à toute la fiche | |
| 2009 | + Blocs = cartes encre (bordure 1,5 px + ombre décalée douce), titres à | |
| 2010 | + marqueur accent + filet, tuiles KPI blanches à ombre dure, tableaux zébrés, | |
| 2011 | + barres en dégradé, pastilles unifiées (mono, point d'état, liseré). | |
| 2012 | + Aucune propriété `order` (règle Groupe Ka : ordre DOM = ordre visuel). | |
| 2013 | + ========================================================================== */ | |
| 2014 | + | |
| 2015 | +/* --- Blocs de la fiche : cartes posées sur le papier --- */ | |
| 2016 | +.f-bloc:not(.f-galerie):not(.f-hero) { | |
| 2017 | + background: var(--surface); | |
| 2018 | + border: 1.5px solid var(--ink); | |
| 2019 | + border-radius: var(--r-card); | |
| 2020 | + padding: 18px 20px 16px; | |
| 2021 | + box-shadow: var(--shadow-off-soft); | |
| 2022 | +} | |
| 2023 | +@media (max-width: 640px) { | |
| 2024 | + .f-bloc:not(.f-galerie):not(.f-hero) { padding: 15px 15px 13px; } | |
| 2025 | +} | |
| 2026 | + | |
| 2027 | +/* --- Titres de section : carré accent + filet éditorial --- */ | |
| 2028 | +.f-bloc h2, .quartier h2 { | |
| 2029 | + display: flex; align-items: center; gap: 10px; | |
| 2030 | + font-size: 19px; letter-spacing: -0.015em; margin-bottom: 14px; | |
| 2031 | +} | |
| 2032 | +.f-bloc h2::before, .quartier h2::before { | |
| 2033 | + content: ""; flex: 0 0 9px; width: 9px; height: 9px; | |
| 2034 | + background: var(--accent); border: 1.5px solid var(--ink); | |
| 2035 | + box-shadow: 2px 2px 0 var(--ink); | |
| 2036 | +} | |
| 2037 | +.f-bloc h2::after, .quartier h2::after { | |
| 2038 | + content: ""; flex: 1 1 auto; height: 1.5px; min-width: 20px; | |
| 2039 | + background: var(--line); | |
| 2040 | +} | |
| 2041 | + | |
| 2042 | +/* --- Tuiles KPI : blanches, bord encre, ombre dure accent --- */ | |
| 2043 | +.rdl-kpi, .kv .cell { | |
| 2044 | + background: var(--surface); | |
| 2045 | + border: 1.5px solid var(--ink); | |
| 2046 | + border-radius: var(--r-ctl); | |
| 2047 | + box-shadow: 3px 3px 0 var(--accent-soft, #fff1e6); | |
| 2048 | +} | |
| 2049 | +.rdl-kpi-v { font-family: var(--font-display); } | |
| 2050 | +.q-cell { box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.1); border-radius: var(--r-ctl); } | |
| 2051 | +.q-val { font-size: 20px; } | |
| 2052 | + | |
| 2053 | +/* --- Tableaux : en-têtes mono, zébrure, survol accent --- */ | |
| 2054 | +.rdl-table td { padding: 7px 8px 7px 0; } | |
| 2055 | +.rdl-table tbody tr:nth-child(even) td, | |
| 2056 | +.rdl-table > tr:nth-child(even) td { background: var(--surface-2, #faf9f5); } | |
| 2057 | +.rdl-table tr:hover td { background: var(--accent-soft, #fff1e6); } | |
| 2058 | +.gaz-head th { | |
| 2059 | + font-family: var(--font-mono); font-size: 10px; font-weight: 700; | |
| 2060 | + text-transform: uppercase; letter-spacing: 0.08em; | |
| 2061 | + border-bottom: 1.5px solid var(--ink); | |
| 2062 | +} | |
| 2063 | +.rdl-cap { font-family: var(--font-display); } | |
| 2064 | + | |
| 2065 | +/* --- Barres : pistes bordées + remplissage en dégradé --- */ | |
| 2066 | +.q-bar-track, .q-crime-barre, .air-barre { | |
| 2067 | + background: var(--surface-2, #faf9f5); | |
| 2068 | + border: 1px solid var(--line); | |
| 2069 | + height: 12px; | |
| 2070 | +} | |
| 2071 | +.q-bar-fill { | |
| 2072 | + background: linear-gradient(90deg, var(--accent, #ff6a00), var(--accent-deep, #cc5500)); | |
| 2073 | +} | |
| 2074 | +.q-crime-barre i { | |
| 2075 | + background: linear-gradient(90deg, #ff9a52, var(--accent, #ff6a00)); | |
| 2076 | + opacity: 0.9; | |
| 2077 | +} | |
| 2078 | +.air-barre i { background: linear-gradient(90deg, #6fbc85, #2e7d4a); } | |
| 2079 | +.air-barre i.air-sur { background: linear-gradient(90deg, #e08a48, #c96a1f); } | |
| 2080 | + | |
| 2081 | +/* --- Pastilles d'état unifiées (zi-badge & cie) : mono + point d'état --- */ | |
| 2082 | +.zi-badge { | |
| 2083 | + display: inline-flex; align-items: center; gap: 6px; | |
| 2084 | + font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; | |
| 2085 | + text-transform: uppercase; letter-spacing: 0.06em; | |
| 2086 | + padding: 4px 10px; border: 1.5px solid currentColor; | |
| 2087 | +} | |
| 2088 | +.zi-badge::before { | |
| 2089 | + content: ""; width: 6px; height: 6px; border-radius: 50%; | |
| 2090 | + background: currentColor; | |
| 2091 | +} | |
| 2092 | +.gaz-best { border: 1px solid currentColor; } | |
| 2093 | + | |
| 2094 | +/* --- Historique TAL : chaque décision devient une mini-carte --- */ | |
| 2095 | +.tal-liste { display: flex; flex-direction: column; gap: 8px; } | |
| 2096 | +.tal-liste li { | |
| 2097 | + border: 1px solid var(--line); border-left: 3px solid var(--accent, #ff6a00); | |
| 2098 | + border-top: 1px solid var(--line); | |
| 2099 | + border-radius: var(--r-ctl); padding: 9px 12px; | |
| 2100 | + background: var(--surface-2, #faf9f5); | |
| 2101 | +} | |
| 2102 | +.tal-part, .tal-tag { | |
| 2103 | + font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; | |
| 2104 | + text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; | |
| 2105 | +} | |
| 2106 | +.tal-ref { font-family: var(--font-mono); font-size: 11px; } | |
| 2107 | + | |
| 2108 | +/* --- Notes de bas de bloc : filet pointillé --- */ | |
| 2109 | +.f-bloc .fine, .quartier .fine { | |
| 2110 | + margin-top: 12px; padding-top: 9px; | |
| 2111 | + border-top: 1px dashed var(--line); | |
| 2112 | +} | |
| 2113 | + | |
| 2114 | +/* --- Listes à liseré (inondation) alignées sur le reste --- */ | |
| 2115 | +.zi-liste li { padding: 6px 0; } | |
| 2005 | 2116 | |