ux: refonte jauge — label dominant, score /100 en détail discret

- "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>

frontend/src/components/SpotPanel/SpotPanel.css

@@ -76,38 +76,27 @@
 .gauge--medium { background: #fef9c3; }
 .gauge--high   { background: #fee2e2; }
 
-.spot-panel__gauge-top {
+.spot-panel__gauge-header {
-  display: flex;
+  margin: 0 0 6px;
-  align-items: baseline;
+  font-size: 10px;
-  justify-content: space-between;
+  font-weight: 700;
-  margin-bottom: 10px;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: rgba(0,0,0,0.35);
 }
 
 .spot-panel__gauge-label {
-  font-size: 11px;
+  display: block;
-  font-weight: 700;
+  font-family: 'Fredoka One', cursive;
-  text-transform: uppercase;
+  font-size: 30px;
-  letter-spacing: .07em;
+  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;

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">
+                  <p className="spot-panel__gauge-header">Indice de risque</p>
-                    <span className="spot-panel__gauge-label">{scoreLabel(displayScore.value, lvl)}</span>
+                  <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>
                   <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 && (() => {