/* ============================================================
   meteo.css — Page "special" Meteo Malte.
   Reutilise les tokens de general/style.css (avec repli).
   ============================================================ */
.meteo {
    --m-primary: var(--color-primary, #137ae9);
    --m-ink: var(--color-dark, #0f2540);
    --m-text: var(--color-text-light, #475569);
    --m-line: var(--color-light-grey, #e2e8f0);
    --m-card: var(--color-white, #fff);
    --m-bg: var(--color-white-grey, #f7f9fc);
    --m-radius: var(--radius-lg, 12px);
    --m-shadow: var(--shadow-md, 0 6px 24px rgba(15, 37, 64, .08));
    --m-sun: #f7a600;
    --m-sea: #0ea5b7;
    color: var(--m-text);
    font-family: "Roboto", system-ui, sans-serif;
}

/* ---- Hero ---- */
.meteo-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 3.6rem 0 3rem;
    min-height: 260px;
    display: flex;
    align-items: center;
}
.meteo-hero__img { position: absolute; inset: 0; z-index: 0; }
.meteo-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; }
.meteo-hero::before {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(118deg, rgba(9,46,92,.82) 0%, rgba(11,110,140,.55) 55%, rgba(11,110,140,.42) 100%);
}
.meteo-hero__inner { position: relative; z-index: 2; max-width: var(--max-width, 1220px); margin: 0 auto; width: 100%; box-sizing: border-box; padding: 0 1.25rem; }
.meteo-title {
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.7rem);
    font-weight: 800; line-height: 1.15; letter-spacing: -0.01em;
    margin: 0 0 .8rem; color: #fff;
}
.meteo-chapo { font-size: 1.05rem; line-height: 1.7; margin: .5rem 0 0; max-width: 60ch; color: rgba(255,255,255,.95); }
.meteo-chapo strong { color: #fff; }

/* ---- Corps ---- */
.meteo-body { max-width: var(--max-width, 1220px); margin: 0 auto; padding: clamp(2.6rem, 4vw, 3.6rem) 1.25rem clamp(3.5rem, 6vw, 5rem); }
.meteo-sec { margin: 0 0 clamp(3.2rem, 5vw, 4.8rem); scroll-margin-top: 90px; }
/* Encart activités (composant partagé) : espace sous la box avant la section suivante. */
.meteo .activities-target { margin-bottom: clamp(3.2rem, 5vw, 4.8rem); }
.meteo-h2 {
    font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.8rem);
    font-weight: 800; line-height: 1.3; letter-spacing: -0.01em;
    color: var(--m-ink); margin: 0 0 1.1rem;
    padding-left: 0.9rem;
    border-left: 4px solid var(--m-primary);
}
.meteo-h2 span { color: var(--m-primary); font-weight: 700; }
.meteo-note { font-size: .92rem; color: var(--m-text); margin: -.4rem 0 1rem; }
.meteo-lead { font-size: 1.02rem; line-height: 1.75; color: var(--m-text); margin: -.2rem 0 1.2rem; }
.meteo-lead strong { color: var(--m-ink); }
.meteo-source { font-size: .82rem; color: #94a3b8; margin: .7rem 0 0; }
.meteo-source a { color: inherit; text-decoration: underline; }
.meteo-source a:hover { color: var(--m-primary); }

/* ---- (1) Villes live ---- */
.meteo-cities {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.mc-card {
    background: var(--m-card); border: 1px solid var(--m-line);
    border-radius: var(--m-radius); box-shadow: var(--m-shadow);
    padding: 1rem 1.1rem 1.1rem;
}
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mc-city { font-weight: 700; color: var(--m-ink); font-size: 1.02rem; }
.mc-now { display: inline-flex; align-items: center; gap: .35rem; }
.mc-emoji { width: 30px; height: 30px; display: inline-flex; }
.mc-temp { font-size: 1.7rem; font-weight: 800; color: var(--m-ink); }
.mc-cond { font-size: .85rem; color: var(--m-text); margin: .25rem 0 .8rem; }
.mc-days { list-style: none; margin: 0; padding: .7rem 0 0; border-top: 1px solid var(--m-line); }
.mc-day { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem; padding: .28rem 0; }
.mc-day + .mc-day { border-top: 1px dashed var(--m-line); }
.mc-day-name { color: var(--m-text); font-size: .9rem; }
.mc-day-ico { width: 22px; height: 22px; display: inline-flex; justify-content: center; }
.meteo .wi { width: 100%; height: 100%; display: block; }
.mc-day-t { font-variant-numeric: tabular-nums; font-size: .92rem; }
.mc-max { color: var(--m-ink); font-weight: 700; }
.mc-min { color: #94a3b8; }
.mc-empty { font-size: .9rem; color: #94a3b8; padding: .8rem 0 .2rem; }

/* ---- (2) Bloc resume ---- */
.meteo-summary {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.ms-stat {
    background: var(--m-card); border: 1px solid var(--m-line);
    border-radius: var(--m-radius); box-shadow: var(--m-shadow);
    text-align: center; padding: 1.4rem 1rem;
}
.ms-stat .ms-ico { font-size: 2rem; display: block; }
.ms-stat b { display: block; font-size: 2.2rem; font-weight: 800; color: var(--m-ink); line-height: 1.1; margin: .2rem 0 .1rem; }
.ms-stat span:last-child { font-size: .92rem; color: var(--m-text); }
.meteo-summary-note { text-align: center; font-size: .92rem; line-height: 1.6; color: var(--m-text); max-width: 62ch; margin: 1.1rem auto 0; }

/* ---- (3) Tableau normales ---- */
.meteo-table-wrap { overflow-x: auto; border-radius: var(--m-radius); border: 1px solid var(--m-line); box-shadow: var(--m-shadow); }
.meteo-table { width: 100%; border-collapse: collapse; background: var(--m-card); font-size: .93rem; min-width: 640px; }
.meteo-table thead th {
    background: var(--m-ink); color: #fff; font-weight: 600;
    text-align: center; padding: .7rem .6rem; white-space: nowrap;
}
.meteo-table thead th:first-child { text-align: left; }
.mt-unit { font-weight: 400; opacity: .8; font-size: .82em; }
.meteo-table tbody th.mt-month { text-align: left; font-weight: 700; color: var(--m-ink); }
.meteo-table td, .meteo-table tbody th { padding: .55rem .6rem; text-align: center; border-top: 1px solid var(--m-line); font-variant-numeric: tabular-nums; }
.meteo-table tbody tr:nth-child(even) { background: var(--m-bg); }
/* Valeur la plus élevée (mt-hi, chaud) et la plus basse (mt-lo, froid) de chaque colonne. */
.meteo-table td.mt-hi { color: #c2410c; font-weight: 700; }
.meteo-table td.mt-lo { color: #1d4ed8; font-weight: 700; }
@media (min-width: 701px) {
    .meteo-table td.mt-hi { background: #fdece3; }
    .meteo-table td.mt-lo { background: #e9f1fe; }
}

/* Mobile : le tableau (7 colonnes) devient une carte par mois -> plus de scroll horizontal.
   S'appuie sur les data-label des <td> (definis dans meteo-page.php). */
@media (max-width: 700px) {
    .meteo-table-wrap { overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
    .meteo-table { min-width: 0; display: block; font-size: 1rem; }
    .meteo-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
    .meteo-table tbody { display: grid; gap: .8rem; }
    .meteo-table tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem;
        background: var(--m-card); border: 1px solid var(--m-line);
        border-radius: var(--m-radius); box-shadow: var(--m-shadow);
        padding: .85rem 1rem;
    }
    .meteo-table tbody tr:nth-child(even) { background: var(--m-card); }
    .meteo-table tbody th.mt-month {
        grid-column: 1 / -1; border: 0; padding: 0 0 .5rem; margin: 0;
        border-bottom: 1px solid var(--m-line); font-size: 1.06rem; text-align: left;
    }
    .meteo-table td {
        display: flex; flex-direction: column; gap: 2px;
        border: 0; padding: 0; text-align: left; font-weight: 700; color: var(--m-ink);
    }
    .meteo-table td::before {
        content: attr(data-label); font-weight: 400; font-size: .78rem; color: var(--m-text);
    }
}

/* ---- (4) Courbe eau (SVG) ---- */
.meteo-sea {
    margin: 0; background: var(--m-card); border: 1px solid var(--m-line);
    border-radius: var(--m-radius); box-shadow: var(--m-shadow); padding: 1rem 1rem .4rem;
}
.meteo-sea-svg { width: 100%; height: auto; display: block; }
.ms-grid { stroke: var(--m-line); stroke-width: 1; }
.ms-area { opacity: .9; }
.ms-g0 { stop-color: #38bdf8; stop-opacity: .35; }
.ms-g1 { stop-color: #38bdf8; stop-opacity: .02; }
.ms-line { stroke: var(--m-sea); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ms-dot { fill: #fff; stroke: var(--m-sea); stroke-width: 2.5; }
.ms-val { fill: var(--m-ink); font-size: 12px; font-weight: 700; }
.ms-axis { fill: #94a3b8; font-size: 11px; }
.ms-x { fill: var(--m-text); font-size: 11px; }

/* ---- (5)(6) Prose ---- */
.meteo-prose { color: var(--m-text); }
.meteo-prose p { line-height: 1.78; margin: 0 0 1rem; font-size: 1.02rem; }
.meteo-prose h3 { font-size: 1.24rem; font-weight: 700; color: var(--m-ink); margin: 2rem 0 .6rem; }
.meteo-prose h4 { font-size: 1.08rem; font-weight: 700; color: var(--m-ink); margin: 1.5rem 0 .4rem; }
.meteo-prose strong { color: var(--m-ink); }
.meteo-prose a { color: var(--m-primary); text-decoration: none; font-weight: 600; }
.meteo-prose a:hover { text-decoration: underline; }

/* ---- (7) FAQ — rendu identique a la page /fr/plages-malte/ (accordeon epure a chevron) ---- */
.meteo .faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--m-line); }
.meteo .faq-item { border-bottom: 1px solid var(--m-line); }
.meteo .faq-question {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 16px 0; cursor: pointer; list-style: none; font-weight: 500;
    color: var(--m-ink); user-select: none;
}
.meteo .faq-question::-webkit-details-marker { display: none; }
.meteo .faq-question h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; }
.meteo .faq-chevron { width: 18px; height: 18px; flex-shrink: 0; color: #94a3b8; transition: transform .2s ease; }
.meteo .faq-item[open] .faq-chevron { transform: rotate(180deg); }
.meteo .faq-answer { padding: 0 0 16px; color: var(--m-text); font-size: 15px; line-height: 1.65; }
.meteo .faq-answer p { margin: 0; }
.meteo .faq-answer a { color: var(--m-primary); text-decoration: underline; }
.meteo .faq-answer a:hover { text-decoration: none; }

@media (max-width: 560px) {
    .meteo-summary { grid-template-columns: 1fr; }
    .ms-stat { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1rem 1.1rem; }
    .ms-stat .ms-ico { font-size: 1.7rem; }
    .ms-stat b { font-size: 1.7rem; margin: 0; }
}