/**
 * SkyAtlas — /ce-soir/ (shell statique de la page compagnon)
 * Mobile-first. Le monde "app" — autonome, n'hérite pas du magazine.
 */

*,
*::before,
*::after { box-sizing: border-box; }

/* L'attribut [hidden] doit toujours l'emporter sur un display: explicite. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

.cs-body {
  background: var(--c-bg);
  color: var(--c-text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* Skip link */
.cs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-golden);
  color: var(--c-bg);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  z-index: 1000;
}
.cs-skip:focus { left: 12px; top: 12px; outline: none; }

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

/* ─── Header ────────────────────────────────────────────────── */
.cs-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 12px 20px;
  background: rgba(0, 0, 8, 0.78);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  border-bottom: 1px solid var(--c-border);
}

.cs-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--c-text-primary);
  text-decoration: none;
  line-height: 1;
}
.cs-wordmark:focus-visible {
  outline: 2px solid var(--c-golden);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

.cs-globe-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: var(--sp-2);
  border-radius: var(--r-md);
  color: var(--c-text-secondary);
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}
.cs-globe-link:hover {
  color: var(--c-golden);
  background: rgba(255, 176, 32, 0.08);
}
.cs-globe-link:focus-visible {
  outline: 2px solid var(--c-golden);
  outline-offset: 2px;
  color: var(--c-golden);
}

.cs-location-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  border-radius: 999px;
  color: var(--c-text-primary);
  font: 500 13px var(--font-sans);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.cs-location-pill[disabled] { opacity: 0.7; cursor: default; }
.cs-location-pill:focus-visible {
  outline: 2px solid var(--c-golden);
  outline-offset: 2px;
}
.cs-location-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-golden);
  box-shadow: 0 0 8px var(--c-golden-glow);
}
.cs-location-chevron { color: var(--c-text-secondary); }

/* ─── Main ──────────────────────────────────────────────────── */
.cs-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.cs-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 9vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--c-text-primary);
}

/* ─── Verdict ───────────────────────────────────────────────── */
.cs-verdict {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px 28px;
  margin-bottom: 32px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-card);
  min-height: 280px;
}

.cs-miniglobe {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 200ms ease, opacity 200ms ease;
  opacity: 0.85;
}
.cs-miniglobe:hover { transform: scale(1.06); opacity: 1; }
.cs-miniglobe:focus-visible {
  outline: 2px solid var(--c-golden);
  outline-offset: 3px;
  opacity: 1;
}
.cs-miniglobe canvas {
  width: 64px;
  height: 64px;
  display: block;
}
@media (min-width: 820px) {
  .cs-miniglobe { width: 80px; height: 80px; top: 18px; right: 18px; }
  .cs-miniglobe canvas { width: 80px; height: 80px; }
}

.cs-verdict-loading {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* ─── Spots ─────────────────────────────────────────────────── */
.cs-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 0 14px;
}

.cs-section-title {
  font: 600 17px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--c-text-primary);
}

.cs-section-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.cs-spots { margin-bottom: 32px; }

.cs-spot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-spot-card { list-style: none; }

.cs-spot-card--skeleton {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 88px;
  padding: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
}

.cs-spot-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* ─── Map (MapLibre canvas) ─────────────────────────────────── */
.cs-map { margin-bottom: 32px; }

.cs-map-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  min-height: 220px;
  background: linear-gradient(180deg, #0a0e1a, #06090f);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cs-map-canvas:focus-visible {
  outline: 2px solid var(--c-golden);
  outline-offset: 2px;
}

.cs-map-noscript {
  padding: 20px;
  margin: 0;
  font: 400 14px var(--font-sans);
  color: var(--c-text-secondary);
  text-align: center;
}

/* Pin de spot — div HTML porté par MapLibre */
.cs-pin {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--c-bg);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0,0,8,0.85), 0 4px 12px rgba(0,0,0,0.55);
  border: 1.5px solid rgba(255,255,255,0.45);
  transition: transform 160ms ease;
}
.cs-pin:hover,
.cs-pin:focus-visible {
  transform: scale(1.08);
  outline: none;
}
.cs-pin.is-good { background: #6fcf97; }
.cs-pin.is-mid  { background: #f0a890; }
.cs-pin.is-bad  { background: #c08070; }

.cs-pin-user {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-golden);
  box-shadow: 0 0 0 2px rgba(0,0,8,0.85), 0 0 12px rgba(255,176,32,0.65);
}

/* Popup MapLibre — restyle dark sobre */
.maplibregl-popup {
  max-width: 240px !important;
  font-family: var(--font-sans);
}
.maplibregl-popup-content {
  padding: 12px 14px 14px !important;
  background: rgba(14, 20, 36, 0.94) !important;
  color: var(--c-text-primary) !important;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md) !important;
  box-shadow: var(--elev-glass) !important;
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
}
.maplibregl-popup-tip { border-top-color: rgba(14, 20, 36, 0.94) !important; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: rgba(14, 20, 36, 0.94) !important; }
.maplibregl-popup-close-button {
  color: var(--c-text-muted) !important;
  font-size: 18px !important;
  padding: 2px 8px !important;
  background: none !important;
}
.maplibregl-popup-close-button:hover { color: var(--c-text-primary) !important; }

.cs-popup-name {
  display: block;
  font: 600 14px var(--font-sans);
  color: var(--c-text-primary);
  margin-bottom: 4px;
}
.cs-popup-meta {
  display: block;
  font: 400 12px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-secondary);
  margin-bottom: 10px;
}
.cs-popup-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px var(--font-sans);
  color: var(--c-golden);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.cs-popup-link:hover,
.cs-popup-link:focus-visible {
  border-bottom-color: var(--c-golden);
  outline: none;
}

/* Restyle MapLibre controls (zoom +/-, attribution) */
.maplibregl-ctrl-group {
  background: rgba(14, 20, 36, 0.85) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.40) !important;
}
.maplibregl-ctrl-group button {
  background: transparent !important;
  color: var(--c-text-primary) !important;
}
.maplibregl-ctrl-group button:hover { background: rgba(255,255,255,0.06) !important; }
.maplibregl-ctrl-group button span {
  filter: invert(1) brightness(0.95);
}
.maplibregl-ctrl-attrib {
  background: rgba(0,0,8,0.6) !important;
  color: var(--c-text-muted) !important;
}
.maplibregl-ctrl-attrib a { color: var(--c-text-secondary) !important; }

/* ─── Skeletons ─────────────────────────────────────────────── */
.cs-skeleton {
  margin: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: cs-shimmer 1600ms ease-in-out infinite;
}

.cs-skeleton--eyebrow     { height: 14px; width: 50%;  max-width: 200px; }
.cs-skeleton--display     { height: 32px; width: 70%;  max-width: 320px; margin-top: 6px; }
.cs-skeleton--number      { height: 96px; width: 60%;  max-width: 280px; margin-top: 8px; border-radius: var(--r-md); }
.cs-skeleton--verdict-text{ height: 18px; width: 60%;  max-width: 260px; }
.cs-skeleton--countdown   { height: 32px; width: 55%;  max-width: 240px; border-radius: 999px; }

.cs-skeleton--thumb { width: 64px; height: 64px; border-radius: 8px; }
.cs-skeleton--name  { height: 16px; width: 70%; }
.cs-skeleton--meta  { height: 13px; width: 50%; }
.cs-skeleton--score { width: 56px; height: 28px; border-radius: var(--r-sm); }

@keyframes cs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-skeleton { animation: none; background: rgba(255, 255, 255, 0.06); }
}

/* ─── Verdict — hydrated content ────────────────────────────── */
.cs-verdict-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-verdict-eyebrow {
  margin: 0;
  padding-right: 78px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--c-text-secondary);
  line-height: 1.3;
}

.cs-verdict-display {
  margin: 0;
  padding-right: 78px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 7.5vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-text-primary);
}
@media (min-width: 820px) {
  .cs-verdict-eyebrow, .cs-verdict-display { padding-right: 96px; }
}
.cs-verdict-display em {
  color: var(--c-golden);
  font-style: italic;
}

.cs-verdict-number {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(72px, 22vw, 112px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-primary);
}
.cs-verdict-number.is-good { color: #6fcf97; }
.cs-verdict-number.is-mid  { color: #f0a890; }
.cs-verdict-number.is-bad  { color: #c08070; }

.cs-verdict-total {
  font-size: 0.32em;
  color: var(--c-text-muted);
  margin-left: 4px;
  letter-spacing: 0;
}

.cs-verdict-text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: var(--c-text-secondary);
}

.cs-verdict-countdown {
  margin: 8px 0 0;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 8px 16px;
  background: var(--c-golden-dim);
  border: 1px solid rgba(255, 176, 32, 0.32);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--c-golden);
}

.cs-verdict-error {
  margin: 0;
  font: 400 14px var(--font-sans);
  color: var(--c-text-secondary);
  background: rgba(192, 128, 112, 0.10);
  border: 1px solid rgba(192, 128, 112, 0.32);
  border-radius: var(--r-md);
  padding: 14px 16px;
}

/* ─── Spots — hydrated cards ────────────────────────────────── */
.cs-spot-link {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px;
  min-height: 88px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
  color: var(--c-text-primary);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}
.cs-spot-link:hover,
.cs-spot-link:focus-visible {
  border-color: rgba(255, 176, 32, 0.32);
  outline: none;
  transform: translateY(-1px);
  box-shadow: var(--elev-card-hover);
}
.cs-spot-link:focus-visible {
  outline: 2px solid var(--c-golden);
  outline-offset: 2px;
}

.cs-spot-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  display: block;
}

.cs-spot-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cs-spot-name {
  font: 600 16px/1.3 var(--font-sans);
  color: var(--c-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-spot-meta {
  font: 400 13px/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-secondary);
}

.cs-spot-score {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  padding: 0 6px;
}
.cs-spot-score.is-good { color: #6fcf97; }
.cs-spot-score.is-mid  { color: #f0a890; }
.cs-spot-score.is-bad  { color: #c08070; }

.cs-spots-empty {
  margin: 0;
  padding: 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font: 400 14px/1.5 var(--font-sans);
  color: var(--c-text-secondary);
  text-align: center;
}

/* ─── City search dropdown ──────────────────────────────────── */
.cs-location { position: relative; }

.cs-search {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  background: rgba(14, 20, 36, 0.92);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-glass);
  padding: 12px;
  z-index: 20;
}

#cs-search-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: rgba(0, 0, 8, 0.55);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text-primary);
  font: 400 15px var(--font-sans);
}
#cs-search-input:focus-visible {
  outline: 2px solid var(--c-golden);
  outline-offset: 1px;
  border-color: var(--c-golden);
}
#cs-search-input::placeholder { color: var(--c-text-muted); }

.cs-search-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
}

.cs-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  min-height: 44px;
}
.cs-search-result:hover,
.cs-search-result:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.cs-search-result:focus-visible {
  outline: 2px solid var(--c-golden);
  outline-offset: -2px;
}

.cs-search-name {
  font: 500 14px var(--font-sans);
  color: var(--c-text-primary);
}
.cs-search-cc {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
}

.cs-search-empty {
  padding: 12px 10px;
  font: 400 13px var(--font-sans);
  color: var(--c-text-muted);
  text-align: center;
}

/* ─── Footer ────────────────────────────────────────────────── */
.cs-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--c-border);
  text-align: center;
}

.cs-colophon {
  margin: 0 0 8px;
  font: 400 13px var(--font-mono);
  color: var(--c-text-secondary);
}

.cs-colophon-meta {
  margin: 0;
  font: 500 11px/1.4 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cs-colophon-meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.cs-colophon-meta a:hover,
.cs-colophon-meta a:focus-visible {
  border-bottom-color: var(--c-golden);
  outline: none;
}

/* ─── Desktop ───────────────────────────────────────────────── */
@media (min-width: 820px) {
  .cs-header { padding: 14px 32px; }
  .cs-main { padding: 40px 32px 64px; }
  .cs-verdict { padding: 36px 32px 40px; min-height: 320px; }
  .cs-section-head { padding-bottom: 16px; }
}