/**
 * Météo Sevy — Page Prévisions IA (page-previsions.php)
 *
 * Styles spécifiques aux prévisions :
 * - Hero spécifique (override d'image)
 * - Cartes 7 jours (forecast-day) avec carte AUJOURD'HUI mise en évidence
 * - Section créneaux horaires 24h (slot-card avec slot-card--now en or)
 * - Section NWP MetNo (table)
 * - Performance modèle, "comment ça marche", disclaimer
 *
 * Charge meteo-base.css en amont (palette, hero, subnav, ticker).
 *
 * Pour modifier les cartes prévisions ou le créneau actif → c'est ici.
 *
 * Version: 3.0.0 — éclaté en modules
 */

/* =====================================================
   PLEINE LARGEUR — supprime les marges Astra
   ===================================================== */
body.meteo-fullwidth-page .ast-container,
body.meteo-fullwidth-page .ast-container-outer,
body.meteo-fullwidth-page .ast-flex,
body.meteo-fullwidth-page #content.site-content,
body.meteo-fullwidth-page .site-content,
body.meteo-fullwidth-page #content,
body.meteo-fullwidth-page #primary,
body.meteo-fullwidth-page .site-main {
    padding-left:  0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
}
body.meteo-fullwidth-page { overflow-x: hidden; }

/* ============================================
   HERO — override d'image pour la page Prévisions
   Les styles communs (--lite, hero-title-*) sont dans meteo-pro-style.css
   ============================================ */
.meteo-hero--previsions::before {
    background-image: url('../img/hero-previsions.jpg?v=20260507a');
    background-position: center 30%;
}

/* ============================================
   SOUS-TITRE de la page (sous le H2)
   ============================================ */
.page-sub {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 2rem 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.page-sub::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(245, 184, 46, 0.6);
    animation: stationPulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
}

/* ============================================
   FORECAST MAIN — carte 7 jours
   ============================================ */
.forecast-main {
    margin-bottom: 2rem;
}

.forecast-card {
    background: var(--gradient-card);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast);
    position: relative;
    overflow: hidden;
}
.forecast-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 184, 46, 0.5), transparent);
}
.forecast-card:hover {
    border-color: var(--color-border-strong);
}

.forecast-card h2,
.forecast-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-text);
    margin: 0 0 1.5rem 0;
    text-align: left;
    letter-spacing: -0.01em;
}

/* Méta : info dernière génération */
.forecast-meta {
    margin: 0 0 1.5rem 0;
    padding: 0.85rem 1.1rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.forecast-meta:empty { display: none; }

.forecast-meta__gen {
    display: block;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.04em;
}
.forecast-meta__note   { display: block; }
.forecast-meta__model  {
    display: block;
    font-size: 0.92em;
    color: var(--color-text-dim);
}
.forecast-meta code {
    font-size: 0.88em;
    background: rgba(245, 184, 46, 0.08);
    color: var(--color-primary);
    padding: 0.1em 0.4em;
    border-radius: 2px;
}

/* Loading */
.loading {
    text-align: center;
    padding: 3rem 0;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}
.spinner {
    border: 2px solid var(--color-border);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    width: 36px; height: 36px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Contenu */
#forecastContent {
    display: grid;
    gap: 2rem;
}

/* ============================================
   GRILLE 7 JOURS
   ============================================ */
.forecast-7days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.6rem;
}
@media (max-width: 1200px) {
    .forecast-7days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile : carousel horizontal */
@media (max-width: 700px) {
    .forecast-7days {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding: 4px 2px 16px;
    }
    .forecast-7days::-webkit-scrollbar { display: none; }

    .forecast-day {
        min-width: 110px;
        max-width: 110px;
        flex-shrink: 0;
        scroll-snap-align: start;
        padding: 12px 10px;
        gap: 0;
        border-radius: 3px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .forecast-periods,
    .forecast-confidence { display: none !important; }

    .forecast-date {
        width: 100%;
        padding: 7px 4px;
        border-radius: 2px;
        margin-bottom: 8px;
        background: var(--color-surface-2);
        border: 1px solid var(--color-border);
    }
    .day-name {
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--color-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .date-num {
        font-family: var(--font-mono);
        font-size: 0.62rem;
        color: var(--color-text-secondary);
        letter-spacing: 0.05em;
    }

    .forecast-temp {
        background: none;
        border: none;
        padding: 6px 0 2px;
        width: 100%;
        text-align: center;
    }
    .temp-icon  { font-size: 2.2rem; margin-bottom: 4px; }
    .temp-value {
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.1;
        color: var(--color-text);
    }
    .temp-range {
        font-family: var(--font-mono);
        font-size: 0.62rem;
        color: var(--color-text-secondary);
        white-space: nowrap;
    }

    .forecast-rain,
    .forecast-wind {
        background: none;
        border: none;
        border-top: 1px solid var(--color-border);
        padding: 6px 0 0;
        margin-top: 4px;
        width: 100%;
        text-align: center;
    }
    .rain-icon, .wind-icon  { font-size: 1rem; margin-bottom: 1px; }
    .rain-prob  {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 400;
        color: var(--color-primary);
    }
    .wind-gust {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 400;
        color: var(--color-text);
    }
    .rain-label, .wind-label { font-size: 0.58rem; color: var(--color-text-secondary); }

    .forecast-day--today {
        min-width: 145px;
        max-width: 145px;
        background: var(--color-surface);
        border: 1px solid var(--color-border-strong);
    }
    .forecast-day--today .forecast-date {
        background: rgba(245, 184, 46, 0.1);
        border-color: var(--color-border-strong);
        padding: 10px 6px;
    }
    .forecast-day--today .day-name { font-size: 0.85rem; color: var(--color-primary); }
    .forecast-day--today .date-num { font-size: 0.72rem; color: var(--color-primary-light); }
    .forecast-day--today .temp-icon { font-size: 2.6rem; }
    .forecast-day--today .temp-value { font-size: 1.6rem; color: var(--color-primary); }
    .forecast-day--today .temp-range { font-size: 0.7rem; }
    .forecast-day--today .rain-prob { font-size: 1.2rem; }
}

/* ============================================
   CARTE JOUR (desktop)
   ============================================ */
.forecast-day {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0.75rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    transition: border-color var(--transition-fast);
}
.forecast-day:hover { border-color: var(--color-border-strong); }
.forecast-day .forecast-date { margin-bottom: 0; }

/* Carte AUJOURD'HUI — accent or, bordure épaisse pour mise en évidence */
.forecast-day--today {
    background: var(--color-surface-2);
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 0 1px rgba(245, 184, 46, 0.25), 0 6px 20px rgba(245, 184, 46, 0.08);
    /* Compense la bordure 2px pour garder la même largeur que les autres */
    margin: 0;
}
.forecast-day--today .forecast-date {
    background: rgba(245, 184, 46, 0.12);
    border: 1px solid var(--color-border-strong);
}
.forecast-day--today .day-name {
    font-size: 0.95rem;
    color: var(--color-primary);
    letter-spacing: 0.06em;
}
.forecast-day--today .date-num {
    font-size: 0.78rem;
    color: var(--color-primary-light);
    opacity: 0.9;
}
.forecast-day--today .temp-icon { font-size: 2.4rem; }
.forecast-day--today .temp-value {
    font-size: 1.8rem;
    color: var(--color-primary);
}
.forecast-day--today .temp-range  { font-size: 0.78rem; }
.forecast-day--today .rain-prob   { font-size: 1.2rem; color: var(--color-primary); }

.forecast-day--empty { opacity: 0.5; }

.forecast-empty-note {
    padding: 0.7rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-weight: 600;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

/* Date */
.forecast-date {
    text-align: center;
    padding: 0.7rem 0.5rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    color: var(--color-text);
}
.day-name {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.date-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.05em;
}

/* Température */
.forecast-temp {
    text-align: center;
    padding: 0.6rem 0.4rem;
    background: transparent;
    border: none;
    border-radius: 0;
}
.temp-icon { font-size: 1.6rem; margin-bottom: 0.25rem; line-height: 1; }
.temp-value {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 0.15rem;
    line-height: 1;
    letter-spacing: -0.02em;
}
.temp-range {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

/* Pluie */
.forecast-rain {
    text-align: center;
    padding: 0.6rem 0.4rem;
    background: transparent;
    border: none;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
}
.rain-icon { font-size: 1.4rem; margin-bottom: 0.2rem; line-height: 1; }
.rain-prob {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: 0.1rem;
    line-height: 1;
}
.rain-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.05em;
}

/* Vent / rafales */
.forecast-wind {
    text-align: center;
    padding: 0.6rem 0.4rem;
    background: transparent;
    border: none;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
}
.wind-icon { font-size: 1.3rem; margin-bottom: 0.2rem; line-height: 1; }
.wind-gust {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 0.1rem;
    line-height: 1;
}
.wind-gust--strong { color: var(--color-warning); font-weight: 600; }
.wind-gust--storm  { color: var(--color-critical); font-weight: 700; }
.wind-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.05em;
}

/* Confiance */
.forecast-confidence {
    padding: 0.6rem 0.5rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 2px;
}
.confidence-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.4rem;
    text-align: center;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.confidence-bar {
    height: 6px;
    background: var(--color-bg);
    border-radius: 1px;
    overflow: hidden;
    margin-bottom: 0.35rem;
    border: 1px solid var(--color-border);
}
.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-sage), var(--color-primary));
    border-radius: 0;
    transition: width 0.8s ease;
}
.confidence-value {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-primary);
    letter-spacing: 0.04em;
}

/* Périodes (matin/après-midi/etc.) */
.forecast-periods {
    margin-top: 1rem;
    padding: 0.85rem 0.75rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 2px;
}
.forecast-periods[hidden] { display: none !important; }

.forecast-periods-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-secondary);
    margin-bottom: 0.6rem;
    text-align: center;
}
.forecast-periods-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.forecast-periods-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.3;
    padding: 0.5rem 0.6rem;
    background: var(--color-surface);
    border-radius: 2px;
    border: 1px solid var(--color-border);
}
.fp-name {
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.04em;
}
.fp-temp {
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}
.fp-risk {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    white-space: nowrap;
    letter-spacing: 0.04em;
}
.fp-risk--low {
    background: rgba(136, 168, 120, 0.15);
    color: var(--color-sage);
}
.fp-risk--medium,
.fp-risk--moderate {
    background: rgba(210, 153, 34, 0.15);
    color: var(--color-warning);
}
.fp-risk--high {
    background: rgba(201, 74, 30, 0.18);
    color: #FF8A6E;
}
.fp-risk--unknown {
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
}

@media (max-width: 480px) {
    .forecast-periods-item { grid-template-columns: 1fr; gap: 0.25rem; }
    .fp-temp, .fp-risk { justify-self: start; }
}

/* ============================================
   PERFORMANCE DU MODÈLE
   ============================================ */
.model-performance { margin-bottom: 2rem; }

.performance-card {
    background: var(--gradient-card);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.performance-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 184, 46, 0.5), transparent);
}
.performance-card h3 {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem 0;
    text-align: left;
    font-weight: 400;
}
.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
}
.performance-item {
    text-align: left;
    padding: 1.5rem 1.25rem;
    background: var(--color-surface);
}
.perf-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.perf-value {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

/* ============================================
   COMMENT ÇA MARCHE
   ============================================ */
.how-it-works { margin-bottom: 2rem; }

.info-card {
    background: var(--gradient-card);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 184, 46, 0.5), transparent);
}
.info-card h3 {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-secondary);
    margin: 0 0 1.8rem 0;
    text-align: left;
    font-weight: 400;
}
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.info-item {
    text-align: left;
    padding: 1.25rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    transition: border-color var(--transition-fast);
}
.info-item:hover { border-color: var(--color-border-strong); }
.info-icon {
    font-size: 1.8rem;
    margin-bottom: 0.85rem;
    line-height: 1;
}
.info-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}
.info-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

/* ============================================
   DISCLAIMER
   ============================================ */
.disclaimer { margin-bottom: 2rem; }

.disclaimer-card {
    background: rgba(210, 153, 34, 0.08);
    border: 1px solid rgba(210, 153, 34, 0.25);
    border-left: 3px solid var(--color-warning);
    border-radius: 2px;
    padding: 1.25rem 1.5rem;
}
.disclaimer-card p {
    margin: 0.4rem 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-family: var(--font-body);
    font-size: 0.85rem;
}
.disclaimer-card strong {
    color: var(--color-warning);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ============================================
   ERREUR
   ============================================ */
.error-message {
    text-align: center;
    padding: 3rem;
    color: var(--color-critical);
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.05em;
}

/* ============================================
   SECTIONS HORAIRES + NWP
   ============================================ */
.section-card {
    background: var(--gradient-card);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1.8rem 1.8rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast);
    position: relative;
    overflow: hidden;
}
.section-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 184, 46, 0.5), transparent);
}
.section-card h2,
.section-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-text);
    margin: 0 0 0.4rem 0;
    letter-spacing: -0.01em;
}
.section-sub {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem 0;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.hourly-section,
.nwp-section { margin-bottom: 2rem; }

/* Onglets jours */
.day-tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}
.day-tab-btn {
    padding: 0.4rem 0.9rem;
    border-radius: 2px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: all 0.15s;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.day-tab-btn:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.day-tab-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}
.day-tab-no-data {
    opacity: 0.4;
    border-style: dashed;
}

/* Créneaux horaires */
.slots-wrap {
    display: grid;
    grid-template-columns: repeat(6, minmax(100px, 1fr));
    gap: 0.5rem;
    overflow-x: auto;
}
@media (max-width: 900px) { .slots-wrap { grid-template-columns: repeat(4, minmax(90px, 1fr)); } }
@media (max-width: 580px) {
    .slots-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; gap: 0.35rem; }
    .slot-card { padding: 0.5rem 0.25rem; }
    .slot-time   { font-size: 0.62rem; }
    .slot-icon   { font-size: 1.1rem; }
    .slot-temp   { font-size: 0.88rem; }
    .slot-rain   { font-size: 0.68rem; }
    .slot-precip { font-size: 0.65rem; }
    .slot-wind   { font-size: 0.62rem; }
}

.slot-card {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: 0.7rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: border-color var(--transition-fast);
    position: relative;
}
.slot-card:hover { border-color: var(--color-border-strong); }

/* Créneau "maintenant" — heure locale Vinelz (Europe/Zurich) */
.slot-card--now {
    background: rgba(245, 184, 46, 0.10);
    border: 4px solid var(--color-primary);
    box-shadow: 0 0 0 1px rgba(245, 184, 46, 0.30), 0 6px 22px rgba(245, 184, 46, 0.18);
    /* Compense le passage de 1px à 4px de bordure pour rester aligné dans la grille */
    margin: -3px;
    z-index: 1;
}
.slot-card--now .slot-time { color: var(--color-primary); font-weight: 700; }
.slot-card--now .slot-temp { color: var(--color-primary); }
.slot-card.slot-rain-high,
.slot-card.slot-rain-mid {
    background: var(--color-surface-2);
    border-color: var(--color-border);
}
.slot-time {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.06em;
}
.slot-icon { font-size: 1.3rem; line-height: 1; }
.slot-temp {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.slot-rain {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-temp-cold);
}
.slot-precip {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-temp-cold);
    font-weight: 600;
}
.slot-wind {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

/* Table NWP */
.nwp-table-wrap { overflow-x: auto; }
.nwp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.84rem;
}
.nwp-table th {
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-weight: 600;
    text-align: left;
    padding: 0.7rem 0.85rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-bottom: 1px solid var(--color-border-strong);
}
.nwp-table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}
/* Bordure du bas du tableau : blanc pur à 40% pour matcher
   les bordures extérieures qui apparaissent "blanches" sur fond noir. */
.nwp-table tr:last-child td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.40);
}
.nwp-table tr:hover td { background: rgba(245, 184, 46, 0.04); }

.nwp-cold       { color: var(--color-temp-cold); font-weight: 700; }
.nwp-warm       { color: var(--color-temp-hot); font-weight: 700; }
.nwp-rain-high  { color: var(--color-primary); font-weight: 700; }
.nwp-rain-mid   { color: var(--color-temp-cold); font-weight: 600; }

/* Source NWP — pas de bordure visuelle, juste le badge texte si rendu */
.forecast-day--nwp {
    /* Plus de border-top bronze : design uniforme entre toutes les colonnes */
    opacity: 0.95;
}
[data-field="sourceBadge"] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: rgba(166, 124, 78, 0.15);
    color: var(--color-bronze);
    border: 1px solid rgba(166, 124, 78, 0.3);
    border-radius: 2px;
    padding: 1px 6px;
    margin-top: 4px;
    text-transform: uppercase;
}
.forecast-day--nwp [data-field="confidenceFill"] { opacity: 0.7; }

/* ============================================
   RESPONSIVE — MOBILE
   ============================================ */
@media (max-width: 768px) {
    .page-sub {
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        margin-bottom: 1.2rem;
    }

    .forecast-card,
    .section-card,
    .performance-card,
    .info-card {
        padding: 1.2rem 1rem;
        border-radius: 3px;
    }
    .forecast-card h2,
    .forecast-card h3,
    .section-card h2,
    .section-card h3 { font-size: 1.15rem; }
    .forecast-meta { margin-top: 0; font-size: 0.74rem; }

    .forecast-main, .hourly-section, .nwp-section,
    .model-performance, .how-it-works, .disclaimer {
        margin-bottom: 1.2rem;
    }

    .performance-grid,
    .info-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
}

/* Note : la règle subnav mobile a été déplacée dans meteo-base.css
   pour s'appliquer uniformément aux 4 pages météo (auparavant elle ne
   s'appliquait qu'ici, créant une incohérence visuelle entre les pages). */