diff --git a/backend/templates/dashboard.html b/backend/templates/dashboard.html
index 316b8f2..682a1db 100644
--- a/backend/templates/dashboard.html
+++ b/backend/templates/dashboard.html
@@ -66,9 +66,9 @@
   .ko { display: inline-block; padding: 0 8px; background: var(--ink); color: var(--paper); }
 
   /* ============================ JAUGE (signature) ============================
-     Échelle graduée : noir plein = budget RESTANT (le poids visuel colle au "% restant").
-     Repère ▼ = seuil d'alerte 20 %, toujours lisible (au-dessus de la piste).
-     Sous le seuil : zone consommée en hachures + état alarme. */
+     Barre de progression intuitive : le noir se REMPLIT de gauche à droite avec la
+     consommation ; le blanc à droite = budget restant. Repère ▼ = ligne d'alerte
+     (80 % consommé = 20 % restant). Sous le seuil : consommé en hachures + état alarme. */
   .g { margin-bottom: 34px; }
   .g:last-child { margin-bottom: 0; }
   .g .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
@@ -77,7 +77,7 @@
   .g .pct .u { font-size: 24px; font-weight: 700; letter-spacing: .5px; }
 
   .meter { position: relative; padding-top: 26px; }      /* place pour le repère de seuil */
-  .meter .mark { position: absolute; top: 0; left: 20%; transform: translateX(-50%);
+  .meter .mark { position: absolute; top: 0; left: 80%; transform: translateX(-50%);
                  width: 0; height: 0; border-left: 11px solid transparent;
                  border-right: 11px solid transparent; border-top: 14px solid var(--ink); }
   .track { position: relative; height: 58px; border: 4px solid var(--ink); background: var(--paper);
@@ -85,7 +85,7 @@
   .track .fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink); }
   .track .tick { position: absolute; top: 0; width: 3px; height: 16px; background: var(--ink); }
   .track .t25 { left: 25%; } .track .t50 { left: 50%; } .track .t75 { left: 75%; }
-  .g.low .track { background: repeating-linear-gradient(-45deg, #000 0 4px, #fff 4px 11px); }
+  .g.low .fill { background: repeating-linear-gradient(-45deg, #000 0 4px, #fff 4px 11px); }
   .g.low .mark  { border-top-width: 18px; border-left-width: 13px; border-right-width: 13px; }
 
   .g .sub { font-size: 28px; margin-top: 12px; }
@@ -155,7 +155,7 @@
     <span class="mark"></span>
     <div class="track">
       <span class="tick t25"></span><span class="tick t50"></span><span class="tick t75"></span>
-      <div class="fill" style="width: {{ g.remaining | round(1) }}%;"></div>
+      <div class="fill" style="width: {{ (100 - g.remaining) | round(1) }}%;"></div>
     </div>
   </div>
   <div class="sub num">reset {{ g.resets_in }} · {{ (100 - g.remaining) | round | int }}% conso{% if g.extra %} · {{ g.extra }}{% endif %}</div>