/* ============================================================
   Météo Samoëns Conseils – v1.4.0
   Tailles desktop généreuses + responsive mobile
   ============================================================ */

:root {
    --msc-favorable:          #2e7d32;
    --msc-favorable-bg:       #f1f8e9;
    --msc-favorable-border:   #81c784;
    --msc-moyen:              #e65100;
    --msc-moyen-bg:           #fff8f0;
    --msc-moyen-border:       #ffb74d;
    --msc-deconseille:        #c62828;
    --msc-deconseille-bg:     #fff5f5;
    --msc-deconseille-border: #ef9a9a;
    --msc-hors-saison:        #607d8b;
    --msc-hors-saison-bg:     #f4f6f7;
    --msc-hors-saison-border: #b0bec5;
    --msc-neutral-bg:         #f5f7fa;
    --msc-radius:             12px;
    --msc-shadow:             0 2px 12px rgba(0,0,0,0.09);
    --msc-shadow-hover:       0 6px 24px rgba(0,0,0,0.13);
    --msc-font:               inherit;
    --msc-max-width:          960px;
}

/* ----------------------------------------------------------------
   Reset boîtes
---------------------------------------------------------------- */
.meteo-grid *,
.meteo-conseil-global *,
.meteo-creneau-block *,
.msc-forecast-block *,
.meteo-comparaison *,
.meteo-current-block * { box-sizing: border-box; }

/* ================================================================
   GRILLE DES 6 CARTES ACTIVITÉS
================================================================ */
.meteo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 24px 0;
    max-width: var(--msc-max-width);
}

@media (max-width: 600px) {
    .meteo-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ================================================================
   CARTE ACTIVITÉ – taille desktop généreuse
================================================================ */
.meteo-card {
    background: #fff;
    border-radius: var(--msc-radius);
    box-shadow: var(--msc-shadow);
    padding: 22px 24px 18px;
    border-left: 5px solid #ddd;
    font-family: var(--msc-font);
    transition: box-shadow 0.2s, transform 0.15s;
}

.meteo-card:hover {
    box-shadow: var(--msc-shadow-hover);
    transform: translateY(-2px);
}

.meteo-card-favorable   { border-left-color: var(--msc-favorable-border);   background: var(--msc-favorable-bg); }
.meteo-card-moyen       { border-left-color: var(--msc-moyen-border);       background: var(--msc-moyen-bg); }
.meteo-card-deconseille { border-left-color: var(--msc-deconseille-border); background: var(--msc-deconseille-bg); }
.meteo-card-hors_saison { border-left-color: var(--msc-hors-saison-border); background: var(--msc-hors-saison-bg); }

/* En-tête */
.meteo-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.meteo-card-icon  { font-size: 2em; line-height: 1; flex-shrink: 0; }
.meteo-card-title { font-size: 1.2em; font-weight: 700; margin: 0; padding: 0; color: #1a1a1a; border: none; line-height: 1.2; }

/* Badge lieu */
.meteo-card-lieu { font-size: 0.78em; color: #888; margin-bottom: 10px; }

/* Statut */
.meteo-card-statut { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.meteo-statut-emoji { font-size: 1.1em; }
.meteo-statut-label {
    font-size: 0.82em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.meteo-card-favorable   .meteo-statut-label { color: var(--msc-favorable); }
.meteo-card-moyen       .meteo-statut-label { color: var(--msc-moyen); }
.meteo-card-deconseille .meteo-statut-label { color: var(--msc-deconseille); }
.meteo-card-hors_saison .meteo-statut-label { color: var(--msc-hors-saison); }

/* Barre de score */
.meteo-score { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.meteo-score-bar-wrap {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.07);
    border-radius: 99px;
    overflow: hidden;
}
.meteo-score-bar {
    height: 100%;
    border-radius: 99px;
    background: #ccc;
    transition: width 0.4s ease;
}
.meteo-card-favorable   .meteo-score-bar { background: var(--msc-favorable); }
.meteo-card-moyen       .meteo-score-bar { background: var(--msc-moyen); }
.meteo-card-deconseille .meteo-score-bar { background: var(--msc-deconseille); }

.meteo-score-value {
    font-size: 1em;
    font-weight: 700;
    white-space: nowrap;
    min-width: 38px;
    text-align: right;
}
.meteo-card-favorable   .meteo-score-value { color: var(--msc-favorable); }
.meteo-card-moyen       .meteo-score-value { color: var(--msc-moyen); }
.meteo-card-deconseille .meteo-score-value { color: var(--msc-deconseille); }

/* Créneau */
.meteo-creneau { font-size: 0.85em; color: #666; margin-bottom: 10px; }
.meteo-creneau strong { color: #222; }

/* Conseil */
.meteo-conseil { font-size: 0.95em; line-height: 1.6; color: #333; margin: 0 0 10px; }

/* Raisons */
.meteo-raisons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.meteo-raisons li {
    font-size: 0.78em;
    background: rgba(0,0,0,0.055);
    border-radius: 6px;
    padding: 3px 8px;
    color: #555;
    line-height: 1.4;
}

/* ================================================================
   BLOC CONSEIL GLOBAL
================================================================ */
.meteo-conseil-global {
    background: var(--msc-neutral-bg);
    border-radius: var(--msc-radius);
    padding: 28px 32px;
    box-shadow: var(--msc-shadow);
    margin: 20px 0;
    max-width: var(--msc-max-width);
}

.meteo-conseil-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.meteo-main-emoji { font-size: 3em; line-height: 1; flex-shrink: 0; margin-top: 2px; }

.meteo-conseil-meta { display: flex; flex-direction: column; gap: 8px; }

.meteo-condition { font-size: 1em; color: #555; font-weight: 600; }

.meteo-temps-lieux {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.meteo-temp-lieu {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.4em;
    font-weight: 700;
    color: #1a1a1a;
}

.meteo-lieu-badge {
    font-size: 0.5em;
    font-weight: 600;
    background: #dde3eb;
    color: #456;
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.meteo-lieu-badge.meteo-lieu-alt { background: #d4e8f5; color: #1a5276; }

.meteo-conseil-text {
    font-size: 1.05em;
    line-height: 1.65;
    color: #333;
    margin: 0 0 16px;
}

/* Badge créneau */
.meteo-creneau-badge {
    display: inline-block;
    font-size: 0.9em;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(0,0,0,0.06);
    color: #555;
    margin-bottom: 12px;
}
.meteo-creneau-badge.meteo-creneau-matin       { background:#e3f2fd; color:#1565c0; }
.meteo-creneau-badge.meteo-creneau-apres_midi  { background:#fff8e1; color:#f57f17; }
.meteo-creneau-badge.meteo-creneau-soir        { background:#ede7f6; color:#4527a0; }
.meteo-creneau-badge.meteo-creneau-journee     { background:#e8f5e9; color:#2e7d32; }
.meteo-creneau-badge.meteo-creneau-deconseille { background:#ffebee; color:#c62828; }

/* ================================================================
   BLOC MEILLEUR CRÉNEAU
================================================================ */
.meteo-creneau-block {
    background: var(--msc-neutral-bg);
    border-radius: var(--msc-radius);
    padding: 22px 26px;
    box-shadow: var(--msc-shadow);
    margin: 18px 0;
    border-left: 5px solid #ccc;
    max-width: var(--msc-max-width);
}
.meteo-creneau-block.meteo-creneau-matin       { border-left-color: #1565c0; }
.meteo-creneau-block.meteo-creneau-apres_midi  { border-left-color: #f57f17; }
.meteo-creneau-block.meteo-creneau-soir        { border-left-color: #4527a0; }
.meteo-creneau-block.meteo-creneau-journee     { border-left-color: #2e7d32; }
.meteo-creneau-block.meteo-creneau-deconseille { border-left-color: #c62828; }

.meteo-creneau-main   { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.meteo-creneau-icon   { font-size: 2.4em; }
.meteo-creneau-label  { font-size: 0.88em; color: #777; margin: 0 0 4px; }
.meteo-creneau-value  { font-size: 1.5em; font-weight: 700; color: #1a1a1a; }
.meteo-creneau-details{ display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.95em; color: #555; }
.meteo-creneau-warning{ font-size: 0.9em; color: var(--msc-deconseille); margin: 10px 0 0; }

/* Badges lieu */
.meteo-lieu-badge, .meteo-alt-badge { font-size: 0.75em; color: #888; font-weight: 400; }

/* ================================================================
   BLOCS DE PRÉVISIONS – liste + accordéon
================================================================ */
.msc-forecast-block {
    margin: 20px 0;
    font-family: var(--msc-font);
    max-width: var(--msc-max-width);
}

.msc-forecast-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px;
    padding: 0;
    border: none;
}

.msc-forecast-note {
    font-size: 0.85em;
    color: #999;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ================================================================
   LISTE DE JOURS – 7j et 15j
================================================================ */
.msc-days-list { display: flex; flex-direction: column; gap: 6px; }

.msc-day-row {
    display: grid;
    grid-template-columns: 68px 44px 1fr 72px auto;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.07);
    border-left: 4px solid transparent;
    transition: box-shadow 0.15s;
}

.msc-day-row:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.11); }

.msc-day-row--today     { border-left-color: var(--msc-favorable); background: #f1f8e9; }
.msc-day-row--good      { border-left-color: #a5d6a7; }
.msc-day-row--bad       { border-left-color: var(--msc-deconseille); background: #fff5f5; }
.msc-day-row--uncertain { opacity: 0.8; }

.msc-day-col { display: flex; flex-direction: column; gap: 2px; }

.msc-day-col--label { min-width: 0; }
.msc-day-name  { font-weight: 700; font-size: 1em; color: #222; line-height: 1.2; }
.msc-day-date  { font-size: 0.8em; color: #999; }
.msc-uncertain-badge { font-size: 0.7em; color: #bbb; font-weight: 700; }

.msc-day-col--icon { align-items: center; justify-content: center; }
.msc-day-emoji { font-size: 1.8em; line-height: 1; }

.msc-day-col--cond { min-width: 0; }
.msc-day-cond {
    font-size: 0.92em;
    color: #444;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msc-day-col--temps { align-items: flex-end; gap: 3px; text-align: right; }
.msc-tmax { font-weight: 700; color: #c62828; font-size: 1.1em; }
.msc-tmin { color: #1565c0; font-size: 0.9em; }

.msc-day-col--meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    min-width: 60px;
}
.msc-meta-item { font-size: 0.8em; color: #666; white-space: nowrap; }
.msc-meta-snow { color: #5c8fbe; }
.msc-meta-sun  { color: #f57f17; }

/* Colonne conseil desktop */
.msc-day-col--conseil { display: none; }

@media (min-width: 640px) {
    .msc-day-col--conseil { display: flex; }
    .msc-day-conseil      { font-size: 0.85em; color: #666; font-style: italic; }
    .msc-day-row { grid-template-columns: 68px 44px 1fr 72px 100px auto; }
}

/* Groupes semaines (15j) */
.msc-week-group { margin-bottom: 20px; }
.msc-week-label {
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #aaa;
    margin-bottom: 8px;
    padding-left: 3px;
}


/* ================================================================
   ACCORDÉON HEURES – groupé par jour + tranche, ordre chronologique
================================================================ */
.msc-heures-accordion { display: flex; flex-direction: column; gap: 6px; }

/* Indication navigation */
.msc-heures-nav-hint {
    font-size: 0.8em;
    color: #bbb;
    margin: 0 0 10px;
    font-style: italic;
}

/* Séparateur de jour */
.msc-heures-day-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 6px;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #aaa;
}
.msc-heures-day-sep:first-child { margin-top: 4px; }
.msc-heures-day-sep::before,
.msc-heures-day-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
}

/* Tranche */
.msc-tranche {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.07);
    overflow: hidden;
    border-left: 4px solid #e8e8e8;
}
.msc-tranche[open],
.msc-tranche.msc-tranche--open {
    border-left-color: var(--msc-favorable);
    box-shadow: 0 2px 10px rgba(46,125,50,0.10);
}

.msc-tranche-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
    background: #fff;
    transition: background 0.1s;
}
.msc-tranche-summary::-webkit-details-marker { display: none; }
.msc-tranche-summary::marker { display: none; }
.msc-tranche-summary:hover { background: #f8f9fa; }

.msc-tranche-icon  { font-size: 1.3em; flex-shrink: 0; width: 26px; text-align: center; }
.msc-tranche-label { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.msc-tranche-label strong { font-size: 0.92em; color: #1a1a1a; }
.msc-tranche-range { font-size: 0.73em; color: #bbb; }
.msc-tranche-emoji { font-size: 1.3em; flex-shrink: 0; }

.msc-tranche-resume {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88em;
}
.msc-tranche-resume .msc-tmax { font-weight: 700; color: #c62828; }
.msc-tranche-resume .msc-tmin { color: #1565c0; font-size: 0.9em; }
.msc-pp-badge      { font-size: 0.82em; color: #1565c0; }
.msc-pp-badge--wet { color: #c62828; }

.msc-now-label {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--msc-favorable);
    background: var(--msc-favorable-bg);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.msc-tranche-chevron {
    font-size: 0.82em;
    color: #ccc;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 2px;
}
.msc-tranche[open] .msc-tranche-chevron { transform: rotate(180deg); }

.msc-tranche-body { padding: 2px 14px 16px; }

/* Rangée d'heures – flex wrap pour s'adapter à n'importe quelle largeur */
.msc-hours-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

/* Carte heure */
.msc-hc {
    flex: 1 1 90px;
    min-width: 84px;
    max-width: 130px;
    background: #f5f7fa;
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    transition: background 0.12s;
}
.msc-hc:hover { background: #eaecf2; }

.msc-hc--now {
    background: #e8f5e9;
    border: 2px solid #81c784;
    box-shadow: 0 2px 8px rgba(46,125,50,.12);
}

.msc-hc__time {
    font-weight: 700;
    font-size: 0.97em;
    color: #333;
    display: flex;
    align-items: center;
    gap: 4px;
}
.msc-hc__dot  { color: var(--msc-favorable); font-size: 0.62em; }
.msc-hc__em   { font-size: 1.7em; line-height: 1; margin: 3px 0 2px; }
.msc-hc__temp { font-size: 1.2em; font-weight: 700; color: #1a1a1a; }
.msc-hc__apt  { font-size: 0.75em; color: #bbb; }
.msc-hc__pp   { font-size: 0.78em; color: #1565c0; width: 100%; margin-top: 2px; }
.msc-hc__pp--wet { color: #c62828; }
.msc-hc__wind { font-size: 0.76em; color: #666; }
.msc-hc__gusts{ color: #bbb; font-size: 0.9em; }
.msc-hc__uv   { font-size: 0.73em; color: #f57f17; font-weight: 600; }

/* Responsive */
@media (max-width: 480px) {
    .msc-tranche-summary { padding: 12px 14px; gap: 10px; }
    .msc-hc { flex: 1 1 76px; min-width: 70px; padding: 10px 6px; }
    .msc-hc__em   { font-size: 1.45em; }
    .msc-hc__temp { font-size: 1.05em; }
    .msc-now-label { display: none; }
}
@media (max-width: 360px) {
    .msc-hc { flex: 1 1 64px; min-width: 60px; }
    .msc-tranche-resume .msc-tmin,
    .msc-pp-badge { display: none; }
}

/* ================================================================
   BLOC MÉTÉO ACTUELLE (village / 1600)
================================================================ */
.meteo-current-block {
    background: #fff;
    border-radius: var(--msc-radius);
    box-shadow: var(--msc-shadow);
    padding: 20px 24px;
    margin: 16px 0;
    max-width: 440px;
}
.meteo-current-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.88em;
    color: #666;
}
.meteo-current-lieu-icon { font-size: 1.3em; }
.meteo-current-lieu { color: #333; font-size: 1em; font-weight: 600; }
.meteo-current-body { display: flex; align-items: center; gap: 16px; }
.meteo-current-emoji { font-size: 2.8em; line-height: 1; flex-shrink: 0; }
.meteo-current-data { display: flex; flex-direction: column; gap: 3px; }
.meteo-current-condition { font-size: 0.9em; color: #555; }
.meteo-current-temp { font-size: 2em; font-weight: 700; color: #1a1a1a; line-height: 1.1; }
.meteo-current-apt  { font-size: 0.85em; color: #888; }
.meteo-current-wind { font-size: 0.85em; color: #666; }

/* ================================================================
   TABLEAU COMPARAISON VILLAGE / 1600
================================================================ */
.meteo-comparaison { margin: 18px 0; max-width: var(--msc-max-width); overflow-x: auto; }

.meteo-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    background: #fff;
    border-radius: var(--msc-radius);
    box-shadow: var(--msc-shadow);
    overflow: hidden;
}
.meteo-compare-table th,
.meteo-compare-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.meteo-compare-table th { background: #f5f7fa; font-weight: 700; color: #333; }
.meteo-compare-table tr:last-child td { border-bottom: none; }
.meteo-compare-table td:first-child { color: #777; width: 28%; }

/* ================================================================
   ERREUR
================================================================ */
.meteo-error {
    border-left: 5px solid #bbb;
    background: #fafafa;
    color: #666;
    padding: 18px 22px;
    border-radius: var(--msc-radius);
    font-size: 0.95em;
}

/* ================================================================
   ATTRIBUTION
================================================================ */
.meteo-attribution { font-size: 0.75em; color: #bbb; margin: 14px 0 0; line-height: 1.4; }
.meteo-attribution a { color: #aaa; text-decoration: underline; }

/* ================================================================
   RESPONSIVE MOBILE
================================================================ */
@media (max-width: 600px) {
    .meteo-conseil-global { padding: 18px 16px; }
    .meteo-main-emoji     { font-size: 2.2em; }
    .meteo-conseil-text   { font-size: 0.95em; }
    .meteo-creneau-block  { padding: 16px 18px; }
    .meteo-card           { padding: 16px 16px 14px; }
    .meteo-card-icon      { font-size: 1.6em; }
    .meteo-card-title     { font-size: 1.1em; }
    .meteo-conseil        { font-size: 0.9em; }

    /* Jours : colonnes compactes */
    .msc-day-row { grid-template-columns: 52px 36px 1fr 60px auto; gap: 8px; padding: 11px 12px; }
    .msc-day-name { font-size: 0.92em; }
    .msc-day-emoji { font-size: 1.5em; }
    .msc-day-cond { font-size: 0.85em; }
    .msc-tmax { font-size: 1em; }

    /* Heures : 2 colonnes min sur petit écran */
    .msc-hours-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 7px; }
    .msc-hour-card { padding: 11px 8px; }
    .msc-hour-emoji { font-size: 1.5em; }
    .msc-hour-temp  { font-size: 1.1em; }

    .meteo-compare-table th,
    .meteo-compare-table td { padding: 10px 12px; font-size: 0.88em; }
}

@media (max-width: 380px) {
    .msc-day-row { grid-template-columns: 46px 32px 1fr 52px auto; gap: 6px; padding: 9px 10px; }
    .msc-hours-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}