/* ========================================
   CINEFLOW - RESPONSIVE CSS
   ======================================== */

/* Fix page d'accueil mobile */
@media screen and (max-width: 768px) {
    /* Reset zoom et viewport */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* Conteneur principal */
    .main .block-container {
        padding: 1rem 0.5rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Fix titre page d'accueil CINEFLOW */
    h1[style*="color: #E50914"],
    h1[style*="text-align: center"] {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Tous les h1 sur mobile */
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.2rem !important;
    }
    
    h3 {
        font-size: 1rem !important;
    }
    
    /* Paragraphes */
    p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Empêcher le dépassement horizontal */
    * {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Colonnes Streamlit */
    [data-testid="column"] {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
    
    /* Métriques */
    [data-testid="stMetricValue"] {
        font-size: 1.3rem !important;
    }
    
    [data-testid="stMetricLabel"] {
        font-size: 0.75rem !important;
    }
    
    /* Graphiques Plotly */
    .js-plotly-plot {
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
    }
    
    /* Tables */
    .dataframe {
        font-size: 0.7rem !important;
        overflow-x: auto !important;
    }
    
    /* Boutons */
    .stButton > button {
        width: 100% !important;
        font-size: 0.85rem !important;
        padding: 0.4rem !important;
    }
    
    /* Sidebar mobile */
    [data-testid="stSidebar"] {
        width: 100% !important;
    }
    
    /* Selectbox et inputs */
    .stSelectbox, .stDateInput, .stNumberInput {
        font-size: 0.85rem !important;
    }
    
    /* Espacement */
    .element-container {
        margin-bottom: 0.5rem !important;
    }
    
    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Tablet (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .main .block-container {
        padding: 2rem 1rem !important;
    }
    
    [data-testid="column"] {
        min-width: 45% !important;
    }
    
    h1 {
        font-size: 2rem !important;
    }
}

/* Desktop amélioré */
@media screen and (min-width: 1024px) {
    .main .block-container {
        max-width: 1400px !important;
        padding: 2rem 3rem !important;
    }
}