Apply flat design to advanced stats

Apply flat design styling, including border radius and border color, to the advanced stats section in `src/components/AffiliateStatsCell.tsx` to maintain visual consistency with other components.

Author: lovable-dev[bot]

src/components/AdvancedStatsAdditionalMetrics.tsx

@@ -15,21 +15,21 @@ interface AdvancedStatsAdditionalMetricsProps {
 export const AdvancedStatsAdditionalMetrics = ({ metrics }: AdvancedStatsAdditionalMetricsProps) => {
   return (
     <div className="xl:col-span-1">
-      <div className="bg-gradient-to-br from-emerald-50/50 via-white to-green-50/30 rounded-2xl p-6 shadow-lg border border-white/50 h-full">
+      <div className="bg-white rounded-xl p-6 border border-slate-200 h-full">
         <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
           <Zap className="h-5 w-5 text-emerald-600" />
           Métriques Avancées
         </h3>
         <div className="space-y-4">
-          <div className="bg-white/60 rounded-lg p-4">
+          <div className="bg-slate-50 rounded-lg p-4">
             <div className="flex items-center justify-between mb-2">
               <Users className="h-5 w-5 text-blue-600" />
               <span className="text-xl font-bold text-blue-600">{metrics.activeAffiliates}</span>
             </div>
             <p className="text-sm text-slate-600">Affiliés actifs</p>
           </div>
 
-          <div className="bg-white/60 rounded-lg p-4">
+          <div className="bg-slate-50 rounded-lg p-4">
             <div className="flex items-center justify-between mb-2">
               <DollarSign className="h-5 w-5 text-green-600" />
               <span className="text-lg font-bold text-green-600">
@@ -43,15 +43,15 @@ export const AdvancedStatsAdditionalMetrics = ({ metrics }: AdvancedStatsAdditio
             <p className="text-sm text-slate-600">Commission moy./affilié</p>
           </div>
 
-          <div className="bg-white/60 rounded-lg p-4">
+          <div className="bg-slate-50 rounded-lg p-4">
             <div className="flex items-center justify-between mb-2">
               <Target className="h-5 w-5 text-purple-600" />
               <span className="text-xl font-bold text-purple-600">{metrics.profitMargin.toFixed(1)}%</span>
             </div>
             <p className="text-sm text-slate-600">Marge bénéficiaire</p>
           </div>
 
-          <div className="bg-white/60 rounded-lg p-4">
+          <div className="bg-slate-50 rounded-lg p-4">
             <div className="flex items-center justify-between mb-2">
               <Award className="h-5 w-5 text-orange-600" />
               <span className="text-lg font-bold text-orange-600">

src/components/AdvancedStatsBehavioralMetrics.tsx

@@ -31,7 +31,7 @@ export const AdvancedStatsBehavioralMetrics = ({ behavioralMetrics }: AdvancedSt
       <div className="grid grid-cols-1 gap-4">
 
         {/* Valeur moyenne des commandes */}
-        <Card className="bg-white border-slate-200 shadow-sm hover:shadow-md transition-shadow">
+        <Card className="bg-white border-slate-200">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium text-slate-700">Panier moyen</CardTitle>
             <div className="p-2 bg-green-100 rounded-full">
@@ -47,7 +47,7 @@ export const AdvancedStatsBehavioralMetrics = ({ behavioralMetrics }: AdvancedSt
         </Card>
 
         {/* Taux de rétention des affiliés */}
-        <Card className="bg-white border-slate-200 shadow-sm hover:shadow-md transition-shadow">
+        <Card className="bg-white border-slate-200">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium text-slate-700">Rétention Affiliés</CardTitle>
             <div className="p-2 bg-purple-100 rounded-full">
@@ -63,7 +63,7 @@ export const AdvancedStatsBehavioralMetrics = ({ behavioralMetrics }: AdvancedSt
         </Card>
 
         {/* Concentration du CA */}
-        <Card className="bg-white border-slate-200 shadow-sm hover:shadow-md transition-shadow">
+        <Card className="bg-white border-slate-200">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium text-slate-700">Concentration CA</CardTitle>
             <div className="p-2 bg-orange-100 rounded-full">

src/components/AdvancedStatsEvolution.tsx

@@ -44,7 +44,7 @@ const EvolutionCard = ({ metric }: { metric: EvolutionMetric }) => {
   const isNeutral = change === 0;
 
   return (
-    <Card className="bg-white border-slate-200 shadow-sm">
+    <Card className="bg-white border-slate-200">
       <CardHeader className="pb-2">
         <CardTitle className="text-sm font-medium text-slate-700">{metric.label}</CardTitle>
       </CardHeader>

src/components/AdvancedStatsFinanceCard.tsx

@@ -13,13 +13,13 @@ interface AdvancedStatsFinanceCardProps {
 export const AdvancedStatsFinanceCard = ({ stats }: AdvancedStatsFinanceCardProps) => {
   return (
     <div className="xl:col-span-1">
-      <div className="bg-gradient-to-br from-emerald-50/50 via-white to-green-50/30 rounded-2xl p-6 shadow-lg border border-white/50 h-full">
+      <div className="bg-white rounded-xl p-6 border border-slate-200 h-full">
         <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
           <DollarSign className="h-5 w-5 text-emerald-600" />
           Finance
         </h3>
         <div className="space-y-4">
-          <div className="bg-white/60 rounded-lg p-4">
+          <div className="bg-slate-50 rounded-lg p-4">
             <div className="text-xl font-bold text-emerald-600 mb-1">
               {new Intl.NumberFormat('fr-FR', {
                 style: 'currency',
@@ -29,7 +29,7 @@ export const AdvancedStatsFinanceCard = ({ stats }: AdvancedStatsFinanceCardProp
             </div>
             <p className="text-sm text-slate-600">CA Total</p>
           </div>
-          <div className="bg-white/60 rounded-lg p-4">
+          <div className="bg-slate-50 rounded-lg p-4">
             <div className="text-xl font-bold text-purple-600 mb-1">
               {stats.conversionRate.toFixed(1)}%
             </div>

src/components/AdvancedStatsHallOfFame.tsx

@@ -16,71 +16,46 @@ export const AdvancedStatsHallOfFame = ({
   topPerformerRevenue 
 }: AdvancedStatsHallOfFameProps) => {
   return (
-    <div className="xl:col-span-1 relative">
-      <div className="absolute -inset-2 bg-gradient-to-r from-blue-400/10 via-purple-500/10 to-blue-400/10 rounded-2xl blur-lg animate-pulse" style={{ animationDuration: '3s' }}></div>
-      <div className="absolute -inset-1 bg-gradient-to-r from-purple-400/8 via-blue-500/8 to-purple-400/8 rounded-xl blur-md animate-pulse" style={{ animationDelay: '1.5s', animationDuration: '4s' }}></div>
-      
-      <div className="relative bg-gradient-to-br from-blue-500 via-purple-600 to-indigo-700 rounded-2xl p-6 shadow-2xl border-none h-full overflow-hidden transform hover:scale-[1.01] transition-all duration-700 z-10">
-        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -skew-x-12 animate-pulse" style={{ animationDuration: '4s' }}></div>
-        
-        <div className="absolute top-3 left-3">
-          <Star className="h-4 w-4 text-blue-200 fill-current animate-pulse" style={{ animationDuration: '2s' }} />
-        </div>
-        <div className="absolute top-6 right-6">
-          <Star className="h-3 w-3 text-indigo-100 fill-current animate-pulse" style={{ animationDelay: '0.7s', animationDuration: '2.5s' }} />
-        </div>
-        <div className="absolute bottom-3 right-3">
-          <Star className="h-4 w-4 text-purple-200 fill-current animate-pulse" style={{ animationDelay: '1.2s', animationDuration: '3s' }} />
-        </div>
-        <div className="absolute bottom-6 left-6">
-          <Star className="h-2 w-2 text-blue-100 fill-current animate-pulse" style={{ animationDelay: '1.8s', animationDuration: '2.2s' }} />
-        </div>
-
-        <div className="relative z-10 h-full flex flex-col justify-center text-center">
-          <div className="flex items-center justify-center mb-6">
-            <Crown className="h-8 w-8 text-white drop-shadow-lg mr-2 animate-pulse" style={{ animationDuration: '2.5s' }} />
-            <h3 className="text-xl font-black text-white drop-shadow-lg">HALL OF FAME</h3>
+    <div className="xl:col-span-1">
+      <div className="bg-white rounded-xl p-6 border border-slate-200 h-full">
+        <div className="text-center">
+          <div className="flex items-center justify-center mb-4">
+            <Crown className="h-6 w-6 text-yellow-600 mr-2" />
+            <h3 className="text-lg font-semibold text-slate-900">Top Performer</h3>
           </div>
 
-          <div className="mb-6">
-            <div className="text-2xl font-black text-white mb-2 drop-shadow-lg break-words">
+          <div className="mb-4">
+            <div className="text-xl font-bold text-slate-900 mb-1 break-words">
               {topPerformingAffiliate.name}
             </div>
-            <div className="text-sm text-white/90 font-bold">
-              🏆 TOP PERFORMER
+            <div className="text-sm text-slate-600">
+              🏆 Meilleur affilié
             </div>
           </div>
 
-          <div className="space-y-4">
-            <div className="bg-white/20 backdrop-blur-sm rounded-xl p-4 border border-white/30">
-              <div className="text-3xl font-black text-white mb-1 drop-shadow-lg">
+          <div className="space-y-3">
+            <div className="bg-slate-50 rounded-lg p-4">
+              <div className="text-2xl font-bold text-purple-600 mb-1">
                 {topPerformingAffiliate.conversionRate.toFixed(1)}%
               </div>
-              <div className="text-xs font-bold text-white/90 uppercase tracking-wide">
+              <div className="text-xs text-slate-600">
                 Taux de conversion
               </div>
             </div>
 
-            <div className="bg-white/20 backdrop-blur-sm rounded-xl p-4 border border-white/30">
-              <div className="text-2xl font-black text-white mb-1 drop-shadow-lg">
+            <div className="bg-slate-50 rounded-lg p-4">
+              <div className="text-xl font-bold text-emerald-600 mb-1">
                 {new Intl.NumberFormat('fr-FR', {
                   style: 'currency',
                   currency: 'EUR',
                   minimumFractionDigits: 0,
                 }).format(topPerformerRevenue)}
               </div>
-              <div className="text-xs font-bold text-white/90 uppercase tracking-wide">
+              <div className="text-xs text-slate-600">
                 CA rapporté
               </div>
             </div>
           </div>
-
-          <div className="mt-4 flex items-center justify-center">
-            <div className="bg-emerald-500/30 backdrop-blur-sm rounded-full px-3 py-1 border border-emerald-400/50 flex items-center gap-1 animate-pulse" style={{ animationDuration: '2.8s' }}>
-              <TrendingUp className="h-3 w-3 text-white" />
-              <span className="text-xs font-bold text-white">EN FORME</span>
-            </div>
-          </div>
         </div>
       </div>
     </div>