From 6315793c90773318a1dbb0feafa59c3e04b94e47 Mon Sep 17 00:00:00 2001
From: Florian <florian@nocleus.com>
Date: Wed, 27 May 2026 01:55:53 +0200
Subject: [PATCH] =?UTF-8?q?feat(soutenir):=20barre=20d'objectif=20de=20don?=
 =?UTF-8?q?=20(nom=20de=20domaine=20d=C3=A9di=C3=A9,=2010=20=E2=82=AC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Affiche un goal concret en haut de /soutenir. Valeurs en dur dans le
frontmatter (goalRaised / goalTarget) à éditer à la main quand un don
arrive — pas de branchement Ko-fi.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/soutenir.astro | 41 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/pages/soutenir.astro b/src/pages/soutenir.astro
index d28eec9..87a117a 100644
--- a/src/pages/soutenir.astro
+++ b/src/pages/soutenir.astro
@@ -2,6 +2,12 @@
 import Base from '../layouts/Base.astro';
 
 export const prerender = false;
+
+const goalLabel = "Location d'un nom de domaine dédié";
+const goalTarget = 10;
+const goalRaised = 0;
+const goalCurrency = '€';
+const goalPercent = Math.min(100, Math.round((goalRaised / goalTarget) * 100));
 ---
 
 <Base
@@ -18,6 +24,41 @@ export const prerender = false;
     </div>
   </section>
 
+  <section class="container-tight pt-6">
+    <div class="rounded-xl border border-canicule-200 bg-white p-5 shadow-sm">
+      <div class="flex items-baseline justify-between gap-3">
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-wide text-canicule-700">
+            Objectif de don en cours
+          </p>
+          <p class="mt-1 text-base font-semibold text-slate-900">{goalLabel}</p>
+        </div>
+        <p class="shrink-0 text-sm tabular-nums text-slate-600">
+          <span class="font-bold text-slate-900">{goalRaised} {goalCurrency}</span>
+          <span class="text-slate-400"> / {goalTarget} {goalCurrency}</span>
+        </p>
+      </div>
+
+      <div class="mt-3 h-3 w-full overflow-hidden rounded-full bg-slate-100">
+        <div
+          class="h-full rounded-full bg-canicule-500 transition-all"
+          style={`width: ${goalPercent}%`}
+          role="progressbar"
+          aria-valuenow={goalPercent}
+          aria-valuemin="0"
+          aria-valuemax="100"
+          aria-label={`${goalPercent}% de l'objectif atteint`}
+        >
+        </div>
+      </div>
+
+      <p class="mt-2 text-xs text-slate-500">
+        {goalPercent}% atteint — une fois l'objectif rempli, le nom de domaine dédié sera réservé
+        pour un an.
+      </p>
+    </div>
+  </section>
+
   <section class="container-tight py-8 prose prose-slate max-w-none">
     <h2>Don libre via Ko-fi</h2>
     <p>