/*
 * BaugéPlus Single — Météo CSS
 * Thématisation des pages alerte-meteo
 * Dépend de single.css (les classes .bpsi-* de base sont héritées)
 */

/* ══════════════════════════════════════════════════════════════
   VARIABLES MÉTÉO
══════════════════════════════════════════════════════════════ */
.bpsi-meteo {
    --meteo-color: #f5a623; /* Overridée inline via data-vigilance */
    --meteo-color-faded: color-mix(in srgb, var(--meteo-color) 15%, transparent);
    --meteo-color-soft:  color-mix(in srgb, var(--meteo-color) 30%, transparent);
}

/* ══════════════════════════════════════════════════════════════
   HERO — FOND ANIMÉ QUAND PAS D'IMAGE
══════════════════════════════════════════════════════════════ */
.bpsi-meteo-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #0f172a 0%,
        color-mix(in srgb, var(--meteo-color) 30%, #0f172a) 50%,
        #0f172a 100%
    );
    background-size: 300% 300%;
    animation: bpsi-meteo-gradient 8s ease infinite;
}

@keyframes bpsi-meteo-gradient {
    0%, 100% { background-position: 0% 50% }
    50%       { background-position: 100% 50% }
}

/* Overlay légèrement teinté pour les héros avec image */
.bpsi-meteo-overlay {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--meteo-color) 20%, rgba(0,0,0,.55)) 0%,
        rgba(0,0,0,.75) 100%
    ) !important;
}

/* ══════════════════════════════════════════════════════════════
   BARRE DE PROGRESSION — couleur vigilance
══════════════════════════════════════════════════════════════ */
.bpsi-meteo ~ .bpsi-progress-bar .bpsi-progress-fill,
#bpsi-progress-fill {
    /* La couleur est injectée inline sur l'élément depuis le template */
}

/* ══════════════════════════════════════════════════════════════
   BADGES VIGILANCE + PHÉNOMÈNE
══════════════════════════════════════════════════════════════ */
.bpsi-meteo-badge-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.bpsi-meteo-badge-vigilance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
    text-transform: uppercase;
}

.bpsi-meteo-badge-phenomene {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.2);
}

.bpsi-meteo-badge-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
}
.bpsi-meteo-badge-icon svg {
    width: 16px;
    height: 16px;
}

/* ══════════════════════════════════════════════════════════════
   INFOLINE (département + période)
══════════════════════════════════════════════════════════════ */
.bpsi-meteo-infoline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 16px;
    font-size: 13px;
    color: rgba(255,255,255,.8);
}

.bpsi-meteo-infoline svg {
    vertical-align: middle;
    margin-right: 3px;
    opacity: .7;
}

.bpsi-meteo-sept,
.bpsi-meteo-periode { white-space: nowrap; }

.bpsi-meteo-sep { opacity: .4; }

/* ══════════════════════════════════════════════════════════════
   BANDEAU VIGILANCE SOUS LE HERO
══════════════════════════════════════════════════════════════ */
.bpsi-meteo-alert-banner {
    background: var(--meteo-color);
    color: #fff;
    padding: 0;
}

.bpsi-meteo-alert-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 500;
}

.bpsi-meteo-alert-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    opacity: .95;
}
.bpsi-meteo-alert-icon svg {
    width: 28px;
    height: 28px;
}

.bpsi-meteo-alert-text {
    flex: 1;
    line-height: 1.4;
}

.bpsi-meteo-alert-text strong { font-weight: 700; }

.bpsi-meteo-alert-periode {
    opacity: .85;
}

.bpsi-meteo-vigicrues-link {
    flex-shrink: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    opacity: .85;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.4);
    padding: 4px 10px;
    border-radius: 4px;
    transition: opacity .2s, background .2s;
    white-space: nowrap;
}
.bpsi-meteo-vigicrues-link:hover {
    opacity: 1;
    background: rgba(255,255,255,.15);
}

@media (max-width: 600px) {
    .bpsi-meteo-alert-inner { padding: 10px 16px; }
    .bpsi-meteo-vigicrues-link { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   CONTENU — Titres teintés vigilance
══════════════════════════════════════════════════════════════ */
.bpsi-meteo-content h2 {
    color: var(--meteo-color) !important;
}

.bpsi-meteo-content h3 {
    border-left: 3px solid var(--meteo-color);
    padding-left: 12px;
}

/* Encadrés / blockquotes météo */
.bpsi-meteo-content blockquote {
    border-left-color: var(--meteo-color) !important;
    background: var(--meteo-color-faded) !important;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR MÉTÉO
══════════════════════════════════════════════════════════════ */
.bpsi-meteo-sidebar-widget .bpsi-sidebar-title {
    border-left: 4px solid var(--meteo-color);
    color: var(--meteo-color);
}

/* Pastille vigilance sur les vignettes sidebar */
.bpsi-meteo-sidebar-dot {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* Bloc "pas d'image" en sidebar */
.bpsi-meteo-sidebar-noimg {
    width: 64px;
    min-width: 64px;
    height: 64px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bpsi-meteo-sidebar-iconwrap {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bpsi-meteo-sidebar-iconwrap svg {
    width: 24px;
    height: 24px;
}

/* ══════════════════════════════════════════════════════════════
   RELATED — section alertes liées
══════════════════════════════════════════════════════════════ */
.bpsi-meteo-related .bpsi-related-title { color: inherit; }

/* ══════════════════════════════════════════════════════════════
   COULEURS PAR NIVEAU : overrides data-vigilance
══════════════════════════════════════════════════════════════ */
[data-vigilance="vert"]   { --meteo-color: #2d9748; }
[data-vigilance="jaune"]  { --meteo-color: #f5a623; }
[data-vigilance="orange"] { --meteo-color: #e8701a; }
[data-vigilance="rouge"]  { --meteo-color: #d0021b; }