diff --git a/static/stocks.html b/static/stocks.html
index 6499367..0c1e26b 100644
--- a/static/stocks.html
+++ b/static/stocks.html
@@ -1,137 +1,123 @@
 <!DOCTYPE html>
 <html lang="fr">
-    <head>
-        <meta charset="UTF-8">
-        <title>Stock alcool</title>
-        <script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script>
-        <style>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Stock alcool</title>
+  <script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script>
+  <style>
 html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    overflow: hidden;
-    font-family: sans-serif;
-    display: flex;
-    flex-direction: column;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f0f0f0;
+  font-family: sans-serif;
 }
 
-    #gauge-container {
-        flex: 1;
-        position: relative;
-        width: 100%;
-        height: 100%;
+#gauge-container {
+  flex: 1;
+  width: 90vw;
+  max-width: 400px;
+  aspect-ratio: 2 / 1;       
+  position: relative;
+  background: white;
+  border-radius: 8px 8px 0 0; 
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+#gauge-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+#value {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 1.5rem;
+  background: rgba(255,255,255,0.8);
+  padding: 0.3rem 0.8rem;
+  border-radius: 0.5rem;
+  pointer-events: none;
+}
+  </style>
+</head>
+<body>
+  <div id="gauge-container">
+    <canvas id="gauge-canvas"></canvas>
+    <div id="value">Chargement…</div>
+  </div>
+
+  <script>
+  const DATA_URL = 'https://cloud.richoux.me/seafhttp/f/2582b44ba453453f8793/?op=view';
+  const opts = {
+    angle: 0.15,
+    lineWidth: 0.44,
+    radiusScale: 1,
+    pointer: { length: 0.6, strokeWidth: 0.035, color: '#000' },
+    limitMax: false,
+    limitMin: false,
+    colorStart: '#4caf50',
+    colorStop: '#4caf50',
+    strokeColor: '#EEEEEE',
+    generateGradient: false,
+    highDpiSupport: true
+  };
+
+  const container = document.getElementById('gauge-container');
+  const canvas = document.getElementById('gauge-canvas');
+  let gauge;
+
+  function initGauge() {
+    const { width, height } = container.getBoundingClientRect();
+    canvas.width = width * window.devicePixelRatio;
+    canvas.height = height * window.devicePixelRatio;
+    canvas.style.width = width + 'px';
+    canvas.style.height = height + 'px';
+    if (!gauge) {
+      gauge = new Gauge(canvas).setOptions(opts);
+      gauge.maxValue = 100;
+      gauge.setMinValue(0);
+      gauge.animationSpeed = 32;
     }
+  }
 
-    #gauge-canvas {
-        width: 100%;
-        height: 100%;
-        display: block;
+  function updateGaugeColor(v) {
+    const color = v < 20 ? '#f44336' : v <= 80 ? '#ff9800' : '#4caf50';
+    opts.colorStart = color;
+    opts.colorStop = color;
+    gauge.setOptions(opts);
+  }
+
+  async function fetchAndUpdate() {
+    try {
+      const res = await fetch(DATA_URL, {cache:'no-store'});
+      if (!res.ok) throw new Error(res.status);
+      const pct = Math.min(100, Math.max(0, parseFloat(await res.text())));
+      updateGaugeColor(pct);
+      gauge.set(pct);
+      document.getElementById('value').textContent = pct.toFixed(1) + ' %';
+    } catch (e) {
+      document.getElementById('value').textContent = 'Erreur de chargement';
+      console.error(e);
     }
+  }
 
-    #value {
-        position: absolute;
-        bottom: 1rem;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 2rem;
-        background: rgba(255,255,255,0.7);
-        padding: 0.5rem 1rem;
-        border-radius: 0.5rem;
-    }
-        </style>
-    </head>
-    <body>
+  function refresh() {
+    initGauge();
+    fetchAndUpdate();
+  }
 
-        <div id="gauge-container">
-            <canvas id="gauge-canvas"></canvas>
-            <div id="value">Chargement…</div>
-        </div>
-
-        <script>
-
-            const DATA_URL = 'https://cloud.richoux.me/seafhttp/f/2582b44ba453453f8793/?op=view'
-
-            const opts = {
-                angle: 0.15,          
-                lineWidth: 0.44,      
-                radiusScale: 1,
-                pointer: {
-                    length: 0.6,
-                    strokeWidth: 0.035,
-                    color: '#000'
-                },
-                limitMax: false,
-                limitMin: false,
-                colorStart: '#4caf50',
-                colorStop: '#4caf50',
-                strokeColor: '#EEEEEE',
-                generateGradient: false,
-                highDpiSupport: true
-            };
-
-            const container = document.getElementById('gauge-container');
-            const canvas = document.getElementById('gauge-canvas');
-
-            let gauge;
-            function initGauge() {
-                const { width, height } = container.getBoundingClientRect();
-                canvas.width  = width  * window.devicePixelRatio;
-                canvas.height = height * window.devicePixelRatio;
-                canvas.style.width  = width  + 'px';
-                canvas.style.height = height + 'px';
-
-                gauge = new Gauge(canvas).setOptions(opts);
-                gauge.maxValue = 100;
-                gauge.setMinValue(0);
-                gauge.animationSpeed = 32;
-            }
-            function updateGaugeColor(value) {
-                const color = getColorForValue(value);
-                opts.colorStart = color;
-                opts.colorStop = color;
-                gauge.setOptions(opts);
-            }
-
-            function getColorForValue(value) {
-                if (value < 20) {
-                    return '#f44336'; // Rouge
-                } else if (value <= 80) {
-                    return '#ff9800'; // Orange/Jaune
-                } else {
-                    return '#4caf50'; // Vert
-                }
-            }
-
-            async function updateGauge() {
-                try {
-                    const res = await fetch(DATA_URL, { cache: 'no-store' });
-                    if (!res.ok) throw new Error(res.status);
-                    const text = await res.text();
-                    const pct = Math.min(100, Math.max(0, parseFloat(text)));
-                    updateGaugeColor(pct);
-                    gauge.set(pct);
-                    document.getElementById('value').textContent = pct.toFixed(1) + ' %';
-                } catch (e) {
-                    document.getElementById('value').textContent = 'Erreur de chargement';
-                    console.error(e);
-                }
-            }
-
-            window.addEventListener('load', () => {
-                initGauge();
-                updateGauge();
-                setInterval(updateGauge, 30_000);
-            });
-
-            window.addEventListener('resize', () => {
-                const last = gauge ? gauge.value : 0;
-                initGauge();
-                if (gauge && last !== undefined) {
-                    updateGaugeColor(last);
-                    gauge.set(last);
-                }
-            });
-        </script>
-
-    </body>
+  window.addEventListener('load', () => { refresh(); setInterval(fetchAndUpdate, 30000); });
+  window.addEventListener('resize', refresh);
+  </script>
+</body>
 </html>
+
