@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("fonts/fraunces/fraunces-latin-300-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/fraunces/fraunces-latin-700-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/manrope/manrope-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/manrope/manrope-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/manrope/manrope-latin-700-normal.woff2") format("woff2");
}

:root{
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sky-1:#eaf2fb;
  --sky-2:#dcebf9;
  --ink:#182338;
  --ink-soft:#44526a;
  --line:rgba(24,35,56,.16);
  --amber:#dc8a3c;
  --amber-text:#9a5208;
  --ic-sun:#ffc43d; --ic-sun-s:#d98200;
  --ic-moon:#dfe5fa; --ic-moon-s:#4f5fa8;
  --ic-cloud:#eef3fa; --ic-cloud-s:#5d6e8a;
  --ic-rain:#1f78b4; --ic-snow:#2f8fd0;
  --amber-soft:#f3d9b8;
  --cyan:#23799a;
  --cyan-soft:#cfe7ee;
  --card:#ffffff;
  --card-alt:#f3f7fb;
  --alert-bg:#fbe9df;
  --alert-line:#d9773b;
  --shadow:0 1px 0 rgba(24,35,56,.05);
  --radius:22px;
  color-scheme: light;
}
html.dark{
  --sky-1:#000000;
  --sky-2:#000000;
  --ink:#f5f7fb;
  --ink-soft:#b6bfd0;
  --line:rgba(245,247,251,.2);
  --amber:#ffb04a;
  --amber-text:#ffb04a;
  --amber-soft:#2a1f0c;
  --cyan:#6fd0f0;
  --cyan-soft:#10252d;
  --card:#0e0f13;
  --card-alt:#000000;
  --alert-bg:#1f1608;
  --alert-line:#f0a050;
  --shadow:0 0 0 1px rgba(245,247,251,.16);
  --ic-sun:#ffc43d; --ic-sun-s:#ffd978;
  --ic-moon:#dfe6fb; --ic-moon-s:#f2f5ff;
  --ic-cloud:#2b303b; --ic-cloud-s:#c3cbdb;
  --ic-rain:#5cc3f2; --ic-snow:#a6deff;
  color-scheme: dark;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg,var(--sky-1),var(--sky-2) 320px, var(--card-alt) 320px);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s ease,color .4s ease;
}
.wrap{max-width:640px;margin:0 auto;padding:0 20px 60px;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0 6px;
}
.place{
  display:flex;align-items:baseline;gap:8px;cursor:pointer;background:none;border:none;color:inherit;
  font-family:inherit;padding:0;
}
.place-name{font-size:17px;font-weight:700;letter-spacing:.01em;}
.place-chevron{opacity:.5;font-size:13px;transition:transform .2s;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink);flex-shrink:0;
}
.icon-btn svg{width:17px;height:17px;}
.topbar-actions{display:flex;gap:8px;}

.updated{font-size:13px;color:var(--ink-soft);margin:0 0 18px;}

.hero{padding:6px 0 8px;position:relative;}
.hero-icon{position:absolute;top:8px;right:0;width:72px;height:72px;}
.hero-desc{padding-right:84px;font-size:16px;color:var(--ink-soft);margin:0 0 2px;}
.hero-temp{
  font-family:var(--font-display);font-weight:300;font-size:112px;line-height:1;
  letter-spacing:-.02em;margin:6px 0 0;display:flex;align-items:flex-start;
}
.hero-temp sup{font-size:40px;font-weight:300;margin-top:10px;}
.hero-feels{font-size:15px;color:var(--ink-soft);margin:6px 0 20px;}
.hero-range{display:flex;gap:22px;flex-wrap:wrap;font-size:15px;color:var(--ink-soft);margin-bottom:2px;}
.hero-range b{color:var(--ink);font-weight:700;}

.alert-banner{
  margin:18px 0;padding:14px 16px;border-radius:16px;background:var(--alert-bg);
  border-left:4px solid var(--alert-line);font-size:14.5px;line-height:1.5;
}
.alert-banner strong{display:block;font-size:14px;margin-bottom:3px;}
.alert-banner + .alert-banner{margin-top:-10px;}

section{margin-top:32px;}
.section-title{
  font-size:14px;font-weight:700;color:var(--ink-soft);
  margin:0 0 12px;letter-spacing:.01em;
}

.hourly-scroll{
  display:flex;gap:2px;overflow-x:auto;padding-bottom:6px;margin:0 -20px;padding-left:20px;padding-right:20px;
  scrollbar-width:none;
}
.hourly-scroll::-webkit-scrollbar{display:none;}
.hour-card{
  flex:0 0 70px;text-align:center;padding:14px 0 12px;border-radius:16px;border:1px solid transparent;
}
.hour-card.now{background:var(--card);border-color:var(--line);}
.hour-time{font-size:13px;color:var(--ink-soft);margin-bottom:10px;}
.hour-icon{width:32px;height:32px;margin:0 auto 10px;}
.hour-temp{font-size:16px;font-weight:700;}
.hour-rain{font-size:12.5px;font-weight:600;color:var(--cyan);margin-top:4px;height:14px;}

.day-row{
  display:grid;grid-template-columns:84px 32px auto 104px;align-items:center;gap:10px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.day-row:last-child{border-bottom:none;}
.day-name{font-size:15px;font-weight:600;}
.day-sub{font-size:13px;color:var(--ink-soft);margin-top:1px;}
.day-icon{width:30px;height:30px;justify-self:center;}
.day-rain{font-size:13.5px;font-weight:600;color:var(--cyan);justify-self:end;min-width:34px;text-align:right;}
.day-range{display:flex;align-items:center;gap:6px;font-size:14.5px;justify-self:end;min-width:0;}
.day-range .lo{color:var(--ink-soft);width:24px;text-align:right;flex-shrink:0;}
.day-range .hi{font-weight:700;width:24px;text-align:right;flex-shrink:0;}
.bar{width:32px;height:4px;border-radius:2px;background:var(--line);position:relative;overflow:hidden;flex-shrink:0;}
.bar i{position:absolute;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--amber));}

.grid-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
}
.stat{background:var(--card);padding:16px 18px;}
.stat-label{font-size:13px;color:var(--ink-soft);margin:0 0 8px;}
.stat-value{font-size:21px;font-weight:700;font-family:var(--font-display);}
.stat-value small{font-size:13px;font-weight:400;color:var(--ink-soft);margin-left:2px;font-family:var(--font-body);}

.summary{
  font-size:16px;line-height:1.55;color:var(--ink);background:var(--card);
  border-radius:var(--radius);padding:18px 20px;border:1px solid var(--line);
}

.hero-sun{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);
}
.sun-item{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--ink);}
.sun-ico{width:26px;height:26px;flex-shrink:0;color:var(--ic-sun-s);}
.moon-item{font-weight:600;font-size:14.5px;color:var(--ink-soft);}
.moon-ico{width:20px;height:20px;color:inherit;}

footer{margin-top:44px;text-align:center;font-size:12.5px;color:var(--ink-soft);}
footer a{color:inherit;}

/* Panneau (recherche / réglages) */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(10,14,24,.45);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:40;
}
.sheet-backdrop.open{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;
  background:var(--card);border-radius:24px 24px 0 0;padding:20px 20px 28px;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  z-index:41;max-height:82vh;overflow-y:auto;border-top:1px solid var(--line);
}
.sheet.open{transform:translateY(0);}
.sheet-handle{width:36px;height:4px;background:var(--line);border-radius:3px;margin:0 auto 16px;}
.sheet h2{font-size:16px;margin:0 0 14px;font-weight:700;}
.search-row{display:flex;gap:8px;margin-bottom:14px;}
.search-row input{
  flex:1;padding:11px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--card-alt);color:var(--ink);font-family:inherit;font-size:14px;outline:none;
}
.search-row input:focus{border-color:var(--cyan);}
.search-results div, .fav-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 4px;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;
}
.search-results div:last-child,.fav-row:last-child{border-bottom:none;}
.search-sub{font-size:13px;color:var(--ink-soft);}
.fav-row.active{color:var(--amber-text);font-weight:700;}
.fav-remove{color:var(--ink-soft);font-size:13px;background:none;border:none;cursor:pointer;padding:4px 8px;}

.settings-group{margin-bottom:20px;}
.settings-label{font-size:13px;color:var(--ink-soft);margin:0 0 8px;}
.segmented{display:flex;background:var(--card-alt);border-radius:12px;padding:3px;gap:3px;}
.segmented button{
  flex:1;border:none;background:none;padding:9px 0;border-radius:9px;font-size:13.5px;
  font-family:inherit;font-weight:600;color:var(--ink-soft);cursor:pointer;
}
.segmented button.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
.segmented button:focus-visible,.icon-btn:focus-visible,.place:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

.state-msg{padding:60px 20px;text-align:center;color:var(--ink-soft);font-size:14px;line-height:1.6;}
.state-msg button{
  margin-top:14px;padding:10px 18px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;
}
.hidden{display:none !important;}
@media (prefers-reduced-motion: reduce){*{transition:none !important;}}

/* Icônes météo */
.i-sun,.i-bolt{fill:var(--ic-sun);stroke:var(--ic-sun-s);}
.i-ray{stroke:var(--ic-sun-s);fill:none;}
.i-moon{fill:var(--ic-moon);stroke:var(--ic-moon-s);}
.i-cloud{fill:var(--ic-cloud);stroke:var(--ic-cloud-s);}
.i-rain{stroke:var(--ic-rain);fill:none;}
.i-snow{stroke:var(--ic-snow);fill:none;}
.i-fog{stroke:var(--ic-cloud-s);fill:none;}

.no-click{cursor:default !important;}
.sheet-label-gap{margin-top:18px;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Courbe des températures + cartes horaires */
.hourly-scroll{display:block;}
.hourly-cards{display:flex;gap:2px;width:max-content;}
.hourly-wrap{position:relative;}
.scroll-btn{
  display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;padding:0;
  align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.scroll-btn svg{width:20px;height:20px;}
.scroll-btn.prev{left:2px;} .scroll-btn.next{right:2px;}
.scroll-btn:hover{border-color:var(--cyan);}
.scroll-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){
  .scroll-btn{display:flex;}
  .hourly-wrap.at-start .scroll-btn.prev,.hourly-wrap.at-end .scroll-btn.next{display:none;}
}

/* Vent, pluie à court terme */
.wind-arrow{width:16px;height:16px;vertical-align:-3px;margin-left:4px;color:var(--cyan);}
.rain-now{
  display:flex;align-items:center;gap:10px;margin:14px 0;padding:12px 16px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);font-size:14.5px;font-weight:600;line-height:1.4;
}
.rain-now svg{width:20px;height:20px;flex-shrink:0;color:var(--cyan);}
.rain-now.dry svg{color:var(--ink-soft);}

/* Jours cliquables */
.day{border-bottom:1px solid var(--line);}
.day:last-child{border-bottom:none;}
.day .day-row{
  width:100%;background:none;border:0;border-bottom:none;color:inherit;font:inherit;
  text-align:left;cursor:pointer;
}
.day-row:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:8px;}
.day-row .day-name,.day-row .day-sub{display:block;}
.day-row[aria-expanded="true"] .day-name{color:var(--cyan);}
.day-detail{padding:2px 0 16px;}
.day-detail[hidden]{display:none;}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0;padding:0;}
.facts div{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;
  padding:9px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;
}
.facts dt{color:var(--ink-soft);}
.facts dd{margin:0;font-weight:700;text-align:right;}
.section-hint{font-weight:400;font-size:12.5px;margin-left:8px;opacity:.9;}

/* Détails compacts (3 colonnes) */
.grid-stats{grid-template-columns:repeat(3,1fr);}
.stat{padding:12px 12px 11px;}
.stat-label{font-size:12.5px;margin:0 0 5px;}
.stat-value{font-size:17px;}
.stat-value small{font-size:12px;}
.stat-sub{font-size:12px;color:var(--ink-soft);margin:3px 0 0;line-height:1.25;}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px;}
.lv0{background:#2f9e5a;} .lv1{background:#8bc34a;} .lv2{background:#e6b800;}
.lv3{background:#f08a24;} .lv4{background:#e5484d;} .lv5{background:#9b4fd1;}
html.dark .lv0{background:#4cd98a;} html.dark .lv1{background:#b4e35a;} html.dark .lv2{background:#ffd84a;}
html.dark .lv3{background:#ffa04a;} html.dark .lv4{background:#ff6b70;} html.dark .lv5{background:#c48bff;}
@media (max-width:340px){ .grid-stats{grid-template-columns:repeat(2,1fr);} }

/* Chargement : soleil endormi */
.sleep-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 0 40px;color:var(--ink-soft);font-size:14.5px;text-align:center;}
.sleep-sun{width:132px;height:132px;overflow:visible;}
.sleep-body{transform-origin:60px 60px;animation:breathe 4s ease-in-out infinite;}
.sleep-face{fill:none;stroke:#5c3300;stroke-width:2.6;}
.zz{fill:var(--ink);font-family:var(--font-display);font-weight:700;animation:zfloat 3s ease-in-out infinite;}
.zz2{animation-delay:1.2s;}
@keyframes breathe{50%{transform:scale(1.06);}}
@keyframes zfloat{0%{opacity:0;transform:translate(0,6px);}40%{opacity:1;}100%{opacity:0;transform:translate(6px,-8px);}}
@media (prefers-reduced-motion: reduce){.sleep-body,.zz{animation:none !important;}}
@media (max-width:340px){ .facts{grid-template-columns:1fr;} }
@media (min-width:720px){ .scroll-btn.prev{left:-22px;} .scroll-btn.next{right:-22px;} }