/* Météo Vélo — Cyclo Bois-Francs */
:root {
  --mv-red: #ad2a24;
  --mv-dark: #1a1a1a;
  --mv-grey: #f5f5f5;
  --mv-border: #e0e0e0;
  --mv-green: #2e7d32;
  --mv-orange: #e65100;
  --mv-red-alert: #c62828;
  --mv-yellow: #f9a825;
}

/* Header */
.mv-header { text-align: center; padding: 1.2em 0 .8em; }
.mv-header h2 { font-size: 1.5em; color: var(--mv-red); border: none; margin-bottom: .2em; padding: 0; }
.mv-header .mv-subtitle { font-size: .9em; color: #666; }
.mv-header .mv-updated { font-size: .75em; color: #999; margin-top: .3em; }

/* Alerts */
.mv-alert {
  padding: .7em 1em;
  border-radius: 8px;
  margin-bottom: 1em;
  font-size: .9em;
  font-weight: 600;
}
.mv-alert.red { background: #ffcdd2; color: #b71c1c; border: 1px solid #ef9a9a; }
.mv-alert.orange { background: #ffe0b2; color: #e65100; border: 1px solid #ffcc80; }
.mv-alert.yellow { background: #fff9c4; color: #f57f17; border: 1px solid #fff176; }
.mv-alert a { color: inherit; }

/* Current conditions */
.mv-current {
  background: #fff;
  border-radius: 12px;
  padding: 1.2em;
  margin-bottom: 1em;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
}
.mv-current-icon img { width: 64px; height: 64px; }
.mv-current-temp { font-size: 2.5em; font-weight: 700; color: var(--mv-dark); line-height: 1; }
.mv-current-details { flex: 1; min-width: 180px; }
.mv-current-condition { font-size: 1.1em; font-weight: 600; margin-bottom: .3em; }
.mv-current-meta {
  font-size: .85em;
  color: #666;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2em .8em;
}
.mv-sun { font-size: .8em; color: #888; margin-left: auto; text-align: right; }

/* Ride cards */
.mv-ride {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 1em;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  overflow: hidden;
}
.mv-ride-header {
  padding: .8em 1em;
  background: var(--mv-grey);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  flex-wrap: wrap;
}
.mv-ride-day { font-size: 1.1em; font-weight: 700; }
.mv-ride-time { font-size: .85em; color: #666; }
.mv-verdict {
  font-size: .85em;
  font-weight: 700;
  padding: .25em .7em;
  border-radius: 20px;
  white-space: nowrap;
}
.mv-verdict-good { background: #e8f5e9; color: var(--mv-green); }
.mv-verdict-ok { background: #fff3e0; color: var(--mv-orange); }
.mv-verdict-bad { background: #ffebee; color: var(--mv-red-alert); }

/* Hourly grid */
.mv-hourly {
  display: flex;
  overflow-x: auto;
  border-top: 1px solid var(--mv-border);
  -webkit-overflow-scrolling: touch;
}
.mv-hour {
  flex: 0 0 auto;
  min-width: 72px;
  padding: .6em .5em;
  text-align: center;
  border-right: 1px solid var(--mv-border);
  font-size: .82em;
}
.mv-hour:last-child { border-right: none; }
.mv-hour.mv-hl { background: #fff8e1; }
.mv-hour-time { font-weight: 700; margin-bottom: .3em; }
.mv-hour-icon img { width: 36px; height: 36px; }
.mv-hour-temp { font-size: 1.15em; font-weight: 700; margin: .2em 0; }
.mv-hour-wind { color: #555; }
.mv-hour-dir { font-size: .75em; color: #888; }
.mv-hour-precip { font-size: .8em; margin-top: .2em; }
.mv-precip-none { color: #aaa; }
.mv-precip-low { color: var(--mv-yellow); }
.mv-precip-med { color: var(--mv-orange); }
.mv-precip-high { color: var(--mv-red-alert); font-weight: 700; }

/* Forecast fallback row */
.mv-fc-row {
  display: flex;
  align-items: center;
  padding: .7em 1em;
  border-top: 1px solid var(--mv-border);
  gap: .8em;
  flex-wrap: wrap;
}
.mv-fc-period { font-weight: 600; min-width: 100px; }
.mv-fc-icon img { width: 32px; height: 32px; }
.mv-fc-temp { font-weight: 700; min-width: 45px; }
.mv-fc-summary { flex: 1; font-size: .85em; color: #555; min-width: 150px; }

/* Loading */
.mv-loading { text-align: center; padding: 2em; color: #999; }
.mv-spinner {
  display: inline-block;
  width: 28px; height: 28px;
  border: 3px solid #ddd;
  border-top-color: var(--mv-red);
  border-radius: 50%;
  animation: mv-spin .8s linear infinite;
  margin-bottom: .5em;
}
@keyframes mv-spin { to { transform: rotate(360deg); } }
.mv-error { text-align: center; padding: 2em; color: var(--mv-red-alert); }

/* Wind recommendation */
.mv-wind-rec {
  padding: .6em 1em;
  font-size: .88em;
  border-top: 1px solid var(--mv-border);
}
.mv-wind-text { font-weight: 600; }
.mv-wind-tip { color: #555; font-style: italic; }
.mv-wind-light { background: #f9f9f9; color: #888; }
.mv-wind-mod { background: #e3f2fd; color: #1565c0; }
.mv-wind-strong { background: #fff3e0; color: var(--mv-orange); }

.mv-footer { text-align: center; font-size: .75em; color: #999; padding: .5em 0; }
.mv-footer a { color: var(--mv-red); }

/* Responsive */
@media (max-width: 480px) {
  .mv-current { flex-direction: column; text-align: center; }
  .mv-current-meta { grid-template-columns: 1fr; text-align: left; }
  .mv-sun { margin: .5em auto 0; text-align: center; }
  .mv-header h2 { font-size: 1.3em; }
}