Update app.py

app.py

@@ -24,105 +24,160 @@ st.set_page_config(
 # Style CSS personnalisé
 st.markdown("""
     <style>
-    /* Fond principal */
+    /* ========== FOND ET STRUCTURE GÉNÉRALE ========== */
     .main {
-        background-color: #f8f9fa;
+        background-color: #f5f7fa;
+        font-family: 'Helvetica Neue', Arial, sans-serif;
     }
     
-    /* Sidebar */
-    [data-testid="stSidebar"] {
-        background: linear-gradient(180deg, #003366 0%, #002244 100%);
+    /* ========== EN-TÊTE ========== */
+    .header {
+        background: linear-gradient(135deg, #003366 0%, #002244 100%);
         color: white;
+        padding: 1.5rem;
+        border-radius: 0 0 15px 15px;
+        margin-bottom: 2rem;
+        box-shadow: 0 4px 12px rgba(0, 51, 102, 0.15);
     }
     
-    /* Titres */
-    h1, h2, h3, h4, h5, h6 {
-        color: #003366 !important;
-        font-family: 'Helvetica Neue', sans-serif;
+    .header h1 {
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+        font-size: 1.8rem;
+    }
+    
+    .header p {
+        opacity: 0.9;
+        font-size: 1rem;
+    }
+    
+    /* ========== SIDEBAR ========== */
+    [data-testid="stSidebar"] {
+        background: linear-gradient(180deg, #003366 0%, #002244 100%) !important;
+        padding-top: 2rem;
+    }
+    
+    .sidebar .sidebar-content {
+        color: white;
     }
     
-    /* Cartes de métriques */
+    /* ========== CARTES DE MÉTRIQUES ========== */
     .stMetric {
-        background-color: white;
+        background: white;
         border-radius: 10px;
-        padding: 15px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        padding: 1.5rem;
+        box-shadow: 0 2px 8px rgba(0, 51, 102, 0.1);
         border-left: 4px solid #003366;
+        margin-bottom: 1.5rem;
     }
     
-    /* Boutons */
-    .stButton>button {
-        background-color: #003366;
-        color: white;
-        border-radius: 5px;
-        border: none;
-        padding: 8px 16px;
-        font-weight: 500;
+    .stMetric > div > div {
+        font-size: 1.8rem !important;
+        font-weight: 600;
+        color: #003366 !important;
     }
     
-    .stButton>button:hover {
-        background-color: #002244;
-        color: white;
+    .stMetric > div > label {
+        font-size: 0.9rem !important;
+        color: #555 !important;
     }
     
-    /* Onglets */
+    /* ========== ONGLETS ========== */
     [data-baseweb="tab-list"] {
-        gap: 10px;
+        gap: 5px;
+        padding: 0 1rem;
     }
     
     [data-baseweb="tab"] {
-        background-color: #e9ecef;
-        border-radius: 8px 8px 0 0 !important;
+        background: #e9ecef !important;
+        border-radius: 8px !important;
         padding: 10px 20px !important;
+        margin: 0 2px !important;
+        font-weight: 500;
+        transition: all 0.3s ease;
     }
     
     [aria-selected="true"] {
-        background-color: #003366 !important;
+        background: #003366 !important;
         color: white !important;
+        box-shadow: 0 2px 5px rgba(0, 51, 102, 0.2);
     }
     
-    /* Inputs */
-    .stTextInput>div>div>input,
-    .stNumberInput>div>div>input,
-    .stSelectbox>div>div>select,
-    .stDateInput>div>div>input {
-        border-radius: 5px !important;
-        border: 1px solid #ced4da !important;
+    /* ========== GRAPHIQUES ========== */
+    .stPlotlyChart {
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 51, 102, 0.1);
+        background: white;
+        padding: 1rem;
     }
     
-    /* Tableaux */
+    /* ========== BOUTONS ========== */
+    .stButton > button {
+        background-color: #003366;
+        color: white;
+        border-radius: 6px;
+        border: none;
+        padding: 0.7rem 1.5rem;
+        font-weight: 500;
+        transition: all 0.3s ease;
+    }
+    
+    .stButton > button:hover {
+        background-color: #002244;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 51, 102, 0.2);
+    }
+    
+    /* ========== TABLEAUX ========== */
     .stDataFrame {
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        border-radius: 10px;
+        box-shadow: 0 2px 8px rgba(0, 51, 102, 0.1);
+    }
+    
+    /* ========== EXPANDERS ========== */
+    .stExpander {
+        background: white;
+        border-radius: 10px;
+        box-shadow: 0 2px 8px rgba(0, 51, 102, 0.1);
+        margin-bottom: 1.5rem;
     }
     
-    /* Footer */
+    .stExpander > details > summary {
+        background: #003366 !important;
+        color: white !important;
+        padding: 1rem !important;
+        border-radius: 8px !important;
+        font-weight: 600;
+    }
+    
+    /* ========== FOOTER ========== */
     .footer {
-        position: fixed;
-        bottom: 0;
-        width: 100%;
-        background-color: #003366;
+        background: #003366;
         color: white;
+        padding: 1rem;
         text-align: center;
-        padding: 10px;
-        font-size: 0.8rem;
+        margin-top: 3rem;
+        border-radius: 8px 8px 0 0;
+        font-size: 0.85rem;
     }
     
-    /* Couleurs spécifiques BEAC */
+    /* ========== COULEURS THÉMATIQUES ========== */
     :root {
-        --beac-blue: #003366;
-        --beac-gold: #D4AF37;
-        --beac-light: #f0f4f7;
+        --beac-primary: #003366;
+        --beac-secondary: #D4AF37;
+        --beac-accent: #8BBEFF;
+        --beac-success: #28a745;
+        --beac-danger: #dc3545;
     }
     
-    /* En-tête personnalisé */
-    .header {
-        background: linear-gradient(90deg, #003366 0%, #004080 100%);
-        color: white;
-        padding: 1rem;
-        border-radius: 0 0 10px 10px;
-        margin-bottom: 2rem;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    /* ========== ANIMATIONS ========== */
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .stMetric, .stPlotlyChart, .stDataFrame {
+        animation: fadeIn 0.5s ease-out;
     }
 </style>
     """, unsafe_allow_html=True)