/* Carte */
.ij-card {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  width: 100%;
  max-width: 680px;
  margin: 12px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  padding: 16px 16px 12px;
  animation: ijFade .35s ease forwards;
}
@keyframes ijFade { from {opacity:0; transform:translateY(8px);} to {opacity:1; transform:translateY(0);} }

/* Header */
.ij-header { display:flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.ij-title { font-size: 18px; font-weight: 700; color:#111; }
.ij-sub { font-size: 13px; color:#666; }

/* Grid */
.ij-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px){ .ij-grid { grid-template-columns: 1fr; } }

/* Box */
.ij-box {
  background:#f8f8f8;
  border-radius: 12px;
  padding: 12px;
  border-left: 4px solid #b32121;
}
.ij-box-title { font-weight:700; font-size:14px; margin-bottom: 8px; color:#222; }

/* Météo */
.ij-current { display:flex; align-items:center; gap:10px; }
.ij-ico { font-size:28px; }
.ij-temp #ijTemp { font-size:22px; font-weight:800; color:#111; line-height: 1; }
.ij-temp #ijCond { font-size:13px; color:#666; margin-top: 2px; }
.ij-details { display:flex; gap:12px; font-size:13px; color:#444; margin-top: 8px; flex-wrap: wrap; }
.ij-tmr { margin-top: 10px; padding-top: 10px; border-top:1px dashed #ddd; }
.ij-tmr-title { font-size:12px; color:#777; margin-bottom: 6px; }
.ij-tmr-line { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; color:#333; }
.ij-tmr-line span:first-child { font-size:18px; }

/* Lune */
.ij-moon-now { display:flex; align-items:center; gap:10px; }
.ij-moon-ico { font-size:34px; }
.ij-moon-txt #ijMoonName { font-weight:700; color:#111; }
.ij-next { font-size:13px; color:#666; margin-top:2px;
  display:block; white-space:normal; line-height:1.4; }

/* Footer */
.ij-foot { text-align:right; font-size:12px; color:#888; margin-top: 10px; }

/* Erreur */
.ij-error { padding: 18px; text-align: center; color:#b32121; font-weight: 600; background: #fff5f5; border-radius: 10px; }

/* 🌧️ Style spécifique à la probabilité de pluie */
#ijTmrRain {
  margin-left: 6px;
  color: #1e88e5;
  font-weight: 600;
  font-size: 13px;
}

/* 📱 Version mobile optimisée */
@media (max-width: 480px) {
  .ij-title { font-size: 20px; }
  .ij-sub { font-size: 12px; }

  .ij-box {
    padding: 14px;
    border-left-width: 3px;
  }

  .ij-ico { font-size: 32px; }
  .ij-temp #ijTemp { font-size: 24px; }
  .ij-temp #ijCond { font-size: 14px; }

  .ij-details { font-size: 14px; }

  .ij-tmr-line { flex-direction: column; align-items: flex-start; gap: 4px; }

  .ij-moon-ico { font-size: 38px; }
  .ij-moon-txt { font-size: 15px; }
  .ij-next { font-size: 14px; }

  .ij-foot { font-size: 11px; }
}