body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
.glass-panel { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.weather-icon { transition: transform 0.2s; }
tr:hover .weather-icon { transform: scale(1.15); }
.interactive-iframe-container { position: relative; width: 100%; height: 750px; overflow: hidden; border-radius: 0 0 1rem 1rem; }
.interactive-iframe-container iframe { width: 100%; height: 100%; border: none; }
.cloud-card { position: relative; overflow: hidden; border-radius: 0.75rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; height: 200px; background: #fff; display: flex; flex-direction: column; }
.cloud-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0,0,0,0.15); }
.cloud-image { width: 100%; height: 120px; object-fit: cover; border-bottom: 2px solid rgba(0,0,0,0.05); }
.cloud-info { padding: 0.75rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.cloud-title { font-weight: 700; color: #1f2937; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; }
.cloud-desc { font-size: 0.75rem; color: #4b5563; margin-top: 0.25rem; line-height: 1.3; }
.zoom-img { transition: transform 0.5s ease; }
.group:hover .zoom-img { transform: scale(1.05); }
.group:hover .zoom-icon { transform: scale(1.15); }
.zoom-icon { transition: transform 0.5s ease; }
/* Optimisations mobile */
@media (max-width: 640px) {
    /* Header plus compact sur mobile uniquement */
    header.bg-blue-600 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Navigation : scrollbar plus discrète */
    .custom-scroll::-webkit-scrollbar {
        height: 4px;
    }

    /* Tableau des relevés horaires : scroll horizontal */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Réduire un peu la taille de police dans le tableau sur mobile */
    #obs-table-body {
        font-size: 0.8rem;
    }

    #obs-table-body th,
    #obs-table-body td {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
}