Translate weather conditions to French for better user experience

Implement client-side translation for weather conditions in the WeatherWidget component, resolving issues with English text for current and previous year data.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d43bd811-9372-45a7-8ac9-4a954c0538e1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/d43bd811-9372-45a7-8ac9-4a954c0538e1/AtJHwYs

client/src/components/WeatherWidget.tsx

@@ -23,6 +23,36 @@ interface WeatherResponse {
 
 
 
+// Fonction de traduction française côté client comme sécurité
+const translateToFrench = (condition: string): string => {
+  const conditionLower = condition.toLowerCase();
+  
+  if (conditionLower.includes('clear')) return 'Dégagé';
+  if (conditionLower.includes('sunny')) return 'Ensoleillé';
+  if (conditionLower.includes('fair')) return 'Beau temps';
+  if (conditionLower.includes('partly cloudy')) return 'Partiellement nuageux';
+  if (conditionLower.includes('cloudy')) return 'Nuageux';
+  if (conditionLower.includes('overcast')) return 'Couvert';
+  if (conditionLower.includes('rain')) {
+    if (conditionLower.includes('heavy')) return 'Pluie forte';
+    if (conditionLower.includes('light')) return 'Pluie légère';
+    return 'Pluie';
+  }
+  if (conditionLower.includes('shower')) return 'Averses';
+  if (conditionLower.includes('drizzle')) return 'Bruine';
+  if (conditionLower.includes('thunderstorm') || conditionLower.includes('thunder')) return 'Orage';
+  if (conditionLower.includes('snow')) {
+    if (conditionLower.includes('heavy')) return 'Neige forte';
+    if (conditionLower.includes('light')) return 'Neige légère';
+    return 'Neige';
+  }
+  if (conditionLower.includes('fog')) return 'Brouillard';
+  if (conditionLower.includes('mist')) return 'Brume';
+  if (conditionLower.includes('wind')) return 'Venteux';
+  
+  return condition; // Si déjà en français ou inconnu
+};
+
 const WeatherIcon = ({ condition, size = 20 }: { condition: string; size?: number }) => {
   // Utiliser des tailles fixes plutôt que dynamiques pour éviter les problèmes de Tailwind
   const getIconClass = (size: number) => {
@@ -134,7 +164,7 @@ export default function WeatherWidget() {
                 {location.split(',')[0]}
               </span>
               <span className="text-xs text-slate-500 dark:text-slate-400">
-                {weather.currentYear?.condition || 'Inconnu'}
+                {translateToFrench(weather.currentYear?.condition || 'Inconnu')}
               </span>
             </div>
           </div>
@@ -164,8 +194,8 @@ export default function WeatherWidget() {
                   <div className="text-xs text-slate-500 dark:text-slate-400">
                     Année dernière
                   </div>
-                  <div className="text-xs text-slate-400 dark:text-slate-500 mt-1">
+                  <div className="text-xs text-slate-600 dark:text-slate-300 mt-1 font-medium">
-                    {weather.previousYear?.condition || ''}
+                    {translateToFrench(weather.previousYear?.condition || '')}
                   </div>
                 </div>
               </>