Migrate grateWizard from React/Next.js to native Nuxt integration

- Port all React components to Vue 3 (GwTabs, GwMN, GwCRA, GwCRS,
  GwMap, GwRelations, GwPerimeterList)
- Port hooks to Vue composables (useCesiumProfiles, useSavedPerimeters)
- Copy pure TS services and utils (duniter/, ss58, gratewizard utils)
- Add Leaflet + Geoman + MarkerCluster dependencies
- Serve grateWizard as popup via /gratewizard?popup (layout: false)
  and info page on /gratewizard (with Librodrome layout)
- Remove public/gratewizard-app/ static Next.js export
- Refine UI: compact tabs, buttons, inputs, cards, perimeter list
- Use Ğ1 breve everywhere, French locale for all dates and amounts
- Rename roles: vendeur→offre / acheteur→reçoit le produit ou service
- Rename prix→évaluation in all visible text
- Add calculated result column in CRA and CRS relation tables
- DU/Ğ1 selector uses toggle switch (same as role toggle)
- Auto-scroll to monetary data card on polygon selection

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/app.config.ts

@@ -20,7 +20,7 @@ export default defineAppConfig({
     ],
   },
   gratewizard: {
-    url: '/gratewizard-app/',
+    url: '/gratewizard?popup',
     popup: {
       width: 420,
       height: 720,

app/components/admin/AdminSidebar.vue

@@ -37,7 +37,7 @@
       </NuxtLink>
       <NuxtLink to="/admin/pages/gratewizard" class="sidebar-link" active-class="sidebar-link--active">
         <div class="i-lucide-sparkles h-4 w-4" />
-        GrateWizard
+        grateWizard
       </NuxtLink>
 
       <p class="sidebar-section">Livre</p>

app/components/gratewizard/GwCRA.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="flex flex-col gap-5 pt-4">
+    <div class="card-surface">
+      <div class="flex flex-col items-center gap-3">
+        <p class="gw-metric">Coefficient relatif &agrave; l'anciennet&eacute;</p>
+
+        <!-- My seniority -->
+        <div class="flex flex-col items-center gap-1 w-full max-w-80">
+          <label class="gw-text text-sm">Mon anciennet&eacute;</label>
+          <input
+            v-model="myDate"
+            type="date"
+            :min="Block0Date"
+            :max="todayDate"
+            class="gw-input w-full"
+          />
+          <p :class="['gw-text text-center text-sm', { invisible: !myDate }]">
+            {{ getDays(myDate) || 0 }} DUs cr&eacute;&eacute;s
+          </p>
+        </div>
+
+        <!-- Role -->
+        <div class="flex items-center justify-center gap-2 mt-2">
+          <span class="gw-text text-xs text-right">offre<br />le produit ou service</span>
+          <label class="gw-toggle shrink-0">
+            <input v-model="isSeller" type="checkbox" />
+            <span class="gw-toggle-slider" />
+          </label>
+          <span class="gw-text text-xs">re&ccedil;oit<br />le produit ou service</span>
+        </div>
+
+        <!-- Other party name + add button -->
+        <div class="flex items-center gap-4 w-full max-w-80">
+          <div class="flex-1">
+            <label class="gw-text text-sm">Nom {{ !isSeller ? 'du receveur' : "de l'offreur" }}</label>
+            <input
+              v-model="otherName"
+              type="text"
+              maxlength="25"
+              class="gw-input w-full"
+            />
+          </div>
+          <button
+            v-if="!isBaseFriend"
+            class="gw-icon-btn self-end mb-0.5"
+            :disabled="!otherName || !otherDate || isFriend"
+            :title="friends.some((f) => f.name === otherName) ? 'Mettre \u00e0 jour' : 'Ajouter relation'"
+            @click="addFriend"
+          >
+            <svg v-if="friends.some((f) => f.name === otherName)" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16" /></svg>
+            <svg v-else class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+          </button>
+        </div>
+
+        <!-- Other party date -->
+        <div class="flex flex-col items-center gap-1 w-full max-w-80">
+          <label class="gw-text text-sm">
+            Anciennet&eacute; {{ otherName ? 'de ' + otherName : !isSeller ? 'du receveur' : "de l'offreur" }}
+          </label>
+          <input
+            v-model="otherDate"
+            type="date"
+            :min="Block0Date"
+            :max="todayDate"
+            class="gw-input w-full max-w-64"
+          />
+          <p :class="['gw-text text-center text-sm', { invisible: !otherDate }]">
+            {{ getDays(otherDate) || 0 }} DUs cr&eacute;&eacute;s
+          </p>
+        </div>
+
+        <!-- Price -->
+        <div class="flex items-center gap-3 justify-center">
+          <label class="gw-text text-sm whitespace-nowrap">&Eacute;valuation de r&eacute;f.</label>
+          <div class="relative">
+            <input
+              :value="price"
+              type="number"
+              min="0"
+              :step="Math.ceil(Number(price) / 10 / 2) || 1"
+              placeholder="0.00"
+              class="gw-input w-40 pr-14"
+              @input="price = Math.min(Number(($event.target as HTMLInputElement).value), 9999).toString()"
+            />
+            <select
+              v-model="currency"
+              class="absolute right-2 top-1/2 -translate-y-1/2 bg-transparent text-white/40 text-sm cursor-pointer border-0 outline-none"
+              @change="price = '1'"
+            >
+              <option value="DU" class="bg-surface-100">DU</option>
+              <option value="G1" class="bg-surface-100">&#x11E;1</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- Discount -->
+        <div class="flex items-center gap-3 justify-center">
+          <label class="gw-text text-sm whitespace-nowrap">R&eacute;duction newbie</label>
+          <div class="relative">
+            <input
+              :value="discount"
+              type="number"
+              min="0"
+              :step="Math.ceil(Number(discount) / 10 / 2) || 1"
+              placeholder="0"
+              class="gw-input w-40 pr-8"
+              @input="discount = Math.min(Number(($event.target as HTMLInputElement).value), 99).toString()"
+            />
+            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-white/40 text-sm pointer-events-none">%</span>
+          </div>
+        </div>
+
+        <!-- Corrected price -->
+        <p class="gw-title mt-4">
+&Eacute;valuation corrig&eacute;e : {{ fr(getFinalPrice(isSeller ? myDate : otherDate)) }} {{ currencyDisplay }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Relations table -->
+    <GratewizardGwRelations
+      :items="tableItems"
+      :base-friends="baseFriends"
+      result-label="ÉVAL."
+      @select="(f) => { otherName = f.name; otherDate = f.date; }"
+      @remove="removeFriend"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Block0Date, getDays, getRatio, dateToString, fr, type Friend, type TableFriend } from '~/utils/gratewizard';
+
+const todayDate = dateToString(new Date());
+const baseFriends: Friend[] = [
+  { name: 'Bloc 0', date: Block0Date },
+  { name: 'Newbie', date: todayDate },
+];
+
+const price = useLocalStorage('price', '1');
+const discount = useLocalStorage('discount', '0');
+const myDate = useLocalStorage<string | undefined>('myDate', undefined);
+const isSeller = useLocalStorage('isSeller', true);
+const currency = useLocalStorage('currency', 'DU');
+const otherName = useLocalStorage('otherName', '');
+const otherDate = useLocalStorage<string | undefined>('otherDate', undefined);
+const friends = useLocalStorage<Friend[]>('friends', []);
+
+const currencyDisplay = computed(() => currency.value === 'G1' ? '\u011e1' : 'DU');
+
+function getFinalPrice(date: string | undefined): number {
+  if ((!date && !myDate.value) || (!date && !otherDate.value)) return Number(price.value);
+  const ratio = date
+    ? myDate.value && (!isSeller.value || !otherDate.value)
+      ? getRatio(date, myDate.value)
+      : getRatio(date, otherDate.value)
+    : 1;
+  const d = Number(discount.value) / 100;
+  const p = Number(price.value);
+  return (1 - d) * p + d * p * ratio;
+}
+
+function addFriend() {
+  if (!otherDate.value || !otherName.value) return;
+  if (friends.value.some((f) => f.name === otherName.value)) {
+    friends.value = friends.value.map((f) =>
+      f.name === otherName.value ? { ...f, date: otherDate.value! } : f
+    );
+  } else {
+    friends.value = [...friends.value, { name: otherName.value, date: otherDate.value }];
+  }
+}
+
+function removeFriend(name: string) {
+  friends.value = friends.value.filter((f) => f.name !== name);
+}
+
+const isBaseFriend = computed(() =>
+  baseFriends.some((f) => f.name === otherName.value && f.date === otherDate.value)
+);
+const isFriend = computed(() =>
+  friends.value.some((f) => f.name === otherName.value && f.date === otherDate.value)
+);
+
+const tableItems = computed<TableFriend[]>(() => {
+  return baseFriends.concat(friends.value).map((friend) => ({
+    ...friend,
+    displayName: friend.name.substring(0, 10),
+    displayDate: new Date(friend.date).toLocaleDateString('fr-FR', { dateStyle: 'short' }),
+    result: fr(getFinalPrice(friend.date)),
+    du: getDays(friend.date),
+  }));
+});
+</script>

app/components/gratewizard/GwCRS.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="flex flex-col gap-5 pt-4">
+    <div class="card-surface">
+      <div class="flex flex-col items-center gap-3">
+        <p class="gw-metric">Coefficient relatif au solde net</p>
+
+        <!-- Buyer name + add button -->
+        <div class="flex items-center gap-4 w-full max-w-80">
+          <div class="flex-1">
+            <label class="gw-text text-sm">Qui re&ccedil;oit le produit ou service ?</label>
+            <input
+              v-model="otherName"
+              type="text"
+              maxlength="25"
+              class="gw-input w-full"
+            />
+          </div>
+          <button
+            v-if="!isBaseFriend"
+            class="gw-icon-btn self-end mb-0.5"
+            :disabled="!otherName || !otherDate || isFriend"
+            :title="friends.some((f) => f.name === otherName) ? 'Mettre \u00e0 jour' : 'Ajouter relation'"
+            @click="addFriend"
+          >
+            <svg v-if="friends.some((f) => f.name === otherName)" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16" /></svg>
+            <svg v-else class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+          </button>
+        </div>
+
+        <!-- Buyer seniority -->
+        <div class="flex flex-col items-center gap-1 w-full max-w-80">
+          <label class="gw-text text-sm">
+            Anciennet&eacute; {{ otherName ? 'de ' + otherName : 'du receveur' }}
+          </label>
+          <input
+            v-model="otherDate"
+            type="date"
+            :min="Block0Date"
+            :max="todayDate"
+            class="gw-input w-full max-w-64"
+          />
+          <p :class="['gw-text text-center text-sm', { invisible: !otherDate }]">
+            {{ seniority || 0 }} DUs cr&eacute;&eacute;s
+          </p>
+        </div>
+
+        <!-- DU Balance -->
+        <div class="flex items-center gap-3 justify-center">
+          <label class="gw-text text-sm whitespace-nowrap">Solde DU{{ otherName ? ' de ' + otherName : ' du receveur' }}</label>
+          <div class="relative">
+            <input
+              :value="balance"
+              type="number"
+              min="0"
+              placeholder="0"
+              class="gw-input w-40 pr-10"
+              @input="balance = Math.max(0, Number(($event.target as HTMLInputElement).value)).toString()"
+            />
+            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-white/40 text-sm pointer-events-none">DU</span>
+          </div>
+        </div>
+
+        <!-- Net balance -->
+        <p v-if="seniority > 0" class="gw-text text-center">
+          Solde net : {{ fr(netBalance, 0) }} DU
+          {{ netBalance < 0
+            ? ' (b\u00e9n\u00e9ficie de valeurs \u2192 majoration)'
+            : netBalance > 0
+            ? ' (alimente en valeurs \u2192 minoration)'
+            : ' (\u00e9quilibr\u00e9)' }}
+        </p>
+
+        <!-- Reference value -->
+        <div class="flex items-center gap-3 justify-center">
+          <label class="gw-text text-sm whitespace-nowrap">Valeur de r&eacute;f.</label>
+          <div class="relative">
+            <input
+              :value="refValue"
+              type="number"
+              min="0"
+              :step="Math.ceil(v / 10 / 2) || 1"
+              placeholder="0.00"
+              class="gw-input w-40 pr-14"
+              @input="refValue = Math.min(Number(($event.target as HTMLInputElement).value), 9999).toString()"
+            />
+            <select
+              v-model="currency"
+              class="absolute right-2 top-1/2 -translate-y-1/2 bg-transparent text-white/40 text-sm cursor-pointer border-0 outline-none"
+              @change="refValue = '1'"
+            >
+              <option value="DU" class="bg-surface-100">DU</option>
+              <option value="G1" class="bg-surface-100">&#x11E;1</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- Weight slider -->
+        <div class="flex items-center gap-3 w-full max-w-80">
+          <span class="gw-text whitespace-nowrap text-sm">Poids</span>
+          <input
+            v-model="weight"
+            type="range"
+            min="0"
+            max="1"
+            step="0.01"
+            class="flex-1 h-2 rounded-lg appearance-none cursor-pointer accent-accent"
+          />
+          <span class="gw-text text-sm w-10 text-right">{{ fr(w) }}</span>
+        </div>
+
+        <!-- Formula + result -->
+        <div class="w-full max-w-sm text-center p-4 rounded-lg bg-surface-200">
+          <p class="gw-text text-xs font-mono mb-1">
+            V &times; (1 + w &times; (1 &minus; S / C))
+          </p>
+          <template v-if="seniority > 0">
+            <p class="gw-text text-xs font-mono mb-2">
+              {{ fr(v) }} &times; (1 + {{ fr(w) }} &times; (1 &minus; {{ fr(s, 0) }} / {{ fr(seniority, 0) }}))
+              = {{ fr(v) }} &times; {{ fr(factor) }}
+            </p>
+            <p class="gw-title">= {{ fr(correctedValue) }} {{ currencyDisplay }}</p>
+          </template>
+          <p v-else class="gw-text text-xs">Renseigner l'anciennet&eacute; pour calculer</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Relations table (shared with CRA) -->
+    <GratewizardGwRelations
+      :items="tableItems"
+      :base-friends="baseFriends"
+      result-label="VALEUR"
+      @select="(f) => { otherName = f.name; otherDate = f.date; }"
+      @remove="removeFriend"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Block0Date, getDays, dateToString, fr, type Friend, type TableFriend } from '~/utils/gratewizard';
+
+const todayDate = dateToString(new Date());
+const baseFriends: Friend[] = [{ name: 'Bloc 0', date: Block0Date }];
+
+// Shared state with CRA (same localStorage keys)
+const currency = useLocalStorage('currency', 'DU');
+const friends = useLocalStorage<Friend[]>('friends', []);
+const otherName = useLocalStorage('otherName', '');
+const otherDate = useLocalStorage<string | undefined>('otherDate', undefined);
+
+// CRS-specific state
+const refValue = useLocalStorage('crs-value', '1');
+const balance = useLocalStorage('crs-balance', '0');
+const weight = useLocalStorage('crs-weight', '0.50');
+
+const currencyDisplay = computed(() => currency.value === 'G1' ? '\u011e1' : 'DU');
+const seniority = computed(() => getDays(otherDate.value));
+const s = computed(() => Number(balance.value));
+const w = computed(() => Number(weight.value));
+const v = computed(() => Number(refValue.value));
+const netBalance = computed(() => s.value - seniority.value);
+
+const correctedValue = computed(() =>
+  seniority.value > 0 ? v.value * (1 + w.value * (1 - s.value / seniority.value)) : v.value
+);
+const factor = computed(() =>
+  seniority.value > 0 ? 1 + w.value * (1 - s.value / seniority.value) : 1
+);
+
+// Friend management (shared with CRA)
+function addFriend() {
+  if (!otherDate.value || !otherName.value) return;
+  if (friends.value.some((f) => f.name === otherName.value)) {
+    friends.value = friends.value.map((f) =>
+      f.name === otherName.value ? { ...f, date: otherDate.value! } : f
+    );
+  } else {
+    friends.value = [...friends.value, { name: otherName.value, date: otherDate.value }];
+  }
+}
+
+function removeFriend(name: string) {
+  friends.value = friends.value.filter((f) => f.name !== name);
+}
+
+const isBaseFriend = computed(() =>
+  baseFriends.some((f) => f.name === otherName.value && f.date === otherDate.value)
+);
+const isFriend = computed(() =>
+  friends.value.some((f) => f.name === otherName.value && f.date === otherDate.value)
+);
+
+function getCorrectedValueFor(friendDate: string): number {
+  const c = getDays(friendDate);
+  if (c <= 0) return v.value;
+  return v.value * (1 + w.value * (1 - s.value / c));
+}
+
+const tableItems = computed<TableFriend[]>(() => {
+  return baseFriends.concat(friends.value).map((f) => ({
+    ...f,
+    displayName: f.name.substring(0, 10),
+    displayDate: new Date(f.date).toLocaleDateString('fr-FR', { dateStyle: 'short' }),
+    result: fr(getCorrectedValueFor(f.date)),
+    du: getDays(f.date),
+  }));
+});
+</script>

app/components/gratewizard/GwMN.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="flex flex-col gap-5 pt-4">
+    <!-- Error state -->
+    <div v-if="error" class="p-8 flex flex-col gap-4">
+      <p class="gw-text">Erreur : {{ error }}</p>
+    </div>
+
+    <template v-else>
+      <!-- Currency selector -->
+      <div class="flex items-center justify-center gap-2">
+        <span class="gw-text text-xs">DU</span>
+        <label class="gw-toggle">
+          <input
+            type="checkbox"
+            :checked="unit === 'G1'"
+            @change="unit = ($event.target as HTMLInputElement).checked ? 'G1' : 'DU'"
+          />
+          <span class="gw-toggle-slider" />
+        </label>
+        <span class="gw-text text-xs">&#x11E;1</span>
+      </div>
+
+      <!-- Monetary data card -->
+      <div ref="topRef" class="card-surface">
+        <div class="flex flex-col items-center gap-3">
+          <p class="gw-metric">Masse mon&eacute;taire / Membres</p>
+
+          <span v-if="polygon" class="gw-chip">
+            {{ activePerimeterName ?? 'S\u00e9lection manuelle' }}
+          </span>
+
+          <!-- Loading -->
+          <div v-if="loading" class="flex flex-col items-center gap-2 py-4">
+            <div class="gw-spinner" />
+            <p class="gw-text text-sm">Connexion au r&eacute;seau...</p>
+          </div>
+
+          <!-- Data grid -->
+          <div v-else-if="monetary" class="grid grid-cols-2 gap-2 w-full max-w-sm">
+            <div :class="['text-center p-2 rounded-md text-xs', polygon ? 'bg-accent/10' : 'bg-surface-200']">
+              <p class="gw-text">M (masse{{ polygon ? ' locale' : '' }})</p>
+              <p class="gw-title mt-1">
+                {{ mnIsLoading ? '...' : formatValue(displayM!, unit, duDaily) }}
+              </p>
+            </div>
+            <div :class="['text-center p-2 rounded-md text-xs', polygon ? 'bg-accent/10' : 'bg-surface-200']">
+              <p class="gw-text">N (membres{{ polygon ? ' locaux' : '' }})</p>
+              <p class="gw-title mt-1">{{ displayN.toLocaleString('fr-FR') }}</p>
+            </div>
+            <div :class="['text-center p-2 rounded-md text-xs', polygon ? 'bg-accent/10' : 'bg-surface-200']">
+              <p class="gw-text">M / N{{ polygon ? ' (local)' : '' }}</p>
+              <p class="gw-title mt-1">
+                {{ mnIsLoading ? '...' : formatValue(displayMN!, unit, duDaily) }}
+              </p>
+            </div>
+            <div class="text-center p-2 rounded-md text-xs bg-surface-200">
+              <p class="gw-text">DU journalier</p>
+              <p class="gw-title mt-1">{{ fr(duDaily) }} &#x11E;1</p>
+            </div>
+
+            <!-- Extra cells when polygon is active -->
+            <template v-if="polygon && nLocal > 0 && monetary">
+              <div class="text-center p-2 rounded-md text-xs bg-surface-200">
+                <p class="gw-text">M / N (r&eacute;seau)</p>
+                <p class="gw-title mt-1">{{ formatValue(mnG1, unit, duDaily) }}</p>
+              </div>
+              <div class="text-center p-2 rounded-md text-xs bg-accent/10">
+                <p class="gw-text">Part du r&eacute;seau</p>
+                <p class="gw-title mt-1">{{ fr(nLocal / monetary.membersCount * 100) }} %</p>
+              </div>
+            </template>
+
+            <div class="col-span-2 text-center">
+              <p class="gw-text">
+                Bloc #{{ monetary.blockNumber }} &mdash;
+                {{ new Date(monetary.timestamp).toLocaleDateString('fr-FR', { dateStyle: 'long' }) }}
+              </p>
+            </div>
+          </div>
+
+          <!-- Clear selection button -->
+          <div v-if="polygon" class="flex flex-col items-center gap-2">
+            <button
+              class="gw-btn gw-btn-danger"
+              @click="handleClearSelection"
+            >
+              P&eacute;rim&egrave;tre monde
+            </button>
+          </div>
+
+          <!-- Saved perimeters -->
+          <GratewizardGwPerimeterList
+            :perimeters="perimeters"
+            @load="handleLoadPerimeter"
+            @delete="deletePerimeter"
+          />
+        </div>
+      </div>
+
+      <!-- Map card -->
+      <div class="card-surface">
+        <div class="flex flex-col items-center gap-3">
+          <p class="gw-metric">
+            Carte des membres g&eacute;olocalis&eacute;s
+            <span v-if="!geoLoading && v1Pubkeys" class="gw-chip ml-2">
+              {{ geoMembers.length.toLocaleString('fr-FR') }}
+            </span>
+          </p>
+
+          <p v-if="geoError" class="gw-text">Erreur Cesium+ : {{ geoError }}</p>
+
+          <!-- Loading map -->
+          <div v-if="geoLoading || !v1Pubkeys" class="flex flex-col items-center gap-2 py-4">
+            <div class="gw-spinner" />
+            <p class="gw-text text-sm">Chargement des profils g&eacute;olocalis&eacute;s...</p>
+          </div>
+
+          <!-- Map -->
+          <template v-else>
+            <GratewizardGwMap
+              :members="geoMembers"
+              :clear-trigger="clearTrigger"
+              :load-polygon="loadPolygonTrigger"
+              @polygon-change="handlePolygonChange"
+            />
+
+            <p v-if="!loading && monetary" class="gw-text">
+              {{ geoMembers.length.toLocaleString('fr-FR') }} membres certifi&eacute;s g&eacute;olocalis&eacute;s sur
+              {{ monetary.membersCount.toLocaleString('fr-FR') }} membres au total
+            </p>
+
+            <!-- Save perimeter form -->
+            <div v-if="polygon" class="flex gap-2 items-center">
+              <input
+                v-model="perimeterName"
+                type="text"
+                placeholder="Nom du p&eacute;rim&egrave;tre"
+                class="gw-input"
+                @keydown.enter="handleSavePerimeter"
+              />
+              <button
+                class="gw-btn gw-btn-accent"
+                :disabled="!perimeterName.trim()"
+                @click="handleSavePerimeter"
+              >
+                Sauvegarder
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { duniter, type MonetaryData } from '~/services/duniter';
+import { pointInPolygon, fr, formatValue, countUdSince, type CurrencyUnit } from '~/utils/gratewizard';
+import type { GeoMember } from '~/composables/useCesiumProfiles';
+import type { SavedPerimeter } from '~/composables/useSavedPerimeters';
+
+const unit = useLocalStorage<CurrencyUnit>('gw-currency-unit', 'DU');
+
+const monetary = ref<MonetaryData | null>(null);
+const v1Pubkeys = ref<string[] | null>(null);
+const loading = ref(true);
+const error = ref<string | null>(null);
+const polygon = ref<[number, number][] | null>(null);
+const clearTrigger = ref(0);
+const loadPolygonTrigger = ref<{ coords: [number, number][]; name: string } | null>(null);
+const perimeterName = ref('');
+const activePerimeterName = ref<string | null>(null);
+const localMNg1 = ref<number | null>(null);
+const mnLoading = ref(false);
+const topRef = ref<HTMLDivElement | null>(null);
+
+const { geoMembers, loading: geoLoading, error: geoError } = useCesiumProfiles(v1Pubkeys);
+const { perimeters, savePerimeter, deletePerimeter } = useSavedPerimeters();
+
+// Fetch monetary data on mount
+onMounted(async () => {
+  try {
+    const [mon, pubkeys] = await Promise.all([
+      duniter.fetchMonetary(),
+      duniter.fetchMemberPubkeys(),
+    ]);
+    monetary.value = mon;
+    v1Pubkeys.value = pubkeys;
+  } catch (e: any) {
+    error.value = e.message;
+  } finally {
+    loading.value = false;
+  }
+});
+
+const duDaily = computed(() => monetary.value ? Number(monetary.value.amount) / 100 : 1);
+const massG1 = computed(() => monetary.value ? Number(monetary.value.monetaryMass) / 100 : 0);
+const mnG1 = computed(() => monetary.value && monetary.value.membersCount ? massG1.value / monetary.value.membersCount : 0);
+
+const localMembers = computed(() => {
+  if (!polygon.value) return [];
+  return geoMembers.value.filter((m) => pointInPolygon(m.lat, m.lon, polygon.value!));
+});
+
+const nLocal = computed(() => localMembers.value.length);
+
+// Compute local M/N based on member seniority
+watch([polygon, localMembers, monetary], async ([poly, members, mon]) => {
+  if (!poly || members.length === 0 || !mon) {
+    localMNg1.value = null;
+    return;
+  }
+
+  mnLoading.value = true;
+
+  try {
+    const pubkeys = members.map((m) => m.pubkey);
+    const joinBlocks = await duniter.fetchMemberJoinBlocks(pubkeys);
+
+    const udBlocks = mon.udBlockNumbers;
+    let totalSeniority = 0;
+    let validCount = 0;
+
+    for (const pk of pubkeys) {
+      const joinBlock = joinBlocks.get(pk);
+      if (joinBlock === undefined) continue;
+      totalSeniority += countUdSince(udBlocks, joinBlock);
+      validCount++;
+    }
+
+    if (validCount > 0) {
+      const localAvgSeniority = totalSeniority / validCount;
+      const globalAvgSeniority =
+        Number(mon.monetaryMass) / (Number(mon.amount) * mon.membersCount);
+      localMNg1.value = mnG1.value * (localAvgSeniority / globalAvgSeniority);
+    }
+  } catch (e) {
+    console.error('Failed to compute local M/N:', e);
+  } finally {
+    mnLoading.value = false;
+  }
+});
+
+const displayN = computed(() => polygon.value ? nLocal.value : monetary.value?.membersCount ?? 0);
+const displayMN = computed(() => polygon.value ? localMNg1.value : mnG1.value);
+const displayM = computed(() => polygon.value ? (localMNg1.value !== null ? localMNg1.value * nLocal.value : null) : massG1.value);
+const mnIsLoading = computed(() => polygon.value && (mnLoading.value || localMNg1.value === null));
+
+function handlePolygonChange(poly: [number, number][] | null, name?: string) {
+  polygon.value = poly;
+  activePerimeterName.value = name ?? null;
+  if (poly) nextTick(() => topRef.value?.scrollIntoView({ behavior: 'smooth' }));
+}
+
+function handleClearSelection() {
+  polygon.value = null;
+  activePerimeterName.value = null;
+  localMNg1.value = null;
+  clearTrigger.value++;
+  loadPolygonTrigger.value = null;
+}
+
+function handleSavePerimeter() {
+  if (!polygon.value || !perimeterName.value.trim()) return;
+  savePerimeter(perimeterName.value.trim(), polygon.value);
+  perimeterName.value = '';
+}
+
+function handleLoadPerimeter(p: SavedPerimeter) {
+  loadPolygonTrigger.value = { coords: p.polygon, name: p.name };
+}
+</script>

app/components/gratewizard/GwMap.client.vue

@@ -0,0 +1,146 @@
+<template>
+  <div ref="containerRef" class="gw-map" />
+</template>
+
+<script setup lang="ts">
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import 'leaflet.markercluster';
+import 'leaflet.markercluster/dist/MarkerCluster.css';
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+import '@geoman-io/leaflet-geoman-free';
+import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
+import type { GeoMember } from '~/composables/useCesiumProfiles';
+
+type LoadPolygon = { coords: [number, number][]; name: string } | null;
+
+const props = defineProps<{
+  members: GeoMember[];
+  clearTrigger?: number;
+  loadPolygon?: LoadPolygon;
+}>();
+
+const emit = defineEmits<{
+  polygonChange: [polygon: [number, number][] | null, name?: string];
+}>();
+
+const containerRef = ref<HTMLDivElement | null>(null);
+let map: L.Map | null = null;
+let cluster: any = null;
+let polygonLayer: L.Layer | null = null;
+
+onMounted(() => {
+  if (!containerRef.value) return;
+
+  map = L.map(containerRef.value).setView([46.5, 2.5], 6);
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  }).addTo(map);
+
+  cluster = (L as any).markerClusterGroup();
+  map.addLayer(cluster);
+
+  // Geoman controls
+  if (map.pm) {
+    map.pm.addControls({
+      position: 'topleft',
+      drawCircle: false,
+      drawCircleMarker: false,
+      drawMarker: false,
+      drawPolyline: false,
+      drawText: false,
+      editMode: false,
+      dragMode: false,
+      cutPolygon: false,
+      rotateMode: false,
+      removalMode: false,
+    });
+    map.pm.setLang('fr');
+  }
+
+  map.on('pm:create', (e: any) => {
+    if (polygonLayer) {
+      map!.removeLayer(polygonLayer);
+    }
+    polygonLayer = e.layer;
+    const latlngs = (e.layer as L.Polygon).getLatLngs()[0] as L.LatLng[];
+    emit('polygonChange', latlngs.map((ll) => [ll.lat, ll.lng]));
+  });
+
+  map.on('pm:remove', () => {
+    polygonLayer = null;
+    emit('polygonChange', null);
+  });
+
+  // Populate initial markers
+  updateMarkers(props.members);
+});
+
+onUnmounted(() => {
+  if (map) {
+    map.remove();
+    map = null;
+    cluster = null;
+  }
+});
+
+// Clear polygon when clearTrigger changes
+watch(() => props.clearTrigger, () => {
+  if (!props.clearTrigger || !map) return;
+  if (polygonLayer) {
+    const center = map.getCenter();
+    const zoom = map.getZoom();
+    map.removeLayer(polygonLayer);
+    polygonLayer = null;
+    map.setView(center, zoom, { animate: false });
+  }
+  if (map.pm) {
+    map.pm.disableDraw();
+  }
+});
+
+// Load a saved polygon
+watch(() => props.loadPolygon, (loadPolygon) => {
+  if (!map || !loadPolygon) return;
+
+  if (polygonLayer) {
+    map.removeLayer(polygonLayer);
+    polygonLayer = null;
+  }
+
+  const latlngs = loadPolygon.coords.map(([lat, lng]) => L.latLng(lat, lng));
+  const poly = L.polygon(latlngs, { color: '#3388ff' }).addTo(map);
+  polygonLayer = poly;
+  map.fitBounds(poly.getBounds(), { padding: [20, 20] });
+  emit('polygonChange', loadPolygon.coords, loadPolygon.name);
+});
+
+// Update markers when members change
+function updateMarkers(members: GeoMember[]) {
+  if (!cluster) return;
+  cluster.clearLayers();
+  const markers = members.map((m) =>
+    L.circleMarker([m.lat, m.lon], {
+      radius: 6,
+      color: '#f59e0b',
+      fillColor: '#f59e0b',
+      fillOpacity: 0.7,
+    }).bindPopup(
+      `<strong>${m.title || m.pubkey.slice(0, 8)}</strong>${m.city ? '<br>' + m.city : ''}`
+    )
+  );
+  cluster.addLayers(markers);
+}
+
+watch(() => props.members, (members) => {
+  updateMarkers(members);
+});
+</script>
+
+<style scoped>
+.gw-map {
+  height: 500px;
+  width: 100%;
+  border-radius: 0.75rem;
+}
+</style>

app/components/gratewizard/GwPerimeterList.vue

@@ -0,0 +1,40 @@
+<template>
+  <div v-if="perimeters.length > 0" class="w-full flex flex-col gap-1">
+    <p class="text-xs font-semibold text-white/50 uppercase tracking-wide">P&eacute;rim&egrave;tres sauvegard&eacute;s</p>
+    <div class="flex flex-col gap-0.5 w-full">
+      <div
+        v-for="p in perimeters"
+        :key="p.name"
+        class="gw-perimeter-item"
+        @click="emit('load', p)"
+      >
+        <div class="flex items-center gap-1.5 min-w-0">
+          <span class="text-accent text-xs shrink-0">&#x1F4CD;</span>
+          <span class="text-xs font-medium truncate">{{ p.name }}</span>
+          <span class="text-[10px] text-white/30 shrink-0">
+            {{ new Date(p.createdAt).toLocaleDateString('fr-FR', { dateStyle: 'short' }) }}
+          </span>
+        </div>
+        <button
+          class="gw-perimeter-delete"
+          @click.stop="emit('delete', p.name)"
+        >
+          &times;
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SavedPerimeter } from '~/composables/useSavedPerimeters';
+
+defineProps<{
+  perimeters: SavedPerimeter[];
+}>();
+
+const emit = defineEmits<{
+  load: [perimeter: SavedPerimeter];
+  delete: [name: string];
+}>();
+</script>

app/components/gratewizard/GwRelations.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="card-surface !p-0">
+    <div class="flex items-center justify-center py-3 px-4">
+      <p class="gw-metric text-sm">Mes relations</p>
+    </div>
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="border-b border-white/8">
+            <th
+              v-for="col in columns"
+              :key="col.key"
+              class="px-3 py-2 text-left text-xs font-semibold text-white/60 uppercase cursor-pointer select-none hover:text-white/80 transition-colors"
+              @click="col.sortable && toggleSort(col.key)"
+            >
+              <span class="inline-flex items-center gap-1">
+                {{ col.label }}
+                <span v-if="col.sortable && sortKey === col.key" class="text-accent">
+                  {{ sortAsc ? '\u25B2' : '\u25BC' }}
+                </span>
+              </span>
+            </th>
+            <th class="px-3 py-2 w-8" />
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="sortedItems.length === 0">
+            <td :colspan="columns.length + 1" class="px-3 py-3 text-center text-white/40 text-xs">
+              Aucune relation
+            </td>
+          </tr>
+          <tr
+            v-for="(friend, index) in sortedItems"
+            :key="friend.name"
+            class="cursor-pointer border-b border-white/5 transition-colors"
+            :class="index % 2 === 0 ? 'bg-surface-200/50' : ''"
+            @click="emit('select', friend)"
+          >
+            <td class="px-3 py-1.5">{{ friend.displayName }}</td>
+            <td v-if="resultLabel" class="px-3 py-1.5">{{ friend.result }}</td>
+            <td class="px-3 py-1.5">{{ friend.displayDate }}</td>
+            <td class="px-3 py-1.5">{{ friend.du }}</td>
+            <td class="px-3 py-1.5 w-8">
+              <button
+                v-if="!isBaseFriend(friend)"
+                class="text-red-400 hover:text-red-300 transition-colors"
+                title="Effacer relation"
+                @click.stop="emit('remove', friend.name)"
+              >
+                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M15 9l-6 6M9 9l6 6" />
+                </svg>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Block0Date, type TableFriend } from '~/utils/gratewizard';
+
+const props = defineProps<{
+  items: TableFriend[];
+  baseFriends: { name: string; date: string }[];
+  resultLabel?: string;
+}>();
+
+const emit = defineEmits<{
+  select: [friend: TableFriend];
+  remove: [name: string];
+}>();
+
+const sortKey = ref<string>('name');
+const sortAsc = ref(true);
+
+const columns = computed(() => {
+  const cols = [
+    { key: 'name', label: 'NOM', sortable: true },
+  ];
+  if (props.resultLabel) {
+    cols.push({ key: 'result', label: props.resultLabel, sortable: true });
+  }
+  cols.push(
+    { key: 'date', label: 'DATE', sortable: true },
+    { key: 'du', label: 'DU', sortable: true },
+  );
+  return cols;
+});
+
+function toggleSort(key: string) {
+  if (sortKey.value === key) {
+    sortAsc.value = !sortAsc.value;
+  } else {
+    sortKey.value = key;
+    sortAsc.value = true;
+  }
+}
+
+const sortedItems = computed(() => {
+  const items = [...props.items];
+  const key = sortKey.value;
+  const dir = sortAsc.value ? 1 : -1;
+
+  return items.sort((a, b) => {
+    const first = a[key];
+    const second = b[key];
+    let cmp = 0;
+    switch (key) {
+      case 'name':
+        cmp = String(first).localeCompare(String(second));
+        break;
+      case 'result':
+      case 'du':
+        cmp = Number(first) - Number(second);
+        break;
+      case 'date':
+        cmp = new Date(a.date).getTime() - new Date(b.date).getTime();
+        break;
+    }
+    return cmp * dir;
+  });
+});
+
+function isBaseFriend(friend: TableFriend): boolean {
+  return props.baseFriends.some(({ name, date }) => name === friend.name && date === friend.date);
+}
+</script>

app/components/gratewizard/GwTabs.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex flex-col items-center">
+    <p class="gw-metric pb-3" style="font-size: 1.75rem">grateWizard</p>
+
+    <!-- Tab buttons -->
+    <div class="flex gap-0.5 p-0.5 rounded-full bg-surface-200">
+      <button
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="gw-tab-btn"
+        :class="activeTab === tab.key
+          ? 'gw-tab-active'
+          : 'gw-tab-inactive'"
+        :disabled="tab.disabled"
+        @click="activeTab = tab.key"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <!-- Tab content with KeepAlive -->
+    <div class="w-full">
+      <KeepAlive>
+        <GratewizardGwMN v-if="activeTab === '1'" />
+        <GratewizardGwCRA v-else-if="activeTab === '2'" />
+        <GratewizardGwCRS v-else-if="activeTab === '3'" />
+      </KeepAlive>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const tabs = [
+  { key: '1', label: 'M/N local', disabled: false },
+  { key: '2', label: "A l'anciennet\u00e9", disabled: false },
+  { key: '3', label: 'Au solde', disabled: false },
+  { key: '4', label: 'Au volume', disabled: true },
+];
+
+const activeTab = ref('1');
+</script>

app/components/home/GrateWizardTeaser.vue

@@ -24,7 +24,7 @@
 
             <!-- CTAs -->
             <div class="shrink-0 flex flex-col gap-2">
-              <UiBaseButton @click="launch">
+              <UiBaseButton :href="url" target="_blank" @click="launch">
                 <div class="i-lucide-external-link mr-2 h-4 w-4" />
                 {{ content?.grateWizardTeaser.cta.launch }}
               </UiBaseButton>
@@ -41,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-const { launch } = useGrateWizard()
+const { url, launch } = useGrateWizard()
 const { data: content } = await usePageContent('home')
 </script>
 

app/composables/useCesiumProfiles.ts

@@ -0,0 +1,97 @@
+const CESIUM_PODS = [
+  'https://g1.data.brussels.ovh/user/profile/_search',
+  'https://g1.data.le-sou.org/user/profile/_search',
+  'https://g1.data.e-is.pro/user/profile/_search',
+];
+const BATCH_SIZE = 500;
+
+export type GeoMember = {
+  pubkey: string;
+  title: string;
+  city: string;
+  lat: number;
+  lon: number;
+};
+
+/** Find the first Cesium+ pod that responds successfully. */
+async function findWorkingPod(): Promise<string> {
+  for (const url of CESIUM_PODS) {
+    try {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ size: 0, query: { match_all: {} } }),
+      });
+      if (res.ok) return url;
+    } catch {
+      // try next pod
+    }
+  }
+  throw new Error('Aucun pod Cesium+ disponible');
+}
+
+/**
+ * Fetch Cesium+ profiles for a given list of v1 pubkeys.
+ * Uses Elasticsearch `ids` query with batches of 500, filtered to geolocated profiles only.
+ * Pass `null` to skip fetching (e.g. while pubkeys are still loading).
+ */
+export function useCesiumProfiles(v1Pubkeys: Ref<string[] | null>) {
+  const geoMembers = ref<GeoMember[]>([]);
+  const loading = ref(true);
+  const error = ref<string | null>(null);
+
+  watch(v1Pubkeys, async (pubkeys) => {
+    if (pubkeys === null) return;
+
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const podUrl = await findWorkingPod();
+      const allMembers: GeoMember[] = [];
+
+      for (let i = 0; i < pubkeys.length; i += BATCH_SIZE) {
+        const batch = pubkeys.slice(i, i + BATCH_SIZE);
+        const res = await fetch(podUrl, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            size: batch.length,
+            _source: ['title', 'city', 'geoPoint'],
+            query: {
+              bool: {
+                must: [
+                  { ids: { values: batch } },
+                  { exists: { field: 'geoPoint' } },
+                ],
+              },
+            },
+          }),
+        });
+
+        if (!res.ok) throw new Error(`Cesium+ HTTP ${res.status}`);
+        const json = await res.json();
+
+        for (const hit of json.hits?.hits ?? []) {
+          const s = hit._source;
+          if (!s?.geoPoint?.lat || !s?.geoPoint?.lon) continue;
+          allMembers.push({
+            pubkey: hit._id,
+            title: s.title || '',
+            city: s.city || '',
+            lat: s.geoPoint.lat,
+            lon: s.geoPoint.lon,
+          });
+        }
+      }
+
+      geoMembers.value = allMembers;
+    } catch (e: any) {
+      error.value = e.message;
+    } finally {
+      loading.value = false;
+    }
+  }, { immediate: true });
+
+  return { geoMembers, loading, error };
+}

app/composables/useGrateWizard.ts

@@ -1,16 +1,17 @@
 export function useGrateWizard() {
   const appConfig = useAppConfig()
+  const { url, popup } = appConfig.gratewizard as { url: string; popup: { width: number; height: number } }
 
-  function launch() {
-    const { url, popup } = appConfig.gratewizard as { url: string; popup: { width: number; height: number } }
+  function launch(e?: Event) {
     const left = Math.round((window.screen.width - popup.width) / 2)
     const top = Math.round((window.screen.height - popup.height) / 2)
-    window.open(
+    const win = window.open(
       url,
-      'GrateWizard',
+      'grateWizard',
       `width=${popup.width},height=${popup.height},left=${left},top=${top},scrollbars=yes,resizable=yes`,
     )
+    if (win) e?.preventDefault()
   }
 
-  return { launch }
+  return { url, launch }
 }

app/composables/useSavedPerimeters.ts

@@ -0,0 +1,24 @@
+export type SavedPerimeter = {
+  name: string;
+  polygon: [number, number][];
+  createdAt: string;
+};
+
+const STORAGE_KEY = 'gw-saved-perimeters';
+
+export function useSavedPerimeters() {
+  const perimeters = useLocalStorage<SavedPerimeter[]>(STORAGE_KEY, []);
+
+  function savePerimeter(name: string, polygon: [number, number][]) {
+    perimeters.value = [
+      ...perimeters.value.filter((p) => p.name !== name),
+      { name, polygon, createdAt: new Date().toISOString() },
+    ];
+  }
+
+  function deletePerimeter(name: string) {
+    perimeters.value = perimeters.value.filter((p) => p.name !== name);
+  }
+
+  return { perimeters, savePerimeter, deletePerimeter };
+}

app/pages/admin/site.vue

@@ -65,7 +65,7 @@
         </AdminFieldList>
       </AdminFormSection>
 
-      <AdminFormSection title="GrateWizard">
+      <AdminFormSection title="grateWizard">
         <AdminFieldText v-model="data.gratewizard.url" label="URL de l'application" />
       </AdminFormSection>
     </template>

app/pages/gratewizard.vue

@@ -1,73 +1,105 @@
 <template>
-  <div class="section-padding">
-    <div class="container-content max-w-3xl mx-auto">
-      <!-- Back link -->
-      <UiScrollReveal>
-        <NuxtLink to="/" class="inline-flex items-center gap-2 text-sm text-white/50 hover:text-white/80 mb-8 transition-colors">
-          <div class="i-lucide-arrow-left h-4 w-4" />
-          Retour à l'accueil
-        </NuxtLink>
-      </UiScrollReveal>
+  <!-- Popup mode: standalone app, no Librodrome layout -->
+  <main v-if="isPopup" class="gw-app flex flex-col items-center sm:p-4 overflow-x-hidden h-screen">
+    <div class="sm:max-w-screen-sm w-full">
+      <div class="gw-card">
+        <GratewizardGwTabs />
+      </div>
+    </div>
+  </main>
 
-      <!-- Header -->
-      <UiScrollReveal>
-        <div class="text-center mb-12">
-          <span class="inline-block mb-3 rounded-full bg-amber-400/15 px-3 py-0.5 font-mono text-xs tracking-widest text-amber-400 uppercase">
-            {{ content?.kicker }}
-          </span>
-          <h1 class="page-title font-display font-bold text-white">
-            {{ content?.title }}
-          </h1>
-          <p class="mt-4 text-lg text-white/60 leading-relaxed max-w-xl mx-auto">
-            {{ content?.description }}
-          </p>
-        </div>
-      </UiScrollReveal>
+  <!-- Info mode: Librodrome layout with feature cards -->
+  <NuxtLayout v-else>
+    <div class="section-padding">
+      <div class="container-content max-w-3xl mx-auto">
+        <!-- Back link -->
+        <UiScrollReveal>
+          <NuxtLink to="/" class="inline-flex items-center gap-2 text-sm text-white/50 hover:text-white/80 mb-8 transition-colors">
+            <div class="i-lucide-arrow-left h-4 w-4" />
+            Retour &agrave; l'accueil
+          </NuxtLink>
+        </UiScrollReveal>
 
-      <!-- Explanation cards -->
-      <div class="grid gap-6 md:grid-cols-2 mb-12">
-        <UiScrollReveal
-          v-for="(feature, i) in content?.features"
-          :key="i"
-          :delay="(i + 1) * 100"
-        >
-          <div class="gw-feature-card">
-            <div :class="`i-lucide-${feature.icon}`" class="h-6 w-6 text-amber-400 mb-3" />
-            <h3 class="font-display text-lg font-semibold text-white mb-2">{{ feature.title }}</h3>
-            <p class="text-sm text-white/60 leading-relaxed">
-              {{ feature.description }}
+        <!-- Header -->
+        <UiScrollReveal>
+          <div class="text-center mb-12">
+            <span class="inline-block mb-3 rounded-full bg-amber-400/15 px-3 py-0.5 font-mono text-xs tracking-widest text-amber-400 uppercase">
+              {{ content?.kicker }}
+            </span>
+            <h1 class="page-title font-display font-bold text-white">
+              {{ content?.title }}
+            </h1>
+            <p class="mt-4 text-lg text-white/60 leading-relaxed max-w-xl mx-auto">
+              {{ content?.description }}
             </p>
           </div>
         </UiScrollReveal>
-      </div>
 
-      <!-- CTA -->
-      <UiScrollReveal :delay="500">
-        <div class="text-center">
-          <p class="text-sm text-white/40 mb-4">
-            {{ content?.cta.note }}
-          </p>
-          <UiBaseButton @click="launch">
-            <div class="i-lucide-external-link mr-2 h-5 w-5" />
-            {{ content?.cta.label }}
-          </UiBaseButton>
+        <!-- Explanation cards -->
+        <div class="grid gap-6 md:grid-cols-2 mb-12">
+          <UiScrollReveal
+            v-for="(feature, i) in content?.features"
+            :key="i"
+            :delay="(i + 1) * 100"
+          >
+            <div class="gw-feature-card">
+              <div :class="`i-lucide-${feature.icon}`" class="h-6 w-6 text-amber-400 mb-3" />
+              <h3 class="font-display text-lg font-semibold text-white mb-2">{{ feature.title }}</h3>
+              <p class="text-sm text-white/60 leading-relaxed">
+                {{ feature.description }}
+              </p>
+            </div>
+          </UiScrollReveal>
         </div>
-      </UiScrollReveal>
+
+        <!-- CTA -->
+        <UiScrollReveal :delay="500">
+          <div class="text-center">
+            <p class="text-sm text-white/40 mb-4">
+              {{ content?.cta.note }}
+            </p>
+            <UiBaseButton :href="url" target="_blank" @click="launch">
+              <div class="i-lucide-external-link mr-2 h-5 w-5" />
+              {{ content?.cta.label }}
+            </UiBaseButton>
+          </div>
+        </UiScrollReveal>
+      </div>
     </div>
-  </div>
+  </NuxtLayout>
 </template>
 
 <script setup lang="ts">
+definePageMeta({ layout: false })
+
+const route = useRoute()
+const isPopup = computed(() => route.query.popup !== undefined)
+
 const { data: content } = await usePageContent('gratewizard')
 
-useHead({
-  title: content.value?.meta?.title ?? 'GrateWizard — Coefficients relatifs',
-})
+useHead(isPopup.value
+  ? {
+      title: 'grateWizard',
+      htmlAttrs: { lang: 'fr' },
+      meta: [{ name: 'color-scheme', content: 'dark' }],
+      link: [
+        { rel: 'preconnect', href: 'https://fonts.bunny.net' },
+        {
+          rel: 'stylesheet',
+          href: 'https://fonts.bunny.net/css?family=space-grotesk:300,400,500,600,700',
+        },
+      ],
+    }
+  : {
+      title: content.value?.meta?.title ?? 'grateWizard \u2014 Coefficients relatifs',
+    },
+)
 
-const { launch } = useGrateWizard()
+const { url, launch } = useGrateWizard()
 </script>
 
 <style scoped>
+/* Info page styles */
 .page-title {
   font-size: clamp(2rem, 5vw, 2.75rem);
 }
@@ -93,3 +125,301 @@ code {
   background: hsl(40 80% 50% / 0.1);
 }
 </style>
+
+<style>
+/* Standalone popup app styles — unscoped so child components inherit */
+.gw-app {
+  font-family: 'Space Grotesk', sans-serif;
+  background-color: hsl(20 8% 3.5%);
+  color: white;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 0.875rem;
+}
+
+.gw-app button,
+.gw-app select {
+  border: 0;
+}
+
+.gw-card {
+  border-radius: 0.75rem;
+  border: 1px solid hsl(20 8% 18% / 0.5);
+  background: hsl(20 8% 8%);
+  padding: 1rem 1.25rem;
+}
+
+/* --- Typography --- */
+.gw-metric {
+  font-weight: 600;
+  text-align: center;
+  font-size: 1rem;
+  color: white;
+}
+
+.gw-title {
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: white;
+}
+
+.gw-text {
+  font-size: 0.8125rem;
+  color: hsl(0 0% 75%);
+}
+
+.gw-chip {
+  display: inline-block;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  background: hsl(36 80% 52% / 0.15);
+  color: hsl(36 80% 52%);
+}
+
+/* --- Tab buttons --- */
+.gw-tab-btn {
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.gw-tab-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.gw-tab-active {
+  background: hsl(36 80% 52%);
+  color: hsl(20 8% 3.5%);
+  box-shadow: 0 1px 3px hsl(36 80% 52% / 0.3);
+}
+
+.gw-tab-inactive {
+  color: hsl(0 0% 100% / 0.5);
+}
+
+.gw-tab-inactive:not(:disabled):hover {
+  color: hsl(0 0% 100% / 0.8);
+  background: hsl(0 0% 100% / 0.05);
+}
+
+/* --- Buttons --- */
+.gw-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.3125rem 0.875rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+.gw-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.gw-btn-accent {
+  background: hsl(36 80% 52%);
+  color: hsl(20 8% 3.5%);
+  box-shadow: 0 1px 2px hsl(36 80% 52% / 0.25);
+}
+
+.gw-btn-accent:not(:disabled):hover {
+  background: hsl(36 80% 58%);
+  box-shadow: 0 2px 6px hsl(36 80% 52% / 0.3);
+}
+
+.gw-btn-accent:not(:disabled):active {
+  background: hsl(36 80% 46%);
+  transform: scale(0.97);
+}
+
+.gw-btn-danger {
+  background: hsl(0 72% 50%);
+  color: white;
+  box-shadow: 0 1px 2px hsl(0 72% 50% / 0.25);
+}
+
+.gw-btn-danger:not(:disabled):hover {
+  background: hsl(0 72% 56%);
+  box-shadow: 0 2px 6px hsl(0 72% 50% / 0.3);
+}
+
+.gw-btn-danger:not(:disabled):active {
+  background: hsl(0 72% 44%);
+  transform: scale(0.97);
+}
+
+/* --- Inputs --- */
+.gw-input {
+  padding: 0.3125rem 0.625rem;
+  font-size: 0.8125rem;
+  border-radius: 0.375rem;
+  border: 1px solid hsl(20 8% 22%);
+  background: hsl(20 8% 6%);
+  color: white;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.gw-input:focus {
+  border-color: hsl(36 80% 52%);
+  box-shadow: 0 0 0 2px hsl(36 80% 52% / 0.12);
+}
+
+/* --- Icon button --- */
+.gw-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9999px;
+  background: hsl(36 80% 52%);
+  color: hsl(20 8% 3.5%);
+  transition: all 0.2s ease;
+  border: none;
+  cursor: pointer;
+}
+
+.gw-icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.gw-icon-btn:not(:disabled):hover {
+  background: hsl(36 80% 58%);
+  box-shadow: 0 2px 6px hsl(36 80% 52% / 0.3);
+}
+
+.gw-icon-btn:not(:disabled):active {
+  transform: scale(0.92);
+}
+
+/* --- Toggle --- */
+.gw-toggle {
+  position: relative;
+  display: inline-block;
+  width: 2.25rem;
+  height: 1.25rem;
+}
+
+.gw-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.gw-toggle-slider {
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  background: hsl(20 8% 22%);
+  transition: background 0.2s;
+  cursor: pointer;
+}
+
+.gw-toggle-slider::before {
+  content: '';
+  position: absolute;
+  height: 0.875rem;
+  width: 0.875rem;
+  left: 0.1875rem;
+  bottom: 0.1875rem;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+.gw-toggle input:checked + .gw-toggle-slider {
+  background: hsl(36 80% 52%);
+}
+
+.gw-toggle input:checked + .gw-toggle-slider::before {
+  transform: translateX(1rem);
+}
+
+/* --- Spinner --- */
+.gw-spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid hsl(20 8% 22%);
+  border-top-color: hsl(36 80% 52%);
+  border-radius: 50%;
+  animation: gw-spin 0.8s linear infinite;
+}
+
+@keyframes gw-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* --- Card surface --- */
+.card-surface {
+  border-radius: 0.625rem;
+  background: hsl(20 8% 7%);
+  border: 1px solid hsl(0 0% 100% / 0.06);
+  padding: 1rem;
+  transition: all 0.3s;
+}
+
+/* --- Perimeter list items --- */
+.gw-perimeter-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  background: hsl(20 8% 12%);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.gw-perimeter-item:hover {
+  background: hsl(20 8% 16%);
+}
+
+.gw-perimeter-delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  line-height: 1;
+  color: hsl(0 60% 60%);
+  background: hsl(0 60% 50% / 0.1);
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.gw-perimeter-delete:hover {
+  background: hsl(0 60% 50% / 0.2);
+  color: hsl(0 60% 70%);
+}
+
+/* --- Scrollbar --- */
+.gw-app ::-webkit-scrollbar {
+  width: 5px;
+}
+.gw-app ::-webkit-scrollbar-track {
+  background: transparent;
+}
+.gw-app ::-webkit-scrollbar-thumb {
+  background: hsl(0 0% 100% / 0.12);
+  border-radius: 3px;
+}
+</style>

app/services/duniter/index.ts

@@ -0,0 +1,4 @@
+// Changer cette ligne pour switcher v1 → v2 après mars 2026 :
+import { v1Adapter as duniter } from './v1';
+export { duniter };
+export type { DuniterAdapter, MonetaryData } from './types';

app/services/duniter/types.ts

@@ -0,0 +1,14 @@
+export type MonetaryData = {
+  monetaryMass: string;
+  membersCount: number;
+  amount: string;
+  timestamp: string;
+  blockNumber: number;
+  udBlockNumbers: number[];
+};
+
+export interface DuniterAdapter {
+  fetchMonetary(): Promise<MonetaryData>;
+  fetchMemberPubkeys(): Promise<string[]>;
+  fetchMemberJoinBlocks(pubkeys: string[]): Promise<Map<string, number>>;
+}

app/services/duniter/v1.ts

@@ -0,0 +1,83 @@
+import type { DuniterAdapter, MonetaryData } from './types';
+
+const BMA_URL = 'https://g1.duniter.org';
+
+async function bmaGet<T>(path: string): Promise<T> {
+  const res = await fetch(`${BMA_URL}${path}`);
+  if (!res.ok) throw new Error(`BMA ${path}: ${res.status}`);
+  return res.json();
+}
+
+const joinBlockCache = new Map<string, number>();
+
+export const v1Adapter: DuniterAdapter = {
+  async fetchMonetary(): Promise<MonetaryData> {
+    const [current, udBlocks] = await Promise.all([
+      bmaGet<{
+        monetaryMass: number;
+        membersCount: number;
+        number: number;
+        medianTime: number;
+      }>('/blockchain/current'),
+      bmaGet<{ result: { blocks: number[] } }>('/blockchain/with/ud'),
+    ]);
+
+    const udBlockNumbers = udBlocks.result.blocks;
+    const lastUdBlock = udBlockNumbers[udBlockNumbers.length - 1];
+    const udBlock = await bmaGet<{ dividend: number }>(`/blockchain/block/${lastUdBlock}`);
+
+    return {
+      monetaryMass: String(current.monetaryMass),
+      membersCount: current.membersCount,
+      amount: String(udBlock.dividend),
+      timestamp: new Date(current.medianTime * 1000).toISOString(),
+      blockNumber: current.number,
+      udBlockNumbers,
+    };
+  },
+
+  async fetchMemberPubkeys(): Promise<string[]> {
+    const data = await bmaGet<{ results: { pubkey: string }[] }>('/wot/members');
+    return data.results.map((m) => m.pubkey);
+  },
+
+  async fetchMemberJoinBlocks(pubkeys: string[]): Promise<Map<string, number>> {
+    const result = new Map<string, number>();
+    const toFetch: string[] = [];
+
+    for (const pk of pubkeys) {
+      const cached = joinBlockCache.get(pk);
+      if (cached !== undefined) {
+        result.set(pk, cached);
+      } else {
+        toFetch.push(pk);
+      }
+    }
+
+    const CONCURRENT = 10;
+    for (let i = 0; i < toFetch.length; i += CONCURRENT) {
+      const batch = toFetch.slice(i, i + CONCURRENT);
+      await Promise.all(
+        batch.map(async (pk) => {
+          try {
+            const data = await bmaGet<{
+              results: { uids: { meta: { timestamp: string } }[] }[];
+            }>(`/wot/lookup/${encodeURIComponent(pk)}`);
+            const ts = data.results?.[0]?.uids?.[0]?.meta?.timestamp;
+            if (ts) {
+              const blockNum = parseInt(ts.split('-')[0], 10);
+              if (!isNaN(blockNum)) {
+                joinBlockCache.set(pk, blockNum);
+                result.set(pk, blockNum);
+              }
+            }
+          } catch {
+            // Skip members we can't look up
+          }
+        })
+      );
+    }
+
+    return result;
+  },
+};

app/services/duniter/v2.ts

@@ -0,0 +1,68 @@
+import { ss58ToV1Pubkey } from '~/utils/ss58';
+import type { DuniterAdapter, MonetaryData } from './types';
+
+const SQUID_URL = 'https://gt-squid.axiom-team.fr/v1/graphql';
+
+async function gql<T>(query: string): Promise<T> {
+  const res = await fetch(SQUID_URL, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query }),
+  });
+  const json = await res.json();
+  if (json.errors) throw new Error(json.errors[0].message);
+  return json.data;
+}
+
+export const v2Adapter: DuniterAdapter = {
+  async fetchMonetary(): Promise<MonetaryData> {
+    const data = await gql<{
+      universalDividends: { nodes: (Omit<MonetaryData, 'udBlockNumbers'> & Record<string, unknown>)[] };
+    }>(`{
+      universalDividends(first: 1, orderBy: BLOCK_NUMBER_DESC) {
+        nodes { monetaryMass membersCount amount timestamp blockNumber }
+      }
+    }`);
+    return { ...data.universalDividends.nodes[0], udBlockNumbers: [] };
+  },
+
+  async fetchMemberPubkeys(): Promise<string[]> {
+    const accountIds: string[] = [];
+    let offset = 0;
+    const pageSize = 1000;
+
+    while (true) {
+      const data = await gql<{
+        identities: { nodes: { accountId: string }[] };
+      }>(`{
+        identities(first: ${pageSize}, offset: ${offset}, filter: { isMember: { equalTo: true } }) {
+          nodes { accountId }
+        }
+      }`);
+
+      const nodes = data.identities.nodes;
+      for (const node of nodes) {
+        accountIds.push(node.accountId);
+      }
+
+      if (nodes.length < pageSize) break;
+      offset += pageSize;
+    }
+
+    // Convert SS58 accountIds to Cesium+ v1 base58 pubkeys
+    const pubkeys: string[] = [];
+    for (const id of accountIds) {
+      try {
+        pubkeys.push(ss58ToV1Pubkey(id));
+      } catch {
+        // Skip invalid addresses
+      }
+    }
+    return pubkeys;
+  },
+
+  async fetchMemberJoinBlocks(_pubkeys: string[]): Promise<Map<string, number>> {
+    // TODO: implement using squid GraphQL after v2 migration
+    return new Map();
+  },
+};

app/utils/gratewizard.ts

@@ -0,0 +1,69 @@
+/** Ray-casting algorithm to test if a point is inside a polygon */
+export function pointInPolygon(lat: number, lng: number, polygon: [number, number][]): boolean {
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const [yi, xi] = polygon[i];
+    const [yj, xj] = polygon[j];
+    if ((yi > lat) !== (yj > lat) && lng < ((xj - xi) * (lat - yi)) / (yj - yi) + xi) {
+      inside = !inside;
+    }
+  }
+  return inside;
+}
+
+/** Format a number in French locale */
+export const fr = (n: number, decimals = 2) =>
+  n.toLocaleString('fr-FR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+
+export type CurrencyUnit = 'DU' | 'G1';
+
+/** Format a G1 value in the given unit, with k/M suffix */
+export function formatValue(g1Value: number, unit: CurrencyUnit, duDaily: number): string {
+  const val = unit === 'DU' ? g1Value / duDaily : g1Value;
+  const suffix = unit === 'DU' ? 'DU' : '\u011e1';
+  if (val >= 1_000_000) return fr(val / 1_000_000) + ' M' + suffix;
+  if (val >= 1_000) return fr(val / 1_000) + ' k' + suffix;
+  return fr(val) + ' ' + suffix;
+}
+
+/** Binary-search count of udBlocks entries >= joinBlock (udBlocks is sorted ascending). */
+export function countUdSince(udBlocks: number[], joinBlock: number): number {
+  let lo = 0, hi = udBlocks.length;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (udBlocks[mid] < joinBlock) lo = mid + 1;
+    else hi = mid;
+  }
+  return udBlocks.length - lo;
+}
+
+/** Date to ISO-like string (yyyy-mm-dd) */
+export const dateToString = (date: Date) =>
+  date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2);
+
+/** Number of days between a date and today */
+export const getDays = (date: string | undefined) => {
+  if (!date) return 0;
+  const d = new Date(date);
+  const today = new Date();
+  return Math.floor(Math.abs(d.getTime() - today.getTime()) / (1000 * 3600 * 24));
+};
+
+/** Seniority ratio between two dates (days from today) */
+export const getRatio = (date1: string | undefined, date2: string | undefined) => {
+  return getDays(date1) / Math.max(getDays(date2), 1);
+};
+
+export const Block0Date = '2017-03-08';
+
+export type Friend = {
+  name: string;
+  date: string;
+};
+
+export type TableFriend = Friend & {
+  [key: string]: string | number;
+  displayName: string;
+  displayDate: string;
+  du: number;
+};

app/utils/ss58.ts

@@ -0,0 +1,109 @@
+const BASE58_ALPHABET = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
+
+const ALPHABET_MAP = new Map<string, number>();
+for (let i = 0; i < BASE58_ALPHABET.length; i++) {
+  ALPHABET_MAP.set(BASE58_ALPHABET[i], i);
+}
+
+export function base58Decode(str: string): Uint8Array {
+  if (str.length === 0) return new Uint8Array(0);
+
+  // Count leading '1's (zero bytes)
+  let leadingZeros = 0;
+  while (leadingZeros < str.length && str[leadingZeros] === '1') {
+    leadingZeros++;
+  }
+
+  // Decode base58 to big integer (stored as byte array)
+  const size = Math.ceil(str.length * 733 / 1000) + 1; // log(58) / log(256)
+  const bytes = new Uint8Array(size);
+
+  for (let i = leadingZeros; i < str.length; i++) {
+    const val = ALPHABET_MAP.get(str[i]);
+    if (val === undefined) throw new Error(`Invalid base58 character: ${str[i]}`);
+
+    let carry = val;
+    for (let j = size - 1; j >= 0; j--) {
+      carry += 256 * bytes[j];
+      bytes[j] = carry % 256;
+      carry = Math.floor(carry / 256);
+    }
+  }
+
+  // Skip leading zeros in the decoded bytes
+  let start = 0;
+  while (start < size && bytes[start] === 0) {
+    start++;
+  }
+
+  const result = new Uint8Array(leadingZeros + (size - start));
+  // Leading zeros from '1' characters
+  for (let i = 0; i < leadingZeros; i++) {
+    result[i] = 0;
+  }
+  // Decoded bytes
+  for (let i = start; i < size; i++) {
+    result[leadingZeros + (i - start)] = bytes[i];
+  }
+
+  return result;
+}
+
+export function base58Encode(bytes: Uint8Array): string {
+  if (bytes.length === 0) return '';
+
+  // Count leading zero bytes
+  let leadingZeros = 0;
+  while (leadingZeros < bytes.length && bytes[leadingZeros] === 0) {
+    leadingZeros++;
+  }
+
+  // Encode to base58
+  const size = Math.ceil(bytes.length * 138 / 100) + 1; // log(256) / log(58)
+  const digits = new Uint8Array(size);
+
+  for (let i = leadingZeros; i < bytes.length; i++) {
+    let carry = bytes[i];
+    for (let j = size - 1; j >= 0; j--) {
+      carry += 256 * digits[j];
+      digits[j] = carry % 58;
+      carry = Math.floor(carry / 58);
+    }
+  }
+
+  // Skip leading zeros in base58 output
+  let start = 0;
+  while (start < size && digits[start] === 0) {
+    start++;
+  }
+
+  let result = '1'.repeat(leadingZeros);
+  for (let i = start; i < size; i++) {
+    result += BASE58_ALPHABET[digits[i]];
+  }
+
+  return result;
+}
+
+/**
+ * Convert an SS58 address to a base58-encoded raw pubkey (Cesium+ v1 format).
+ *
+ * SS58 layout: [prefix (1 or 2 bytes)] [32 bytes pubkey] [2 bytes checksum]
+ * - If first byte has bit 6 set (& 0x40), prefix is 2 bytes
+ * - Otherwise prefix is 1 byte
+ */
+export function ss58ToV1Pubkey(ss58: string): string {
+  const raw = base58Decode(ss58);
+
+  // Determine prefix length
+  const prefixLen = (raw[0] & 0x40) ? 2 : 1;
+
+  // Extract 32-byte pubkey (skip prefix, drop 2-byte checksum)
+  const pubkey = raw.slice(prefixLen, prefixLen + 32);
+
+  if (pubkey.length !== 32) {
+    throw new Error(`Invalid SS58 address: expected 32-byte pubkey, got ${pubkey.length}`);
+  }
+
+  return base58Encode(pubkey);
+}