/* ============================================================
   OSA — La Table de Clairac · v0.4 — styles d'extension
   (Météo Open-Meteo, Courrier, Partage calendrier, hero strip)
   Ne touche PAS style.v260909.css — fichier versionné en place.
   ============================================================ */

:root {
  --ok: #7fb069;
  --warn: #e0b458;
  --danger: #d9776a;
}

/* ---------- Météo ---------- */
.wx-strip {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  background: rgba(35, 42, 61, .35);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
}
.wx-now {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 1.05rem; color: var(--creme);
}
.wx-now .wx-ico { font-size: 1.5rem; }
.wx-days { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.wx-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 6px 10px;
  font-size: .75rem; color: var(--muted); min-width: 74px;
}
.wx-chip b { font-size: .9rem; color: var(--text); }
.wx-chip small { color: var(--muted-2); font-size: .68rem; }

.wx-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.wx-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.wx-card h3 { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.wx-card .big { font-size: 1.5rem; font-weight: 800; color: var(--creme); }
.wx-card .sub { font-size: .82rem; color: var(--muted); }
.wx-card.alert { border-color: rgba(217, 119, 106, .6); }
.wx-body .wx-empty { grid-column: 1 / -1; }

/* ---------- Courrier ---------- */
.mail-status {
  font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 5px 12px;
  border: 1px solid var(--line); color: var(--muted);
}
.mail-status[data-tone="ok"] { color: var(--ok); border-color: rgba(127, 176, 105, .5); }
.mail-status[data-tone="warn"] { color: var(--warn); border-color: rgba(224, 180, 88, .5); }
.mail-status[data-tone="danger"] { color: var(--danger); border-color: rgba(217, 119, 106, .5); }

.mail-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.mail-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.mail-form input, .mail-form select, .mail-form textarea {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 11px;
  font: 500 .95rem "Inter", system-ui, sans-serif;
}
.mail-form input:focus, .mail-form select:focus, .mail-form textarea:focus { outline: 2px solid var(--ember); outline-offset: 1px; }
.mail-form textarea { resize: vertical; min-height: 96px; }
.mail-form .form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.mail-note { font-size: .8rem; color: var(--muted); }
.mail-note[data-tone="ok"] { color: var(--ok); }
.mail-note[data-tone="danger"] { color: var(--danger); }

.queue-note {
  margin-top: 12px; font-size: .82rem; color: var(--warn);
  background: rgba(224, 180, 88, .08); border: 1px solid rgba(224, 180, 88, .3);
  border-radius: var(--radius-sm); padding: 10px 14px;
}

/* ---------- Partage calendrier ---------- */
.cal-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
  .mail-form { grid-template-columns: 1fr; }
  .wx-strip { flex-direction: column; align-items: flex-start; }
}