/* Weather API — thème “sky” sombre, localisation prioritaire */
:root {
  --meteo-bg0: #0b1224;
  --meteo-bg1: #151d35;
  --meteo-card: rgba(255, 255, 255, 0.06);
  --meteo-border: rgba(255, 255, 255, 0.12);
  --meteo-accent: #38bdf8;
  --meteo-accent2: #818cf8;
  --meteo-text: #f1f5f9;
  --meteo-muted: #94a3b8;
}

/* Curseur personnalisé (charte météo — bleu ciel) */
*,
*::before,
*::after {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='30' viewBox='0 0 24 30'%3E%3Cpath fill='%2338bdf8' d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3C/svg%3E") 12 3, auto !important;
}

* {
  font-family: "Inter", "Poppins", system-ui, sans-serif;
}

a,
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
label[for],
select,
summary {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='30' viewBox='0 0 24 30'%3E%3Cpath fill='%2338bdf8' d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3C/svg%3E") 12 3, pointer !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%2338bdf8' d='M10 2C5.58 2 2 5.58 2 10s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z'/%3E%3Cpath fill='%2338bdf8' d='M10 6v4l3 2' stroke='%2338bdf8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 10 10, text !important;
}

body {
  background: radial-gradient(1200px 600px at 20% -10%, rgba(56, 189, 248, 0.18), transparent),
    radial-gradient(900px 500px at 100% 20%, rgba(129, 140, 248, 0.15), transparent),
    linear-gradient(165deg, var(--meteo-bg0), var(--meteo-bg1)) !important;
  min-height: 100vh;
  color: var(--meteo-text);
}

.meteo-strip {
  text-align: center;
  font-size: 0.8rem;
  padding: 0.55rem 1rem;
  background: rgba(56, 189, 248, 0.12);
  border-bottom: 1px solid var(--meteo-border);
  color: var(--meteo-muted);
}

.meteo-strip strong {
  color: var(--meteo-accent);
}

.meteo-hero {
  max-width: 720px;
  margin: 0 auto 0.5rem;
  padding: 1.25rem 1rem 0;
  text-align: center;
}

.meteo-hero h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.35rem;
}

.meteo-hero p {
  margin: 0;
  color: var(--meteo-muted);
  font-size: 0.95rem;
}

.container {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(14px);
  border: 1px solid var(--meteo-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

.card {
  background: var(--meteo-card) !important;
  border: 1px solid var(--meteo-border) !important;
  color: var(--meteo-text) !important;
  box-shadow: none !important;
}

.card-header {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.25), rgba(129, 140, 248, 0.2)) !important;
  border-bottom: 1px solid var(--meteo-border) !important;
  color: #fff !important;
}

.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-secondary,
.card-header.bg-danger,
.card-header.bg-dark {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(99, 102, 241, 0.35)) !important;
  color: #fff !important;
}

.nav-tabs {
  border-bottom-color: var(--meteo-border) !important;
}

.nav-tabs .nav-link {
  color: var(--meteo-muted) !important;
  border: none !important;
  border-radius: 10px 10px 0 0 !important;
}

.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--meteo-accent), var(--meteo-accent2)) !important;
  color: #0f172a !important;
  font-weight: 700;
}

.nav-tabs .nav-link:hover {
  color: var(--meteo-accent) !important;
}

.text-white-50 {
  color: rgba(241, 245, 249, 0.55) !important;
}

.text-muted {
  color: var(--meteo-muted) !important;
}

.form-control {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid var(--meteo-border) !important;
  color: var(--meteo-text) !important;
}

.form-control::placeholder {
  color: var(--meteo-muted);
}

.btn-primary {
  background: linear-gradient(135deg, var(--meteo-accent), var(--meteo-accent2)) !important;
  border: none !important;
  color: #0f172a !important;
  font-weight: 700;
}

.btn-outline-primary {
  border-color: var(--meteo-accent) !important;
  color: var(--meteo-accent) !important;
}

.btn-outline-primary:hover {
  background: var(--meteo-accent) !important;
  color: #0f172a !important;
}

.alert-info {
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: var(--meteo-text) !important;
}

.alert-warning {
  background: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
  color: var(--meteo-text) !important;
}

#hourly-forecast > div .text-white,
#7day-forecast > div .text-white {
  color: var(--meteo-text) !important;
}

.badge.bg-info {
  background: rgba(56, 189, 248, 0.35) !important;
}