/* Variables globales pour le thème clair météo */
:root {
    --bg-light: #e0f0ff;
    --card-bg: #8dbbed;
    --card-border: #7aaee6;
    --primary: #1565c0;
    --text-dark-blue: #033369;
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
}

body {
    background-color: #ffffff;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
}

.bg-meteo-light {
    background-color: var(--bg-light);
}

.text-dark-blue {
    color: var(--text-dark-blue);
}

/* Cartes météo - Style clair inspiré de l'image */
.meteo-card {
    background: linear-gradient(180deg, #9cc2eb 0%, #ffffff 100%);
    border: 1px solid var(--card-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.meteo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(3, 51, 105, 0.15) !important;
}

/* Style des lignes de valeurs (value-box) */
.value-box {
    border-bottom: 2px solid #ffffff !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
.value-box:last-child {
    border-bottom: none !important;
}

/* Valeurs animées lorsqu'elles sont mises à jour */
@keyframes pulse-value-light {
    0% { transform: scale(1); text-shadow: 0 0 0 transparent; }
    50% { transform: scale(1.05); text-shadow: 0 0 10px var(--primary); }
    100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
}

.value-updated {
    animation: pulse-value-light 0.8s ease-out;
    display: inline-block;
}

/* Couleurs personnalisées pour l'Indice de Qualité de l'Air (AQI) */
.bg-aqi-1 { background-color: #00FF00 !important; color: #000 !important; } /* 0-25: Vert flash */
.bg-aqi-2 { background-color: #70C030 !important; color: #000 !important; } /* 26-50: Vert clair / Jaunâtre */
.bg-aqi-3 { background-color: #FFFF00 !important; color: #000 !important; } /* 51-75: Jaune */
.bg-aqi-4 { background-color: #FF8000 !important; color: #fff !important; } /* 76-100: Orange */
.bg-aqi-5 { background-color: #FF0000 !important; color: #fff !important; } /* >100: Rouge */

/* Tabs stylisés pour le thème clair */
.nav-pills .nav-link {
    color: var(--text-dark-blue);
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.nav-pills .nav-link:hover {
    background-color: #f1f5f9;
    color: var(--primary);
}

.nav-pills .nav-link.active {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 10px rgba(21, 101, 192, 0.3);
}

/* Compass */
.compass-arrow {
    transform-origin: center center;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.shadow-inner {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}