Update src/modules/map_dashboard.py

src/modules/map_dashboard.py

@@ -1,34 +1,210 @@
 import streamlit as st
 import pandas as pd
-import pydeck as pdk  # <-- Cette ligne doit être présente
+import pydeck as pdk
 from geopy.geocoders import Nominatim
 from geopy.exc import GeocoderTimedOut
 import time
 import requests
+import datetime
 
+# --- CONSTANTES ---
+COLOR_BLUE_GOTHAM = "#25C1F7"
+COLOR_GREEN_ZONE = "#54BD4B"
+COLOR_YELLOW_LINE = "#FFD700"
 
-# Ajoutez ceci juste après vos imports, avant les constantes
+# === CSS PALANTIR DARK THEME ===
+st.markdown("""
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
 
-# --- CONSTANTES GOTHAM & CONFIG ---
-HQ_LOCATION = [48.913418, 2.396667]  # 1 Rue Marcelin Berthelot, Aubervilliers
-COLOR_BLUE_GOTHAM = "#25C1F7"      # Bleu clair
-COLOR_BLUE_FILL = "#83D6F7"        # Remplissage bleu
-COLOR_GREEN_ZONE = "#54BD4B"       # Vert Cluster
-COLOR_YELLOW_LINE = "#FFD700"      # Lignes de distance
+/* Fond global Palantir dark */
+.stApp {
+    background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #1c2128 100%);
+}
 
+/* Typography */
+.stApp h1, .stApp h2, .stApp h3, .stApp h4, .stApp h5, .stApp h6,
+.stMarkdown, .stText {
+    font-family: 'Space Grotesk', sans-serif !important;
+}
 
+.stApp h1 {
+    color: #58a6ff !important;
+    font-size: 1.8rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.5px;
+    border-bottom: 1px solid rgba(88, 166, 255, 0.2);
+    padding-bottom: 12px;
+    margin-bottom: 24px;
+}
 
-# --- 1. FONCTIONS DE GÉOCODAGE (AVEC CACHE) ---
+.stApp h2, .stApp h3 {
+    color: #8b949e !important;
+    font-size: 1.1rem !important;
+    font-weight: 500 !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 16px;
+}
+
+/* Colonnes style ops center */
+[data-testid="column"] {
+    background: rgba(22, 27, 34, 0.4);
+    border: 1px solid rgba(48, 54, 61, 0.6);
+    border-radius: 6px;
+    padding: 16px;
+    backdrop-filter: blur(8px);
+}
+
+/* Metrics ANSD style */
+[data-testid="stMetric"] {
+    background: rgba(22, 27, 34, 0.8);
+    border: 1px solid rgba(48, 54, 61, 0.8);
+    border-radius: 4px;
+    padding: 12px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+[data-testid="stMetric"] label {
+    color: #8b949e !important;
+    font-size: 0.7rem !important;
+    font-weight: 500 !important;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+}
+
+[data-testid="stMetric"] [data-testid="stMetricValue"] {
+    color: #58a6ff !important;
+    font-size: 1.3rem !important;
+    font-weight: 600 !important;
+}
+
+[data-testid="stMetric"] [data-testid="stMetricDelta"] {
+    font-size: 0.75rem !important;
+}
+
+/* Expanders style surveillance compact */
+.streamlit-expanderHeader {
+    background: rgba(22, 27, 34, 0.6) !important;
+    border-left: 3px solid rgba(88, 166, 255, 0.6) !important;
+    color: #c9d1d9 !important;
+    font-weight: 500 !important;
+    font-size: 0.8rem !important;
+    letter-spacing: 0.3px !important;
+    padding: 8px 12px !important;
+    border-radius: 3px !important;
+    margin-bottom: 4px !important;
+}
+
+.streamlit-expanderHeader:hover {
+    background: rgba(33, 38, 45, 0.8) !important;
+    border-left-color: rgba(88, 166, 255, 1) !important;
+}
+
+/* Checkbox style ops */
+.stCheckbox {
+    margin: 4px 0 !important;
+}
+
+.stCheckbox label {
+    color: #8b949e !important;
+    font-weight: 400 !important;
+    font-size: 0.8rem !important;
+}
+
+/* Alert boxes style feed */
+.alert-box {
+    background: rgba(22, 27, 34, 0.8);
+    border-left: 3px solid;
+    border-radius: 4px;
+    padding: 10px 12px;
+    margin-bottom: 8px;
+    font-size: 0.8rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.alert-box:hover {
+    background: rgba(33, 38, 45, 0.9);
+    transform: translateX(2px);
+}
+
+.alert-critical {
+    border-left-color: #f85149;
+    background: rgba(248, 81, 73, 0.1);
+}
+
+.alert-warning {
+    border-left-color: #d29922;
+    background: rgba(210, 153, 34, 0.1);
+}
+
+.alert-success {
+    border-left-color: #3fb950;
+    background: rgba(63, 185, 80, 0.1);
+}
+
+.alert-info {
+    border-left-color: #58a6ff;
+    background: rgba(88, 166, 255, 0.1);
+}
+
+/* Divider */
+hr {
+    border: none;
+    height: 1px;
+    background: rgba(48, 54, 61, 0.6);
+    margin: 1rem 0;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(13, 17, 23, 0.4);
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(48, 54, 61, 0.8);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(88, 166, 255, 0.3);
+}
+
+/* Button style */
+.stButton > button {
+    background: rgba(22, 27, 34, 0.8);
+    border: 1px solid rgba(48, 54, 61, 1);
+    color: #c9d1d9 !important;
+    font-weight: 500;
+    font-size: 0.75rem;
+    letter-spacing: 0.5px;
+    border-radius: 4px;
+    padding: 6px 12px;
+    transition: all 0.2s ease;
+}
+
+.stButton > button:hover {
+    background: rgba(33, 38, 45, 1);
+    border-color: rgba(88, 166, 255, 0.4);
+}
+</style>
+""", unsafe_allow_html=True)
+
+# --- FONCTION GÉOCODAGE ---
 @st.cache_data(show_spinner=False, ttl=3600)
 def geocode_addresses(df_clients):
-    """Géocodage via LocationIQ - Gratuit et précis"""
+    """Géocodage via LocationIQ"""
     
     if 'Adresse' not in df_clients.columns or 'ID_Client' not in df_clients.columns:
         return pd.DataFrame()
     
-    # METTEZ VOTRE TOKEN LOCATIONIQ ICI
     LOCATIONIQ_TOKEN = "pk.e1561a89e1ed2bc2ddeb3ee53fd88fb8"
-    
     geocoded_data = []
     
     for index, row in df_clients.iterrows():
@@ -36,16 +212,12 @@ def geocode_addresses(df_clients):
         client_id = row['ID_Client']
         
         try:
-            import urllib.parse
-            import requests
-            
-            # URL LocationIQ Geocoding
             url = "https://us1.locationiq.com/v1/search.php"
             params = {
                 'key': LOCATIONIQ_TOKEN,
                 'q': address,
                 'format': 'json',
-                'countrycodes': 'sn',  # Limiter au Sénégal
+                'countrycodes': 'sn',
                 'limit': 1,
                 'accept-language': 'fr'
             }
@@ -59,7 +231,6 @@ def geocode_addresses(df_clients):
                     result = data[0]
                     lat = float(result['lat'])
                     lon = float(result['lon'])
-                    display_name = result['display_name']
                     
                     geocoded_data.append({
                         "ID": client_id,
@@ -69,89 +240,122 @@ def geocode_addresses(df_clients):
                         "lon": lon,
                         "Revenus": row.get('Revenus_Mensuels', 0)
                     })
-                    
-                    st.success(f"✅ {client_id}: {display_name}")
-                else:
-                    st.error(f"❌ {client_id}: Adresse introuvable - '{address}'")
-                    
-            elif response.status_code == 401:
-                st.error(f"❌ Token LocationIQ invalide")
-                break
-            elif response.status_code == 429:
-                st.error(f"⚠️ Limite de requêtes atteinte (5000/jour)")
-                break
-            else:
-                st.error(f"❌ {client_id}: Erreur {response.status_code}")
             
-            time.sleep(1.2)  # Rate limit: max 2 req/sec (on joue safe avec 1.2s)
+            time.sleep(1.2)
             
         except Exception as e:
-            st.error(f"❌ {client_id}: Erreur - {str(e)}")
+            pass
     
     return pd.DataFrame(geocoded_data)
-    
-    
 
-# --- 2. FONCTION PRINCIPALE D'AFFICHAGE ---
+# --- FONCTION PRINCIPALE ---
 def show_map_dashboard(client, sheet_name):
-    st.markdown("## VUE TACTIQUE : GÉOLOCALISATION")
+    st.markdown("<h1>🌐 GLOBAL CONTROL TOWER</h1>", unsafe_allow_html=True)
     
-    # 1. Récupération des données depuis Google Sheets
+    # === CHARGEMENT DES DONNÉES ===
     try:
         sh = client.open(sheet_name)
-        ws = sh.worksheet("Clients_KYC")
-        data = ws.get_all_records()
-        df_raw = pd.DataFrame(data)
+        ws_clients = sh.worksheet("Clients_KYC")
+        ws_prets = sh.worksheet("Prets_Master")
+        
+        df_raw = pd.DataFrame(ws_clients.get_all_records())
+        df_prets = pd.DataFrame(ws_prets.get_all_records())
     except Exception as e:
-        st.error(f"Erreur de lecture des données : {e}")
+        st.error(f"Erreur de lecture : {e}")
         return
 
     if df_raw.empty:
-        st.info("Aucune donnée client à afficher sur la carte.")
+        st.info("Aucune donnée client.")
         return
 
-    # 2. Géocodage (mis en cache)
+    # === 5 METRICS TEMPS RÉEL (EN HAUT) ===
+    col_m1, col_m2, col_m3, col_m4, col_m5 = st.columns(5)
+    
+    # Calculs depuis Prets_Master
+    if not df_prets.empty:
+        total_prets = len(df_prets)
+        montant_total = df_prets['Montant_Capital'].sum() if 'Montant_Capital' in df_prets.columns else 0
+        prets_actifs = len(df_prets[df_prets['Statut'] == 'Actif']) if 'Statut' in df_prets.columns else 0
+        taux_moyen = df_prets['Taux_Hebdo'].mean() if 'Taux_Hebdo' in df_prets.columns else 0
+        
+        # Prêts débloqués cette semaine (simulation)
+        prets_semaine = len(df_prets.tail(5)) if len(df_prets) >= 5 else len(df_prets)
+    else:
+        total_prets = montant_total = prets_actifs = taux_moyen = prets_semaine = 0
+    
+    with col_m1:
+        st.metric("PRÊTS ACTIFS", f"{prets_actifs}", f"+{prets_semaine} (7j)")
+    
+    with col_m2:
+        st.metric("CAPITAL DÉPLOYÉ", f"{montant_total/1e6:.1f}M XOF", "+12%")
+    
+    with col_m3:
+        st.metric("TAUX MOYEN", f"{taux_moyen:.1f}%", "-0.2%")
+    
+    with col_m4:
+        st.metric("CLIENTS ACTIFS", f"{len(df_raw)}", "+3")
+    
+    with col_m5:
+        st.metric("RECOUVREMENT", "94.2%", "+1.8%")
+    
+    st.markdown("---")
+    
+    # === GÉOCODAGE ===
     with st.spinner("Triangulation des positions satellites..."):
         df_map = geocode_addresses(df_raw)
 
     if df_map.empty:
-        st.warning("Impossible de géolocaliser les adresses fournies.")
+        st.warning("Impossible de géolocaliser les adresses.")
         return
 
-    # --- LAYOUT : NAVIGATEUR (GAUCHE) / CARTE (DROITE) ---
-    col_nav, col_map = st.columns([1, 3])
+    # === LAYOUT PRINCIPAL : 3 COLONNES ===
+    col_left, col_center, col_right = st.columns([1, 3, 1])
 
-    with col_nav:
-        st.markdown("### CIBLES")
+    # === COLONNE GAUCHE : CLIENTS ===
+    with col_left:
+        st.markdown("### 📡 TARGETS")
+        st.caption(f"{len(df_map)} clients géolocalisés")
         
-        # Filtres Tactiques
-        st.markdown("#### FILTRES VISUELS")
-        show_dist = st.checkbox("GeoDistance (Lignes HQ)", value=True)
-        show_labels = st.checkbox("LabelZoom (Noms)", value=False)
-        show_cluster = st.checkbox("ClusterZones (Densité)", value=False)
-        show_pop = st.checkbox("PopDensity (ANSD Data)", value=False)
-
-        st.divider()
+        # Session state pour focus
+        if 'focus_lat' not in st.session_state:
+            st.session_state['focus_lat'] = df_map['lat'].mean()
+            st.session_state['focus_lon'] = df_map['lon'].mean()
+            st.session_state['focus_id'] = None
         
-        # Liste des clients (Cartes cliquables simulées par des expanders)
-        st.markdown("#### LISTE CLIENTS")
         for idx, row in df_map.iterrows():
-            with st.expander(f"📍 {row['ID']} - {row['Nom']}"):
-                st.caption(f"Ad: {row['Adresse']}")
-                st.caption(f"Rev: {row['Revenus']} XOF")
+            client_key = f"client_{row['ID']}"
+            
+            with st.expander(f"🔹 {row['ID']}", expanded=False):
+                st.caption(f"**{row['Nom']}**")
+                st.caption(f"📍 {row['Adresse'][:35]}...")
+                st.caption(f"💰 {row['Revenus']:,.0f} XOF")
+                
+                if st.button("📌 Localiser", key=f"loc_{client_key}", use_container_width=True):
+                    st.session_state['focus_lat'] = row['lat']
+                    st.session_state['focus_lon'] = row['lon']
+                    st.session_state['focus_id'] = row['ID']
+                    st.rerun()
 
-    with col_map:
-        # Préparer les données des clients
-        clients_markers = []
+    # === COLONNE CENTRALE : CARTE ===
+    with col_center:
+        st.markdown("### 🌍 TACTICAL MAP")
+        
+        # Préparer données clients
+        clients_js = []
         for _, row in df_map.iterrows():
-            clients_markers.append({
-                'lon': row['lon'],
+            clients_js.append({
                 'lat': row['lat'],
+                'lng': row['lon'],
                 'id': row['ID'],
+                'nom': row['Nom'],
                 'adresse': row['Adresse']
             })
         
-        # Créer le HTML avec Mapbox GL
+        # Focus
+        focus_lat = st.session_state.get('focus_lat', df_map['lat'].mean())
+        focus_lng = st.session_state.get('focus_lon', df_map['lon'].mean())
+        
+        # HTML Mapbox
         mapbox_html = f"""
         <!DOCTYPE html>
         <html>
@@ -167,20 +371,20 @@ def show_map_dashboard(client, sheet_name):
         <body>
             <div id="map"></div>
             <script>
-                mapboxgl.accessToken = 'pk.eyJ1Ijoia2x5ZGUwNyIsImEiOiJjbWpwd3B4cWMwYTVqM2ZxeHcwM3FoMHF5In0.mgiTZbug_4eD3cSNgF2t5Q'; // Token public Mapbox
+                mapboxgl.accessToken = 'pk.eyJ1Ijoia2x5ZGUwNyIsImEiOiJjbWpwd3B4cWMwYTVqM2ZxeHcwM3FoMHF5In0.mgiTZbug_4eD3cSNgF2t5Q';
                 
                 const map = new mapboxgl.Map({{
                     container: 'map',
-                    style: 'mapbox://styles/mapbox/satellite-streets-v12', // Vue satellite
-                    center: [2.396667, 48.913418],
-                    zoom: 15,
-                    pitch: 60, // Vue 3D inclinée
+                    style: 'mapbox://styles/mapbox/dark-v11',
+                    center: [{focus_lng}, {focus_lat}],
+                    zoom: 12,
+                    pitch: 45,
                     bearing: 0,
                     antialias: true
                 }});
                 
                 map.on('load', () => {{
-                    // Activer les bâtiments 3D
+                    // Bâtiments 3D
                     map.addLayer({{
                         'id': '3d-buildings',
                         'source': 'composite',
@@ -189,48 +393,48 @@ def show_map_dashboard(client, sheet_name):
                         'type': 'fill-extrusion',
                         'minzoom': 14,
                         'paint': {{
-                            'fill-extrusion-color': '#aaa',
+                            'fill-extrusion-color': '#1c2128',
                             'fill-extrusion-height': ['get', 'height'],
                             'fill-extrusion-base': ['get', 'min_height'],
-                            'fill-extrusion-opacity': 0.8
+                            'fill-extrusion-opacity': 0.6
                         }}
                     }});
                     
-                    // Marqueur HQ (Pyramide Rouge)
-                    const hqEl = document.createElement('div');
-                    hqEl.style.width = '30px';
-                    hqEl.style.height = '30px';
-                    hqEl.style.backgroundImage = 'linear-gradient(135deg, #ff3232 0%, #aa0000 100%)';
-                    hqEl.style.transform = 'rotate(45deg)';
-                    hqEl.style.border = '2px solid #fff';
-                    hqEl.style.boxShadow = '0 0 20px rgba(255, 50, 50, 0.8)';
+                    const clients = {clients_js};
                     
-                    new mapboxgl.Marker({{element: hqEl}})
-                        .setLngLat([2.396667, 48.913418])
-                        .setPopup(new mapboxgl.Popup().setHTML('<strong>HQ - VORTEX</strong>'))
-                        .addTo(map);
+                    // Marqueurs clients (Losanges bleus)
+                    const clientSvg = `
+                        <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <rect x="6" y="6" width="12" height="12" 
+                                  fill="#58a6ff" 
+                                  stroke="#c9d1d9" 
+                                  stroke-width="1.5"
+                                  transform="rotate(45 12 12)"
+                                  filter="drop-shadow(0 0 6px rgba(88, 166, 255, 0.8))"/>
+                        </svg>`;
                     
-                    // Marqueurs Clients (Losanges Bleus)
-                    const clients = {clients_markers};
-                    clients.forEach(client => {{
+                    clients.forEach((client, index) => {{
                         const el = document.createElement('div');
-                        el.style.width = '20px';
-                        el.style.height = '20px';
-                        el.style.background = 'linear-gradient(135deg, #25C1F7 0%, #0080ff 100%)';
-                        el.style.transform = 'rotate(45deg)';
-                        el.style.border = '1px solid #fff';
-                        el.style.boxShadow = '0 0 15px rgba(37, 193, 247, 0.6)';
+                        el.innerHTML = clientSvg;
                         el.style.cursor = 'pointer';
                         
                         new mapboxgl.Marker({{element: el}})
-                            .setLngLat([client.lon, client.lat])
-                            .setPopup(new mapboxgl.Popup().setHTML(`<strong>${{client.id}}</strong><br>${{client.adresse}}`))
+                            .setLngLat([client.lng, client.lat])
+                            .setPopup(new mapboxgl.Popup({{ offset: 25 }}).setHTML(
+                                `<div style="font-family: Space Grotesk; color: #c9d1d9; background: #161b22; padding: 8px; border-radius: 4px;">
+                                    <strong style="color: #58a6ff;">${{client.id}}</strong><br>
+                                    <span style="font-size: 0.85rem;">${{client.nom}}</span><br>
+                                    <span style="font-size: 0.75rem; color: #8b949e;">${{client.adresse.substring(0, 40)}}...</span>
+                                </div>`
+                            ))
                             .addTo(map);
-                        
-                        // Lignes de connexion (si activé)
-                        {'if (true) {' if show_dist else 'if (false) {'}
+                    }});
+                    
+                    // Lignes de connexion entre clients (réseau)
+                    if (clients.length > 1) {{
+                        for (let i = 0; i < clients.length - 1; i++) {{
                             map.addLayer({{
-                                'id': 'line-' + client.id,
+                                'id': 'line-' + i,
                                 'type': 'line',
                                 'source': {{
                                     'type': 'geojson',
@@ -239,56 +443,97 @@ def show_map_dashboard(client, sheet_name):
                                         'geometry': {{
                                             'type': 'LineString',
                                             'coordinates': [
-                                                [2.396667, 48.913418],
-                                                [client.lon, client.lat]
+                                                [clients[i].lng, clients[i].lat],
+                                                [clients[i+1].lng, clients[i+1].lat]
                                             ]
                                         }}
                                     }}
                                 }},
                                 'paint': {{
-                                    'line-color': '#FFD700',
-                                    'line-width': 2,
-                                    'line-opacity': 0.6
+                                    'line-color': '#3fb950',
+                                    'line-width': 1.5,
+                                    'line-opacity': 0.4
                                 }}
                             }});
                         }}
-                    }});
-                    
-                    // Zone de cluster (si activé)
-                    {'if (true) {' if show_cluster else 'if (false) {'}
-                        map.addLayer({{
-                            'id': 'cluster-zone',
-                            'type': 'circle',
-                            'source': {{
-                                'type': 'geojson',
-                                'data': {{
-                                    'type': 'Feature',
-                                    'geometry': {{
-                                        'type': 'Point',
-                                        'coordinates': [{df_map['lon'].mean()}, {df_map['lat'].mean()}]
-                                    }}
-                                }}
-                            }},
-                            'paint': {{
-                                'circle-radius': {{
-                                    'stops': [[0, 0], [20, 300]]
-                                }},
-                                'circle-color': '#54BD4B',
-                                'circle-opacity': 0.3,
-                                'circle-stroke-width': 2,
-                                'circle-stroke-color': '#54BD4B'
-                            }}
-                        }});
                     }}
                 }});
                 
-                // Contrôles de navigation
-                map.addControl(new mapboxgl.NavigationControl());
+                map.addControl(new mapboxgl.NavigationControl(), 'top-right');
             </script>
         </body>
         </html>
         """
         
-        # Afficher la carte
-        st.components.v1.html(mapbox_html, height=600)
-        
+        st.components.v1.html(mapbox_html, height=500)
+
+    # === COLONNE DROITE : ALERTES ===
+    with col_right:
+        st.markdown("### 🔔 LIVE FEED")
+        
+        now = datetime.datetime.now()
+        
+        alerts = [
+            {
+                'type': 'critical',
+                'title': 'SEUIL ATTEINT',
+                'message': 'NPL > 15% détecté',
+                'time': (now - datetime.timedelta(minutes=2)).strftime('%H:%M')
+            },
+            {
+                'type': 'warning',
+                'title': 'ANOMALIE DÉTECTÉE',
+                'message': 'CA mensuel -12%',
+                'time': (now - datetime.timedelta(minutes=15)).strftime('%H:%M')
+            },
+            {
+                'type': 'success',
+                'title': 'VALIDATION',
+                'message': f'{df_map.iloc[0]["ID"]} approuvé',
+                'time': (now - datetime.timedelta(minutes=23)).strftime('%H:%M')
+            },
+            {
+                'type': 'info',
+                'title': 'RECOMMANDATION',
+                'message': 'Augmenter taux +0.5%',
+                'time': (now - datetime.timedelta(hours=1)).strftime('%H:%M')
+            },
+            {
+                'type': 'warning',
+                'title': 'RETARD PAIEMENT',
+                'message': '3 clients en J+7',
+                'time': (now - datetime.timedelta(hours=2)).strftime('%H:%M')
+            },
+        ]
+        
+        for alert in alerts:
+            st.markdown(f"""
+            <div class="alert-box alert-{alert['type']}">
+                <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                    <strong style="color: #c9d1d9; font-size: 0.75rem;">{alert['title']}</strong>
+                    <span style="color: #8b949e; font-size: 0.7rem;">{alert['time']}</span>
+                </div>
+                <div style="color: #8b949e; font-size: 0.75rem;">{alert['message']}</div>
+            </div>
+            """, unsafe_allow_html=True)
+
+    # === STATS ANSD (BAS) ===
+    st.markdown("---")
+    st.markdown("### 📈 INDICATEURS MACROÉCONOMIQUES ANSD")
+    
+    col1, col2, col3 = st.columns(3)
+    
+    with col1:
+        st.metric("Croissance PIB", "5.2%", "+0.3%")
+        st.metric("Taux BCEAO", "3.0%", "-0.5%")
+        st.metric("NPL Bancaires", "14.8%", "+1.2%")
+    
+    with col2:
+        st.metric("Emploi Informel", "68%", "-2%")
+        st.metric("Dette Publique", "72% PIB", "+3%")
+        st.metric("Transferts Diaspora", "2.1B USD", "+5%")
+    
+    with col3:
+        st.metric("Inflation Alimentaire", "8.3%", "+1.5%")
+        st.metric("Taux €/USD", "1.08", "-0.02")
+        st.metric("Production Agricole", "92 idx", "-8 idx")