From 33060802bc49b3657154b5dbd3e907c7c2e1f604 Mon Sep 17 00:00:00 2001
From: alexsoyes <contact.alexsoyes@gmail.com>
Date: Wed, 24 Jun 2026 13:42:01 +0200
Subject: [PATCH 1/8] Refine cover and signature layouts

---
 app/src/styles/sections/principles.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/src/styles/sections/principles.css b/app/src/styles/sections/principles.css
index 893eb33..4318d2c 100644
--- a/app/src/styles/sections/principles.css
+++ b/app/src/styles/sections/principles.css
@@ -23,11 +23,12 @@
   --row-inset: clamp(18px, 2.2vw, 28px);
   position: relative;
   display: grid;
-  grid-template-columns: clamp(44px, 4.6vw, 58px) minmax(320px, 1fr) minmax(280px, 380px);
-  gap: clamp(18px, 1.9vw, 28px);
+  grid-template-columns: clamp(48px, 5vw, 64px) minmax(0, 1fr) minmax(280px, 420px);
+  gap: clamp(18px, 2vw, 28px);
   align-items: start;
   min-width: 0;
-  padding: clamp(26px, 4.3vh, 46px) var(--row-inset);
+  /* Generous breathing room — rows were too cramped. */
+  padding: clamp(40px, 6.5vh, 78px) var(--row-inset);
   scroll-margin-top: clamp(20px, 8vh, 80px);
   border-bottom: 1px solid var(--rule);
   background: var(--paper);

From 67cb4c44f78428f22c0fabbb45801abf8bcc4f7d Mon Sep 17 00:00:00 2001
From: alexsoyes <contact.alexsoyes@gmail.com>
Date: Sat, 27 Jun 2026 11:54:25 +0200
Subject: [PATCH 2/8] feat(signature): add share popup with confetti, rank
 badge, and platform share

Adds a SharePopup.astro modal that opens after clicking the redesigned
"Sign and share" button (SignButton.astro is now a <button> carrying
data-github-url so the client can drive the flow).

Highlights:
- Confetti rain of 64 emojis spans the full viewport on sign (z-index
  above the dialog, disabled under prefers-reduced-motion).
- Signatory rank #{count+1} is the hero, followed by an explicit identity
  statement ("You are the Nth AI-Driven Developer", localized FR/EN).
- The share phrase lives in a real <blockquote> with display quote marks,
  italic copy, left alignment, and a clickable ai-driven-development.org
  link (no www).
- A countdown (3-2-1) announces the GitHub PR opening, then the share
  buttons unlock: X (brand black), LinkedIn (brand blue), Copy (accent).
- Copy pill copies the full 2-line message and shows "Message copied/
  copie" feedback.
- Message language tracks navigator.language at open time; X / LinkedIn
  URLs are resolved client-side (fixes the previous un-interpolated
  ${encodeURIComponent} bug).
- Mobile ships as a bottom sheet; reduced-motion disables animation and
  confetti.

Tokens:
- Add --x-brand and --linkedin-brand to tokens.css.
- Add .confetti-emoji + @keyframes confetti-fall to signature.css.

Verified: build clean, no console errors, FR/EN locales, copy, mobile
bottom sheet, reduced motion.
---
 app/src/components/ClientApp.astro            | 205 ++++++++++
 app/src/components/sections/Signature.astro   |   3 +
 app/src/components/signature/SharePopup.astro | 384 ++++++++++++++++++
 app/src/components/signature/SignButton.astro |  13 +-
 app/src/styles/sections/signature.css         |  29 ++
 app/src/styles/tokens.css                     |   4 +
 6 files changed, 635 insertions(+), 3 deletions(-)
 create mode 100644 app/src/components/signature/SharePopup.astro

diff --git a/app/src/components/ClientApp.astro b/app/src/components/ClientApp.astro
index cb14243..e6838f6 100644
--- a/app/src/components/ClientApp.astro
+++ b/app/src/components/ClientApp.astro
@@ -11,6 +11,211 @@
   observeSpecIndex();
   observeFocusBand();
 
+  // Share popup — confetti rains across the viewport on sign, the user's
+  // rank is stamped, an identity statement follows, the share phrase lives
+  // in a quotation block (with a clickable link to ai-driven-development.org),
+  // then a countdown announces the GitHub PR opening. The Copy pill sits in
+  // the action row beside X and LinkedIn. Message language tracks
+  // navigator.language.
+  const SHARE_URL = 'https://ai-driven-development.org/';
+  const URL_LABEL = 'ai-driven-development.org';
+  const URL_TOKEN = '\u0001URL\u0001';
+  let shareCountdownInterval: ReturnType<typeof setInterval> | null = null;
+
+  function isFrench(lang: string) { return lang.toLowerCase().startsWith('fr'); }
+
+  function ordinal(n: number, fr: boolean): string {
+    if (fr) return n === 1 ? '1er' : `${n}ème`;
+    const j = n % 10, k = n % 100;
+    if (j === 1 && k !== 11) return `${n}st`;
+    if (j === 2 && k !== 12) return `${n}nd`;
+    if (j === 3 && k !== 13) return `${n}rd`;
+    return `${n}th`;
+  }
+
+  function buildStatement(rank: number, lang: string): string {
+    const fr = isFrench(lang);
+    const ord = ordinal(rank, fr);
+    return fr ? `Vous êtes le ${ord} AI-Driven Developer` : `You are the ${ord} AI-Driven Developer`;
+  }
+
+  function buildMessagePlain(rank: number, lang: string): string {
+    const fr = isFrench(lang);
+    const line1 = fr
+      ? `Je viens de signer le Manifeste du AI-Driven Development en tant que signataire n°${rank}.`
+      : `I just signed the AI-Driven Development Manifesto as signatory #${rank}.`;
+    const line2 = fr ? `Rejoignez-moi → ${URL_TOKEN}` : `Join me → ${URL_TOKEN}`;
+    return `${line1}\n${line2}`.replaceAll(URL_TOKEN, SHARE_URL);
+  }
+
+  function buildMessageHTML(rank: number, lang: string): string {
+    const fr = isFrench(lang);
+    const line1 = fr
+      ? `Je viens de signer le Manifeste du AI-Driven Development en tant que signataire n°${rank}.`
+      : `I just signed the AI-Driven Development Manifesto as signatory #${rank}.`;
+    const line2 = fr ? `Rejoignez-moi → ${URL_TOKEN}` : `Join me → ${URL_TOKEN}`;
+    const anchor = `<a class="share-popup-link" href="${SHARE_URL}" target="_blank" rel="noopener noreferrer">${URL_LABEL}</a>`;
+    return `${line1}<br>${line2}`.replaceAll(URL_TOKEN, anchor);
+  }
+
+  function resetShareButtons(ready: boolean) {
+    const buttons = document.querySelector('.share-popup-buttons');
+    if (!buttons) return;
+    buttons.setAttribute('data-ready', String(ready));
+    document.querySelectorAll<HTMLElement>('.share-popup-btn').forEach((b) => {
+      if (b.tagName === 'A') {
+        b.setAttribute('aria-disabled', String(!ready));
+      } else {
+        (b as HTMLButtonElement).disabled = !ready;
+      }
+    });
+  }
+
+  function renderCountdown(el: HTMLElement, n: number, lang: string) {
+    const fr = isFrench(lang);
+    const label = fr ? 'Ouverture de votre contribution sur GitHub dans' : 'Opening your contribution on GitHub in';
+    el.innerHTML = `${label} <strong>${n}</strong>`;
+  }
+
+  // Confetti emojis — rain across the whole viewport on sign, so the burst
+  // is visible even with the dialog open (they layer above the scrim).
+  const CONFETTI_EMOJIS = ['🎉', '✨', '🚀', '💻', '🌟', '💙', '⭐', '🎊', '🔥', '✅'];
+  function launchConfetti() {
+    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const count = 64;
+    for (let i = 0; i < count; i++) {
+      const el = document.createElement('span');
+      el.className = 'confetti-emoji';
+      el.textContent = CONFETTI_EMOJIS[i % CONFETTI_EMOJIS.length];
+      // Origin spread across the full top band + a few from each side.
+      const fromTop = i % 3 !== 2;
+      const startX = fromTop ? Math.random() * vw : (i % 4 === 0 ? -20 : vw + 20);
+      const startY = fromTop ? -20 - Math.random() * 40 : Math.random() * vh * 0.6;
+      // Drift downward and outward; long flight so the celebration lingers.
+      const drift = 60 + Math.random() * 180;
+      const dx = (Math.random() - 0.5) * 220;
+      const dy = fromTop ? vh * 0.5 + drift : drift * 0.6;
+      el.style.left = `${startX}px`;
+      el.style.top = `${startY}px`;
+      el.style.setProperty('--dx', `${dx}px`);
+      el.style.setProperty('--dy', `${dy}px`);
+      el.style.setProperty('--rot', `${Math.random() * 900 - 450}deg`);
+      el.style.setProperty('--delay', `${Math.random() * 0.35}s`);
+      // Vary size slightly for depth.
+      el.style.fontSize = `${28 + Math.random() * 16}px`;
+      document.body.appendChild(el);
+      el.addEventListener('animationend', () => el.remove(), { once: true });
+    }
+  }
+
+  function startShareCountdown(githubUrl: string) {
+    const popup = document.getElementById('share-popup') as HTMLDialogElement | null;
+    const countdownEl = document.getElementById('share-countdown');
+    const rankEl = document.getElementById('share-popup-rank');
+    const statementEl = document.getElementById('share-popup-statement');
+    const textEl = document.getElementById('share-popup-title');
+    const copyFeedback = document.getElementById('share-copy-feedback');
+
+    if (!popup || !countdownEl) return;
+
+    if (shareCountdownInterval) {
+      clearInterval(shareCountdownInterval);
+      shareCountdownInterval = null;
+    }
+
+    const rank = Number(popup.dataset.signatoryRank) || 1;
+    const lang = navigator.language || 'en';
+    const plain = buildMessagePlain(rank, lang);
+    const html = buildMessageHTML(rank, lang);
+
+    if (rankEl) rankEl.textContent = `#${rank}`;
+    if (statementEl) statementEl.textContent = buildStatement(rank, lang);
+    if (textEl) textEl.innerHTML = html;
+    if (copyFeedback) copyFeedback.hidden = true;
+
+    const xHref = `https://twitter.com/intent/tweet?text=${encodeURIComponent(plain)}`;
+    const inHref = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(SHARE_URL)}`;
+    document.getElementById('share-btn-x')?.setAttribute('href', xHref);
+    document.getElementById('share-btn-linkedin')?.setAttribute('href', inHref);
+
+    resetShareButtons(false);
+
+    let countdown = 3;
+    renderCountdown(countdownEl, countdown, lang);
+    countdownEl.hidden = false;
+
+    popup.showModal();
+    launchConfetti();
+
+    shareCountdownInterval = setInterval(() => {
+      countdown--;
+      if (countdown > 0) {
+        renderCountdown(countdownEl, countdown, lang);
+      } else {
+        cleanupShareCountdown();
+        window.open(githubUrl, '_blank', 'noopener,noreferrer');
+        countdownEl.hidden = true;
+        resetShareButtons(true);
+      }
+    }, 1000);
+  }
+
+  function cleanupShareCountdown() {
+    if (shareCountdownInterval) {
+      clearInterval(shareCountdownInterval);
+      shareCountdownInterval = null;
+    }
+  }
+
+  // Wire copy-to-clipboard with inline feedback (the Copy pill in the row).
+  document.getElementById('share-btn-copy')?.addEventListener('click', async () => {
+    const popup = document.getElementById('share-popup') as HTMLDialogElement | null;
+    if (!popup) return;
+    const rank = Number(popup.dataset.signatoryRank) || 1;
+    const lang = navigator.language || 'en';
+    const plain = buildMessagePlain(rank, lang);
+    const feedback = document.getElementById('share-copy-feedback');
+    const fr = isFrench(lang);
+    try {
+      await navigator.clipboard.writeText(plain);
+      if (feedback) {
+        feedback.textContent = fr ? 'Message copié' : 'Message copied';
+        feedback.hidden = false;
+        setTimeout(() => { feedback.hidden = true; }, 1500);
+      }
+    } catch {
+      if (feedback) {
+        feedback.textContent = fr ? 'Presse-papier indisponible' : 'Clipboard unavailable';
+        feedback.hidden = false;
+        setTimeout(() => { feedback.hidden = true; }, 1500);
+      }
+    }
+  });
+
+  document.addEventListener('click', (e) => {
+    const signBtn = (e.target as HTMLElement).closest('#sign-manifesto-btn');
+    if (signBtn) {
+      e.preventDefault();
+      const githubUrl = (signBtn as HTMLElement).dataset.githubUrl || '';
+      startShareCountdown(githubUrl);
+    }
+  });
+
+  const sharePopup = document.getElementById('share-popup') as HTMLDialogElement | null;
+  if (sharePopup) {
+    sharePopup.addEventListener('close', cleanupShareCountdown);
+  }
+
+  const sharePopupClose = document.getElementById('share-popup-close');
+  if (sharePopupClose) {
+    sharePopupClose.addEventListener('click', () => {
+      sharePopup?.close();
+      cleanupShareCountdown();
+    });
+  }
+
   // Reliable in-page anchor scrolling (TOC links + value/principle permalinks).
   // Native hash / CSS smooth scrolling lands short on this long, animated
   // document, so we drive the scroll ourselves (rAF) and land exactly on the
diff --git a/app/src/components/sections/Signature.astro b/app/src/components/sections/Signature.astro
index 6e44849..7a2de4c 100644
--- a/app/src/components/sections/Signature.astro
+++ b/app/src/components/sections/Signature.astro
@@ -2,6 +2,7 @@
 import { getCollection } from 'astro:content';
 import SignButton from '~/components/signature/SignButton.astro';
 import SignatureWall from '~/components/signature/SignatureWall.astro';
+import SharePopup from '~/components/signature/SharePopup.astro';
 
 const count = (await getCollection('signatories')).length;
 const registryCount = String(count).padStart(3, '0');
@@ -42,4 +43,6 @@ const registryCount = String(count).padStart(3, '0');
   </div>
 
   <SignatureWall />
+  
+  <SharePopup rank={count + 1} />
 </section>
diff --git a/app/src/components/signature/SharePopup.astro b/app/src/components/signature/SharePopup.astro
new file mode 100644
index 0000000..869c26d
--- /dev/null
+++ b/app/src/components/signature/SharePopup.astro
@@ -0,0 +1,384 @@
+---
+// Share popup modal — opens after "Sign and share" click.
+// Confetti rains across the viewport behind the card, the user's
+// signatory rank is stamped, an explicit identity statement follows, the
+// share phrase lives inside a quotation block (with a clickable link to
+// ai-driven-development.org), then a countdown announces the GitHub PR
+// opening. The Copy pill sits in the action row beside X and LinkedIn —
+// copying the full share phrase in one click. Message language tracks
+// navigator.language at open time.
+interface Props {
+  /** Projected signatory rank = current registry count + 1. */
+  rank: number;
+}
+const { rank } = Astro.props;
+---
+
+<dialog
+  id="share-popup"
+  class="share-popup"
+  data-signatory-rank={rank}
+  data-share-url="https://ai-driven-development.org/"
+  aria-labelledby="share-popup-statement"
+>
+  <div class="share-popup-card" role="document">
+    <button
+      id="share-popup-close"
+      class="share-popup-close"
+      type="button"
+      aria-label="Close share popup"
+    >
+      <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
+        <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+      </svg>
+    </button>
+
+    <p class="share-popup-kicker" aria-hidden="true">
+      <span class="share-popup-kicker-rule"></span>
+      You signed
+    </p>
+
+    <p id="share-popup-rank" class="share-popup-rank" aria-live="polite"></p>
+
+    <p id="share-popup-statement" class="share-popup-statement" aria-live="polite"></p>
+
+    <blockquote class="share-popup-quote">
+      <span class="share-popup-quote-mark" aria-hidden="true">“</span>
+      <p id="share-popup-title" class="share-popup-message"></p>
+      <span class="share-popup-quote-mark share-popup-quote-mark-end" aria-hidden="true">”</span>
+    </blockquote>
+
+    <p id="share-countdown" class="share-popup-countdown" aria-live="assertive" hidden></p>
+
+    <div class="share-popup-buttons" data-ready="false">
+      <a
+        id="share-btn-x"
+        href="#"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="share-popup-btn share-popup-btn-x"
+        aria-label="Share on X (Twitter)"
+        aria-disabled="true"
+      >
+        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false">
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="currentColor"/>
+        </svg>
+      </a>
+      <a
+        id="share-btn-linkedin"
+        href="#"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="share-popup-btn share-popup-btn-linkedin"
+        aria-label="Share on LinkedIn"
+        aria-disabled="true"
+      >
+        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false">
+          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" fill="currentColor"/>
+        </svg>
+      </a>
+      <button
+        id="share-btn-copy"
+        type="button"
+        class="share-popup-btn share-popup-btn-copy"
+        aria-label="Copy share message to clipboard"
+        disabled
+      >
+        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false">
+          <path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z" fill="currentColor"/>
+        </svg>
+      </button>
+    </div>
+
+    <p id="share-copy-feedback" class="share-popup-feedback" aria-live="polite" hidden></p>
+  </div>
+</dialog>
+
+<style>
+  .share-popup {
+    all: unset;
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background: var(--scrim);
+    backdrop-filter: blur(4px);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--dur-med) var(--ease-out),
+                visibility var(--dur-med) var(--ease-out);
+  }
+  .share-popup[open] {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  /* Card — a stamped panel: a top accent bar draws in, then the rank, the
+     identity statement, the quotation, the countdown, and the action row.
+     Generous vertical rhythm, low radius, neutral ink shadow. */
+  .share-popup-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    background: var(--paper);
+    border: 1px solid var(--rule);
+    border-radius: var(--radius-card);
+    box-shadow: var(--shadow-modal);
+    padding: clamp(32px, 5vw, 48px) clamp(28px, 4vw, 44px) clamp(28px, 4vw, 36px);
+    max-width: 480px;
+    width: 100%;
+    text-align: center;
+    animation: share-popup-in var(--dur-med) var(--ease-out);
+  }
+  .share-popup-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: clamp(32px, 6vw, 64px);
+    right: clamp(32px, 6vw, 64px);
+    height: 3px;
+    background: var(--accent);
+    transform: scaleX(0);
+    transform-origin: center;
+    animation: share-popup-rule var(--dur-med) var(--ease-out) 80ms forwards;
+  }
+
+  .share-popup-close {
+    all: unset;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-pill);
+    color: var(--ink-3);
+    cursor: pointer;
+    transition: color var(--dur-short) var(--ease-out),
+                background var(--dur-short) var(--ease-out);
+  }
+  .share-popup-close:hover {
+    color: var(--ink);
+    background: var(--paper-3);
+  }
+  .share-popup-close:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+
+  /* Kicker — uppercase tracked label with a leading accent rule */
+  .share-popup-kicker {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    align-self: center;
+    margin: 4px 0 14px;
+    font-family: var(--sans);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--accent);
+  }
+  .share-popup-kicker-rule {
+    width: clamp(40px, 8vw, 64px);
+    height: 2px;
+    background: var(--accent);
+  }
+
+  /* Rank — the hero, mirrors the seal's strong */
+  .share-popup-rank {
+    margin: 0;
+    font-family: var(--display);
+    font-weight: 800;
+    font-size: clamp(56px, 11vw, 84px);
+    line-height: 0.88;
+    letter-spacing: -0.04em;
+    color: var(--ink);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Statement — explicit identity claim under the rank */
+  .share-popup-statement {
+    margin: 10px 0 0;
+    font-family: var(--display);
+    font-weight: 600;
+    font-size: clamp(16px, 3vw, 20px);
+    line-height: 1.25;
+    letter-spacing: -0.015em;
+    color: var(--ink-2);
+  }
+
+  /* Quotation block — the share phrase as an actual citation:
+     a paper-tinted panel with oversized display quote marks, italic
+     message, left-aligned. No side-stripe; the quote marks + indent carry
+     the citation language. */
+  .share-popup-quote {
+    position: relative;
+    margin: 22px 0 0;
+    padding: 20px 22px 18px 26px;
+    background: var(--paper-2);
+    border-radius: var(--radius-input);
+    text-align: left;
+    overflow: hidden;
+  }
+  .share-popup-quote-mark {
+    position: absolute;
+    top: -10px;
+    left: 14px;
+    font-family: var(--display);
+    font-size: 46px;
+    font-weight: 800;
+    line-height: 1;
+    color: var(--accent);
+    opacity: 0.55;
+    pointer-events: none;
+  }
+  .share-popup-quote-mark-end {
+    top: auto;
+    left: auto;
+    right: 14px;
+    bottom: -22px;
+  }
+  .share-popup-message {
+    position: relative;
+    margin: 0;
+    padding-left: 4px;
+    font-family: var(--display);
+    font-style: italic;
+    font-size: clamp(15px, 2.8vw, 17px);
+    line-height: 1.55;
+    color: var(--ink);
+    text-align: left;
+  }
+  .share-popup-link {
+    color: var(--accent);
+    text-decoration: underline;
+    text-decoration-color: oklch(from var(--accent) l c h / 0.45);
+    text-underline-offset: 2px;
+    font-style: normal;
+    transition: text-decoration-color var(--dur-short) var(--ease-out);
+  }
+  .share-popup-link:hover {
+    text-decoration-color: var(--accent);
+  }
+
+  /* Countdown — supporting, not dominant. */
+  .share-popup-countdown {
+    margin: 18px 0 2px;
+    font-family: var(--sans);
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    color: var(--ink-3);
+  }
+  .share-popup-countdown strong {
+    color: var(--accent);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Buttons — platform brand fills + an accent Copy pill. */
+  .share-popup-buttons {
+    display: flex;
+    gap: 14px;
+    justify-content: center;
+    margin-top: 18px;
+  }
+  .share-popup-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 52px;
+    height: 52px;
+    border-radius: var(--radius-pill);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: transform var(--dur-short) var(--ease-out),
+                box-shadow var(--dur-short) var(--ease-out),
+                filter var(--dur-short) var(--ease-out),
+                opacity var(--dur-short) var(--ease-out);
+  }
+  .share-popup-btn:hover {
+    transform: translateY(-2px);
+    filter: brightness(1.08);
+    box-shadow: 0 8px 20px -8px oklch(from currentColor l c h / 0.35);
+  }
+  .share-popup-btn:active {
+    transform: translateY(0);
+  }
+  .share-popup-btn:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 3px;
+  }
+  .share-popup-btn-x {
+    background: var(--x-brand);
+    color: oklch(0.98 0 0);
+  }
+  .share-popup-btn-linkedin {
+    background: var(--linkedin-brand);
+    color: oklch(0.98 0 0);
+  }
+  .share-popup-btn-copy {
+    background: var(--accent);
+    color: var(--accent-ink);
+  }
+
+  .share-popup-buttons[data-ready='false'] .share-popup-btn {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .share-popup-feedback {
+    margin: 12px 0 0;
+    font-family: var(--sans);
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: var(--accent);
+  }
+
+  @keyframes share-popup-in {
+    from { opacity: 0; transform: scale(0.96) translateY(-12px); }
+    to   { opacity: 1; transform: scale(1) translateY(0); }
+  }
+  @keyframes share-popup-rule {
+    to { transform: scaleX(1); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .share-popup,
+    .share-popup-card,
+    .share-popup-card::before {
+      transition: none;
+      animation: none;
+    }
+    .share-popup-card::before { transform: scaleX(1); }
+  }
+
+  @media (max-width: 480px) {
+    .share-popup {
+      padding: 0;
+      align-items: flex-end;
+      justify-content: flex-end;
+    }
+    .share-popup-card {
+      max-width: 100%;
+      width: 100%;
+      border-radius: var(--radius-card) var(--radius-card) 0 0;
+      padding-block-end: max(28px, env(safe-area-inset-bottom));
+    }
+    .share-popup-quote-mark {
+      font-size: 40px;
+      top: -8px;
+    }
+    .share-popup-quote-mark-end {
+      bottom: -18px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/app/src/components/signature/SignButton.astro b/app/src/components/signature/SignButton.astro
index 0d39d86..fd12a81 100644
--- a/app/src/components/signature/SignButton.astro
+++ b/app/src/components/signature/SignButton.astro
@@ -14,6 +14,7 @@ statement: # optional - one-line public statement (max 280 chars)
 `;
 
 const HREF = `https://github.com/${REPO}/new/main/${TARGET_PATH}?filename=YOUR-HANDLE.yml&value=${encodeURIComponent(TEMPLATE)}`;
+const GITHUB_URL = HREF;
 
 interface Props {
   /** 'github' (default, bottom CTA) or 'aidd' (animated brand mark, sidebar). */
@@ -23,7 +24,13 @@ interface Props {
 }
 const { logo = 'github', variant = 'default' } = Astro.props;
 ---
-<a class:list={['sign-btn', variant === 'sidebar' && 'sign-btn--sidebar']} href={HREF} target="_blank" rel="noopener">
+<button 
+  id="sign-manifesto-btn"
+  class:list={['sign-btn', variant === 'sidebar' && 'sign-btn--sidebar']}
+  data-github-url={GITHUB_URL}
+  type="button"
+  aria-label="Sign and share the manifesto"
+>
   <span class="sign-btn-icon" aria-hidden="true">
     {logo === 'aidd' ? (
       <svg class="sign-logo" viewBox="0 0 100 100" focusable="false">
@@ -38,10 +45,10 @@ const { logo = 'github', variant = 'default' } = Astro.props;
     )}
   </span>
   <span class="sign-btn-body">
-    <span class="sign-btn-label">Sign the manifesto</span>
+    <span class="sign-btn-label">Sign and share</span>
     <svg class="sign-btn-sig" viewBox="0 0 240 32" aria-hidden="true" focusable="false">
       <path pathLength="100" d="M6 22 C 14 6, 24 6, 26 16 C 27 23, 21 24, 20 19 C 19 13, 30 11, 40 17 C 49 22, 53 11, 62 15 C 72 19, 70 28, 62 27 C 55 26, 60 15, 73 15 C 88 15, 96 24, 110 20 C 119 17, 122 9, 132 13 C 141 16, 138 27, 130 26 C 123 25, 128 14, 142 15 C 160 16, 172 25, 196 18 C 210 14, 222 16, 236 24" />
     </svg>
   </span>
   <span class="sign-btn-chev" aria-hidden="true">→</span>
-</a>
+</button>
diff --git a/app/src/styles/sections/signature.css b/app/src/styles/sections/signature.css
index 26e6490..a2b3418 100644
--- a/app/src/styles/sections/signature.css
+++ b/app/src/styles/sections/signature.css
@@ -701,3 +701,32 @@
 @media (prefers-reduced-motion: reduce){
   .sign-btn-sig path{ animation: none; stroke-dashoffset: 0; }
 }
+
+/* ---- Share popup confetti emojis — rain across the whole viewport on sign ---- */
+.confetti-emoji{
+  position: fixed;
+  z-index: 1200;             /* above the popup (1000) + scrim */
+  font-size: 34px;
+  line-height: 1;
+  pointer-events: none;
+  user-select: none;
+  transform: translate(-50%, -50%);
+  animation: confetti-fall 1.9s var(--ease-out) var(--delay, 0s) forwards;
+  will-change: transform, opacity;
+  filter: drop-shadow(0 2px 4px oklch(0 0 0 / 0.18));
+}
+@keyframes confetti-fall{
+  0%{
+    transform: translate(-50%, -50%) rotate(0deg) scale(0.4);
+    opacity: 0;
+  }
+  12%{ opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); }
+  80%{ opacity: 1; }
+  100%{
+    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1.1);
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce){
+  .confetti-emoji{ animation: none; display: none; }
+}
diff --git a/app/src/styles/tokens.css b/app/src/styles/tokens.css
index d65eab6..096eb43 100644
--- a/app/src/styles/tokens.css
+++ b/app/src/styles/tokens.css
@@ -24,6 +24,10 @@
   --mint: oklch(0.72 0.13 162);
   --raspberry: oklch(0.60 0.18 9);
 
+  /* External platform brand fills — used only on the share popup buttons. */
+  --x-brand: oklch(0 0 0);                   /* X / Twitter — pure black */
+  --linkedin-brand: oklch(0.519 0.174 258);  /* #0A66C2 — LinkedIn blue */
+
   /* Type — characterful display + clean sans. Mono only inside code illustrations. */
   --display: "Bricolage Grotesque", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
   --sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;

From ff2a89e3cb4e8db340d73b318d92389eb4c94daf Mon Sep 17 00:00:00 2001
From: alexsoyes <contact.alexsoyes@gmail.com>
Date: Sat, 27 Jun 2026 16:56:58 +0200
Subject: [PATCH 3/8] fix(share): use LinkedIn shareArticle with mini=true +
 inline title/summary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

share-offsite redirects internally to shareArticle but strips every query
param except url — the popup opens with a bare link, no pre-filled post
text, and no compact popup affordance. Switch to shareArticle directly
with mini=true (compact popup), url (canonical www URL), title (mirrors
og:title, localized FR/EN), summary (pre-fills the post with the full
share message — same UX as X's text= param), and source (bare domain).

Also add og:image:type and og:image:alt to Page.astro — strengthens the
LinkedIn Open Graph preview card.
---
 app/src/components/ClientApp.astro   | 14 ++++++++++++--
 app/src/components/layout/Page.astro |  2 ++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/src/components/ClientApp.astro b/app/src/components/ClientApp.astro
index e6838f6..42a8603 100644
--- a/app/src/components/ClientApp.astro
+++ b/app/src/components/ClientApp.astro
@@ -17,7 +17,7 @@
   // then a countdown announces the GitHub PR opening. The Copy pill sits in
   // the action row beside X and LinkedIn. Message language tracks
   // navigator.language.
-  const SHARE_URL = 'https://ai-driven-development.org/';
+  const SHARE_URL = 'https://www.ai-driven-development.org/';
   const URL_LABEL = 'ai-driven-development.org';
   const URL_TOKEN = '\u0001URL\u0001';
   let shareCountdownInterval: ReturnType<typeof setInterval> | null = null;
@@ -136,7 +136,17 @@
     if (copyFeedback) copyFeedback.hidden = true;
 
     const xHref = `https://twitter.com/intent/tweet?text=${encodeURIComponent(plain)}`;
-    const inHref = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(SHARE_URL)}`;
+    // shareArticle (not share-offsite) so the popup is compact (mini=true) and
+    // the post text is pre-filled via the summary param — share-offsite strips
+    // everything but url and shows a bare link. Title mirrors og:title; source
+    // is the bare domain. All values URL-encoded.
+    const fr = isFrench(lang);
+    const inTitle = encodeURIComponent(
+      fr ? 'Le Manifeste du AI-Driven Development' : 'The Manifesto for AI-Driven Development'
+    );
+    const inSummary = encodeURIComponent(plain);
+    const inSource = encodeURIComponent(URL_LABEL);
+    const inHref = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(SHARE_URL)}&title=${inTitle}&summary=${inSummary}&source=${inSource}`;
     document.getElementById('share-btn-x')?.setAttribute('href', xHref);
     document.getElementById('share-btn-linkedin')?.setAttribute('href', inHref);
 
diff --git a/app/src/components/layout/Page.astro b/app/src/components/layout/Page.astro
index fb5ff8f..097f0c5 100644
--- a/app/src/components/layout/Page.astro
+++ b/app/src/components/layout/Page.astro
@@ -74,6 +74,8 @@ const pageTitle = title === SITE.name ? title : `${title} | ${SITE.shortName}`;
     <meta property="og:image" content={ogImage} />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:alt" content={`${SITE.name} — cover`} />
     <meta property="og:url" content={canonical} />
     <meta property="og:type" content="website" />
     <meta property="og:locale" content={SITE.locale} />

From 0c75c2492590824550a5e5a4c0046fbb028d4b2e Mon Sep 17 00:00:00 2001
From: alexsoyes <contact.alexsoyes@gmail.com>
Date: Sat, 27 Jun 2026 20:59:03 +0200
Subject: [PATCH 4/8] fix(share): flat summary + sized popup for reliable
 LinkedIn composer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LinkedIn's composer has long been documented (SO q/56373068, q/51189486)
to render the shareArticle `summary` param inconsistently — and may
silently drop it entirely when the value contains a literal newline
(`%0A`). Our previous summary was two lines joined by `\n` (the
 Clipboard / X context expects multiline), so when the shareArticle popup
 opened post-login, the post body appeared empty.

Fix: build a separate flat variant of the share message that uses an
em-dash separator on a single line (`buildMessageFlat`), used only for
the LinkedIn `summary` param. X's intent/tweet?text= and the Copy pill
keep the original multi-line text (Twitter renders it reliably).

Also intercept clicks on the X and LinkedIn share buttons and open them
via `window.open(href, 'aidd-share', 'width=750,height=620')`. The
750×620 size matches react-share's LinkedinShareButton and lets
LinkedIn's `mini=true` flag actually pick its compact share layout —
opening the same href as a plain target=_blank tab falls through to the
default 200 signatories list view and looks 'broken' to the user.

Sources:
- react-share master (LinkedinShareButton.tsx)
- Microsoft Learn, Share Plugin (last updated 2022-03-31) confirms
  shareArticle endpoint
- Empirical curl -I (2026-06-27) confirms shareArticle preserves all
  params through the login 302; share-offsite strips everything except
  `url`.
---
 app/src/components/ClientApp.astro | 39 ++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/app/src/components/ClientApp.astro b/app/src/components/ClientApp.astro
index 42a8603..2ddb222 100644
--- a/app/src/components/ClientApp.astro
+++ b/app/src/components/ClientApp.astro
@@ -48,6 +48,20 @@
     return `${line1}\n${line2}`.replaceAll(URL_TOKEN, SHARE_URL);
   }
 
+  // Single-line variant for LinkedIn shareArticle summary — LinkedIn's composer
+  // historically renders `%0A` (newline) inconsistently (SO q/56373068,
+  // q/51189486) and may silently drop the summary entirely when it contains
+  // one. Use a dash separator on a single line so LinkedIn reliably pre-fills
+  // the post body.
+  function buildMessageFlat(rank: number, lang: string): string {
+    const fr = isFrench(lang);
+    const line1 = fr
+      ? `Je viens de signer le Manifeste du AI-Driven Development en tant que signataire n°${rank}.`
+      : `I just signed the AI-Driven Development Manifesto as signatory #${rank}.`;
+    const line2 = fr ? `Rejoignez-moi → ${URL_TOKEN}` : `Join me → ${URL_TOKEN}`;
+    return `${line1} — ${line2}`.replaceAll(URL_TOKEN, SHARE_URL);
+  }
+
   function buildMessageHTML(rank: number, lang: string): string {
     const fr = isFrench(lang);
     const line1 = fr
@@ -136,15 +150,18 @@
     if (copyFeedback) copyFeedback.hidden = true;
 
     const xHref = `https://twitter.com/intent/tweet?text=${encodeURIComponent(plain)}`;
-    // shareArticle (not share-offsite) so the popup is compact (mini=true) and
-    // the post text is pre-filled via the summary param — share-offsite strips
-    // everything but url and shows a bare link. Title mirrors og:title; source
-    // is the bare domain. All values URL-encoded.
+    // shareArticle (not share-offsite) preserves the title/summary/source
+    // params through the login redirect — share-offsite strips everything
+    // except url. Summary MUST be a single line: LinkedIn's composer has
+    // historically rendered `%0A` inconsistently and can silently drop the
+    // entire summary when it contains a newline (SO q/56373068, q/51189486).
+    // We use a flat variant with a dash separator for that reason.
+    // Title mirrors og:title; source is the bare domain.
     const fr = isFrench(lang);
     const inTitle = encodeURIComponent(
       fr ? 'Le Manifeste du AI-Driven Development' : 'The Manifesto for AI-Driven Development'
     );
-    const inSummary = encodeURIComponent(plain);
+    const inSummary = encodeURIComponent(buildMessageFlat(rank, lang));
     const inSource = encodeURIComponent(URL_LABEL);
     const inHref = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(SHARE_URL)}&title=${inTitle}&summary=${inSummary}&source=${inSource}`;
     document.getElementById('share-btn-x')?.setAttribute('href', xHref);
@@ -210,6 +227,18 @@
       e.preventDefault();
       const githubUrl = (signBtn as HTMLElement).dataset.githubUrl || '';
       startShareCountdown(githubUrl);
+      return;
+    }
+    // Open X / LinkedIn share links in a compact popup (750x600) instead of a
+    // background tab. react-share uses this size; the LinkedIn shareArticle
+    // endpoint's `mini=true` hints at the same intent but only fires when the
+    // window is actually sized like a popup, not a full browser tab.
+    const shareLink = (e.target as HTMLElement).closest<HTMLAnchorElement>('#share-btn-x, #share-btn-linkedin');
+    if (shareLink && shareLink.getAttribute('aria-disabled') !== 'true') {
+      e.preventDefault();
+      const href = shareLink.getAttribute('href') || '#';
+      const features = 'noopener,noreferrer,width=750,height=620,scrollbars=yes';
+      window.open(href, 'aidd-share', features);
     }
   });
 

From 1ebae87b0a98cf4fa65c6e0763b56d60356f0300 Mon Sep 17 00:00:00 2001
From: alexsoyes <contact.alexsoyes@gmail.com>
Date: Sat, 27 Jun 2026 21:42:24 +0200
Subject: [PATCH 5/8] fix(share): LinkedIn button uses Web Share API then
 clipboard+hint fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LinkedIn has historically dropped the shareArticle `summary` param
during pre-fill (SO q/56373068, q/51189486 — long-standing complaints
now confirmed by LinkedIn removing all non-OAuth share docs). The
composer body opens empty even when the URL carries summary=title=.
The official IN/Share plugin exposes only `data-url` — no text/title/
summary attribute exists — confirming LinkedIn no longer accepts
URL-based composer text pre-fill.

New strategy for the LinkedIn button:

1. **Web Share API first** — if `navigator.share({text, url, title})` is
   available (iOS/Android, modern Chrome/Edge desktop), call it. The
   native OS share sheet pre-fills LinkedIn's composer body `text`
   reliably — this is the only path that still works end-to-end in 2025.

2. **Clipboard + popup + hint fallback** — if Web Share isn't available,
   copy the share message to the clipboard, open the LinkedIn popup
   (750×620, shareArticle url-only), and surface a small hint next to
   the button: 'Message copied — paste it on LinkedIn' (FR: 'Message
   copié — collez-le sur LinkedIn'). The user is one Cmd/Ctrl-V away from
   the share text being in the composer.

X button stays unchanged — Twitter reliably honors `?text=` including
newlines, so the public body is pre-filled as before.

Files:
- ClientApp.astro: dodge Web Share detection via `navigator.share` +
  `navigator.canShare`, async clipboard.writeText with try/catch so the
  popup opens regardless of permission.
- SharePopup.astro: add `#share-linkedin-hint` element + styling (LinkedIn
  blue tinted pill, distinct from the green copy-confirmation feedback).
---
 app/src/components/ClientApp.astro            | 62 ++++++++++++++++---
 app/src/components/signature/SharePopup.astro | 17 +++++
 2 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/app/src/components/ClientApp.astro b/app/src/components/ClientApp.astro
index 2ddb222..b9ba7db 100644
--- a/app/src/components/ClientApp.astro
+++ b/app/src/components/ClientApp.astro
@@ -229,16 +229,60 @@
       startShareCountdown(githubUrl);
       return;
     }
-    // Open X / LinkedIn share links in a compact popup (750x600) instead of a
-    // background tab. react-share uses this size; the LinkedIn shareArticle
-    // endpoint's `mini=true` hints at the same intent but only fires when the
-    // window is actually sized like a popup, not a full browser tab.
-    const shareLink = (e.target as HTMLElement).closest<HTMLAnchorElement>('#share-btn-x, #share-btn-linkedin');
-    if (shareLink && shareLink.getAttribute('aria-disabled') !== 'true') {
+    // X button — opens in a sized popup, Twitter reliably pre-fills the
+    // composer body from the `text=` query param.
+    const xLink = (e.target as HTMLElement).closest<HTMLAnchorElement>('#share-btn-x');
+    if (xLink && xLink.getAttribute('aria-disabled') !== 'true') {
       e.preventDefault();
-      const href = shareLink.getAttribute('href') || '#';
-      const features = 'noopener,noreferrer,width=750,height=620,scrollbars=yes';
-      window.open(href, 'aidd-share', features);
+      window.open(xLink.getAttribute('href') || '#', 'aidd-share-x', 'noopener,noreferrer,width=750,height=620,scrollbars=yes');
+      return;
+    }
+    // LinkedIn button — LinkedIn has deprecated pre-filling the composer body
+    // via URL params. `shareArticle?summary=...` is silently ignored in the
+    // current composer (SO q/56373068 etc., confirmed: the official IN/Share
+    // plugin exposes only `data-url`). Strategy:
+    //   1. Web Share API (mobile + Chrome/Edge desktop) → opens the OS share
+    //      sheet, which DOES pre-fill LinkedIn's composer `text` reliably
+    //      (the OS share target contract carries `text` + `url`).
+    //   2. Fallback → copy the message to clipboard, open the LinkedIn popup
+    //      with `url` only, and surface a "paste it in LinkedIn" hint next to
+    //      the button so the user knows the body is already in their
+    //      clipboard.
+    const liLink = (e.target as HTMLElement).closest<HTMLAnchorElement>('#share-btn-linkedin');
+    if (liLink && liLink.getAttribute('aria-disabled') !== 'true') {
+      e.preventDefault();
+      const href = liLink.getAttribute('href') || '#';
+      const popup = document.getElementById('share-popup') as HTMLDialogElement | null;
+      const rank = popup ? Number(popup.dataset.signatoryRank) || 1 : 1;
+      const lang = navigator.language || 'en';
+      const fr = isFrench(lang);
+      const message = buildMessagePlain(rank, lang);
+      const title = fr ? 'Le Manifeste du AI-Driven Development' : 'The Manifesto for AI-Driven Development';
+      const nav = navigator as Navigator & { share?: (d: unknown) => Promise<void>; canShare?: (d: unknown) => boolean };
+      if (typeof nav.share === 'function' && (typeof nav.canShare !== 'function' || nav.canShare({ text: message, url: SHARE_URL }))) {
+        nav.share({ text: message, url: SHARE_URL, title }).catch(() => {
+          // User dismissed or denied — fall back to popup.
+          window.open(href, 'aidd-share-li', 'noopener,noreferrer,width=750,height=620,scrollbars=yes');
+        });
+        return;
+      }
+      // Fallback — silently copy to clipboard, then open the popup, then
+      // show a hint. Wrap clipboard call in try/catch so the popup opens
+      // regardless of clipboard permission.
+      (async () => {
+        let copied = false;
+        try { await navigator.clipboard.writeText(message); copied = true; } catch {}
+        const features = 'noopener,noreferrer,width=750,height=620,scrollbars=yes';
+        window.open(href, 'aidd-share-li', features);
+        if (copied) {
+          const hint = document.getElementById('share-linkedin-hint');
+          if (hint) {
+            hint.textContent = fr ? 'Message copié — collez-le sur LinkedIn' : 'Message copied — paste it on LinkedIn';
+            hint.hidden = false;
+            setTimeout(() => { hint.hidden = true; }, 4000);
+          }
+        }
+      })();
     }
   });
 
diff --git a/app/src/components/signature/SharePopup.astro b/app/src/components/signature/SharePopup.astro
index 869c26d..b6ceebb 100644
--- a/app/src/components/signature/SharePopup.astro
+++ b/app/src/components/signature/SharePopup.astro
@@ -91,6 +91,7 @@ const { rank } = Astro.props;
     </div>
 
     <p id="share-copy-feedback" class="share-popup-feedback" aria-live="polite" hidden></p>
+    <p id="share-linkedin-hint" class="share-popup-feedback share-popup-linkedin-hint" aria-live="polite" hidden></p>
   </div>
 </dialog>
 
@@ -343,6 +344,22 @@ const { rank } = Astro.props;
     color: var(--accent);
   }
 
+  /* LinkedIn "paste here" hint — distinct from the copy-confirm feedback:
+     this is an action-guidance message, so it gets the LinkedIn blue and
+     sits alongside the buttons to encourage the paste action. */
+  .share-popup-linkedin-hint {
+    color: var(--linkedin-brand);
+    border: 1px solid oklch(from var(--linkedin-brand) l c h / 0.32);
+    background: oklch(from var(--linkedin-brand) l c h / 0.08);
+    border-radius: var(--radius-pill);
+    padding: 8px 14px;
+    margin: 10px auto 0;
+    max-width: min(90%, 380px);
+    line-height: 1.4;
+    font-weight: 600;
+    animation: share-popup-in var(--dur-med) var(--ease-out);
+  }
+
   @keyframes share-popup-in {
     from { opacity: 0; transform: scale(0.96) translateY(-12px); }
     to   { opacity: 1; transform: scale(1) translateY(0); }

From 08d653a58c2dc109f63f94680536176290be3bd4 Mon Sep 17 00:00:00 2001
From: alexsoyes <contact.alexsoyes@gmail.com>
Date: Sat, 27 Jun 2026 22:14:51 +0200
Subject: [PATCH 6/8] refactor(share): use only native Web Share API for
 LinkedIn, hide if unavailable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LinkedIn has deprecated URL-based composer pre-fill. The only path that
still reliably pre-fills LinkedIn's composer body in 2025 is the native
Web Share API (the OS share sheet carries `text` + `url`, and LinkedIn's
share target honors both). Replace the previous strategy (Web Share →
clipboard + popup + hint fallback) with a clean single approach:

- LinkedIn button is a `<button>` (was an `<a href="...">`); its click
  handler unconditionally calls `navigator.share({text, url, title})`.
- When `navigator.share` is unavailable (older browsers), the button is
  hidden at popup-open time via `liLink.hidden = true`, so the action
  row degrades cleanly to X + Copy.
- Drops the previous `buildMessageFlat` helper, the shareArticle URL
  construction, the clipboard-with-hint fallback, and the
  `share-linkedin-hint` element + its CSS.

X button unchanged — Twitter reliably honors `?text=` with newlines, so
the URL-intent popup keeps pre-filling the composer.

Sources:
- Stack Overflow q/56373068, q/51189486 (LinkedIn summary param not
  pre-filled, long-standing reports).
- Microsoft Learn share-plugin doc (last updated 2022-03-31) confirms
  IN/Share plugin exposes only `data-url`.
---
 app/src/components/ClientApp.astro            | 97 ++++++-------------
 app/src/components/signature/SharePopup.astro | 27 +-----
 2 files changed, 32 insertions(+), 92 deletions(-)

diff --git a/app/src/components/ClientApp.astro b/app/src/components/ClientApp.astro
index b9ba7db..305be64 100644
--- a/app/src/components/ClientApp.astro
+++ b/app/src/components/ClientApp.astro
@@ -14,9 +14,13 @@
   // Share popup — confetti rains across the viewport on sign, the user's
   // rank is stamped, an identity statement follows, the share phrase lives
   // in a quotation block (with a clickable link to ai-driven-development.org),
-  // then a countdown announces the GitHub PR opening. The Copy pill sits in
-  // the action row beside X and LinkedIn. Message language tracks
-  // navigator.language.
+  // then a countdown announces the GitHub PR opening. The action row carries
+  // X (opens a sized popup), Copy (clipboard), and the LinkedIn button — but
+  // LinkedIn is shown only when the native browser share API is available
+  // (`navigator.share`); it's the only path that pre-fills the LinkedIn
+  // composer body in 2025, and no URL-only fallback is reliable. When
+  // unsupported, the LinkedIn button is hidden so the row degrades cleanly
+  // to X + Copy. Message language tracks navigator.language.
   const SHARE_URL = 'https://www.ai-driven-development.org/';
   const URL_LABEL = 'ai-driven-development.org';
   const URL_TOKEN = '\u0001URL\u0001';
@@ -48,20 +52,6 @@
     return `${line1}\n${line2}`.replaceAll(URL_TOKEN, SHARE_URL);
   }
 
-  // Single-line variant for LinkedIn shareArticle summary — LinkedIn's composer
-  // historically renders `%0A` (newline) inconsistently (SO q/56373068,
-  // q/51189486) and may silently drop the summary entirely when it contains
-  // one. Use a dash separator on a single line so LinkedIn reliably pre-fills
-  // the post body.
-  function buildMessageFlat(rank: number, lang: string): string {
-    const fr = isFrench(lang);
-    const line1 = fr
-      ? `Je viens de signer le Manifeste du AI-Driven Development en tant que signataire n°${rank}.`
-      : `I just signed the AI-Driven Development Manifesto as signatory #${rank}.`;
-    const line2 = fr ? `Rejoignez-moi → ${URL_TOKEN}` : `Join me → ${URL_TOKEN}`;
-    return `${line1} — ${line2}`.replaceAll(URL_TOKEN, SHARE_URL);
-  }
-
   function buildMessageHTML(rank: number, lang: string): string {
     const fr = isFrench(lang);
     const line1 = fr
@@ -150,22 +140,15 @@
     if (copyFeedback) copyFeedback.hidden = true;
 
     const xHref = `https://twitter.com/intent/tweet?text=${encodeURIComponent(plain)}`;
-    // shareArticle (not share-offsite) preserves the title/summary/source
-    // params through the login redirect — share-offsite strips everything
-    // except url. Summary MUST be a single line: LinkedIn's composer has
-    // historically rendered `%0A` inconsistently and can silently drop the
-    // entire summary when it contains a newline (SO q/56373068, q/51189486).
-    // We use a flat variant with a dash separator for that reason.
-    // Title mirrors og:title; source is the bare domain.
-    const fr = isFrench(lang);
-    const inTitle = encodeURIComponent(
-      fr ? 'Le Manifeste du AI-Driven Development' : 'The Manifesto for AI-Driven Development'
-    );
-    const inSummary = encodeURIComponent(buildMessageFlat(rank, lang));
-    const inSource = encodeURIComponent(URL_LABEL);
-    const inHref = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(SHARE_URL)}&title=${inTitle}&summary=${inSummary}&source=${inSource}`;
     document.getElementById('share-btn-x')?.setAttribute('href', xHref);
-    document.getElementById('share-btn-linkedin')?.setAttribute('href', inHref);
+    // LinkedIn: no `href` is set on the link — clicking it always routes
+    // through `navigator.share()` in the click handler, which is the only
+    // path that pre-fills the composer body in 2025. If Web Share isn't
+    // available, hide the LinkedIn button entirely on this popup open so
+    // the row degrades cleanly to X + Copy.
+    const liLink = document.getElementById('share-btn-linkedin');
+    const nav = navigator as Navigator & { share?: (d: unknown) => Promise<void> };
+    if (liLink) liLink.hidden = typeof nav.share !== 'function';
 
     resetShareButtons(false);
 
@@ -238,51 +221,27 @@
       return;
     }
     // LinkedIn button — LinkedIn has deprecated pre-filling the composer body
-    // via URL params. `shareArticle?summary=...` is silently ignored in the
-    // current composer (SO q/56373068 etc., confirmed: the official IN/Share
-    // plugin exposes only `data-url`). Strategy:
-    //   1. Web Share API (mobile + Chrome/Edge desktop) → opens the OS share
-    //      sheet, which DOES pre-fill LinkedIn's composer `text` reliably
-    //      (the OS share target contract carries `text` + `url`).
-    //   2. Fallback → copy the message to clipboard, open the LinkedIn popup
-    //      with `url` only, and surface a "paste it in LinkedIn" hint next to
-    //      the button so the user knows the body is already in their
-    //      clipboard.
-    const liLink = (e.target as HTMLElement).closest<HTMLAnchorElement>('#share-btn-linkedin');
-    if (liLink && liLink.getAttribute('aria-disabled') !== 'true') {
+    // via URL params (`shareArticle?summary=...` is silently ignored; the
+    // official IN/Share plugin exposes only `data-url`). The only path that
+    // still reliably pre-fills LinkedIn's composer body in 2025 is the native
+    // Web Share API: the OS share sheet carries `text` + `url`, and LinkedIn's
+    // share target honors both. We use it exclusively — no clipboard gymnastics,
+    // no popup fallback. If `navigator.share` is unavailable (older browsers),
+    // the LinkedIn button is hidden on popup open (see `startShareCountdown`)
+    // so the row degrades cleanly to X + Copy.
+    const liLink = (e.target as HTMLElement).closest<HTMLButtonElement>('#share-btn-linkedin');
+    if (liLink && !liLink.disabled) {
       e.preventDefault();
-      const href = liLink.getAttribute('href') || '#';
       const popup = document.getElementById('share-popup') as HTMLDialogElement | null;
       const rank = popup ? Number(popup.dataset.signatoryRank) || 1 : 1;
       const lang = navigator.language || 'en';
       const fr = isFrench(lang);
       const message = buildMessagePlain(rank, lang);
       const title = fr ? 'Le Manifeste du AI-Driven Development' : 'The Manifesto for AI-Driven Development';
-      const nav = navigator as Navigator & { share?: (d: unknown) => Promise<void>; canShare?: (d: unknown) => boolean };
-      if (typeof nav.share === 'function' && (typeof nav.canShare !== 'function' || nav.canShare({ text: message, url: SHARE_URL }))) {
-        nav.share({ text: message, url: SHARE_URL, title }).catch(() => {
-          // User dismissed or denied — fall back to popup.
-          window.open(href, 'aidd-share-li', 'noopener,noreferrer,width=750,height=620,scrollbars=yes');
-        });
-        return;
+      const nav = navigator as Navigator & { share?: (d: unknown) => Promise<void> };
+      if (typeof nav.share === 'function') {
+        nav.share({ text: message, url: SHARE_URL, title }).catch(() => { /* user dismissed */ });
       }
-      // Fallback — silently copy to clipboard, then open the popup, then
-      // show a hint. Wrap clipboard call in try/catch so the popup opens
-      // regardless of clipboard permission.
-      (async () => {
-        let copied = false;
-        try { await navigator.clipboard.writeText(message); copied = true; } catch {}
-        const features = 'noopener,noreferrer,width=750,height=620,scrollbars=yes';
-        window.open(href, 'aidd-share-li', features);
-        if (copied) {
-          const hint = document.getElementById('share-linkedin-hint');
-          if (hint) {
-            hint.textContent = fr ? 'Message copié — collez-le sur LinkedIn' : 'Message copied — paste it on LinkedIn';
-            hint.hidden = false;
-            setTimeout(() => { hint.hidden = true; }, 4000);
-          }
-        }
-      })();
     }
   });
 
diff --git a/app/src/components/signature/SharePopup.astro b/app/src/components/signature/SharePopup.astro
index b6ceebb..388f5ec 100644
--- a/app/src/components/signature/SharePopup.astro
+++ b/app/src/components/signature/SharePopup.astro
@@ -64,19 +64,17 @@ const { rank } = Astro.props;
           <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="currentColor"/>
         </svg>
       </a>
-      <a
+      <button
         id="share-btn-linkedin"
-        href="#"
-        target="_blank"
-        rel="noopener noreferrer"
+        type="button"
         class="share-popup-btn share-popup-btn-linkedin"
         aria-label="Share on LinkedIn"
-        aria-disabled="true"
+        disabled
       >
         <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false">
           <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" fill="currentColor"/>
         </svg>
-      </a>
+      </button>
       <button
         id="share-btn-copy"
         type="button"
@@ -91,7 +89,6 @@ const { rank } = Astro.props;
     </div>
 
     <p id="share-copy-feedback" class="share-popup-feedback" aria-live="polite" hidden></p>
-    <p id="share-linkedin-hint" class="share-popup-feedback share-popup-linkedin-hint" aria-live="polite" hidden></p>
   </div>
 </dialog>
 
@@ -344,22 +341,6 @@ const { rank } = Astro.props;
     color: var(--accent);
   }
 
-  /* LinkedIn "paste here" hint — distinct from the copy-confirm feedback:
-     this is an action-guidance message, so it gets the LinkedIn blue and
-     sits alongside the buttons to encourage the paste action. */
-  .share-popup-linkedin-hint {
-    color: var(--linkedin-brand);
-    border: 1px solid oklch(from var(--linkedin-brand) l c h / 0.32);
-    background: oklch(from var(--linkedin-brand) l c h / 0.08);
-    border-radius: var(--radius-pill);
-    padding: 8px 14px;
-    margin: 10px auto 0;
-    max-width: min(90%, 380px);
-    line-height: 1.4;
-    font-weight: 600;
-    animation: share-popup-in var(--dur-med) var(--ease-out);
-  }
-
   @keyframes share-popup-in {
     from { opacity: 0; transform: scale(0.96) translateY(-12px); }
     to   { opacity: 1; transform: scale(1) translateY(0); }

From d1814888032cd8767722ecfe6bfac97cf02a80e3 Mon Sep 17 00:00:00 2001
From: alexsoyes <contact.alexsoyes@gmail.com>
Date: Sun, 28 Jun 2026 11:27:23 +0200
Subject: [PATCH 7/8] revert(share): bring back clipboard fallback for LinkedIn
 (Option B)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous commit (`08d653a`) hid the LinkedIn button entirely when
`navigator.share()` was unavailable. Problem: Firefox desktop still
doesn't ship Web Share in 2025, and Firefox has higher-than-average
share among the AI-driven-dev audience. Hiding the button entirely on
~5-10% of users is a usage-scope regression.

Revert to the dual-path strategy:
1. `navigator.share({text, url, title})` first — primary path, reliable
   pre-fill for Chrome/Edge desktop, iOS/Android, modern browsers.
2. Clipboard copy + LinkedIn url-only popup + localized hint
   ('Message copied — paste it on LinkedIn' / 'Message copié — collez-le
   sur LinkedIn') — fallback for Firefox and older browsers. The user is
   one Cmd/Ctrl-V away from the composer body being filled.

The hint only surfaces in the fallback branch, so the common Chromium
path remains visually silent. The button stays visible on every browser,
preserving brand identity and affordance.

Restores:
- the `#share-linkedin-hint` element in SharePopup.astro
- the .share-popup-linkedin-hint CSS
- the clipboard + popup + hint logic in the LinkedIn click handler
- the header comment describing the dual-path strategy

Verified via Playwright in 4 scenarios:
- Web Share available → navigator.share called, hint hidden
- Web Share unavailable → clipboard copy + popup 750x620 + hint visible
- FR fallback → 'Message copié — collez-le sur LinkedIn'
- X button unchanged (intent/tweet popup)
---
 app/src/components/ClientApp.astro            | 66 ++++++++++++-------
 app/src/components/signature/SharePopup.astro | 18 +++++
 2 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/app/src/components/ClientApp.astro b/app/src/components/ClientApp.astro
index 305be64..6fd6d87 100644
--- a/app/src/components/ClientApp.astro
+++ b/app/src/components/ClientApp.astro
@@ -15,12 +15,12 @@
   // rank is stamped, an identity statement follows, the share phrase lives
   // in a quotation block (with a clickable link to ai-driven-development.org),
   // then a countdown announces the GitHub PR opening. The action row carries
-  // X (opens a sized popup), Copy (clipboard), and the LinkedIn button — but
-  // LinkedIn is shown only when the native browser share API is available
-  // (`navigator.share`); it's the only path that pre-fills the LinkedIn
-  // composer body in 2025, and no URL-only fallback is reliable. When
-  // unsupported, the LinkedIn button is hidden so the row degrades cleanly
-  // to X + Copy. Message language tracks navigator.language.
+  // X (sized popup, Twitter pre-fills via ?text=), Copy (clipboard), and
+  // LinkedIn — which is always visible. LinkedIn click uses `navigator.share()`
+  // when available (reliable pre-fill) or falls back to clipboard-copy +
+  // LinkedIn popup + a "paste here" hint (Firefox / older browsers in 2025
+  // still lack Web Share but can Copy → Cmd+V). Message language tracks
+  // navigator.language.
   const SHARE_URL = 'https://www.ai-driven-development.org/';
   const URL_LABEL = 'ai-driven-development.org';
   const URL_TOKEN = '\u0001URL\u0001';
@@ -141,15 +141,11 @@
 
     const xHref = `https://twitter.com/intent/tweet?text=${encodeURIComponent(plain)}`;
     document.getElementById('share-btn-x')?.setAttribute('href', xHref);
-    // LinkedIn: no `href` is set on the link — clicking it always routes
-    // through `navigator.share()` in the click handler, which is the only
-    // path that pre-fills the composer body in 2025. If Web Share isn't
-    // available, hide the LinkedIn button entirely on this popup open so
-    // the row degrades cleanly to X + Copy.
-    const liLink = document.getElementById('share-btn-linkedin');
-    const nav = navigator as Navigator & { share?: (d: unknown) => Promise<void> };
-    if (liLink) liLink.hidden = typeof nav.share !== 'function';
-
+    // LinkedIn is a `<button>` (no href) — the click handler decides between
+    // `navigator.share()` (pre-fills composer when Web Share is available) and
+    // a clipboard + popup fallback (Firefox / older browsers). The button is
+    // always visible: a clipboard roundtrip is one Cmd/Ctrl-V away for users
+    // whose browser lacks Web Share.
     resetShareButtons(false);
 
     let countdown = 3;
@@ -223,12 +219,16 @@
     // LinkedIn button — LinkedIn has deprecated pre-filling the composer body
     // via URL params (`shareArticle?summary=...` is silently ignored; the
     // official IN/Share plugin exposes only `data-url`). The only path that
-    // still reliably pre-fills LinkedIn's composer body in 2025 is the native
-    // Web Share API: the OS share sheet carries `text` + `url`, and LinkedIn's
-    // share target honors both. We use it exclusively — no clipboard gymnastics,
-    // no popup fallback. If `navigator.share` is unavailable (older browsers),
-    // the LinkedIn button is hidden on popup open (see `startShareCountdown`)
-    // so the row degrades cleanly to X + Copy.
+    // still reliably pre-fills LinkedIn's composer body in 2025 is the
+    // native Web Share API: the OS share sheet carries `text` + `url`, and
+    // LinkedIn's share target honors both. Strategy:
+    //   1. `navigator.share()` when available (iOS / Android / Chrome / Edge
+    //      desktop) → reliable pre-fill via the OS share sheet.
+    //   2. Clipboard + LinkedIn popup + a "paste here" hint (Firefox +
+    //      older browsers, which still lack Web Share in 2025) → one Cmd/Ctrl-V
+    //      away from the composer body being filled.
+    // The button stays visible in both cases; the hint only surfaces in the
+    // fallback branch, so the common path is unaffected.
     const liLink = (e.target as HTMLElement).closest<HTMLButtonElement>('#share-btn-linkedin');
     if (liLink && !liLink.disabled) {
       e.preventDefault();
@@ -238,10 +238,28 @@
       const fr = isFrench(lang);
       const message = buildMessagePlain(rank, lang);
       const title = fr ? 'Le Manifeste du AI-Driven Development' : 'The Manifesto for AI-Driven Development';
-      const nav = navigator as Navigator & { share?: (d: unknown) => Promise<void> };
-      if (typeof nav.share === 'function') {
-        nav.share({ text: message, url: SHARE_URL, title }).catch(() => { /* user dismissed */ });
+      const nav = navigator as Navigator & { share?: (d: unknown) => Promise<void>; canShare?: (d: unknown) => boolean };
+      if (typeof nav.share === 'function' && (typeof nav.canShare !== 'function' || nav.canShare({ text: message, url: SHARE_URL }))) {
+        nav.share({ text: message, url: SHARE_URL, title }).catch(() => { /* dismissed */ });
+        return;
       }
+      // Fallback — copy to clipboard (best-effort), open the LinkedIn popup
+      // (url-only), and surface the localized hint so the user knows the
+      // body is already in their clipboard, one paste away.
+      (async () => {
+        let copied = false;
+        try { await navigator.clipboard.writeText(message); copied = true; } catch {}
+        const features = 'noopener,noreferrer,width=750,height=620,scrollbars=yes';
+        window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(SHARE_URL)}`, 'aidd-share-li', features);
+        if (copied) {
+          const hint = document.getElementById('share-linkedin-hint');
+          if (hint) {
+            hint.textContent = fr ? 'Message copié — collez-le sur LinkedIn' : 'Message copied — paste it on LinkedIn';
+            hint.hidden = false;
+            setTimeout(() => { hint.hidden = true; }, 4000);
+          }
+        }
+      })();
     }
   });
 
diff --git a/app/src/components/signature/SharePopup.astro b/app/src/components/signature/SharePopup.astro
index 388f5ec..5d9bbfb 100644
--- a/app/src/components/signature/SharePopup.astro
+++ b/app/src/components/signature/SharePopup.astro
@@ -89,6 +89,7 @@ const { rank } = Astro.props;
     </div>
 
     <p id="share-copy-feedback" class="share-popup-feedback" aria-live="polite" hidden></p>
+    <p id="share-linkedin-hint" class="share-popup-feedback share-popup-linkedin-hint" aria-live="polite" hidden></p>
   </div>
 </dialog>
 
@@ -341,6 +342,23 @@ const { rank } = Astro.props;
     color: var(--accent);
   }
 
+  /* LinkedIn "paste here" hint — distinct from the copy-confirm feedback:
+     this is an action-guidance message surfaced only in the no-Web-Share
+     fallback. Tinted blue so it reads as LinkedIn-bound, sized as a pill so
+     it visually separate-counts from the confirmation line above it. */
+  .share-popup-linkedin-hint {
+    color: var(--linkedin-brand);
+    border: 1px solid oklch(from var(--linkedin-brand) l c h / 0.32);
+    background: oklch(from var(--linkedin-brand) l c h / 0.08);
+    border-radius: var(--radius-pill);
+    padding: 8px 14px;
+    margin: 10px auto 0;
+    max-width: min(90%, 380px);
+    line-height: 1.4;
+    font-weight: 600;
+    animation: share-popup-in var(--dur-med) var(--ease-out);
+  }
+
   @keyframes share-popup-in {
     from { opacity: 0; transform: scale(0.96) translateY(-12px); }
     to   { opacity: 1; transform: scale(1) translateY(0); }

From d358b079506bd84f72d3ff4f1caaa0226819ca7b Mon Sep 17 00:00:00 2001
From: alexsoyes <contact.alexsoyes@gmail.com>
Date: Sun, 28 Jun 2026 18:54:42 +0200
Subject: [PATCH 8/8] tweak(share): simplify FR copy + drop second-line intro
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Manual polish: 'Manifeste du AI-Driven Development' → 'Manifeste de
l'AI-Driven Development' (correct French elision before a vowel).

Also drops the 'Rejoignez-moi →' / 'Join me →' lead on the second
message line — the URL now stands alone on line 2, which reads cleaner
in the citation block and stays shorter for the clipboard + X intent
(ranks prior were 'I just signed #39.\nJoin me → https...'; now
'I just signed #39.\nhttps://ai-driven-development.org/').
---
 app/src/components/ClientApp.astro | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/src/components/ClientApp.astro b/app/src/components/ClientApp.astro
index 6fd6d87..2a1ffe0 100644
--- a/app/src/components/ClientApp.astro
+++ b/app/src/components/ClientApp.astro
@@ -46,18 +46,18 @@
   function buildMessagePlain(rank: number, lang: string): string {
     const fr = isFrench(lang);
     const line1 = fr
-      ? `Je viens de signer le Manifeste du AI-Driven Development en tant que signataire n°${rank}.`
+      ? `Je viens de signer le Manifeste de l'AI-Driven Development en tant que signataire n°${rank}.`
       : `I just signed the AI-Driven Development Manifesto as signatory #${rank}.`;
-    const line2 = fr ? `Rejoignez-moi → ${URL_TOKEN}` : `Join me → ${URL_TOKEN}`;
+    const line2 = URL_TOKEN;
     return `${line1}\n${line2}`.replaceAll(URL_TOKEN, SHARE_URL);
   }
 
   function buildMessageHTML(rank: number, lang: string): string {
     const fr = isFrench(lang);
     const line1 = fr
-      ? `Je viens de signer le Manifeste du AI-Driven Development en tant que signataire n°${rank}.`
+      ? `Je viens de signer le Manifeste de l'AI-Driven Development en tant que signataire n°${rank}.`
       : `I just signed the AI-Driven Development Manifesto as signatory #${rank}.`;
-    const line2 = fr ? `Rejoignez-moi → ${URL_TOKEN}` : `Join me → ${URL_TOKEN}`;
+    const line2 = URL_TOKEN;
     const anchor = `<a class="share-popup-link" href="${SHARE_URL}" target="_blank" rel="noopener noreferrer">${URL_LABEL}</a>`;
     return `${line1}<br>${line2}`.replaceAll(URL_TOKEN, anchor);
   }