.heure-weather-card {
  --card-accent: #e30613;
  color: #f5f6f7;
  background: #171d24;
  border: 1px solid #3a4651;
  border-left: 5px solid var(--card-accent);
  border-radius: 16px;
  padding: 24px;
  font: 400 15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 20px 60px rgb(0 0 0 / 20%);
}
.heure-weather-card.is-unavailable { --card-accent: #6d7882; }
.heure-weather-card__header { display: flex; justify-content: space-between; gap: 18px; }
.heure-weather-card__eyebrow { margin: 0 0 4px; color: #ef5660; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.heure-weather-card h3 { margin: 0; font-size: 26px; line-height: 1.12; }
.heure-weather-card__date { margin: 5px 0 0; color: #aeb7c0; font-size: 13px; }
.heure-weather-card__state { height: max-content; padding: 5px 9px; border: 1px solid #82754c; border-radius: 999px; color: #f0e4b7; background: #302c1f; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.is-unavailable .heure-weather-card__state { border-color: #59646e; color: #d7dbde; background: #242b31; }
.heure-weather-card__cue { display: flex; align-items: center; gap: 13px; margin: 22px 0 16px; }
.heure-weather-card__symbol { display: grid; width: 54px; height: 54px; place-items: center; flex: 0 0 auto; border: 1px solid #3b4651; border-radius: 14px; background: #10161c; font-size: 23px; font-weight: 800; }
.heure-weather-card__cue strong, .heure-weather-card__cue small { display: block; }
.heure-weather-card__cue small { margin-top: 2px; color: #9fa9b3; font-size: 12px; }
.heure-weather-card__summary { min-height: 66px; margin: 0 0 19px; color: #dce1e5; font-size: 14px; }
.heure-weather-card__metrics { display: grid; grid-template-columns: 1fr 1fr; margin: 0; overflow: hidden; border: 1px solid #35414b; border-radius: 10px; background: #35414b; gap: 1px; }
.heure-weather-card__metrics div { min-width: 0; padding: 12px; background: #10161c; }
.heure-weather-card__metrics div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.heure-weather-card__metrics dt { color: #9fa9b3; font-size: 11px; }
.heure-weather-card__metrics dd { margin: 5px 0 0; font-size: 16px; font-weight: 750; }
.heure-weather-card__footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 15px; border-top: 1px solid #303a44; color: #9fa9b3; font-size: 12px; }
.heure-weather-card__footer a { color: #f1f3f4; font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 520px) {
  .heure-weather-card__header, .heure-weather-card__footer { flex-direction: column; }
  .heure-weather-card__metrics { grid-template-columns: 1fr; }
}
.city-historical-weather { margin: 2.5rem 0; text-align: center; }
.city-historical-weather > h2 { margin-bottom: .5rem; }
.city-historical-weather > p { max-width: 46rem; margin: 0 auto 1.25rem; }
.city-historical-weather .heure-weather-card { max-width: 46rem; margin-inline: auto; text-align: left; }
.historical-weather-load-error { padding: 1rem; border: 1px solid #6d7882; border-radius: .75rem; }
.heure-weather-card__proof { margin-top: 1rem; border-top: 1px solid #303a44; color: #bdc5cc; text-align: left; }
.heure-weather-card__proof summary { padding: .9rem 0 .25rem; cursor: pointer; font-weight: 700; }
.heure-weather-card__proof dl { margin: .5rem 0 0; }
.heure-weather-card__proof dl div { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr; gap: .75rem; padding: .4rem 0; }
.heure-weather-card__proof dt { color: #9fa9b3; }
.heure-weather-card__proof dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .heure-weather-card__proof dl div { grid-template-columns: 1fr; gap: .1rem; }
}