feat(admin): responsive bottom sheet + spring animation for TierInfoModal

- Mobile: slides up from bottom (spring, damping 32), rounded-t-3xl,
drag handle pill, max 85dvh with internal scroll + overscroll-contain
- Desktop (sm+): centered card with same spring entrance
- AnimatePresence handles exit animation (slides back down)
- ESC key closes + body scroll lock during open
- Backdrop separated from panel div for correct z-layering

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

apps/admin/src/pages/ClientsManagementView.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Building2, Plus, MessageSquare, ShieldCheck, Activity, Loader2, X, RefreshCw, CheckCircle2, XCircle, AlertTriangle, Info } from 'lucide-react';
 import { api } from '../lib/api';
 import { useAuth } from '../lib/auth';
@@ -710,75 +711,120 @@ function BillingTierDisplay({ ms }: { ms?: MetaStatus }) {
                     </button>
                 )}
             </div>
-            {showInfo && <TierInfoModal ms={ms} onClose={() => setShowInfo(false)} />}
+            <TierInfoModal ms={ms} open={showInfo} onClose={() => setShowInfo(false)} />
         </>
     );
 }
 
-function TierInfoModal({ ms, onClose }: { ms?: MetaStatus; onClose: () => void }) {
+function TierInfoModal({ ms, open, onClose }: { ms?: MetaStatus; open: boolean; onClose: () => void }) {
     const currentTierOrder = TIER_CONFIG[ms?.messagingLimitTier ?? '']?.order ?? -1;
+
+    useEffect(() => {
+        if (!open) return;
+        const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+        document.addEventListener('keydown', onKey);
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.body.style.overflow = '';
+        };
+    }, [open, onClose]);
+
     return (
-        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center p-4 z-[200]" onClick={onClose}>
-            <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-5" onClick={e => e.stopPropagation()}>
-                <div className="flex items-center justify-between">
-                    <h3 className="font-bold text-slate-900 text-base">Limite de messagerie WhatsApp</h3>
-                    <button onClick={onClose} className="p-1.5 hover:bg-slate-100 rounded-lg transition">
-                        <X className="w-4 h-4 text-slate-500" />
-                    </button>
-                </div>
+        <AnimatePresence>
+            {open && (
+                <motion.div
+                    className="fixed inset-0 z-[200] flex items-end sm:items-center justify-center sm:p-4"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                    onClick={onClose}
+                >
+                    {/* Backdrop */}
+                    <div className="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" />
+
+                    {/* Panel — bottom sheet on mobile, centered card on desktop */}
+                    <motion.div
+                        className="relative bg-white w-full sm:max-w-md sm:rounded-2xl rounded-t-3xl shadow-2xl flex flex-col"
+                        style={{ maxHeight: '85dvh' }}
+                        initial={{ y: '100%' }}
+                        animate={{ y: 0 }}
+                        exit={{ y: '100%' }}
+                        transition={{ type: 'spring', damping: 32, stiffness: 320, mass: 0.8 }}
+                        onClick={e => e.stopPropagation()}
+                    >
+                        {/* Drag handle — mobile only */}
+                        <div className="flex justify-center pt-3 pb-0 sm:hidden shrink-0">
+                            <div className="w-9 h-1 bg-slate-200 rounded-full" />
+                        </div>
 
-                {/* Tier ladder */}
-                <div className="space-y-1.5">
-                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Niveaux de capacité Meta</p>
-                    {TIERS_IN_ORDER.map(({ key, label, desc }, i) => {
-                        const isCurrent = key === ms?.messagingLimitTier;
-                        const isPast    = i < currentTierOrder;
-                        const cfg       = TIER_CONFIG[key];
-                        return (
-                            <div key={key} className={`flex items-start gap-3 p-3 rounded-xl transition-all ${
-                                isCurrent ? 'ring-2 ring-indigo-200 bg-indigo-50' : isPast ? 'opacity-35' : 'opacity-55'
-                            }`}>
-                                <span className={`w-2 h-2 rounded-full mt-1.5 shrink-0 ${isCurrent ? (cfg?.dotCls ?? 'bg-indigo-400') : 'bg-slate-300'}`}
-                                    style={{ background: isCurrent ? undefined : undefined }} />
-                                <div className="flex-1 min-w-0">
-                                    <div className="flex items-center gap-2">
-                                        <span className={`text-sm font-semibold ${isCurrent ? cfg?.textCls : 'text-slate-500'}`}>{label}</span>
-                                        {isCurrent && <span className="text-[10px] font-bold bg-indigo-100 text-indigo-600 px-2 py-0.5 rounded-full">Actuel</span>}
-                                    </div>
-                                    <p className="text-[11px] text-slate-400 mt-0.5 leading-snug">{desc}</p>
-                                </div>
+                        {/* Sticky header */}
+                        <div className="flex items-center justify-between px-6 pt-4 pb-3 sm:pt-6 shrink-0">
+                            <h3 className="font-bold text-slate-900 text-base">Limite de messagerie WhatsApp</h3>
+                            <button onClick={onClose} className="p-1.5 hover:bg-slate-100 rounded-lg transition -mr-1">
+                                <X className="w-4 h-4 text-slate-500" />
+                            </button>
+                        </div>
+
+                        {/* Scrollable body */}
+                        <div className="overflow-y-auto overscroll-contain px-6 pb-8 space-y-5">
+
+                            {/* Tier ladder */}
+                            <div className="space-y-1.5">
+                                <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Niveaux de capacité Meta</p>
+                                {TIERS_IN_ORDER.map(({ key, label, desc }, i) => {
+                                    const isCurrent = key === ms?.messagingLimitTier;
+                                    const isPast    = i < currentTierOrder;
+                                    const cfg       = TIER_CONFIG[key];
+                                    return (
+                                        <div key={key} className={`flex items-start gap-3 p-3 rounded-xl transition-all ${
+                                            isCurrent ? 'ring-2 ring-indigo-200 bg-indigo-50' : isPast ? 'opacity-30' : 'opacity-50'
+                                        }`}>
+                                            <span className={`w-2 h-2 rounded-full mt-1.5 shrink-0 ${isCurrent ? (cfg?.dotCls ?? 'bg-indigo-400') : 'bg-slate-300'}`} />
+                                            <div className="flex-1 min-w-0">
+                                                <div className="flex items-center gap-2 flex-wrap">
+                                                    <span className={`text-sm font-semibold ${isCurrent ? cfg?.textCls : 'text-slate-500'}`}>{label}</span>
+                                                    {isCurrent && <span className="text-[10px] font-bold bg-indigo-100 text-indigo-600 px-2 py-0.5 rounded-full">Actuel</span>}
+                                                </div>
+                                                <p className="text-[11px] text-slate-400 mt-0.5 leading-snug">{desc}</p>
+                                            </div>
+                                        </div>
+                                    );
+                                })}
                             </div>
-                        );
-                    })}
-                </div>
 
-                {/* Quality rating */}
-                {ms?.qualityRating && ms.qualityRating !== 'UNKNOWN' && (
-                    <div className="space-y-2">
-                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Score Qualité du numéro</p>
-                        <div className="flex gap-2">
-                            {(['GREEN', 'YELLOW', 'RED'] as const).map(r => {
-                                const isCurrent = ms.qualityRating === r;
-                                const q = QUALITY_INFO[r];
-                                return (
-                                    <div key={r} className={`flex-1 p-3 rounded-xl text-center transition-all ${
-                                        isCurrent ? `ring-2 ring-offset-1 ${q.ringCls}` : 'bg-slate-50 opacity-35'
-                                    }`}>
-                                        <span className={`inline-block w-3 h-3 rounded-full ${q.dotCls} mb-1`} />
-                                        <p className="text-xs font-bold text-slate-700">{q.label}</p>
-                                        <p className="text-[10px] text-slate-500 mt-0.5 leading-snug">{q.desc}</p>
+                            {/* Quality rating */}
+                            {ms?.qualityRating && ms.qualityRating !== 'UNKNOWN' && (
+                                <div className="space-y-2">
+                                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Score Qualité du numéro</p>
+                                    <div className="flex gap-2">
+                                        {(['GREEN', 'YELLOW', 'RED'] as const).map(r => {
+                                            const isCurrent = ms.qualityRating === r;
+                                            const q = QUALITY_INFO[r];
+                                            return (
+                                                <div key={r} className={`flex-1 p-3 rounded-xl text-center transition-all ${
+                                                    isCurrent ? `ring-2 ring-offset-1 ${q.ringCls}` : 'bg-slate-50 opacity-30'
+                                                }`}>
+                                                    <span className={`inline-block w-3 h-3 rounded-full ${q.dotCls} mb-1.5`} />
+                                                    <p className="text-xs font-bold text-slate-700">{q.label}</p>
+                                                    <p className="text-[10px] text-slate-500 mt-0.5 leading-snug">{q.desc}</p>
+                                                </div>
+                                            );
+                                        })}
                                     </div>
-                                );
-                            })}
-                        </div>
-                    </div>
-                )}
+                                </div>
+                            )}
 
-                <p className="text-[11px] text-slate-400 text-center">
-                    Meta met à jour ces données automatiquement. Les niveaux progressent sans action de votre part.
-                </p>
-            </div>
-        </div>
+                            <p className="text-[11px] text-slate-400 text-center leading-relaxed">
+                                Meta met à jour ces données automatiquement.<br />
+                                Les niveaux progressent sans action de votre part.
+                            </p>
+                        </div>
+                    </motion.div>
+                </motion.div>
+            )}
+        </AnimatePresence>
     );
 }
 
@@ -808,7 +854,7 @@ function DailyLimitCell({ ms }: { ms?: MetaStatus }) {
                     </div>
                 </div>
             </div>
-            {showInfo && <TierInfoModal ms={ms} onClose={() => setShowInfo(false)} />}
+            <TierInfoModal ms={ms} open={showInfo} onClose={() => setShowInfo(false)} />
         </>
     );
 }