From b5aca80bbc1bb412c22faa6122be405718910ec5 Mon Sep 17 00:00:00 2001
From: Jules <transformationsresilientes@gmail.com>
Date: Thu, 24 Sep 2026 12:00:49 +0200
Subject: [PATCH] =?UTF-8?q?fix(carte):=20fond=20de=20carte=20avec=20cl?=
 =?UTF-8?q?=C3=A9=20CARTO,=20repli=20Plan=20IGN=20sans=20cl=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CARTO Basemaps exige une clé depuis le 23/09/2026 : sans elle, chaque tuile
porte le filigrane « API KEY REQUIRED ». Clé lue au runtime
(NUXT_PUBLIC_CARTO_KEY) ; sans clé, repli sur le Plan IGN (Géoplateforme).
FicheDetail quitte aussi les tuiles OSM (418, politique d'usage).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 components/FicheDetail.vue  |  3 ++-
 components/NavMap.vue       | 11 ++++-------
 components/NavMapV2.vue     | 11 ++++-------
 components/OutremerMap.vue  |  7 +++----
 composables/useBaseTiles.ts | 22 ++++++++++++++++++++++
 nuxt.config.ts              |  3 +++
 6 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 composables/useBaseTiles.ts

diff --git a/components/FicheDetail.vue b/components/FicheDetail.vue
index 5e8e7dd..6628b2e 100644
--- a/components/FicheDetail.vue
+++ b/components/FicheDetail.vue
@@ -183,6 +183,7 @@
 </template>
 
 <script setup lang="ts">
+const baseTiles = useBaseTiles()
 import type { Org } from '~/types/org'
 
 const props = defineProps<{ org: Org }>()
@@ -283,7 +284,7 @@ onMounted(async () => {
     attributionControl: false,
   })
 
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  L.tileLayer(baseTiles.url(document.documentElement.classList.contains('dark')), {
     maxZoom: 18,
   }).addTo(map)
 
diff --git a/components/NavMap.vue b/components/NavMap.vue
index 6a2ad8c..6820f8a 100644
--- a/components/NavMap.vue
+++ b/components/NavMap.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+const baseTiles = useBaseTiles()
 import type { Map, Marker, DivIcon } from 'leaflet'
 
 interface Org {
@@ -90,12 +91,10 @@ async function initMap() {
 
   // Fond de carte CartoDB Positron (light ou dark selon theme)
   const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
-  const tileUrl = isDark
-    ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
-    : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+  const tileUrl = baseTiles.url(isDark)
 
   tileLayerInstance = L.tileLayer(tileUrl, {
-    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
+    attribution: baseTiles.attribution,
     maxZoom: 19,
   })
   tileLayerInstance.addTo(mapInstance!)
@@ -212,9 +211,7 @@ function updateTileTheme(dark: boolean) {
   if (!mapInstance || !tileLayerInstance) return
   const L = (window as any).L
   if (!L) return
-  const url = dark
-    ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
-    : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+  const url = baseTiles.url(dark)
   tileLayerInstance.setUrl(url)
 }
 
diff --git a/components/NavMapV2.vue b/components/NavMapV2.vue
index e0e3b43..bc94ab5 100644
--- a/components/NavMapV2.vue
+++ b/components/NavMapV2.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+const baseTiles = useBaseTiles()
 import type { Map, Marker, DivIcon } from 'leaflet'
 import type { StructureV2 } from '~/types/structure-v2'
 
@@ -87,12 +88,10 @@ async function initMap() {
   })
 
   const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
-  const tileUrl = isDark
-    ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
-    : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+  const tileUrl = baseTiles.url(isDark)
 
   tileLayerInstance = L.tileLayer(tileUrl, {
-    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
+    attribution: baseTiles.attribution,
     maxZoom: 19,
   })
   tileLayerInstance.addTo(mapInstance!)
@@ -213,9 +212,7 @@ function updateTileTheme(dark: boolean) {
   if (!mapInstance || !tileLayerInstance) return
   const L = (window as any).L
   if (!L) return
-  const url = dark
-    ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
-    : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+  const url = baseTiles.url(dark)
   tileLayerInstance.setUrl(url)
 }
 
diff --git a/components/OutremerMap.vue b/components/OutremerMap.vue
index 4e99394..8e645ba 100644
--- a/components/OutremerMap.vue
+++ b/components/OutremerMap.vue
@@ -38,6 +38,7 @@
 </template>
 
 <script setup lang="ts">
+const baseTiles = useBaseTiles()
 import type { Map as LeafletMap, TileLayer } from 'leaflet'
 
 interface Org {
@@ -111,9 +112,7 @@ function createPinIcon(L: any, isPrioritaire: boolean, isSelected = false) {
 }
 
 function getTileUrl(dark: boolean) {
-  return dark
-    ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
-    : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+  return baseTiles.url(dark)
 }
 
 async function initSingleMap(domName: string) {
@@ -132,7 +131,7 @@ async function initSingleMap(domName: string) {
     touchZoom: true, keyboard: false,
   })
   const tileLayer = L.tileLayer(getTileUrl(isDark), {
-    attribution: '© OpenStreetMap contributors © CARTO', maxZoom: 19,
+    attribution: baseTiles.attribution, maxZoom: 19,
   })
   tileLayer.addTo(map)
   tileLayers[domName] = tileLayer as unknown as TileLayer
diff --git a/composables/useBaseTiles.ts b/composables/useBaseTiles.ts
new file mode 100644
index 0000000..0672b04
--- /dev/null
+++ b/composables/useBaseTiles.ts
@@ -0,0 +1,22 @@
+// Fond de carte commun aux cartes Leaflet.
+// CARTO exige une clé depuis le 23/09/2026 (sans clé : filigrane « API KEY REQUIRED »).
+// Clé fournie au runtime par NUXT_PUBLIC_CARTO_KEY ; sans clé, repli sur le Plan IGN (Géoplateforme, sans clé).
+const IGN_URL = 'https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0'
+  + '&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&STYLE=normal&TILEMATRIXSET=PM_0_19&FORMAT=image/png'
+  + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
+
+export function useBaseTiles() {
+  const key = useRuntimeConfig().public.cartoKey as string
+
+  function url(dark: boolean) {
+    if (!key) return IGN_URL
+    const style = dark ? 'dark_all' : 'light_all'
+    return `https://{s}.basemaps.cartocdn.com/${style}/{z}/{x}/{y}{r}.png?key=${encodeURIComponent(key)}`
+  }
+
+  const attribution = key
+    ? '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
+    : '© <a href="https://www.ign.fr/">IGN</a> – Géoplateforme'
+
+  return { url, attribution }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2a4615b..e20b5d6 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -27,6 +27,9 @@ export default defineNuxtConfig({
     codevAdminPassword: 'admin2026', // NUXT_CODEV_ADMIN_PASSWORD
     ragPeUrl: process.env.RAG_PE_URL || 'http://localhost:9621',
     referencesTableId: process.env.REFERENCES_TABLE_ID || process.env.NUXT_REFERENCES_TABLE_ID || '',
+    public: {
+      cartoKey: '', // NUXT_PUBLIC_CARTO_KEY — clé CARTO Basemaps (gratuite), lue au runtime
+    },
   },
 
   // Leaflet ne fonctionne pas en SSR — forcer le rendu côté client