From bb779faa495dfb38d4e2388341de59e32e50b759 Mon Sep 17 00:00:00 2001
From: EpicKiwi <me@epickiwi.fr>
Date: Sun, 28 Jun 2026 18:17:35 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20du=20nom=20g=C3=A9n=C3=A9rique=20sur=20?=
 =?UTF-8?q?les=20lieux?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css                         | 15 ++++++++++++++-
 js/components/feature-short-header.js | 15 ++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 1d085e4..0474dad 100644
--- a/css/style.css
+++ b/css/style.css
@@ -297,7 +297,7 @@ body > hr {
 camp-feature-short-header {
 	display: grid;
 	grid-template-rows: 1fr min-content;
-	grid-template-columns: 3em 1fr;
+	grid-template-columns: 3em 1fr max-content;
 	gap: 0.5ex 0.5em;
 	vertical-align: center;
 }
@@ -309,13 +309,26 @@ camp-feature-short-header .feature-legend {
 }
 
 camp-feature-short-header h2 {
+	grid-column: 2 / 4;
 	margin: 0;
 	padding: 0;
 	font-size: 1em;
 	font-weight: bold;
 }
 
+camp-feature-short-header .feature-generic-name {
+	grid-column: 2;
+	margin: 0;
+	padding: 0;
+	font-size: 0.6em;
+	opacity: 0.75;
+	white-space: nowrap;
+	overflow-x: hidden;
+	text-overflow: ellipsis;
+}
+
 camp-feature-short-header .feature-location {
+	grid-column: 3;
 	margin: 0;
 	padding: 0;
 	font-size: 0.6em;
diff --git a/js/components/feature-short-header.js b/js/components/feature-short-header.js
index 55339fe..c15ffdc 100644
--- a/js/components/feature-short-header.js
+++ b/js/components/feature-short-header.js
@@ -5,6 +5,7 @@ const TEMPLATE = document.createElement("template")
 TEMPLATE.innerHTML = `
 <camp-feature-legend class="feature-legend"></camp-feature-legend>
 <h2 class="feature-name"></h2>
+<small class="feature-generic-name"></small>
 <camp-coords class="feature-location" lat="0" lon="0"></camp-coords>
 `
 
@@ -37,10 +38,18 @@ export class FeatureShortHeaderElement extends HTMLElement {
 			this.querySelector(".feature-legend").feature = this.feature
 			this.querySelector(".feature-legend").updateContent()
 			
-			this.querySelector(".feature-name").textContent = 
-				this.feature?.properties?.name || 
+			let name = this.feature?.properties?.name || 
 				this.feature.mapSymbol.genericName || 
-				this.feature.id
+				this.feature.id;
+			
+			this.querySelector(".feature-name").textContent = name;
+
+			if(name != this.feature.mapSymbol.genericName){
+				this.querySelector(".feature-generic-name").textContent = this.feature.mapSymbol.genericName
+			} else {
+				this.querySelector(".feature-generic-name").replaceChildren()
+			}
+
 
 			let featurePoint = this.feature.asPoint()