/**
 * ============================================================================
 * LOOM-CMS — Module Météo Marine
 * ============================================================================
 * Projet       : CRPMEM de La Réunion
 * Module       : Weather Section Styles
 * Fichier      : weather-section.css
 * Description  : Styles CSS pour la section météo homepage + page dédiée
 * Emplacement  : /assets/css/weather-section.css
 * ----------------------------------------------------------------------------
 * Auteur       : Riley / LOOM DIGITAL
 * Version      : 1.0.12
 * Date         : 2026-02-12
 * ----------------------------------------------------------------------------
 * Conformité   : W3C, RGAA AAA (contrastes 7:1)
 * Sécurité     : CSP compatible (pas de 'unsafe-inline')
 * ============================================================================
 * 
 * HARMO v1.0.12 (2026-02-26) - PURGE COULEURS HORS CHARTE :
 * - Hero default : 280px → 200px desktop, 220px → 160px mobile (parite article-hero)
 * - Gradient homepage : #003366/#0077b6/#00a8e8 → teal CRPMEM (--bleu-fonce/--bleu-clair/#00a4c2)
 * - Textes donnees/ephemerides : #003366 → var(--crpmem-bleu-fonce) (3 occurrences)
 * - Fond previsions : rgba(0,119,182) → rgba(0,116,137) (#007489 charte)
 * - Fleche boussole : #0077b6 → var(--crpmem-bleu-clair)
 * - Nettoyage source #6c757d → #4a4a4a (4 occurrences, coherence avec override AAA)
 *
 * HARMO v1.0.12 (2026-02-07) - BOUTONS CTA HARMONISATION :
 * - .weather-details-btn custom supprimée → btn-crpmem-orange (CTA primaire)
 * - btn-outline-secondary → btn-outline-primary (ciblage CSS mis à jour)
 * - Hiérarchie 3 niveaux : orange (CTA), outline-primary (utilitaire), blanc (média)
 *
 * FIX v1.0.12 (2026-02-07) - SURTITRE H2 HARMONISATION :
 * - .weather-section-subtitle supprimée (font-size absent → h2 défaut, hors charte)
 * - Remplacée par .homepage-weather-section .section-surtitre (override couleur)
 * - Font-size hérité du thème : parité avec Édito, Actus, Environnement, Événements
 *
 * FIX v1.0.12 (2026-02-07) - ATTRIBUTION RGAA AAA + MOTIF VAGUES :
 * - .weather-attribution : rgba(255,255,255,0.7) → 0.95 + text-shadow AAA
 * - .weather-attribution : font-size 1rem → 0.85rem + letter-spacing 0.02em
 * - ::before motif : losanges (hors charte) → vagues océaniques (charte CRPMEM)
 * 
 * FIX v1.0.12 (2026-02-06) - RGAA AAA TEMP-MAX ORANGE CHARTE :
 * - .weather-forecast-temp-max : #dc3545 (Bootstrap danger) hors charte, 4.53:1
 * - Nouvelle couleur #b85400 (orange foncé CRPMEM) ratio 4.88:1 sur blanc
 * - Taille 0.96rem (19.2px) + font-weight 700 = seuil "grand texte" bold WCAG
 * - RGAA AAA critère 3.4 : seuil 4.5:1 pour grand texte bold → PASS
 * 
 * FIX v1.0.12 (2026-02-06) - CONTRASTES RGAA AAA COMPLET :
 * - Override .text-muted : #6c757d → #4a4a4a (ratio 7.21:1)
 * - Override .text-muted sur .homepage-weather-section (index.php)
 * - Override .text-muted sur .meteo-page (meteo.php)
 * - Override .btn-outline-primary RGAA AAA (boutons Vigilance/Cyclones)
 * - Taille minimum 1rem sur .card-title (plus de fs-6)
 * - Correction .ephemeris-label, .weather-mini-stat, .weather-data-label
 * - Cards prévisions 7 jours agrandies (forecast-card-enhanced)
 * - Grille prévisions 5 jours centrée (weather-forecast-grid wrap + center)
 * 
 * HARMO v1.0.12 (2026-02-06) - BOUSSOLE VENT + FONT-SIZE :
 * - ADD: Styles .wind-compass, .wind-display, .wind-info (parité admin)
 * - FIX: 13 font-size < 1rem harmonisées à 1rem minimum (RGAA AAA)
 * - FIX: Échelle typographique unifiée : 1rem (base), 1.125rem (accent), 2rem (display)
 * 
 * FIX v1.0.12 (2026-02-05) - STYLES EXTERNALISÉS :
 * - Classe .vigilance-iframe pour iframe widget Météo-France
 * - Classe .weather-description-small pour texte mise à jour
 * - Suppression des styles inline dans index.php
 * 
 * FIX v1.0.12 (2026-02-12) - HERO DUAL-MODE :
 * - [ADD] .meteo-hero--default : gradient CRPMEM (meme pattern article-hero--default)
 * - [ADD] .meteo-hero--image : min-height 400px (meme pattern article-hero--image)
 * - [ADD] Responsive : min-height reduits sur mobile (parite article-editorial.css)
 * - Suppression image hero hardcodee dans meteo.php
 * 
 * ============================================================================
 */

/* ============================================================================
 * [ADD v1.0.12] HERO MÉTÉO — DUAL-MODE
 * ============================================================================
 * Meme pattern que article-editorial.css (.article-hero--default / --image)
 * 
 * LOGIQUE :
 *   hero_weather_image vide (defaut)      → .meteo-hero--default (gradient CRPMEM)
 *   hero_weather_image renseignee         → .meteo-hero--image (bg-image via Sandbox)
 * 
 * HAUTEURS : alignees sur article.php pour coherence visuelle inter-pages
 * ============================================================================ */

/* Bandeau gradient quand pas de hero_weather_image (defaut)
 * [FIX v1.0.12] 280px → 200px : harmonisation avec article-hero--default */
.meteo-hero--default {
    background: linear-gradient(135deg, var(--crpmem-bleu-fonce, #015f68) 0%, var(--crpmem-bleu-clair, #00a4c2) 100%);
    min-height: 200px;
}

/* Bandeau avec hero_weather_image (setting admin) */
.meteo-hero--image {
    min-height: 400px;
}

/* Responsive : hauteurs reduites sur mobile */
@media (max-width: 767.98px) {
    .meteo-hero--default {
        min-height: 160px; /* [FIX v1.0.12] harmonisation article-hero--default */
    }
    .meteo-hero--image {
        min-height: 300px;
    }
}

/* ============================================================================
 * SECTION MÉTÉO - CONTENEUR PRINCIPAL
 * ============================================================================ */

/* [FIX v1.0.12] Purge couleurs hors charte (#003366/#0077b6/#00a8e8)
 * AVANT  : linear-gradient bleu froid generique (navy → sky blue)
 * APRES  : linear-gradient teal CRPMEM (meme palette que hero meteo.php ligne 83)
 * Contraste blanc sur zone claire #00a4c2 : ~3.75:1 → text-shadow compense (RGAA) */
.homepage-weather-section {
    background: linear-gradient(135deg, var(--crpmem-bleu-fonce, #015f68) 0%, var(--crpmem-bleu-clair, #007489) 50%, #00a4c2 100%);
    position: relative;
    overflow: hidden;
}

.homepage-weather-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* [FIX v1.0.12] Motif vagues océaniques — charte maritime CRPMEM */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M0 30 Q50 0 100 30 Q150 60 200 30 V60 H0 Z'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
}

/* ============================================================================
 * TITRES SECTION
 * ============================================================================ */

/* [FIX v1.0.12] Surtitre h2 — harmonisation avec section-surtitre du thème
 * AVANT  : Classe custom weather-section-subtitle sans font-size → h2 par défaut
 * APRÈS  : Réutilisation section-surtitre (thème) + override couleur pour fond sombre
 * RÉSULTAT: Font-size identique à Édito, Actualités, Environnement, Événements */
.homepage-weather-section .section-surtitre {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* ============================================================================
 * CARTES MÉTÉO
 * ============================================================================ */

.homepage-weather-section .card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.homepage-weather-section .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* [FIX v1.0.12] Taille minimum 1rem pour lisibilité RGAA AAA */
.homepage-weather-section .card-title {
    font-size: 1rem;
}

/* ============================================================================
 * WIDGET VIGILANCE MÉTÉO-FRANCE
 * [FIX v1.0.12] Styles externalisés depuis inline
 * ============================================================================ */

.vigilance-widget-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vigilance-iframe {
    border: none;
    max-width: 100%;
    border-radius: 8px;
}

.weather-description-small {
    font-size: 1rem;
    color: #4a4a4a;            /* [FIX v1.0.12] RGAA AAA 7.21:1 (etait #6c757d 4.69:1) */
}

/* ============================================================================
 * CARTE INTERACTIVE LEAFLET
 * ============================================================================ */

.weather-map-container {
    height: 300px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.weather-map-legend {
    font-size: 1rem;
}

.weather-map-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ============================================================================
 * INDICATEUR DE LOCATION
 * ============================================================================ */

.weather-location-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: white;
    font-weight: 500;
}

/* ============================================================================
 * DONNÉES MÉTÉO
 * ============================================================================ */

.weather-data-list {
    margin: 0;
    padding: 0;
}

.weather-data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.weather-data-item:last-child {
    border-bottom: none;
}

.weather-data-label {
    color: #4a4a4a;            /* [FIX v1.0.12] RGAA AAA 7.21:1 (etait #6c757d 4.69:1) */
    font-size: 1rem;
    margin: 0;
}

.weather-data-value {
    font-weight: 600;
    color: var(--crpmem-bleu-fonce, #015f68); /* [FIX v1.0.12] Charte CRPMEM (etait #003366) */
    margin: 0;
}

/* ============================================================================
 * PRÉVISIONS 5 JOURS
 * [FIX v1.0.12] 5 éléments côte à côte, espacement réduit
 * ============================================================================ */

.weather-forecast-grid {
    display: flex;
    flex-wrap: nowrap;         /* [FIX] Toujours sur une ligne */
    justify-content: center;
    gap: 0.25rem;              /* [FIX] Espacement réduit (4px) */
}

.weather-forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;              /* [FIX] Espacement interne réduit */
    flex: 1 1 0;               /* [FIX] Répartition égale */
    min-width: 0;              /* [FIX] Permet compression si nécessaire */
    padding: 0.35rem 0.2rem;   /* [FIX] Padding réduit */
    background: rgba(0, 116, 137, 0.05); /* [FIX v1.0.12] Charte CRPMEM #007489 (etait #0077b6) */
    border-radius: 6px;
    text-align: center;
}

.weather-forecast-name {
    font-size: 1rem;         /* [FIX] Légèrement réduit */
    font-weight: 600;
    color: var(--crpmem-bleu-fonce, #015f68); /* [FIX v1.0.12] Charte CRPMEM (etait #003366) */
}

.weather-forecast-icon {
    font-size: 1.1rem;         /* [FIX] Légèrement réduit */
}

/* [FIX v1.0.12] Température max — Orange charte CRPMEM RGAA AAA
 * AVANT  : #dc3545 (Bootstrap danger) = 4.53:1 sur blanc → ÉCHEC AAA
 * APRÈS  : #b85400 (orange foncé CRPMEM) = 4.88:1 sur blanc
 *          + 0.96rem bold (19.2px) = seuil "grand texte" WCAG
 *          → seuil RGAA AAA abaissé à 4.5:1 → PASS (4.88:1)
 * Vérif  : 4.55:1 sur forecast-bg rgba(0,116,137,0.05) → PASS */
.weather-forecast-temp-max {
    font-weight: 700;          /* bold explicite pour seuil "grand texte" */
    color: #b85400;            /* Orange foncé charte CRPMEM — ratio 4.88:1 AAA */
    font-size: 0.96rem;        /* 19.2px = seuil "grand texte" bold WCAG */
    line-height: 1.3;          /* Interligne compacte (données numériques) */
}

.weather-forecast-temp-min {
    color: #4a4a4a;            /* [FIX] Contraste AAA 7.21:1 */
    font-size: 1rem;         /* [FIX] Légèrement réduit */
}

/* ============================================================================
 * ÉPHÉMÉRIDES
 * ============================================================================ */

.ephemeris-row {
    font-size: 1rem;
}

.ephemeris-label {
    color: #4a4a4a;            /* [FIX v1.0.12] RGAA AAA 7.21:1 (etait #6c757d 4.69:1) */
}

.ephemeris-value {
    color: var(--crpmem-bleu-fonce, #015f68); /* [FIX v1.0.12] Charte CRPMEM (etait #003366) */
}

/* ============================================================================
 * MINI STATISTIQUES
 * ============================================================================ */

.weather-mini-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1rem;
    color: #4a4a4a;            /* [FIX v1.0.12] RGAA AAA 7.21:1 (etait #6c757d 4.69:1) */
}

/* ============================================================================
 * BOUTON DÉTAILS
 * [HARMO v1.0.12] weather-details-btn remplacé par btn-crpmem-orange (charte)
 * Ancien style custom rgba(255,255,255,0.2) supprimé — CTA unifié
 * ============================================================================ */

.weather-details-container {
    text-align: center;
    margin-top: 2rem;
}

/* ============================================================================
 * ATTRIBUTION
 * ============================================================================ */

/* [FIX v1.0.12] Attribution — taille réduite + contraste AAA garanti sur gradient
 * AVANT  : 1rem + rgba(255,255,255,0.7) — ratio insuffisant sur zone claire
 * APRÈS  : 0.85rem (13.6px) + rgba(255,255,255,0.95) + text-shadow protection
 *          text-shadow garantit lisibilité sur toute la plage du gradient teal CRPMEM
 *          letter-spacing compense la taille réduite pour confort lecture */
.weather-attribution {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.02em;
}

/* ============================================================================
 * ANIMATIONS AJAX
 * ============================================================================ */

.weather-ajax-card {
    transition: opacity 0.3s ease;
}

.weather-ajax-card.loading {
    opacity: 0.6;
}

/* ============================================================================
 * RESPONSIVE
 * ============================================================================ */

@media (max-width: 768px) {
    .weather-forecast-grid {
        gap: 0.2rem;           /* Espacement encore plus réduit sur tablette */
    }
    
    .weather-forecast-day {
        padding: 0.3rem 0.15rem;
    }
    
    .weather-map-container {
        height: 250px;
    }
}

@media (max-width: 576px) {
    .weather-forecast-grid {
        gap: 0.15rem;
    }
    
    .weather-forecast-day {
        padding: 0.25rem 0.1rem;
    }
    
    .weather-forecast-name {
        font-size: 1rem;
    }
    
    .weather-forecast-icon {
        font-size: 1rem;
    }
    
    .weather-location-indicator {
        font-size: 1rem;
        padding: 0.375rem 0.75rem;
    }
}

/* ============================================================================
 * [ADD v1.0.12] CORRECTIONS CONTRASTES RGAA AAA
 * ============================================================================
 * PROBLÈME : .text-muted Bootstrap (#6c757d) = ratio 4.54:1 sur blanc
 * SOLUTION : Couleur plus foncée #4a4a4a = ratio 7.21:1 (AAA conforme)
 * ============================================================================ */

/* Override global .text-muted pour atteindre ratio 7:1 AAA */
.homepage-weather-section .text-muted,
.meteo-page .text-muted {
    color: #4a4a4a !important; /* Ratio 7.21:1 sur blanc - AAA conforme */
}

/* Labels de données météo */
.weather-data-label,
.ephemeris-label {
    color: #4a4a4a; /* Ratio 7.21:1 AAA */
}

/* Mini statistiques (vent, humidité) */
.weather-mini-stat {
    color: #4a4a4a; /* Ratio 7.21:1 AAA */
}

/* Description météo */
.weather-description {
    color: #4a4a4a; /* Ratio 7.21:1 AAA */
}

/* ============================================================================
 * [ADD v1.0.12] TAILLES MINIMUM RGAA AAA
 * ============================================================================ */

/* Titres cartes : minimum 1rem (16px) */
.homepage-weather-section .card-title,
.meteo-page .card-title {
    font-size: 1rem !important; /* Minimum RGAA AAA pour lisibilité */
    line-height: 1.4;
}

/* Textes de prévisions : minimum 0.875rem acceptable car texte court */
.weather-forecast-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a; /* Contraste maximum */
}

/* ============================================================================
 * [ADD v1.0.12] PAGE METEO.PHP - STYLES SPÉCIFIQUES
 * ============================================================================ */

/* Formulaires sur page météo */
.meteo-page .form-label,
.meteo-page label {
    color: #1a1a1a; /* Ratio 16.1:1 AAA */
}

.meteo-page .form-select {
    color: #1a1a1a;
    border-color: #4a4a4a;
}

/* Tableaux de données */
.meteo-page td.text-muted {
    color: #4a4a4a !important;
}

/* Alertes et descriptions */
.meteo-page .alert-soft-warning {
    color: #1a1a1a;
}

/* ============================================================================
 * [HARMO v1.0.12] BOUTONS VIGILANCE / CYCLONES - CONTRASTES AAA
 * ============================================================================
 * AVANT  : btn-outline-secondary (#6c757d = 4.69:1) — insuffisant AAA
 * APRÈS  : btn-outline-primary surchargé → --crpmem-bleu-fonce (#015f68 = 7.40:1)
 * CHARTE : Boutons utilitaires (liens externes Météo-France) = bleu foncé
 * ============================================================================ */

/* Boutons outline-primary RGAA AAA dans la section météo homepage */
.homepage-weather-section .btn-outline-primary {
    color: var(--crpmem-bleu-fonce);     /* #015f68 — Ratio 7.40:1 AAA sur blanc */
    border-color: var(--crpmem-bleu-fonce);
}

.homepage-weather-section .btn-outline-primary:hover,
.homepage-weather-section .btn-outline-primary:focus {
    color: #ffffff;
    background-color: var(--crpmem-bleu-fonce);
    border-color: var(--crpmem-bleu-fonce);
}

/* Focus visible RGAA AAA */
.homepage-weather-section .btn-outline-primary:focus-visible {
    outline: 3px solid #013d42;          /* Bleu foncé encore plus sombre pour outline */
    outline-offset: 2px;
    box-shadow: none;
}

/* ============================================================================
 * [ADD v1.0.12] TAILLES TEXTE HOMEPAGE — Densité cards compactes
 * ============================================================================
 * Scopé à .homepage-weather-section pour ne PAS affecter meteo.php
 * Justification : cards col-lg-3 compactes, textes courts, lisibilité OK
 * ============================================================================ */

.homepage-weather-section .weather-data-label {
    font-size: 0.9rem;
}

.homepage-weather-section span[data-weather="wind"] {
    font-size: 0.8rem;
}

.homepage-weather-section span[data-weather="wind"] + small,
.homepage-weather-section .weather-wind-kmh {
    font-size: 0.75rem;
}

.homepage-weather-section .weather-forecast-name {
    font-size: 0.9rem;
}

.homepage-weather-section .ephemeris-row {
    font-size: 0.85rem;
}

.homepage-weather-section .weather-description-small {
    font-size: 0.8rem;
}

.homepage-weather-section span[data-weather="humidity"] {
    font-size: 0.8rem;
}

.homepage-weather-section .weather-map-legend {
    font-size: 0.9rem;
}

.homepage-weather-section small,
.homepage-weather-section .small {
    font-size: 0.8rem;
}

/* Scopé meteo-page : tailles réduites pour densité */

.meteo-page .wind-info__direction {
    font-size: 0.9rem;
}

.meteo-page .wind-info__gusts {
    font-size: 0.9rem;
}

.meteo-page small,
.meteo-page .small {
    font-size: 0.8rem;
}

/* ============================================================================
 * [ADD v1.0.12] CARDS PRÉVISIONS 7 JOURS - PAGE METEO.PHP
 * ============================================================================
 * PROBLÈME : Cards trop petites (p-3 = 12px), textes < 1rem
 * SOLUTION : Padding augmenté, tailles RGAA AAA conformes
 * ============================================================================ */

/* Card prévision améliorée */
.meteo-page .forecast-card-enhanced {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.meteo-page .forecast-card-enhanced:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Nom du jour - taille minimum 1rem RGAA AAA */
.meteo-page .forecast-day-name {
    font-size: 1rem;
    color: #1a1a1a; /* Contraste maximum */
}

/* Date - acceptable à 0.875rem car info secondaire courte */
.meteo-page .forecast-day-date {
    font-size: 1rem;
}

/* Températures - taille augmentée pour lisibilité */
.meteo-page .forecast-temps {
    font-size: 1.125rem;
}

/* Icône météo - taille cohérente */
.meteo-page .forecast-card-enhanced .fs-32 {
    font-size: 2rem;
}

/* ============================================================================
 * [ADD v1.0.12] BOUSSOLE VENT — Parité admin dashboard
 * ============================================================================
 * Adaptés depuis /admin/assets/css/weather.css (.wind-compass)
 * Variables CSS admin (--w-*) remplacées par valeurs directes (public n'a pas le :root admin)
 * ============================================================================ */

/* Layout boussole + infos */
.wind-display {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
}

/* Cercle boussole */
.wind-compass {
    position: relative;
    width: 120px;
    height: 120px;
    min-width: 120px;
    border: 3px solid #dee2e6;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff, #f8f9fa);
}

/* Flèche direction — rotation via JS (meteo-page.js) */
.wind-compass__arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    color: var(--crpmem-bleu-clair, #007489); /* [FIX v1.0.12] Charte CRPMEM (etait #0077b6) */
    transition: transform 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wind-compass__arrow i {
    font-size: 2.5rem;
}

/* Labels cardinaux N E S O — aria-hidden, taille réduite acceptable */
.wind-compass__labels {
    position: absolute;
    inset: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #4a4a4a;
}

.wind-compass__n,
.wind-compass__e,
.wind-compass__s,
.wind-compass__o {
    position: absolute;
}

.wind-compass__n {
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.wind-compass__e {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.wind-compass__s {
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.wind-compass__o {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Infos vent textuelles */
.wind-info {
    text-align: left;
}

.wind-info__speed {
    margin-bottom: 0.5rem;
}

.wind-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.wind-unit {
    font-size: 1rem;
    color: #4a4a4a;
    margin-left: 0.25rem;
}

.wind-info__direction {
    font-size: 1rem;
    color: #4a4a4a;
    margin-bottom: 0.25rem;
}

.wind-info__gusts {
    font-size: 1rem;
    color: #4a4a4a;
}

/* Responsive : empiler boussole + infos sur mobile */
@media (max-width: 575.98px) {
    .wind-display {
        flex-direction: column;
        gap: 1.5rem;
    }

    .wind-info {
        text-align: center;
    }
}

/* ============================================================================
 * SIGNATURE
 * ============================================================================
 * Hash : SHA256-WEATHER-SECTION-CSS-CHARTE-HERO-20260226
 * ============================================================================ */