From 0d47a7ee8923b918a276cd2b18bff5a811cf531e Mon Sep 17 00:00:00 2001
From: Gwadaking <gwawaking.dev@gmail.com>
Date: Wed, 8 Apr 2026 02:03:33 -0400
Subject: [PATCH] =?UTF-8?q?ux:=20refonte=20jauge=20=E2=80=94=20label=20dom?=
 =?UTF-8?q?inant,=20score=20/100=20en=20d=C3=A9tail=20discret?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "Indice de risque" en petit header explicite au-dessus
- Le label (VEILLE / RISQUE / IMPACT) devient l'élément visuel principal (30px)
- Le nombre /100 rétrogradé en hint discret sous la barre
- Suppression de l'ambiguïté "est-ce une note ou un risque ?"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/SpotPanel/SpotPanel.css    | 44 +++++++++----------
 .../src/components/SpotPanel/SpotPanel.jsx    | 10 ++---
 2 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/SpotPanel/SpotPanel.css b/frontend/src/components/SpotPanel/SpotPanel.css
index d8db858..22d0103 100644
--- a/frontend/src/components/SpotPanel/SpotPanel.css
+++ b/frontend/src/components/SpotPanel/SpotPanel.css
@@ -76,38 +76,27 @@
 .gauge--medium { background: #fef9c3; }
 .gauge--high   { background: #fee2e2; }
 
-.spot-panel__gauge-top {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  margin-bottom: 10px;
+.spot-panel__gauge-header {
+  margin: 0 0 6px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: rgba(0,0,0,0.35);
 }
 
 .spot-panel__gauge-label {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: .07em;
+  display: block;
+  font-family: 'Fredoka One', cursive;
+  font-size: 30px;
+  font-weight: 400;
+  line-height: 1.1;
+  margin-bottom: 10px;
 }
 .gauge--low .spot-panel__gauge-label    { color: #16a34a; }
 .gauge--medium .spot-panel__gauge-label { color: #d97706; }
 .gauge--high .spot-panel__gauge-label   { color: #dc2626; }
 
-.spot-panel__gauge-score {
-  font-family: 'Fredoka One', cursive;
-  font-size: 32px;
-  font-weight: 400;
-  color: #1a1a2e;
-  line-height: 1;
-}
-.spot-panel__gauge-max {
-  font-size: 13px;
-  font-weight: 400;
-  color: #999;
-  margin-left: 2px;
-  font-family: 'Fredoka', sans-serif;
-}
-
 .spot-panel__gauge-track {
   height: 6px;
   background: rgba(0, 0, 0, 0.1);
@@ -124,6 +113,13 @@
 .gauge--medium .spot-panel__gauge-fill { background: #eab308; }
 .gauge--high .spot-panel__gauge-fill   { background: #ef4444; }
 
+.spot-panel__gauge-hint {
+  margin: 5px 0 0;
+  font-size: 11px;
+  color: rgba(0,0,0,0.3);
+  text-align: right;
+}
+
 /* ETA */
 .spot-panel__eta {
   display: flex;
diff --git a/frontend/src/components/SpotPanel/SpotPanel.jsx b/frontend/src/components/SpotPanel/SpotPanel.jsx
index edc1b91..fb77a66 100644
--- a/frontend/src/components/SpotPanel/SpotPanel.jsx
+++ b/frontend/src/components/SpotPanel/SpotPanel.jsx
@@ -110,19 +110,15 @@ export default function SpotPanel({ spot, activeStep, onClose }) {
                 })()}
 
                 <div className={`spot-panel__gauge gauge--${lvl}`}>
-                  <div className="spot-panel__gauge-top">
-                    <span className="spot-panel__gauge-label">{scoreLabel(displayScore.value, lvl)}</span>
-                    <span className="spot-panel__gauge-score">
-                      {displayScore.value}
-                      <span className="spot-panel__gauge-max">/100</span>
-                    </span>
-                  </div>
+                  <p className="spot-panel__gauge-header">Indice de risque</p>
+                  <span className="spot-panel__gauge-label">{scoreLabel(displayScore.value, lvl)}</span>
                   <div className="spot-panel__gauge-track">
                     <div
                       className="spot-panel__gauge-fill"
                       style={{ width: `${displayScore.value}%` }}
                     />
                   </div>
+                  <p className="spot-panel__gauge-hint">{displayScore.value} / 100</p>
                 </div>
 
                 {activeStep === 'now' && displayScore.trend && (() => {