news: minimize alerts

public/app.js

@@ -67,7 +67,6 @@ const notifOverlay  = document.getElementById('notif-overlay');
 const notifMessage  = document.getElementById('notif-message');
 const notifBarInner = document.getElementById('notif-bar-inner');
 const softAlarmAudio = new Audio('/soft_alarm.mp3');
-const newsAudio = new Audio('/news.mp3');
 let notifTimer = null;
 
 function showNotif(message, audio = softAlarmAudio, duration = 10_000) {
@@ -97,6 +96,28 @@ function showNotif(message, audio = softAlarmAudio, duration = 10_000) {
   }, duration);
 }
 
+// ── Geo news bottom banner ────────────────────────────────────────────────────
+
+const geoBanner     = document.getElementById('geo-banner');
+const geoBannerLink = document.getElementById('geo-banner-link');
+let geoBannerTimer  = null;
+
+function showGeoBanner(title, link, duration = 15_000) {
+  geoBannerLink.textContent = title;
+  geoBannerLink.href = link || '#';
+
+  geoBanner.style.animation = 'none';
+  void geoBanner.offsetWidth;
+  geoBanner.style.animation = '';
+  geoBanner.classList.remove('hidden');
+
+  if (geoBannerTimer) clearTimeout(geoBannerTimer);
+  geoBannerTimer = setTimeout(() => {
+    geoBanner.classList.add('hidden');
+    geoBannerTimer = null;
+  }, duration);
+}
+
 // ── Alarm sound ───────────────────────────────────────────────────────────────
 
 const alarmAudio = new Audio('/alert.mp3');
@@ -261,7 +282,7 @@ async function loadGeo() {
     } else {
       const newGeoItems = items.filter(i => !seenGeoLinks.has(i.link));
       if (newGeoItems.length) {
-        showNotif(`Nouvelle actualité géopolitique : ${newGeoItems[0].title}`, newsAudio);
+        showGeoBanner(newGeoItems[0].title, newGeoItems[0].link);
         seenGeoLinks = currentLinks;
       }
     }

public/index.html

@@ -135,6 +135,12 @@
 
   </main>
 
+  <!-- Geo news bottom banner -->
+  <div id="geo-banner" class="hidden">
+    <span id="geo-banner-label">&#9654; GÉOPOLITIQUE</span>
+    <a id="geo-banner-link" href="#" target="_blank" rel="noopener noreferrer"></a>
+  </div>
+
   <script src="app.js"></script>
 </body>
 </html>

public/style.css

@@ -480,5 +480,49 @@ main.grid {
   line-height: 1.6;
 }
 
+/* ── Geo news bottom banner ──────────────────────────────────────────────── */
+#geo-banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9997;
+  background: rgba(0, 60, 15, 0.95);
+  border-top: 1px solid var(--green-dim);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 16px;
+  font-size: 13px;
+  letter-spacing: 1px;
+  animation: slide-up 0.3s ease-out;
+}
+
+#geo-banner.hidden { display: none !important; }
+
+@keyframes slide-up {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+#geo-banner-label {
+  color: var(--green);
+  font-weight: bold;
+  font-size: 11px;
+  letter-spacing: 2px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+#geo-banner-link {
+  color: var(--text);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#geo-banner-link:hover { text-decoration: underline; }
+
 /* ── Utility ──────────────────────────────────────────────────────────────── */
 .hidden { display: none !important; }