/* ─────────────────────────────────────────────────────────────────
   Météo montagne — styles propres à meteo/index-bs5.php
   Dépend de rz-bs5.css (chargé en amont par partial/head.php)
───────────────────────────────────────────────────────────────── */

/* ── Callout warn (extension de rz-bs5.css .callout) ── */
.callout.warn {
  background: color-mix(in oklch, oklch(0.7 0.15 65) 8%, white);
  border-color: color-mix(in oklch, oklch(0.7 0.15 65) 28%, white);
}
.callout.warn .ci {
  background: color-mix(in oklch, oklch(0.7 0.15 65) 18%, white);
  color: oklch(0.52 0.18 55);
}

/* ── Hero photo ── */
.mt-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--rz-border);
  margin-top: 1.25rem;
}
.mt-hero .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--rz-surface-2);
}
.mt-hero .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,16,28,.04) 0%, rgba(8,16,28,0) 30%, rgba(8,16,28,.58) 76%, rgba(8,16,28,.84) 100%);
}
.mt-hero .content {
  position: relative;
  padding: 1.6rem 1.7rem;
  color: #fff;
}
@media (min-width: 768px) {
  .mt-hero { min-height: 460px; }
  .mt-hero .content { padding: 2.4rem 2.6rem; }
}

/* ── Chip du hero ── */
.mt-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: .28rem .72rem;
  margin-bottom: .7rem;
}
.mt-chip svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .82; }

/* ── Titre H1 du hero ── */
.mt-h1 {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: #fff;
  margin: .5rem 0 .8rem;
}
@media (min-width: 768px) { .mt-h1 { } }

.mt-hero-desc {
  color: rgba(255,255,255,.86);
  font-size: .96rem;
  line-height: 1.65;
  margin: 0;
}
@media (min-width: 768px) { .mt-hero-desc { font-size: 1.05rem; } }

/* ── Titres de section ── */
.mt-h2 {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--rz-ink);
  margin: .35rem 0 1.5rem;
}
@media (min-width: 768px) { .mt-h2 { font-size: 1.8rem; } }

/* ── Prose éditoriale ── */
.mt-prose { margin-top: 2rem; }
.mt-prose h2 {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -.02em;
  color: var(--rz-ink);
  margin: 0 0 .9rem;
  line-height: 1.15;
}
@media (min-width: 768px) { .mt-prose h2 { font-size: 1.65rem; } }
.mt-prose h3 {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--rz-ink);
  margin: 1.75rem 0 .55rem;
}
.mt-prose p {
  font-size: .96rem;
  color: var(--rz-inksoft);
  line-height: 1.72;
  margin: 0 0 .9rem;
  max-width: 66ch;
}
.mt-prose a { color: var(--rz-primary); }
.mt-prose a:hover { color: var(--rz-blue); }
.mt-prose strong { color: var(--rz-ink); font-weight: 600; }
.mt-prose figure { margin: 1.25rem 0; }
.mt-prose figure img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.mt-prose figcaption { font-size: .82rem; color: var(--rz-inksoft); margin-top: .45rem; line-height: 1.45; }
.mt-dropcap::first-letter {
  float: left;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: .85;
  margin: 0 .14em -.1em 0;
  color: var(--rz-primary);
}

/* ── Carte sombre sidebar ── */
.mt-dark {
  background: var(--rz-ink);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
}
.mt-dark .lbl {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: .85rem;
}
.mt-dark ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .72rem;
}
.mt-dark li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .88rem;
  color: rgba(255,255,255,.86);
  line-height: 1.45;
}
.mt-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.52);
  margin-top: .12rem;
}

/* ── Section générique ── */
.mt-section { margin-top: 4rem; }

/* ── Grille des massifs ── */
.mt-massif-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 576px) { .mt-massif-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .mt-massif-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Carte massif ── */
.mt-massif {
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: 16px;
  padding: 1.05rem 1.1rem;
  transition: border-color .16s, box-shadow .2s, transform .2s;
}
.mt-massif:hover {
  border-color: color-mix(in oklch, var(--rz-blue) 45%, white);
  box-shadow: 0 18px 36px -26px rgba(20,40,80,.5);
  transform: translateY(-2px);
}
.mt-massif-h {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .85rem;
}
.mt-massif-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--rz-primary);
  background: color-mix(in oklch, var(--rz-blue) 10%, white);
  border: 1px solid color-mix(in oklch, var(--rz-blue) 20%, white);
}
.mt-massif-ico svg { width: 16px; height: 16px; }
.mt-massif-nm {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -.01em;
  color: var(--rz-ink);
}

/* ── Boutons météo du massif ── */
.mt-mlinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .38rem;
}
.mt-mlink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-align: center;
  text-decoration: none;
  padding: .58rem .3rem;
  border-radius: 11px;
  border: 1px solid var(--rz-border);
  background: var(--rz-surface-2);
  font-size: .66rem;
  font-weight: 600;
  color: var(--rz-inksoft);
  line-height: 1.2;
  transition: border-color .15s, color .15s, background .15s;
}
.mt-mlink svg { width: 15px; height: 15px; color: var(--rz-primary); flex-shrink: 0; transition: color .15s; }
.mt-mlink:hover {
  border-color: color-mix(in oklch, var(--rz-blue) 55%, white);
  color: var(--rz-primary);
  background: color-mix(in oklch, var(--rz-blue) 7%, white);
}
.mt-mlink.warn svg { color: oklch(0.58 0.17 55); }
.mt-mlink.warn:hover {
  border-color: color-mix(in oklch, oklch(0.58 0.17 55) 40%, white);
  color: oklch(0.48 0.17 55);
  background: color-mix(in oklch, oklch(0.58 0.17 55) 7%, white);
}
.mt-mlink.cold svg { color: oklch(0.55 0.1 235); }
.mt-mlink.cold:hover {
  border-color: color-mix(in oklch, oklch(0.55 0.1 235) 40%, white);
  color: oklch(0.42 0.1 235);
  background: color-mix(in oklch, oklch(0.55 0.1 235) 7%, white);
}

/* ── Cartes applications ── */
.mt-app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 576px) { .mt-app-grid { grid-template-columns: repeat(2, 1fr); } }
.mt-app {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: 14px;
  padding: 1rem 1.05rem;
  transition: border-color .16s, box-shadow .18s;
}
.mt-app:hover {
  border-color: color-mix(in oklch, var(--rz-blue) 45%, white);
  box-shadow: 0 16px 32px -26px rgba(20,40,80,.5);
}
.mt-app-ico {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--rz-primary);
  background: color-mix(in oklch, var(--rz-blue) 10%, white);
  border: 1px solid color-mix(in oklch, var(--rz-blue) 20%, white);
}
.mt-app-ico svg { width: 20px; height: 20px; }
.mt-app-nm { font-weight: 700; font-size: .95rem; color: var(--rz-ink); margin: 0 0 .2rem; }
.mt-app-d { font-size: .82rem; color: var(--rz-inksoft); line-height: 1.45; margin: 0 0 .5rem; }
.mt-app-store {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .73rem;
  font-weight: 700;
  color: var(--rz-primary);
  text-decoration: none;
}
.mt-app-store .rz-ico { width: 12px; height: 12px; transition: transform .15s; }
.mt-app-store:hover .rz-ico { transform: translateX(2px); }
.mt-app-store:hover { color: var(--rz-blue); }

/* ── Lien externe (en-tête de section) ── */
.mt-ext {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--rz-primary);
  text-decoration: none;
  white-space: nowrap;
}
.mt-ext .rz-ico { width: 13px; height: 13px; }
.mt-ext:hover { color: var(--rz-blue); }

/* ── Groupes de liens ressources ── */
.mt-lk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
}
@media (min-width: 576px) { .mt-lk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .mt-lk-grid { grid-template-columns: repeat(3, 1fr); } }
.mt-lk h4 {
  display: flex;
  align-items: center;
  gap: .48rem;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--rz-ink);
  margin: 0 0 .5rem;
}
.mt-lk h4 svg,
.mt-lk h4 .rz-ico { width: 16px; height: 16px; color: var(--rz-primary); flex-shrink: 0; }
.mt-lk a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  font-size: .875rem;
  color: var(--rz-inksoft);
  text-decoration: none;
  border-top: 1px solid var(--rz-border);
  transition: color .14s, padding-left .14s;
}
.mt-lk a:first-of-type { border-top: 0; }
.mt-lk a:hover { color: var(--rz-primary); padding-left: .18rem; }
.mt-lk-ext {
  margin-left: auto;
  opacity: 0;
  transition: opacity .14s;
  flex-shrink: 0;
}
.mt-lk a:hover .mt-lk-ext { opacity: .6; }
.mt-lk-ext .rz-ico { width: 11px; height: 11px; }