/* ============================================================
   HORIZON · gateway.css : pages passerelles « données ouvertes »
   (/radome6min/obs, fiches station, liste). 100 % CSS, zéro JS :
   l'identité de meteothom.com sur des pages utilitaires minuscules.
   ============================================================ */

:root {
  --gw-bg: #050a16;
  --gw-ink: #e8eef9;
  --gw-ink-soft: #9fb0c8;
  --gw-ink-faint: #5e6e87;
  --gw-accent: #46c8ff;
  --gw-warm: #ffc548;
  --gw-glass: rgba(13, 24, 44, .58);
  --gw-line: rgba(150, 175, 210, .16);
  --gw-line-strong: rgba(150, 175, 210, .30);
  --gw-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 36px 18px 28px;
  color: var(--gw-ink);
  font: 16px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1100px 480px at 78% -8%, rgba(70, 200, 255, .13), transparent 60%),
    radial-gradient(900px 420px at 12% 4%, rgba(118, 86, 255, .10), transparent 55%),
    radial-gradient(1400px 700px at 50% 108%, rgba(196, 102, 52, .14), transparent 58%),
    var(--gw-bg);
  background-attachment: fixed;
}
/* voile d'étoiles discret, pur CSS */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.1px 1.1px at 22% 18%, rgba(225, 235, 255, .8), transparent 100%),
    radial-gradient(.9px .9px at 64% 9%, rgba(225, 235, 255, .6), transparent 100%),
    radial-gradient(1.3px 1.3px at 83% 26%, rgba(225, 235, 255, .7), transparent 100%),
    radial-gradient(.8px .8px at 9% 41%, rgba(225, 235, 255, .5), transparent 100%),
    radial-gradient(1px 1px at 45% 33%, rgba(225, 235, 255, .55), transparent 100%),
    radial-gradient(1.2px 1.2px at 92% 56%, rgba(225, 235, 255, .45), transparent 100%);
  background-repeat: no-repeat;
}

main, header.gw, footer.gw { position: relative; z-index: 1; width: min(720px, 100%); margin-inline: auto; }

/* ---------- wordmark ---------- */
header.gw { display: flex; align-items: baseline; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
header.gw a.brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--gw-ink); text-decoration: none; }
header.gw a.brand em { font-style: normal; color: var(--gw-accent); }
header.gw .tag { font-family: var(--gw-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gw-ink-faint); }

.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-family: var(--gw-mono); font-size: .72rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gw-accent);
}
.kicker::before { content: ''; width: 24px; height: 1px; background: var(--gw-accent); opacity: .7; }

h1 { margin: 0 0 14px; font-size: clamp(1.45rem, 4.5vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; }
h2 { margin: 26px 0 10px; font-size: 1.05rem; color: var(--gw-ink-soft); }

a { color: var(--gw-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: var(--gw-mono); font-size: .88em; background: rgba(70, 200, 255, .10); border: 1px solid rgba(70, 200, 255, .18); padding: 1px 6px; border-radius: 6px; }

/* ---------- carte de relevé (la donnée) ---------- */
.big {
  background: var(--gw-glass);
  border: 1px solid var(--gw-line-strong);
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 1.05rem;
  box-shadow: 0 14px 40px rgba(2, 6, 16, .45);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.big b.temp { font-family: var(--gw-mono); font-size: 1.5em; color: var(--gw-warm); font-weight: 700; letter-spacing: -.02em; }

.muted { color: var(--gw-ink-faint); font-size: .88rem; }

/* ---------- listes & liens d'action ---------- */
ul { padding-left: 20px; margin: 10px 0; }
li { margin: 4px 0; }

p.actions a {
  display: inline-block; margin: 4px 8px 4px 0; padding: 7px 15px;
  border: 1px solid var(--gw-line-strong); border-radius: 999px;
  color: var(--gw-ink-soft); font-size: .88rem; font-weight: 600;
}
p.actions a:hover { border-color: var(--gw-accent); color: var(--gw-accent); text-decoration: none; }

/* ---------- formulaire (humains) ---------- */
form { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
input[type="text"] {
  flex: 1; min-width: 200px; padding: 11px 15px; font: inherit;
  border-radius: 999px; border: 1px solid var(--gw-line-strong);
  background: rgba(8, 16, 32, .7); color: var(--gw-ink);
}
input[type="text"]:focus { outline: none; border-color: var(--gw-accent); box-shadow: 0 0 0 3px rgba(70, 200, 255, .16); }
button {
  padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer;
  border: none; border-radius: 999px; color: #04111f;
  background: linear-gradient(135deg, #46c8ff, #1f8fd6);
  box-shadow: 0 8px 22px rgba(40, 160, 230, .25);
}
button:hover { filter: brightness(1.08); }

/* ---------- bloc « liste » : alphabet + colonnes ---------- */
nav.alpha { position: sticky; top: 0; z-index: 2; margin: 12px 0 4px; padding: 9px 4px; background: linear-gradient(to bottom, var(--gw-bg) 78%, transparent); }
nav.alpha a {
  display: inline-block; min-width: 27px; text-align: center; margin: 2px 1px;
  padding: 3px 5px; border-radius: 8px; font-family: var(--gw-mono); font-size: .8rem;
  border: 1px solid var(--gw-line); color: var(--gw-ink-soft);
}
nav.alpha a:hover { border-color: var(--gw-accent); color: var(--gw-accent); text-decoration: none; }
section.letter h2 {
  font-family: var(--gw-mono); color: var(--gw-accent); font-size: 1rem;
  letter-spacing: .2em; border-bottom: 1px solid var(--gw-line); padding-bottom: 4px;
}
section.letter ul { columns: 2 280px; column-gap: 28px; list-style: none; padding: 0; }
section.letter li { break-inside: avoid; padding: 1px 0; }
section.letter .muted { font-family: var(--gw-mono); font-size: .72rem; }

/* ---------- pied ---------- */
footer.gw { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--gw-line); }
footer.gw p { margin: 0; font-family: var(--gw-mono); font-size: .72rem; color: var(--gw-ink-faint); }
footer.gw a { color: var(--gw-ink-soft); }

@media print { body { background: #fff; color: #000; } body::before { display: none; } }