feat(super-admin): WhatsApp OTP registration and template creation

- WhatsApp service: add registerPhoneNumber() and verifyPhoneNumber() methods
- Super-admin routes: POST /whatsapp/numbers/register and /verify for Meta OTP flow
- Super-admin routes: POST /whatsapp/templates to submit templates to Meta for approval
- WhatsAppNumbers page: 2-step modal (orgId + phoneNumberId + PIN → OTP code)
- WhatsAppTemplates page: full creation modal with category cards, char counters, live preview bubble

apps/admin/src/pages/super-admin/WhatsAppNumbers.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { useAuth } from '@/lib/auth';
 import { api } from '@/lib/api';
 import { useToast } from '@/hooks/useToast';
-import { Phone, RefreshCw } from 'lucide-react';
+import { Phone, RefreshCw, Plus, X, ArrowLeft, Info } from 'lucide-react';
 
 export default function WhatsAppNumbers() {
     const { token } = useAuth();
@@ -10,6 +10,16 @@ export default function WhatsAppNumbers() {
     const [numbers, setNumbers] = useState<any[]>([]);
     const [loading, setLoading] = useState(true);
 
+    const [showRegister, setShowRegister] = useState(false);
+    const [regStep, setRegStep] = useState<1 | 2>(1);
+    const [regOrgId, setRegOrgId] = useState('');
+    const [regPhoneNumberId, setRegPhoneNumberId] = useState('');
+    const [regPin, setRegPin] = useState('');
+    const [regCode, setRegCode] = useState('');
+    const [regLoading, setRegLoading] = useState(false);
+    const [regError, setRegError] = useState('');
+    const [orgOptions, setOrgOptions] = useState<{ id: string; name: string }[]>([]);
+
     async function load() {
         if (!token) return;
         setLoading(true);
@@ -22,6 +32,94 @@ export default function WhatsAppNumbers() {
 
     useEffect(() => { load(); }, [token]);
 
+    async function loadOrgs() {
+        if (!token) return;
+        try {
+            const data = await api.get('/v1/super-admin/organizations?limit=100', token);
+            setOrgOptions(data.data ?? []);
+        } catch { /* ignore */ }
+    }
+
+    function openModal() {
+        setRegStep(1);
+        setRegOrgId('');
+        setRegPhoneNumberId('');
+        setRegPin('');
+        setRegCode('');
+        setRegError('');
+        setRegLoading(false);
+        setShowRegister(true);
+        loadOrgs();
+    }
+
+    function closeModal() {
+        setShowRegister(false);
+        setRegStep(1);
+        setRegOrgId('');
+        setRegPhoneNumberId('');
+        setRegPin('');
+        setRegCode('');
+        setRegError('');
+        setRegLoading(false);
+    }
+
+    async function handleRegister() {
+        setRegError('');
+        if (!regOrgId) { setRegError("Veuillez sélectionner une organisation."); return; }
+        if (!regPhoneNumberId || !/^\d{12,18}$/.test(regPhoneNumberId)) {
+            setRegError("Le Phone Number ID doit contenir entre 12 et 18 chiffres.");
+            return;
+        }
+        const pin = regPin.trim() === '' ? '000000' : regPin.trim();
+        if (!/^\d{6}$/.test(pin)) { setRegError("Le PIN doit contenir exactement 6 chiffres."); return; }
+        setRegLoading(true);
+        try {
+            const res = await api.post('/v1/super-admin/whatsapp/numbers/register', {
+                orgId: regOrgId,
+                phoneNumberId: regPhoneNumberId,
+                pin,
+            }, token);
+            if (res.ok) {
+                setRegStep(2);
+            } else {
+                setRegError(res.metaResponse?.detail || res.metaResponse?.message || "Erreur lors de l'enregistrement.");
+            }
+        } catch (e: any) {
+            setRegError(e?.message || "Erreur réseau.");
+        } finally {
+            setRegLoading(false);
+        }
+    }
+
+    async function handleVerify() {
+        setRegError('');
+        if (!regCode || !/^\d{4,8}$/.test(regCode)) {
+            setRegError("Le code OTP doit contenir entre 4 et 8 chiffres.");
+            return;
+        }
+        setRegLoading(true);
+        try {
+            const res = await api.post('/v1/super-admin/whatsapp/numbers/verify', {
+                orgId: regOrgId,
+                phoneNumberId: regPhoneNumberId,
+                code: regCode,
+            }, token);
+            if (res.ok) {
+                toast.success('Numéro enregistré avec succès !');
+                closeModal();
+                load();
+            } else {
+                setRegError(res.metaResponse?.detail || res.metaResponse?.message || "Code OTP invalide ou expiré.");
+            }
+        } catch (e: any) {
+            setRegError(e?.message || "Erreur réseau.");
+        } finally {
+            setRegLoading(false);
+        }
+    }
+
+    const selectedOrg = orgOptions.find(o => o.id === regOrgId);
+
     return (
         <div className="space-y-4">
             <div className="flex items-center justify-between">
@@ -29,10 +127,16 @@ export default function WhatsAppNumbers() {
                     <h1 className="text-xl font-bold text-white">Numéros WhatsApp</h1>
                     <p className="text-sm text-slate-400 mt-0.5">{numbers.length} numéros enregistrés</p>
                 </div>
-                <button onClick={load} className="flex items-center gap-2 px-3 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 text-sm rounded-lg transition-colors">
-                    <RefreshCw className="w-3.5 h-3.5" />
-                    Actualiser
-                </button>
+                <div className="flex items-center gap-2">
+                    <button onClick={load} className="flex items-center gap-2 px-3 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 text-sm rounded-lg transition-colors">
+                        <RefreshCw className="w-3.5 h-3.5" />
+                        Actualiser
+                    </button>
+                    <button onClick={openModal} className="flex items-center gap-2 px-3 py-2 bg-violet-600 hover:bg-violet-500 text-white text-sm rounded-lg transition-colors font-medium">
+                        <Plus className="w-4 h-4" />
+                        Enregistrer un numéro
+                    </button>
+                </div>
             </div>
 
             <div className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
@@ -68,6 +172,136 @@ export default function WhatsAppNumbers() {
                     </div>
                 )}
             </div>
+
+            {showRegister && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4">
+                    <div className="bg-slate-900 border border-slate-700 rounded-2xl max-w-md w-full p-6 shadow-2xl">
+                        <div className="flex items-start justify-between mb-5">
+                            <div>
+                                <h2 className="text-base font-semibold text-white">Enregistrer un numéro WhatsApp</h2>
+                                <p className="text-xs text-slate-400 mt-0.5">Étape {regStep}/2</p>
+                            </div>
+                            <button onClick={closeModal} className="text-slate-400 hover:text-white transition-colors ml-4 shrink-0">
+                                <X className="w-5 h-5" />
+                            </button>
+                        </div>
+
+                        {regStep === 1 && (
+                            <div className="space-y-4">
+                                <div>
+                                    <label className="block text-xs font-medium text-slate-300 mb-1.5">Organisation</label>
+                                    <select
+                                        value={regOrgId}
+                                        onChange={e => setRegOrgId(e.target.value)}
+                                        className="w-full bg-slate-800 border border-slate-700 text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent"
+                                    >
+                                        <option value="">Sélectionner une organisation...</option>
+                                        {orgOptions.map(o => (
+                                            <option key={o.id} value={o.id}>{o.name}</option>
+                                        ))}
+                                    </select>
+                                </div>
+
+                                <div>
+                                    <label className="block text-xs font-medium text-slate-300 mb-1.5">Phone Number ID</label>
+                                    <input
+                                        type="text"
+                                        inputMode="numeric"
+                                        value={regPhoneNumberId}
+                                        onChange={e => setRegPhoneNumberId(e.target.value.replace(/\D/g, ''))}
+                                        placeholder="123456789012345"
+                                        maxLength={18}
+                                        className="w-full bg-slate-800 border border-slate-700 text-white text-sm rounded-lg px-3 py-2 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent font-mono"
+                                    />
+                                    <p className="text-xs text-slate-500 mt-1">Trouvez cet ID dans Meta Business Manager &gt; WhatsApp Accounts</p>
+                                </div>
+
+                                <div>
+                                    <label className="block text-xs font-medium text-slate-300 mb-1.5">PIN de sécurité</label>
+                                    <input
+                                        type="password"
+                                        inputMode="numeric"
+                                        value={regPin}
+                                        onChange={e => setRegPin(e.target.value.replace(/\D/g, ''))}
+                                        placeholder="000000"
+                                        maxLength={6}
+                                        className="w-full bg-slate-800 border border-slate-700 text-white text-sm rounded-lg px-3 py-2 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent font-mono tracking-widest"
+                                    />
+                                    <p className="text-xs text-slate-500 mt-1">PIN à 6 chiffres pour sécuriser le numéro (laisser vide = 000000)</p>
+                                </div>
+
+                                {regError && (
+                                    <p className="text-xs text-red-400 bg-red-900/20 border border-red-800/40 rounded-lg px-3 py-2">{regError}</p>
+                                )}
+
+                                <button
+                                    onClick={handleRegister}
+                                    disabled={regLoading}
+                                    className="w-full mt-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-violet-600 hover:bg-violet-500 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
+                                >
+                                    {regLoading ? (
+                                        <RefreshCw className="w-4 h-4 animate-spin" />
+                                    ) : null}
+                                    {regLoading ? 'Envoi en cours...' : 'Envoyer le code OTP'}
+                                </button>
+                            </div>
+                        )}
+
+                        {regStep === 2 && (
+                            <div className="space-y-4">
+                                <div className="bg-slate-800 rounded-lg px-4 py-3 space-y-1">
+                                    <p className="text-xs text-slate-400">Organisation : <span className="text-slate-200 font-medium">{selectedOrg?.name || regOrgId}</span></p>
+                                    <p className="text-xs text-slate-400">Phone Number ID : <span className="text-slate-200 font-mono">{regPhoneNumberId}</span></p>
+                                </div>
+
+                                <div className="flex items-start gap-2.5 bg-blue-900/20 border border-blue-800/40 rounded-lg px-3 py-3">
+                                    <Info className="w-4 h-4 text-blue-400 shrink-0 mt-0.5" />
+                                    <p className="text-xs text-blue-300">Meta vous a envoyé un code OTP par SMS ou appel vocal sur le numéro. Saisissez-le ci-dessous.</p>
+                                </div>
+
+                                <div>
+                                    <label className="block text-xs font-medium text-slate-300 mb-1.5">Code OTP</label>
+                                    <input
+                                        type="text"
+                                        inputMode="numeric"
+                                        value={regCode}
+                                        onChange={e => setRegCode(e.target.value.replace(/\D/g, ''))}
+                                        placeholder="123456"
+                                        maxLength={8}
+                                        className="w-full bg-slate-800 border border-slate-700 text-white text-sm rounded-lg px-3 py-2 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent font-mono tracking-widest text-center text-lg"
+                                        autoFocus
+                                    />
+                                </div>
+
+                                {regError && (
+                                    <p className="text-xs text-red-400 bg-red-900/20 border border-red-800/40 rounded-lg px-3 py-2">{regError}</p>
+                                )}
+
+                                <div className="flex gap-2 mt-1">
+                                    <button
+                                        onClick={() => { setRegStep(1); setRegError(''); setRegCode(''); }}
+                                        disabled={regLoading}
+                                        className="flex items-center gap-1.5 px-4 py-2.5 bg-slate-800 hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed text-slate-300 text-sm rounded-lg transition-colors"
+                                    >
+                                        <ArrowLeft className="w-3.5 h-3.5" />
+                                        Retour
+                                    </button>
+                                    <button
+                                        onClick={handleVerify}
+                                        disabled={regLoading}
+                                        className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-violet-600 hover:bg-violet-500 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
+                                    >
+                                        {regLoading ? (
+                                            <RefreshCw className="w-4 h-4 animate-spin" />
+                                        ) : null}
+                                        {regLoading ? 'Vérification...' : 'Vérifier'}
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
         </div>
     );
 }

apps/admin/src/pages/super-admin/WhatsAppTemplates.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react';
 import { useAuth } from '@/lib/auth';
 import { api } from '@/lib/api';
-import { MessageSquare, ChevronDown, ChevronRight, Search } from 'lucide-react';
+import { useToast } from '@/hooks/useToast';
+import { MessageSquare, ChevronDown, ChevronRight, Search, Plus, X } from 'lucide-react';
 
 const PLAN_COLORS: Record<string, string> = {
     STARTER: 'bg-slate-700 text-slate-300',
@@ -22,6 +23,29 @@ const STATUS_COLORS: Record<string, string> = {
     REJECTED: 'bg-red-900/60 text-red-300',
 };
 
+const CATEGORIES = [
+    { value: 'MARKETING', label: 'MARKETING', description: 'Promotions, offres, newsletters', color: 'border-violet-500 bg-violet-900/20 text-violet-300' },
+    { value: 'UTILITY', label: 'UTILITY', description: 'Confirmations, mises à jour transactionnelles', color: 'border-blue-500 bg-blue-900/20 text-blue-300' },
+    { value: 'AUTHENTICATION', label: 'AUTHENTICATION', description: 'Codes OTP, vérification', color: 'border-emerald-500 bg-emerald-900/20 text-emerald-300' },
+];
+
+const CATEGORY_IDLE: Record<string, string> = {
+    MARKETING: 'border-slate-700 hover:border-violet-500/50',
+    UTILITY: 'border-slate-700 hover:border-blue-500/50',
+    AUTHENTICATION: 'border-slate-700 hover:border-emerald-500/50',
+};
+
+const LANGUAGES = [
+    { value: 'fr', label: 'Français' },
+    { value: 'en', label: 'English' },
+    { value: 'es', label: 'Español' },
+    { value: 'pt', label: 'Português' },
+    { value: 'ar', label: 'العربية' },
+    { value: 'wo', label: 'Wolof' },
+];
+
+const NAME_REGEX = /^[a-z0-9_]*$/;
+
 interface Org {
     id: string;
     name: string;
@@ -36,8 +60,29 @@ interface Template {
     status: string;
 }
 
+interface FormState {
+    orgId: string;
+    name: string;
+    category: string;
+    language: string;
+    header: string;
+    body: string;
+    footer: string;
+}
+
+const EMPTY_FORM: FormState = {
+    orgId: '',
+    name: '',
+    category: 'MARKETING',
+    language: 'fr',
+    header: '',
+    body: '',
+    footer: '',
+};
+
 export default function WhatsAppTemplates() {
     const { token } = useAuth();
+    const toast = useToast();
     const [orgs, setOrgs] = useState<Org[]>([]);
     const [loading, setLoading] = useState(true);
     const [search, setSearch] = useState('');
@@ -45,6 +90,12 @@ export default function WhatsAppTemplates() {
     const [templates, setTemplates] = useState<Record<string, Template[]>>({});
     const [loadingTemplates, setLoadingTemplates] = useState<Record<string, boolean>>({});
 
+    const [showCreate, setShowCreate] = useState(false);
+    const [form, setForm] = useState<FormState>(EMPTY_FORM);
+    const [creating, setCreating] = useState(false);
+    const [createError, setCreateError] = useState('');
+    const [nameError, setNameError] = useState('');
+
     useEffect(() => {
         if (!token) return;
         setLoading(true);
@@ -69,6 +120,75 @@ export default function WhatsAppTemplates() {
         }
     }
 
+    async function refreshOrgTemplates(orgId: string) {
+        setLoadingTemplates(prev => ({ ...prev, [orgId]: true }));
+        try {
+            const data = await api.get('/v1/whatsapp/templates', token, orgId);
+            setTemplates(prev => ({ ...prev, [orgId]: data.templates ?? [] }));
+        } catch {
+            setTemplates(prev => ({ ...prev, [orgId]: [] }));
+        } finally {
+            setLoadingTemplates(prev => ({ ...prev, [orgId]: false }));
+        }
+    }
+
+    function handleNameChange(value: string) {
+        if (!NAME_REGEX.test(value)) {
+            setNameError('Minuscules, chiffres, underscores uniquement');
+        } else {
+            setNameError('');
+        }
+        setForm(prev => ({ ...prev, name: value }));
+    }
+
+    function openCreate() {
+        setForm(orgs.length > 0 ? { ...EMPTY_FORM, orgId: orgs[0].id } : EMPTY_FORM);
+        setCreateError('');
+        setNameError('');
+        setShowCreate(true);
+    }
+
+    function closeCreate() {
+        setShowCreate(false);
+        setForm(EMPTY_FORM);
+        setCreateError('');
+        setNameError('');
+    }
+
+    async function handleCreate() {
+        if (!form.orgId || !form.name || !form.body) {
+            setCreateError('Organisation, nom et corps du message sont obligatoires.');
+            return;
+        }
+        if (!NAME_REGEX.test(form.name)) {
+            setCreateError('Le nom du template est invalide.');
+            return;
+        }
+        setCreating(true);
+        setCreateError('');
+        try {
+            await api.post('/v1/super-admin/whatsapp/templates', {
+                orgId: form.orgId,
+                name: form.name,
+                category: form.category,
+                language: form.language,
+                body: form.body,
+                ...(form.header ? { header: form.header } : {}),
+                ...(form.footer ? { footer: form.footer } : {}),
+            }, token);
+            toast.success('Template soumis à Meta pour approbation');
+            if (expanded[form.orgId]) {
+                refreshOrgTemplates(form.orgId);
+            }
+            closeCreate();
+        } catch (err: unknown) {
+            const msg = err instanceof Error ? err.message : 'Erreur lors de la création du template.';
+            setCreateError(msg);
+        } finally {
+            setCreating(false);
+        }
+    }
+
     const filtered = orgs.filter(o =>
         o.name.toLowerCase().includes(search.toLowerCase()) ||
         o.wabaId?.toLowerCase().includes(search.toLowerCase())
@@ -78,10 +198,17 @@ export default function WhatsAppTemplates() {
         <div className="space-y-4">
             <div className="flex items-center gap-3">
                 <MessageSquare className="w-5 h-5 text-violet-400" />
-                <div>
+                <div className="flex-1">
                     <h1 className="text-xl font-bold text-white">WhatsApp Templates</h1>
                     <p className="text-sm text-slate-400 mt-0.5">{orgs.length} organisation{orgs.length !== 1 ? 's' : ''} avec WhatsApp configuré</p>
                 </div>
+                <button
+                    onClick={openCreate}
+                    className="inline-flex items-center gap-2 px-4 py-2 bg-violet-600 hover:bg-violet-500 text-white text-sm font-medium rounded-lg transition-colors"
+                >
+                    <Plus className="w-4 h-4" />
+                    Créer un template
+                </button>
             </div>
 
             <div className="bg-slate-900/50 border border-slate-800 rounded-xl px-4 py-3 text-sm text-slate-400">
@@ -208,6 +335,176 @@ export default function WhatsAppTemplates() {
                     </div>
                 )}
             </div>
+
+            {showCreate && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+                    <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 shadow-2xl">
+                        <div className="flex items-center justify-between mb-6">
+                            <h2 className="text-lg font-bold text-white">Nouveau template WhatsApp</h2>
+                            <button
+                                onClick={closeCreate}
+                                className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
+                            >
+                                <X className="w-5 h-5" />
+                            </button>
+                        </div>
+
+                        <div className="space-y-5">
+                            <div>
+                                <label className="block text-sm font-medium text-slate-300 mb-1.5">Organisation</label>
+                                <select
+                                    value={form.orgId}
+                                    onChange={e => setForm(prev => ({ ...prev, orgId: e.target.value }))}
+                                    className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-violet-500"
+                                >
+                                    <option value="" disabled>Sélectionner une organisation…</option>
+                                    {orgs.map(org => (
+                                        <option key={org.id} value={org.id}>{org.name}</option>
+                                    ))}
+                                </select>
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-medium text-slate-300 mb-1.5">Nom du template</label>
+                                <input
+                                    type="text"
+                                    value={form.name}
+                                    onChange={e => handleNameChange(e.target.value)}
+                                    placeholder="welcome_message"
+                                    className={`w-full px-3 py-2 bg-slate-800 border rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none transition-colors ${nameError ? 'border-red-500 focus:border-red-500' : 'border-slate-700 focus:border-violet-500'}`}
+                                />
+                                {nameError ? (
+                                    <p className="text-xs text-red-400 mt-1">{nameError}</p>
+                                ) : (
+                                    <p className="text-xs text-slate-500 mt-1">Minuscules, chiffres, underscores uniquement</p>
+                                )}
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-medium text-slate-300 mb-2">Catégorie</label>
+                                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                                    {CATEGORIES.map(cat => {
+                                        const isSelected = form.category === cat.value;
+                                        return (
+                                            <button
+                                                key={cat.value}
+                                                type="button"
+                                                onClick={() => setForm(prev => ({ ...prev, category: cat.value }))}
+                                                className={`text-left p-3 rounded-xl border-2 transition-all ${isSelected ? cat.color : `border-slate-700 hover:${CATEGORY_IDLE[cat.value]}`} ${isSelected ? '' : 'bg-slate-800/40'}`}
+                                            >
+                                                <div className={`text-xs font-bold tracking-wider mb-1 ${isSelected ? '' : 'text-slate-300'}`}>{cat.label}</div>
+                                                <div className={`text-xs leading-snug ${isSelected ? 'opacity-80' : 'text-slate-500'}`}>{cat.description}</div>
+                                            </button>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-medium text-slate-300 mb-1.5">Langue</label>
+                                <select
+                                    value={form.language}
+                                    onChange={e => setForm(prev => ({ ...prev, language: e.target.value }))}
+                                    className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-violet-500"
+                                >
+                                    {LANGUAGES.map(lang => (
+                                        <option key={lang.value} value={lang.value}>{lang.label}</option>
+                                    ))}
+                                </select>
+                            </div>
+
+                            <div>
+                                <div className="flex items-center justify-between mb-1.5">
+                                    <label className="text-sm font-medium text-slate-300">En-tête <span className="text-slate-500 font-normal">(optionnel)</span></label>
+                                    <span className="text-xs text-slate-500">{form.header.length}/60</span>
+                                </div>
+                                <input
+                                    type="text"
+                                    value={form.header}
+                                    onChange={e => setForm(prev => ({ ...prev, header: e.target.value.slice(0, 60) }))}
+                                    placeholder="Bonjour {{1}} !"
+                                    maxLength={60}
+                                    className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-violet-500"
+                                />
+                            </div>
+
+                            <div>
+                                <div className="flex items-center justify-between mb-1.5">
+                                    <label className="text-sm font-medium text-slate-300">Corps du message</label>
+                                    <span className="text-xs text-slate-500">{form.body.length}/1024</span>
+                                </div>
+                                <textarea
+                                    rows={4}
+                                    value={form.body}
+                                    onChange={e => setForm(prev => ({ ...prev, body: e.target.value.slice(0, 1024) }))}
+                                    placeholder="Votre message ici. Utilisez {{1}}, {{2}} pour les variables."
+                                    maxLength={1024}
+                                    className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-violet-500 resize-none"
+                                />
+                            </div>
+
+                            <div>
+                                <div className="flex items-center justify-between mb-1.5">
+                                    <label className="text-sm font-medium text-slate-300">Pied de page <span className="text-slate-500 font-normal">(optionnel)</span></label>
+                                    <span className="text-xs text-slate-500">{form.footer.length}/60</span>
+                                </div>
+                                <input
+                                    type="text"
+                                    value={form.footer}
+                                    onChange={e => setForm(prev => ({ ...prev, footer: e.target.value.slice(0, 60) }))}
+                                    maxLength={60}
+                                    placeholder="Ne pas répondre à ce message"
+                                    className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-violet-500"
+                                />
+                            </div>
+
+                            <div>
+                                <p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-2">Prévisualisation</p>
+                                <div className="bg-[#0a7a4b] rounded-xl p-4">
+                                    <div className="bg-white rounded-lg p-3 max-w-xs shadow text-sm">
+                                        {form.header && <p className="font-bold text-slate-900 mb-1">{form.header}</p>}
+                                        <p className="text-slate-800 whitespace-pre-wrap">{form.body || 'Corps du message...'}</p>
+                                        {form.footer && <p className="text-xs text-slate-400 mt-1">{form.footer}</p>}
+                                    </div>
+                                </div>
+                            </div>
+
+                            {createError && (
+                                <div className="px-4 py-3 bg-red-900/30 border border-red-700/50 rounded-lg text-sm text-red-300">
+                                    {createError}
+                                </div>
+                            )}
+
+                            <div className="flex items-center justify-end gap-3 pt-2">
+                                <button
+                                    type="button"
+                                    onClick={closeCreate}
+                                    disabled={creating}
+                                    className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
+                                >
+                                    Annuler
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={handleCreate}
+                                    disabled={creating || !!nameError || !form.orgId || !form.name || !form.body}
+                                    className="inline-flex items-center gap-2 px-4 py-2 bg-violet-600 hover:bg-violet-500 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
+                                >
+                                    {creating ? (
+                                        <>
+                                            <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+                                            </svg>
+                                            Création…
+                                        </>
+                                    ) : 'Créer le template'}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }

apps/api/src/routes/super-admin.ts

@@ -291,6 +291,126 @@ export async function superAdminRoutes(fastify: FastifyInstance) {
         }
     });
 
+    // ── WhatsApp Number Registration (OTP flow) ───────────────────────────────
+
+    // Step 1 — Trigger Meta to send OTP to the phone number
+    fastify.post('/whatsapp/numbers/register', async (req, reply) => {
+        const Schema = z.object({
+            orgId: z.string(),
+            phoneNumberId: z.string(),
+            pin: z.string().length(6).regex(/^\d{6}$/).default('000000'),
+        });
+        const body = Schema.safeParse(req.body);
+        if (!body.success) return reply.code(400).send({ error: body.error.flatten() });
+
+        const { orgId, phoneNumberId, pin } = body.data;
+        try {
+            const { decryptSecrets } = await import('../services/organization');
+            const { whatsappService } = await import('../services/whatsapp');
+            const org = await prisma.organization.findUnique({
+                where: { id: orgId },
+                select: { id: true, name: true, systemUserToken: true, wabaId: true, systemUserTokenIssuedAt: true, webhookSecret: true },
+            });
+            if (!org) return reply.code(404).send({ error: 'Organization not found' });
+            if (!org.systemUserToken) return reply.code(400).send({ error: 'Organization has no systemUserToken configured' });
+
+            const decrypted = decryptSecrets(org as any);
+            const result = await whatsappService.registerPhoneNumber({ accessToken: decrypted.systemUserToken! }, phoneNumberId, pin);
+
+            logger.info({ orgId, phoneNumberId, actor: (req as any).user?.id }, '[SUPER_ADMIN] Phone number registration initiated');
+            return { ok: true, metaResponse: result };
+        } catch (err: any) {
+            const detail = err.response?.data?.error?.message ?? err.message;
+            return reply.code(502).send({ error: 'Meta API error', detail });
+        }
+    });
+
+    // Step 2 — Verify OTP sent by Meta
+    fastify.post('/whatsapp/numbers/verify', async (req, reply) => {
+        const Schema = z.object({
+            orgId: z.string(),
+            phoneNumberId: z.string(),
+            code: z.string().min(4).max(8),
+        });
+        const body = Schema.safeParse(req.body);
+        if (!body.success) return reply.code(400).send({ error: body.error.flatten() });
+
+        const { orgId, phoneNumberId, code } = body.data;
+        try {
+            const { decryptSecrets } = await import('../services/organization');
+            const { whatsappService } = await import('../services/whatsapp');
+            const org = await prisma.organization.findUnique({
+                where: { id: orgId },
+                select: { id: true, name: true, systemUserToken: true, webhookSecret: true, systemUserTokenIssuedAt: true },
+            });
+            if (!org) return reply.code(404).send({ error: 'Organization not found' });
+            if (!org.systemUserToken) return reply.code(400).send({ error: 'Organization has no systemUserToken configured' });
+
+            const decrypted = decryptSecrets(org as any);
+            const result = await whatsappService.verifyPhoneNumber({ accessToken: decrypted.systemUserToken! }, phoneNumberId, code);
+
+            logger.info({ orgId, phoneNumberId, actor: (req as any).user?.id }, '[SUPER_ADMIN] Phone number verified');
+            return { ok: true, metaResponse: result };
+        } catch (err: any) {
+            const detail = err.response?.data?.error?.message ?? err.message;
+            return reply.code(502).send({ error: 'Meta verification failed', detail });
+        }
+    });
+
+    // ── WhatsApp Template Creation (cross-org) ────────────────────────────────
+    fastify.post('/whatsapp/templates', async (req, reply) => {
+        const Schema = z.object({
+            orgId: z.string(),
+            name: z.string().min(1).regex(/^[a-z0-9_]+$/, 'Template name must be lowercase snake_case'),
+            category: z.enum(['MARKETING', 'UTILITY', 'AUTHENTICATION']),
+            language: z.string().min(2),
+            body: z.string().min(1).max(1024),
+            header: z.string().max(60).optional(),
+            footer: z.string().max(60).optional(),
+        });
+        const body = Schema.safeParse(req.body);
+        if (!body.success) return reply.code(400).send({ error: body.error.flatten() });
+
+        const { orgId, name, category, language, body: bodyText, header, footer } = body.data;
+        try {
+            const { decryptSecrets } = await import('../services/organization');
+            const { whatsappService } = await import('../services/whatsapp');
+            const org = await prisma.organization.findUnique({
+                where: { id: orgId },
+                select: { id: true, name: true, wabaId: true, systemUserToken: true, webhookSecret: true, systemUserTokenIssuedAt: true },
+            });
+            if (!org) return reply.code(404).send({ error: 'Organization not found' });
+            if (!org.wabaId || !org.systemUserToken) return reply.code(400).send({ error: 'Organization WhatsApp not configured' });
+
+            const decrypted = decryptSecrets(org as any);
+
+            const components: any[] = [];
+            if (header) components.push({ type: 'HEADER', format: 'TEXT', text: header });
+            components.push({ type: 'BODY', text: bodyText });
+            if (footer) components.push({ type: 'FOOTER', text: footer });
+
+            const result = await whatsappService.createMetaTemplate(
+                { accessToken: decrypted.systemUserToken!, wabaId: org.wabaId },
+                { name, category, language, components }
+            );
+
+            await prisma.auditLog.create({
+                data: {
+                    action: 'SUPER_ADMIN_CREATE_TEMPLATE',
+                    actorId: (req as any).user?.id,
+                    resourceId: orgId,
+                    details: { templateName: name, category, language },
+                },
+            });
+
+            logger.info({ orgId, templateName: name, actor: (req as any).user?.id }, '[SUPER_ADMIN] Template created');
+            return { ok: true, template: result };
+        } catch (err: any) {
+            const detail = err.response?.data?.error?.message ?? err.message;
+            return reply.code(502).send({ error: 'Meta API error', detail });
+        }
+    });
+
     // ── Billing ───────────────────────────────────────────────────────────────
     fastify.get('/billing/transactions', async (req, reply) => {
         const QuerySchema = z.object({

apps/api/src/services/whatsapp.ts

@@ -125,6 +125,48 @@ export class WhatsAppService {
         }
     }
 
+    /**
+     * Initiates WhatsApp Business phone number registration.
+     * Meta sends an OTP to the phone number to verify ownership.
+     */
+    async registerPhoneNumber(config: { accessToken: string }, phoneNumberId: string, pin: string = '000000') {
+        try {
+            const url = `${this.baseUrl}/${phoneNumberId}/register`;
+            const response = await axios.post(url, {
+                messaging_product: 'whatsapp',
+                pin,
+            }, {
+                headers: {
+                    'Authorization': `Bearer ${config.accessToken}`,
+                    'Content-Type': 'application/json',
+                }
+            });
+            return response.data;
+        } catch (err: any) {
+            logger.error({ error: err.response?.data || err.message, phoneNumberId }, '[WHATSAPP_SERVICE] registerPhoneNumber failed');
+            throw err;
+        }
+    }
+
+    /**
+     * Verifies the OTP code Meta sent during phone number registration.
+     */
+    async verifyPhoneNumber(config: { accessToken: string }, phoneNumberId: string, code: string) {
+        try {
+            const url = `${this.baseUrl}/${phoneNumberId}/verify_code`;
+            const response = await axios.post(url, { code }, {
+                headers: {
+                    'Authorization': `Bearer ${config.accessToken}`,
+                    'Content-Type': 'application/json',
+                }
+            });
+            return response.data;
+        } catch (err: any) {
+            logger.error({ error: err.response?.data || err.message, phoneNumberId }, '[WHATSAPP_SERVICE] verifyPhoneNumber failed');
+            throw err;
+        }
+    }
+
     /**
      * Resolves a Meta Media ID into a permanent or temporary URL.
      * This abstracts the two-step download process.