/* Thème "site_meteo" — même mécanique de variables CSS que le site surf
   (surfcurve.cloud), palette adaptée "ciel/soleil" plutôt que "océan nocturne". */
:root{
  --ink:      #0B1A2A;   /* fond général, ciel nocturne profond */
  --deep:     #10263C;   /* dégradé haut des cartes */
  --deep-2:   #163350;   /* dégradé bas des cartes / inputs */
  --foam:     #F2F7FB;   /* texte principal, presque blanc */
  --foam-dim: #9BB2C6;   /* texte secondaire, labels */
  --sun:      #F0B94E;   /* accent chaud — soleil, lever/coucher, alertes douces */
  --sky:      #4FA6D8;   /* accent principal — liens, focus, barres, pluie */
  --line:     rgba(242,247,251,0.14);  /* bordures discrètes */
  --danger:   #E0684F;   /* bannière d'erreur */
  --rain-light:    rgba(79,166,216,0.55);  /* intensité pluie légère */
  --rain-moderate: #4FA6D8;                /* intensité pluie modérée (= --sky) */
  --rain-heavy:    #E0684F;                /* intensité pluie forte */
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--ink);
  color:var(--foam);
  font-family:'Manrope',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body{
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(79,166,216,0.22), transparent 60%),
    var(--ink);
}
.screen{
  max-width:480px;
  margin:0 auto;
  padding:20px 18px calc(28px + env(safe-area-inset-bottom));
  min-height:100vh;
}
a{ color:var(--sky); text-decoration:none; }

.mono{
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
}

header.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
header.top .back{
  font-size:14px;
  color:var(--foam-dim);
}
header.top h1{
  font-size:20px;
  font-weight:800;
  margin:0;
  flex:1;
}
.eyebrow{
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--foam-dim);
  margin:0 0 4px;
}

.card{
  background:linear-gradient(160deg, var(--deep), var(--deep-2));
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}

.section-title{
  font-size:13px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--foam-dim);
  margin:22px 0 10px;
}

.error-banner{
  display:none;
  margin-top:16px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(224,104,79,0.14);
  border:1px solid var(--danger);
  color:var(--danger);
  font-size:14px;
}
.error-banner.show{ display:block; }

footer{
  margin-top:28px;
  text-align:center;
  font-size:12px;
  color:var(--foam-dim);
}

.icon{ display:inline-flex; align-items:center; justify-content:center; }
.icon svg{ display:block; }

/* ---------- index.html ---------- */
.location-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.location-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  cursor:pointer;
  transition:border-color .15s ease;
}
.location-card:hover{ border-color:var(--sky); }
.location-card .name{ font-weight:700; font-size:16px; }
.location-card .coords{ font-size:12px; color:var(--foam-dim); }
.location-card .badge{
  font-size:11px;
  color:var(--sun);
  border:1px solid rgba(240,185,78,0.4);
  border-radius:999px;
  padding:2px 8px;
}
.add-location-btn{
  display:block;
  text-align:center;
  margin-top:16px;
  padding:14px;
  border-radius:14px;
  border:1px dashed var(--line);
  color:var(--sky);
  font-weight:700;
}

/* ---------- day.html ---------- */
.place-card{ display:flex; align-items:center; gap:14px; }
.place-card .temp-now{ font-size:44px; font-weight:800; line-height:1; }
.place-card .info{ flex:1; }
.place-card .name{ font-size:18px; font-weight:700; margin:0 0 2px; }
.place-card .desc{ color:var(--foam-dim); font-size:14px; }
.place-card .minmax{ font-size:13px; color:var(--foam-dim); margin-top:4px; }
.place-card .icon svg{ width:56px; height:56px; }

.day-extra{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
  font-size:12px;
  color:var(--foam-dim);
}
.day-extra .wind-chip,
.day-extra .precip-chip{ display:flex; align-items:center; gap:4px; }
.day-extra .icon svg{ display:block; }

.sun-row{
  display:flex;
  justify-content:space-between;
  margin-top:14px;
  padding:10px 4px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.sun-row .sun-item{ display:flex; align-items:center; gap:6px; color:var(--foam-dim); }
.sun-row .sun-item .icon svg{ width:18px; height:18px; }
.sun-row .sun-item .val{ color:var(--foam); font-weight:600; }

.hour-scroll{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 2px 10px;
  margin:0 -2px;
  scroll-snap-type:x proximity;
}
.hour-scroll::-webkit-scrollbar{ height:4px; }
.hour-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.hour-card{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 4px 10px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
}
.hour-card.now{ border-color:var(--sky); background:rgba(79,166,216,0.12); }
.hour-card .hr{ font-size:12px; color:var(--foam-dim); }
.hour-card .icon svg{ width:28px; height:28px; }
.hour-card .t{ font-size:15px; font-weight:700; }
.hour-card .rain-bar{
  width:100%;
  height:4px;
  border-radius:3px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
  margin-top:2px;
}
.hour-card .rain-bar > span{
  display:block;
  height:100%;
  background:var(--sky);
}

.hour-card .wind-mini{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:10px;
  color:var(--foam-dim);
  line-height:1;
}
.hour-card .wind-mini .icon svg{ width:12px; height:12px; }

/* Indicateur d'intensité de pluie — distinct de .rain-bar (nébulosité) :
   visible uniquement quand precipitationCategory !== "none" (décision spec 9.3). */
.hour-card .precip-mini{
  display:flex;
  align-items:center;
  gap:2px;
  font-size:9px;
  margin-top:2px;
  line-height:1;
  color:var(--foam-dim);
}
.hour-card .precip-mini .icon svg{ width:10px; height:10px; }

.day-list{ display:flex; flex-direction:column; gap:8px; }
.day-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px;
  cursor:pointer;
  border-left:3px solid transparent;
}
.day-row.active{ border-left-color:var(--sky); background:rgba(79,166,216,0.08); }
.day-row-main{ display:flex; align-items:center; gap:12px; }
.day-row .icon svg{ width:30px; height:30px; }
.day-row .date{ width:64px; font-size:13px; color:var(--foam-dim); }
.day-row .desc{ flex:1; font-size:14px; }
.day-row .minmax{ font-size:14px; font-weight:700; }
.day-row .minmax .min{ color:var(--foam-dim); font-weight:500; margin-right:6px; }
.day-row-extra{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding-left:76px;
  font-size:11px;
  color:var(--foam-dim);
}
.day-row-extra .wind-chip,
.day-row-extra .precip-chip{ display:flex; align-items:center; gap:4px; }
.day-row-extra .icon svg{ width:12px; height:12px; }

/* ---------- add-location.html ---------- */
form{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
label{ font-size:13px; color:var(--foam-dim); }
input[type="text"], input[type="number"], input[type="search"]{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--deep-2);
  color:var(--foam);
  font-family:'Manrope',sans-serif;
  font-size:15px;
}
input:focus{ outline:none; border-color:var(--sky); }
.coords-row{ display:flex; gap:10px; }
.coords-row > div{ flex:1; display:flex; flex-direction:column; gap:6px; }
button, .btn{
  padding:13px;
  border-radius:12px;
  border:none;
  background:var(--sky);
  color:var(--ink);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
}
button.secondary{ background:transparent; border:1px solid var(--line); color:var(--foam); }
.search-results{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.result-card{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:12px 14px;
  cursor:pointer;
}
.result-card .name{ font-weight:700; }
.result-card .sub{ font-size:13px; color:var(--foam-dim); }
.fallback-note{ font-size:13px; color:var(--foam-dim); margin-top:6px; }
.hidden{ display:none !important; }