feat(etapes): styles du graphique étapes/seuils

2026-06-04 21:48:28 +02:00
parent 4c60fed0c2
commit b8db0cddf8
1 changed files with 197 additions and 0 deletions
@@ -546,3 +546,200 @@ input[type="number"]::-webkit-inner-spin-button {
 input[type="number"] {
  -moz-appearance: textfield;
 }
+
+/* ===== Page /etapes : graphique données par étape et par seuil ===== */
+
+.etapes-chart-scroll {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.etapes-chart {
+  min-width: 720px;
+  background: #fff;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 13px;
+  display: grid;
+  grid-template-columns: 150px repeat(5, 1fr);
+}
+
+.etapes-corner {
+  border-bottom: 2px solid #344054;
+}
+
+.etapes-xhead {
+  grid-column: 2 / -1;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  border-bottom: 2px solid #344054;
+}
+
+.etapes-xcell {
+  text-align: center;
+  padding: 6px 2px;
+  font-size: 11px;
+  color: #475467;
+  border-left: 1px dashed #d0d5dd;
+}
+
+.etapes-xcell strong {
+  display: block;
+  color: #101828;
+  font-size: 12px;
+}
+
+.etapes-stage {
+  padding: 14px 10px;
+  font-weight: 600;
+  color: #101828;
+  border-bottom: 1px solid #eaecf0;
+  display: flex;
+  align-items: center;
+}
+
+.etapes-stage small {
+  font-weight: 400;
+  color: #667085;
+}
+
+.etapes-lane {
+  grid-column: 2 / -1;
+  position: relative;
+  border-bottom: 1px solid #eaecf0;
+  min-height: 52px;
+}
+
+.etapes-segs {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.etapes-segs > div {
+  border-left: 1px dashed #eaecf0;
+}
+
+.etapes-bar {
+  position: absolute;
+  top: 9px;
+  height: 32px;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.etapes-empty {
+  color: #98a2b3;
+  font-style: italic;
+  padding: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.etapes-legend {
+  margin-top: 14px;
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+
+.etapes-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.etapes-legend i {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  display: inline-block;
+}
+
+.etapes-note {
+  margin-top: 8px;
+  color: #667085;
+  font-size: 13px;
+}
+
+/* --- Vue mobile (liste par étape) : masquée par défaut --- */
+
+.etapes-mobile {
+  display: none;
+  margin: 1rem 0;
+}
+
+.etapes-m-block {
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.etapes-m-stage {
+  margin: 0;
+  padding: 10px 12px;
+  background: #f9fafb;
+  border-bottom: 1px solid #eaecf0;
+  font-size: 15px;
+  color: #101828;
+}
+
+.etapes-m-item {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #f2f4f7;
+  font-size: 13px;
+}
+
+.etapes-m-item:last-child {
+  border-bottom: none;
+}
+
+.etapes-m-item i {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  flex: 0 0 auto;
+  position: relative;
+  top: 2px;
+}
+
+.etapes-m-label {
+  font-weight: 600;
+  color: #101828;
+}
+
+.etapes-m-seuil {
+  color: #667085;
+}
+
+.etapes-m-empty {
+  color: #98a2b3;
+  font-style: italic;
+}
+
+/* --- Bascule desktop / mobile au point de rupture 768 px --- */
+
+@media (max-width: 768px) {
+  .etapes-chart-scroll,
+  .etapes-legend {
+    display: none;
+  }
+  .etapes-mobile {
+    display: block;
+  }
+}