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

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>

Simon-Pierre Boucher committed 2 mo ago (Aug 24, 2026) parent 6a6acdf Browse files

1 changed file +111 −0

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

+ .hydro-montant small { font-size: 14px; font-weight: 500; color: var(--ink-3); }
+ .hydro-an { font-size: 14px; font-weight: 600; color: var(--ink-2, #4c4a45); }
+ .hydro-vide { color: var(--ink-3, #8a877f); }
++
++
++/* ============================================================================
++   PASSE DE DESIGN v3 — « éditorial sharp » appliqué à toute la fiche
++   Blocs = cartes encre (bordure 1,5 px + ombre décalée douce), titres à
++   marqueur accent + filet, tuiles KPI blanches à ombre dure, tableaux zébrés,
++   barres en dégradé, pastilles unifiées (mono, point d'état, liseré).
++   Aucune propriété `order` (règle Groupe Ka : ordre DOM = ordre visuel).
++   ========================================================================== */
++
++/* --- Blocs de la fiche : cartes posées sur le papier --- */
++.f-bloc:not(.f-galerie):not(.f-hero) {
++  background: var(--surface);
++  border: 1.5px solid var(--ink);
++  border-radius: var(--r-card);
++  padding: 18px 20px 16px;
++  box-shadow: var(--shadow-off-soft);
++}
++@media (max-width: 640px) {
++  .f-bloc:not(.f-galerie):not(.f-hero) { padding: 15px 15px 13px; }
++}
++
++/* --- Titres de section : carré accent + filet éditorial --- */
++.f-bloc h2, .quartier h2 {
++  display: flex; align-items: center; gap: 10px;
++  font-size: 19px; letter-spacing: -0.015em; margin-bottom: 14px;
++}
++.f-bloc h2::before, .quartier h2::before {
++  content: ""; flex: 0 0 9px; width: 9px; height: 9px;
++  background: var(--accent); border: 1.5px solid var(--ink);
++  box-shadow: 2px 2px 0 var(--ink);
++}
++.f-bloc h2::after, .quartier h2::after {
++  content: ""; flex: 1 1 auto; height: 1.5px; min-width: 20px;
++  background: var(--line);
++}
++
++/* --- Tuiles KPI : blanches, bord encre, ombre dure accent --- */
++.rdl-kpi, .kv .cell {
++  background: var(--surface);
++  border: 1.5px solid var(--ink);
++  border-radius: var(--r-ctl);
++  box-shadow: 3px 3px 0 var(--accent-soft, #fff1e6);
++}
++.rdl-kpi-v { font-family: var(--font-display); }
++.q-cell { box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.1); border-radius: var(--r-ctl); }
++.q-val { font-size: 20px; }
++
++/* --- Tableaux : en-têtes mono, zébrure, survol accent --- */
++.rdl-table td { padding: 7px 8px 7px 0; }
++.rdl-table tbody tr:nth-child(even) td,
++.rdl-table > tr:nth-child(even) td { background: var(--surface-2, #faf9f5); }
++.rdl-table tr:hover td { background: var(--accent-soft, #fff1e6); }
++.gaz-head th {
++  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
++  text-transform: uppercase; letter-spacing: 0.08em;
++  border-bottom: 1.5px solid var(--ink);
++}
++.rdl-cap { font-family: var(--font-display); }
++
++/* --- Barres : pistes bordées + remplissage en dégradé --- */
++.q-bar-track, .q-crime-barre, .air-barre {
++  background: var(--surface-2, #faf9f5);
++  border: 1px solid var(--line);
++  height: 12px;
++}
++.q-bar-fill {
++  background: linear-gradient(90deg, var(--accent, #ff6a00), var(--accent-deep, #cc5500));
++}
++.q-crime-barre i {
++  background: linear-gradient(90deg, #ff9a52, var(--accent, #ff6a00));
++  opacity: 0.9;
++}
++.air-barre i { background: linear-gradient(90deg, #6fbc85, #2e7d4a); }
++.air-barre i.air-sur { background: linear-gradient(90deg, #e08a48, #c96a1f); }
++
++/* --- Pastilles d'état unifiées (zi-badge & cie) : mono + point d'état --- */
++.zi-badge {
++  display: inline-flex; align-items: center; gap: 6px;
++  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
++  text-transform: uppercase; letter-spacing: 0.06em;
++  padding: 4px 10px; border: 1.5px solid currentColor;
++}
++.zi-badge::before {
++  content: ""; width: 6px; height: 6px; border-radius: 50%;
++  background: currentColor;
++}
++.gaz-best { border: 1px solid currentColor; }
++
++/* --- Historique TAL : chaque décision devient une mini-carte --- */
++.tal-liste { display: flex; flex-direction: column; gap: 8px; }
++.tal-liste li {
++  border: 1px solid var(--line); border-left: 3px solid var(--accent, #ff6a00);
++  border-top: 1px solid var(--line);
++  border-radius: var(--r-ctl); padding: 9px 12px;
++  background: var(--surface-2, #faf9f5);
++}
++.tal-part, .tal-tag {
++  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
++  text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px;
++}
++.tal-ref { font-family: var(--font-mono); font-size: 11px; }
++
++/* --- Notes de bas de bloc : filet pointillé --- */
++.f-bloc .fine, .quartier .fine {
++  margin-top: 12px; padding-top: 9px;
++  border-top: 1px dashed var(--line);
++}
++
++/* --- Listes à liseré (inondation) alignées sur le reste --- */
++.zi-liste li { padding: 6px 0; }

spb/lou-ka

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

Theme