/**\n * TopoclimbCH JavaScript Components Styles\n * Styles pour les composants JavaScript modernes\n */\n\n/* ===== WEATHER WIDGET ===== */\n.weather-widget {\n    background: #fff;\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    padding: 20px;\n    margin-bottom: 20px;\n}\n\n.weather-header {\n    display: flex;\n    justify-content: between;\n    align-items: center;\n    margin-bottom: 16px;\n    padding-bottom: 12px;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.weather-title {\n    margin: 0;\n    color: #1f2937;\n    font-size: 16px;\n    font-weight: 600;\n}\n\n.weather-refresh button {\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    padding: 4px;\n    border-radius: 4px;\n    transition: all 0.2s;\n}\n\n.weather-refresh button:hover {\n    background: #f3f4f6;\n    color: #374151;\n}\n\n.current-weather-main {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-bottom: 16px;\n}\n\n.weather-icon {\n    font-size: 48px;\n    line-height: 1;\n}\n\n.weather-icon-small {\n    font-size: 24px;\n}\n\n.weather-temp {\n    flex: 1;\n}\n\n.temp-main {\n    display: block;\n    font-size: 32px;\n    font-weight: 700;\n    color: #1f2937;\n    line-height: 1;\n}\n\n.temp-feels {\n    display: block;\n    font-size: 14px;\n    color: #6b7280;\n    margin-top: 4px;\n}\n\n.weather-desc {\n    font-size: 16px;\n    color: #4b5563;\n    font-weight: 500;\n}\n\n.weather-details {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px;\n    background: #f9fafb;\n    border-radius: 8px;\n    text-align: center;\n}\n\n.detail-item i {\n    color: #3b82f6;\n    margin-bottom: 4px;\n}\n\n.detail-label {\n    font-size: 12px;\n    color: #6b7280;\n    margin-bottom: 2px;\n}\n\n.detail-value {\n    font-size: 14px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n/* Prévisions */\n.forecast-title {\n    margin: 16px 0 8px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n}\n\n.forecast-grid {\n    display: grid;\n    grid-template-columns: repeat(5, 1fr);\n    gap: 8px;\n}\n\n.forecast-item {\n    text-align: center;\n    padding: 8px 4px;\n    background: #f9fafb;\n    border-radius: 6px;\n}\n\n.forecast-day {\n    font-size: 12px;\n    color: #6b7280;\n    margin-bottom: 4px;\n}\n\n.forecast-temp {\n    display: flex;\n    justify-content: center;\n    gap: 4px;\n    margin: 4px 0;\n}\n\n.temp-max {\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.temp-min {\n    color: #6b7280;\n}\n\n.forecast-rain {\n    font-size: 11px;\n    color: #3b82f6;\n}\n\n/* Conditions d'escalade */\n.conditions-title {\n    margin: 16px 0 8px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n}\n\n.conditions-overall {\n    text-align: center;\n    margin-bottom: 12px;\n}\n\n.condition-score {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    border-radius: 20px;\n    font-weight: 600;\n    font-size: 14px;\n}\n\n.condition-good {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.condition-fair {\n    background: #fef3c7;\n    color: #92400e;\n}\n\n.condition-poor {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n.conditions-details {\n    display: grid;\n    gap: 4px;\n}\n\n.condition-item {\n    display: flex;\n    justify-content: space-between;\n    padding: 4px 0;\n    font-size: 13px;\n}\n\n.condition-label {\n    color: #6b7280;\n}\n\n.conditions-advice {\n    margin-top: 12px;\n    padding: 8px;\n    background: #eff6ff;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #1e40af;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* ===== REGION MAP ===== */\n.sector-popup {\n    min-width: 200px;\n}\n\n.sector-name {\n    margin: 0 0 8px 0;\n    color: #1f2937;\n    font-size: 16px;\n}\n\n.sector-info {\n    margin-bottom: 12px;\n}\n\n.info-row {\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 4px;\n    font-size: 13px;\n}\n\n.info-row .label {\n    color: #6b7280;\n}\n\n.info-row .value {\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.sector-actions {\n    display: flex;\n    gap: 8px;\n}\n\n.map-layer-btn {\n    transition: all 0.2s;\n}\n\n.map-layer-btn.active {\n    background: #3b82f6;\n    color: white;\n    border-color: #3b82f6;\n}\n\n/* ===== STATS CHARTS ===== */\n.difficulty-chart,\n.activity-chart {\n    margin-top: 12px;\n}\n\n.chart-bar {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    gap: 12px;\n}\n\n.bar-label {\n    width: 30px;\n    font-size: 12px;\n    font-weight: 600;\n    color: #374151;\n}\n\n.bar-container {\n    flex: 1;\n    height: 20px;\n    background: #f3f4f6;\n    border-radius: 10px;\n    position: relative;\n    overflow: hidden;\n}\n\n.bar-fill {\n    height: 100%;\n    background: linear-gradient(90deg, #3b82f6, #1d4ed8);\n    border-radius: 10px;\n    transition: width 0.8s ease;\n}\n\n.bar-value {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 11px;\n    font-weight: 600;\n    color: #374151;\n}\n\n.activity-chart {\n    display: flex;\n    align-items: end;\n    gap: 4px;\n    height: 60px;\n    padding: 0 8px;\n}\n\n.activity-point {\n    flex: 1;\n    background: #3b82f6;\n    border-radius: 2px 2px 0 0;\n    position: relative;\n    min-height: 4px;\n    transition: all 0.3s;\n}\n\n.activity-point:hover {\n    background: #1d4ed8;\n}\n\n.point-label {\n    position: absolute;\n    bottom: -20px;\n    left: 50%;\n    transform: translateX(-50%);\n    font-size: 10px;\n    color: #6b7280;\n    white-space: nowrap;\n}\n\n/* ===== EVENTS WIDGET ===== */\n.events-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    padding-bottom: 8px;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.events-header h6 {\n    margin: 0;\n    color: #1f2937;\n    font-size: 16px;\n    font-weight: 600;\n}\n\n.event-item {\n    display: flex;\n    gap: 12px;\n    padding: 12px 0;\n    border-bottom: 1px solid #f3f4f6;\n}\n\n.event-item:last-child {\n    border-bottom: none;\n}\n\n.event-date {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 50px;\n    height: 50px;\n    background: #3b82f6;\n    color: white;\n    border-radius: 8px;\n    flex-shrink: 0;\n}\n\n.event-day {\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 1;\n}\n\n.event-month {\n    font-size: 11px;\n    text-transform: uppercase;\n    margin-top: 2px;\n}\n\n.event-info {\n    flex: 1;\n}\n\n.event-title {\n    margin: 0 0 4px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.event-description {\n    margin: 0 0 8px 0;\n    font-size: 13px;\n    color: #6b7280;\n    line-height: 1.4;\n}\n\n.event-meta {\n    display: flex;\n    gap: 12px;\n    font-size: 12px;\n    color: #9ca3af;\n}\n\n.event-actions {\n    display: flex;\n    align-items: center;\n}\n\n.no-events {\n    text-align: center;\n    padding: 20px;\n    color: #6b7280;\n}\n\n.no-events i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n/* ===== PHOTO GALLERY ===== */\n.photo-gallery {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.photo-gallery img {\n    width: 100%;\n    height: 150px;\n    object-fit: cover;\n    border-radius: 8px;\n    transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.photo-gallery img:hover {\n    transform: scale(1.05);\n    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\n}\n\n.photo-gallery img.lazy {\n    background: #f3f4f6;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.photo-gallery img.lazy::before {\n    content: \"🖼️\";\n    font-size: 24px;\n    opacity: 0.5;\n}\n\n/* ===== RESPONSIVE ===== */\n@media (max-width: 768px) {\n    .weather-details {\n        grid-template-columns: repeat(2, 1fr);\n    }\n    \n    .forecast-grid {\n        grid-template-columns: repeat(3, 1fr);\n    }\n    \n    .current-weather-main {\n        flex-direction: column;\n        text-align: center;\n    }\n    \n    .event-item {\n        flex-direction: column;\n        text-align: center;\n    }\n    \n    .event-date {\n        align-self: center;\n    }\n    \n    .photo-gallery {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 480px) {\n    .weather-details {\n        grid-template-columns: 1fr;\n    }\n    \n    .forecast-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n    \n    .photo-gallery {\n        grid-template-columns: 1fr;\n    }\n    \n    .chart-bar {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n    }\n    \n    .bar-container {\n        width: 100%;\n    }\n}\n\n/* ===== ANIMATIONS ===== */\n@keyframes fadeInUp {\n    from {\n        opacity: 0;\n        transform: translateY(20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@keyframes slideInRight {\n    from {\n        opacity: 0;\n        transform: translateX(20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}\n\n.fade-in-up {\n    animation: fadeInUp 0.2s ease-out;\n}\n\n.slide-in-right {\n    animation: slideInRight 0.3s ease-out;\n}\n\n/* ===== LOADING STATES ===== */\n.loading-skeleton {\n    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n    background-size: 200% 100%;\n    animation: loading-shimmer 1.5s infinite;\n}\n\n@keyframes loading-shimmer {\n    0% {\n        background-position: -200% 0;\n    }\n    100% {\n        background-position: 200% 0;\n    }\n}\n\n.loading-skeleton.weather-widget {\n    height: 200px;\n}\n\n.loading-skeleton.event-item {\n    height: 60px;\n    margin-bottom: 8px;\n    border-radius: 4px;\n}\n\n/* ===== DARK MODE SUPPORT ===== */\n@media (prefers-color-scheme: dark) {\n    .weather-widget {\n        background: #1f2937;\n        color: #f9fafb;\n    }\n    \n    .weather-title,\n    .temp-main,\n    .detail-value {\n        color: #f9fafb;\n    }\n    \n    .detail-item {\n        background: #374151;\n    }\n    \n    .forecast-item {\n        background: #374151;\n    }\n    \n    .sector-popup {\n        background: #1f2937;\n        color: #f9fafb;\n    }\n    \n    .bar-container {\n        background: #374151;\n    }\n}