@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@300;400;600&display=swap');

:root {
  --day-bg: #f4f3f0;
  --day-surface: #c9c6bd;
  --day-text: #111111;
  --day-muted: #6b6b6b;
  --day-border: rgba(17, 17, 17, .16);
  --day-scrim-strong: rgba(17, 17, 17, .72);
  --day-panel: rgba(244, 243, 240, .93);

  --night-bg: #0d0f11;
  --night-surface: #14181c;
  --night-text: #eceae5;
  --night-muted: #8a8f94;
  --night-border: rgba(236, 234, 229, .16);
  --night-scrim-strong: rgba(8, 10, 12, .72);
  --night-panel: rgba(8, 10, 12, .8);

  --accent: #d13b2e;
  --live: #ff5545;

  --blend: 1; /* 1 = full day, 0 = full night — set inline per request */

  --bg: color-mix(in srgb, var(--day-bg) calc(var(--blend) * 100%), var(--night-bg));
  --surface: color-mix(in srgb, var(--day-surface) calc(var(--blend) * 100%), var(--night-surface));
  --text: color-mix(in srgb, var(--day-text) calc(var(--blend) * 100%), var(--night-text));
  --muted: color-mix(in srgb, var(--day-muted) calc(var(--blend) * 100%), var(--night-muted));
  --border: color-mix(in srgb, var(--day-border) calc(var(--blend) * 100%), var(--night-border));
  --scrim-strong: color-mix(in srgb, var(--day-scrim-strong) calc(var(--blend) * 100%), var(--night-scrim-strong));
  --panel: color-mix(in srgb, var(--day-panel) calc(var(--blend) * 100%), var(--night-panel));
  /* Badges/pills over the webcam image sit on a scrim that's dark in both
     themes (day and night scrim colors are both near-black) — their text
     is always light, unlike page text which flips with --blend. */
  --on-scrim: var(--night-text);

  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-number: 'IBM Plex Sans Condensed', sans-serif;

  color-scheme: light dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  transition: background-color .6s ease, color .6s ease;
}

body { min-height: 100vh; padding-bottom: 0; }
body.has-tabbar { padding-bottom: 60px; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { max-width: 100%; display: block; }

.n {
  font-family: var(--font-number);
  font-weight: 300;
  letter-spacing: -.02em;
}

.label {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---- shell ---- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  height: 52px;
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand svg { fill: var(--text); }
.brand span {
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 600;
}

.site-nav { display: flex; gap: 26px; font-size: 11px; letter-spacing: .1em; }
.site-nav a { color: var(--muted); padding-bottom: 2px; }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom: 1.5px solid var(--text); }

.header-clock { font-size: 11px; color: var(--muted); letter-spacing: .08em; flex: none; }

main { max-width: 1280px; margin: 0 auto; }

.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
  z-index: 20;
}
.tabbar a {
  flex: 1;
  padding: 12px 0 16px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
}
.tabbar a[aria-current="page"] { color: var(--text); }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .tabbar { display: flex; }
  body.has-tabbar { padding-bottom: 60px; }
}

/* ---- live badge / pills ---- */

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--scrim-strong);
  color: var(--on-scrim);
  font-size: 10px;
  letter-spacing: .14em;
  padding: 5px 10px;
}
.badge-live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live);
  flex: none;
}

.pill {
  background: var(--panel);
  color: var(--text);
  padding: 9px 14px;
  font-size: 11px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.pill-solid {
  background: var(--text);
  color: var(--bg);
}
.pill-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

/* ---- data grid cells (Direct + Données) ---- */

.stat {
  padding: 12px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat:last-child, .stat.no-r { border-right: none; }
.stat .label { font-size: 9px; margin-bottom: 2px; }
.stat .n { font-size: 26px; line-height: 1.05; }
.stat .unit { font-size: 9px; color: var(--muted); margin-top: 2px; }

.source-note {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .04em;
  line-height: 1.5;
}

.chart {
  position: relative;
}
.chart .grid-lines {
  position: absolute; inset: 0;
  background: linear-gradient(var(--border) 1px, transparent 1px) 0 0/100% 25%;
}
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart .now-dot {
  position: absolute; top: 8px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
}

/* ---- degraded / status states ---- */

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 20px;
}

.webcam-fallback[hidden] {
  display: none;
}
.webcam-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--surface) 85%, var(--text) 6%) 0 10px, var(--surface) 10px 20px);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
  padding: 20px;
}

/* ---- footer teasers (Direct page) ---- */

.teasers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}
.teasers a {
  padding: 22px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.teasers a:last-child { border-right: none; }
.teasers .teaser-title { font-size: 13px; color: var(--text); }
.teasers .teaser-sub { font-size: 11px; color: var(--muted); }

@media (max-width: 700px) {
  .teasers { grid-template-columns: 1fr; }
  .teasers a { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ---- page footer ---- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 22px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .04em;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Panorama ---- */

.panorama-wrap { position: relative; border-top: 1px solid var(--border); }
/* Matches images/panorama.jpg's own ratio (2592x1527) — no crop needed. */
.panorama-wrap img { width: 100%; aspect-ratio: 2592 / 1527; object-fit: cover; display: block; background: var(--surface); color: transparent; }

/* Site names in transparency over the photo — same scrim tokens as the
   webcam's badge-live, just lighter: text only, no pill, so the photo
   reads through. A thin tick under each label points at its building. */
.panorama-tag {
  position: absolute;
  color: var(--on-scrim);
  opacity: .85;
  font-size: 9px;
  letter-spacing: .08em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
  transform: translate(-50%, -100%);
  white-space: nowrap;
  pointer-events: none;
}
.panorama-tag::after {
  content: '';
  position: absolute; left: 50%; top: 100%;
  width: 1px; height: 10px;
  background: currentColor;
  opacity: .7;
}

/* ---- forms (À propos / contact) ---- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.field input, .field textarea {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  padding: 10px 12px;
}
.field input:focus, .field textarea:focus { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
.field textarea { resize: vertical; min-height: 120px; }

.btn {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  padding: 10px 20px;
  font-size: 11px;
  letter-spacing: .1em;
  border: 1px solid var(--text);
}
.btn:hover { color: var(--bg); opacity: .85; }

/* ---- prose (À propos) ---- */

.prose { font-size: 13px; line-height: 1.7; color: var(--text); max-width: 640px; }
.prose p { margin: 0 0 1em; }
.prose h2 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 2em 0 .8em; }

/* ---- generic page frame ---- */

.page-section {
  padding: 28px 22px 48px;
  border-bottom: 1px solid var(--border);
}
.page-title {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 0 0 18px;
}

/* ---- Direct page ---- */

.direct-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 52px);
}

.direct-panel {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.direct-panel-primary {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
}
.direct-panel-primary .n { font-size: 64px; line-height: .9; }
.direct-panel-primary .sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

.stat-grid-2 { display: grid; grid-template-columns: 1fr 1fr; }

.direct-hourly { flex: 1; padding: 14px 16px; }
.direct-hourly-list { display: flex; flex-direction: column; gap: 7px; font-size: 11px; margin-top: 8px; }
.direct-hourly-row { display: flex; justify-content: space-between; gap: 8px; }
.direct-hourly-row .h-label { color: var(--muted); flex: none; width: 36px; }
.direct-hourly-row .h-rain { color: var(--accent); flex: none; }
.direct-hourly-row .h-rain.none { color: var(--muted); }

.direct-source { padding: 10px 16px 12px; border-top: 1px solid var(--border); }

.direct-media { display: flex; flex-direction: column; min-width: 0; }

.webcam-frame {
  flex: 1;
  min-height: 320px;
  position: relative;
  background: var(--surface);
  overflow: hidden;
}
.webcam-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; }
.webcam-frame .badge-live { position: absolute; top: 16px; left: 16px; }
.webcam-footer {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
}
.webcam-caption {
  background: var(--panel); color: var(--text);
  padding: 6px 10px; font-size: 10px; letter-spacing: .08em;
}
.webcam-actions { display: flex; gap: 8px; flex: none; }

@media (max-width: 700px) {
  .webcam-footer { flex-direction: column-reverse; align-items: flex-start; }
}

.direct-chart-wrap {
  flex: none;
  border-top: 1px solid var(--border);
  padding: 12px 18px;
  box-sizing: border-box;
}
.direct-chart-head { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .12em; color: var(--muted); }
.direct-chart { height: 80px; }
.direct-chart-foot { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); margin-top: 6px; }

@media (max-width: 900px) {
  .direct-layout { grid-template-columns: 1fr; min-height: 0; }
  .direct-panel { order: 2; border-right: none; }
  .direct-media { order: 1; }
  .direct-panel-primary .n { font-size: 52px; }
  .stat-grid-2 { grid-template-columns: repeat(3, 1fr); }
  .webcam-frame { min-height: 220px; flex: none; }
  .direct-hourly-list { flex-direction: row; overflow-x: auto; gap: 14px; }
  .direct-hourly-row { flex-direction: column; align-items: center; gap: 2px; }
}

/* ---- wind / sun icons ---- */

.icon-wind, .icon-sun, .icon-wx { width: 13px; height: 13px; vertical-align: -1px; flex: none; }
.n-row { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Données page ---- */

.records-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
}
@media (max-width: 700px) {
  .records-grid { grid-template-columns: 1fr; }
}

.forecast-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 700px) {
  .forecast-cols { grid-template-columns: 1fr; gap: 24px; }
}

.daily-list { display: flex; flex-direction: column; margin-top: 10px; }
.daily-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.daily-row:last-child { border-bottom: none; }
.daily-row .d-label { color: var(--muted); width: 60px; flex: none; }
.daily-row .d-range { flex: 1; text-align: right; }
.daily-row .d-summary { flex: 2; text-align: right; color: var(--muted); }

/* ---- Timelapse page ---- */

.timelapse-frame {
  position: relative;
  /* Matches the webcam capture's own ratio (880x700) so object-fit:
     cover below barely has to crop anything for the common case —
     width is the smaller of "full width" and "whatever hits the
     70vh/640px height cap at that ratio", height follows from it. */
  aspect-ratio: 880 / 700;
  width: min(100%, calc(min(70vh, 640px) * 880 / 700));
  margin: 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.timelapse-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; }

.tl-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
}
.tl-play {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.tl-scrubber { flex: 1; position: relative; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.tl-track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--border); transform: translateY(-50%); }
.tl-fill { position: absolute; left: 0; top: 50%; height: 2px; background: var(--text); transform: translateY(-50%); width: 100%; }
.tl-handle { position: absolute; top: 50%; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; transform: translate(-50%, -50%); left: 100%; }
.tl-time { flex: none; font-size: 10px; letter-spacing: .1em; color: var(--muted); width: 90px; text-align: right; }

.tabs { display: flex; gap: 2px; }
.tabs a {
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
  border: 1px solid var(--border);
}
.tabs a[aria-current="true"] { color: var(--text); border-color: var(--text); }