body {
  font-family: system-ui, sans-serif;
  text-align: center;
  margin: 1rem;
}

#content {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* mobile-first */
}

/* Desktop */
@media (min-width: 768px) {
  #content {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.day {
  padding: 1rem;
  border-radius: 10px;
  color: white;
  font-weight: bold;
}

.jour {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  text-transform: capitalize;
}

.couleur {
  font-size: 1.4rem;
}

.proba {
  font-size: 0.9rem;
  opacity: 0.9;
}

.day.bleu  { background: #1e88e5; }
.day.blanc { background: #9e9e9e; }
.day.rouge { background: #e53935; }

.update {
  margin-top: 2rem;
  font-size: 0.9em;
  color: #666;
}

footer {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: #666;
}

footer a {
  color: inherit;
  text-decoration: underline;
}