:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#173550;background:#f3f7f9;font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 950px 430px at 80% -130px,#dbeefa 0,transparent 80%),#f3f7f9;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #f4a340;outline-offset:3px}a{color:inherit}.page-shell{width:min(1100px,calc(100% - 48px));margin:0 auto}.site-header{display:flex;align-items:center;justify-content:space-between;padding:30px 0 26px;border-bottom:1px solid #dfe9ee}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:850;font-size:26px;letter-spacing:-1.3px;color:#173b5c}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#173b5c;color:#ffcb6e;font-size:26px;line-height:1}.brand-accent{color:#ec8d46}.header-tagline{font-size:13px;color:#6e8294;display:flex;align-items:center;gap:9px}.live-dot{display:block;width:8px;height:8px;border-radius:100%;background:#36b9a2;box-shadow:0 0 0 4px #d6f5ed}.topbar{display:flex;gap:10px;margin:30px 0 17px}.search-wrap{position:relative;flex:1}.search-wrap input{height:54px;width:100%;border:1px solid #d9e5ed;border-radius:15px;background:#fff;box-shadow:0 3px 14px #163d5b0a;padding:0 44px 0 49px;color:#173b5c;font-size:15px;outline:none}.search-wrap input:focus{border-color:#5e9cc6;box-shadow:0 0 0 4px #b8dced75}.search-wrap input::placeholder{color:#8193a3}.search-icon{position:absolute;left:17px;top:16px;width:21px;height:21px;color:#7792a5;pointer-events:none}.search-loader{position:absolute;right:18px;top:19px;width:15px;height:15px;border:2px solid #d3e5ed;border-top-color:#397da5;border-radius:50%;display:none;animation:spin .7s linear infinite}.search-loader.on{display:block}@keyframes spin{to{transform:rotate(360deg)}}.location-button{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #d9e5ed;color:#245579;background:#fff;border-radius:15px;padding:0 19px;font-size:14px;font-weight:700;box-shadow:0 3px 14px #163d5b0a;white-space:nowrap}.location-button:hover{background:#eaf4fb}.location-button svg{width:20px;height:20px}.location-button:disabled,.refresh-btn:disabled{opacity:.55;cursor:wait}.city-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:#fff;border:1px solid #dfe9ef;box-shadow:0 16px 34px #18364d28;border-radius:15px;padding:6px;margin:0;list-style:none;max-height:320px;overflow-y:auto}.city-results[hidden],.notice[hidden]{display:none}.city-results li{margin:0}.city-results button{display:flex;text-align:left;align-items:center;gap:12px;width:100%;padding:12px 13px;background:transparent;border:0;border-radius:10px;color:#21445f}.city-results button:hover,.city-results button.active{background:#e8f3fa}.city-results .city-country{font-size:12px;color:#738a9b;display:block;margin-top:3px}.city-results .city-pin{color:#ee9954}.city-results .empty-result{padding:14px;color:#64798a;font-size:13px}.notice{background:#fff8e9;border:1px solid #e9d3a4;color:#775324;border-radius:12px;padding:12px 16px;font-size:14px;margin-bottom:14px}.notice.error{background:#fff0ee;border-color:#f2c6bf;color:#853b34}.favorites-line{display:flex;gap:14px;align-items:center;min-height:37px;margin-bottom:18px;flex-wrap:wrap}.favorites-label{color:#708798;font-size:13px;font-weight:750;white-space:nowrap}.favorite-chips{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.favorite-chip{border:1px solid #dbe7ee;border-radius:100px;background:#fff;padding:7px 13px;color:#45677e;font-size:12px;font-weight:700;transition:.15s}.favorite-chip:hover{border-color:#80b4d1;color:#16446c}.favorite-chip.selected{background:#e2f0fa;border-color:#aacddd;color:#17476c}.favorites-help{color:#9baeb9;font-size:12px;font-style:italic}.hero-card{position:relative;overflow:hidden;border-radius:26px;min-height:380px;padding:35px 40px 25px;background:linear-gradient(115deg,#173f65,#2a709d 75%,#408ab2);color:#fff;box-shadow:0 15px 40px #123e6326}.hero-card.night{background:linear-gradient(115deg,#14263f,#203f67 70%,#435b82)}.hero-decor{position:absolute;border-radius:50%;pointer-events:none}.hero-decor-1{width:410px;height:410px;right:-90px;top:-180px;background:#ffffff0c}.hero-decor-2{width:350px;height:350px;right:130px;bottom:-260px;background:#ffffff08}.hero-top,.weather-overview,.weather-metrics{position:relative;z-index:1}.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#c1dbec;margin:0 0 12px}.city-heading{display:flex;align-items:center;gap:13px}.city-heading h1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:0;font-weight:800;overflow-wrap:anywhere}.favorite-btn{background:#ffffff14;color:#fff;border:1px solid #ffffff35;width:34px;height:34px;border-radius:50%;font-size:25px;display:grid;place-items:center;line-height:1}.favorite-btn:hover{background:#ffffff35}.favorite-btn.saved{color:#ffce79}.hero-subtitle{color:#c0dae8;margin:8px 0 0;font-size:14px}.hero-date{font-size:13px;color:#cce2ef;text-align:right;padding-top:5px;white-space:nowrap}.weather-overview{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 20px}.weather-main{display:flex;align-items:center;gap:22px;min-width:0}.temperature{font-size:clamp(70px,10vw,112px);font-weight:250;line-height:1.2;letter-spacing:-8px;white-space:nowrap}.temperature span{font-size:.65em;vertical-align:top;letter-spacing:-7px}.condition{font-size:22px;font-weight:750;margin:0 0 8px}.feels,.temp-minmax{font-size:14px;color:#d0e6f1;margin:5px 0}.weather-visual{width:185px;height:170px;display:grid;place-items:center;flex-shrink:0;position:relative}.weather-halo{position:absolute;width:145px;height:145px;border-radius:50%;background:#fce9ba25;filter:blur(13px)}.weather-visual span{font-size:110px;line-height:1;filter:drop-shadow(0 13px 11px #0b2e4c50)}.weather-metrics{border-top:1px solid #ffffff31;padding-top:19px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.metric{display:grid;grid-template-columns:25px 1fr;gap:3px 10px;align-items:center}.metric-icon{font-size:20px;grid-row:span 2}.metric-text{font-size:11px;color:#c4dfee}.metric strong{font-size:17px;font-weight:700}.forecast-card{background:#fff;border:1px solid #e5edf1;border-radius:22px;box-shadow:0 7px 25px #244f6810;padding:27px 30px;margin-top:22px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:21px}.section-kicker{margin:0 0 5px;color:#e38c45;letter-spacing:1.6px;font-size:10px;font-weight:850}.section-heading h2{font-size:21px;margin:0;letter-spacing:-.5px;color:#1a4261}.section-hint{font-size:12px;color:#899fad;white-space:nowrap}.hourly-list{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-color:#bfd2de transparent;scrollbar-width:thin}.hour-tile{flex:0 0 88px;display:flex;flex-direction:column;align-items:center;gap:10px;border-radius:14px;padding:15px 7px;background:#f5f8fa;min-height:144px}.hour-tile.now{background:#e5f3fc;border:1px solid #b6dbee}.hour-time{font-size:12px;font-weight:800;color:#5a7c93}.hour-icon{font-size:28px;line-height:1.2}.hour-temp{color:#1b4769;font-size:19px;font-weight:800}.hour-rain{font-size:11px;color:#4888b6}.daily-list{display:flex;flex-direction:column}.day-row{display:grid;grid-template-columns:145px 34px 1fr 125px;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid #edf2f5}.day-row:last-child{border:0}.day-name{font-size:14px;font-weight:750;color:#274b67}.day-icon{font-size:22px}.day-details{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}.day-condition{font-size:13px;color:#7c91a1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.day-precip{font-size:12px;color:#4181b2;white-space:nowrap}.day-temps{display:flex;gap:12px;align-items:center;justify-content:end;font-size:15px}.day-temps strong{color:#1b4464}.day-temps span{color:#829ba9}.placeholder{color:#8297a4;font-size:14px}.refresh-line{display:flex;align-items:center;justify-content:space-between;padding:17px 5px;gap:12px;font-size:12px;color:#8ba0af}.refresh-btn{background:none;border:0;color:#2d668b;font-weight:750;padding:8px 3px}.refresh-btn:hover{text-decoration:underline}.skip-link{position:absolute;top:-100px;left:12px;background:#fff;color:#12385c;z-index:100;padding:8px;border-radius:6px}.skip-link:focus{top:12px}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:750px){.page-shell{width:min(100% - 28px,600px)}.site-header{padding:22px 0 20px}.brand{font-size:23px}.header-tagline{display:none}.topbar{margin-top:22px}.location-button{padding:0 15px}.location-button span{display:none}.hero-card{padding:26px 25px 22px;min-height:0}.hero-date{font-size:11px}.weather-main{gap:12px}.temperature{font-size:78px;letter-spacing:-6px}.condition{font-size:18px}.weather-visual{width:100px;height:118px}.weather-visual span{font-size:72px}.weather-halo{width:100px;height:100px}.weather-metrics{grid-template-columns:repeat(2,1fr);gap:19px 9px}.forecast-card{padding:24px 20px;margin-top:16px}.day-row{grid-template-columns:105px 27px 1fr 76px;gap:9px}.day-condition{display:none}.day-temps{gap:6px}.section-heading h2{font-size:19px}}
@media(max-width:420px){.city-heading h1{font-size:27px}.hero-date{display:none}.temperature{font-size:69px}.weather-visual{width:75px}.weather-visual span{font-size:62px}.weather-main{gap:5px}.condition{font-size:16px}.feels,.temp-minmax{font-size:12px}.day-row{grid-template-columns:87px 26px 1fr 74px}.day-name{font-size:13px}.day-temps{font-size:13px}.forecast-card{padding:23px 14px}.hour-tile{flex-basis:78px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}


/* Pied de page : identité, informations utiles et mentions lisibles */
.site-footer {
  margin: 27px 0 30px;
  border-radius: 23px;
  padding: 32px 34px 0;
  color: #d8e8f1;
  background: linear-gradient(110deg, #173650 0%, #204e72 100%);
  box-shadow: 0 12px 32px #123e6318;
  font-size: 13px;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.25fr;
  gap: 35px;
  padding-bottom: 28px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -.8px;
}
.footer-brand-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ffffff1c;
  color: #ffd184;
  font-size: 23px;
  line-height: 1;
}
.footer-accent { color: #ffb574; }
.site-footer p { margin: 10px 0 0; line-height: 1.65; }
.site-footer .footer-motto { color: #fff; font-weight: 750; margin-top: 13px; }
.footer-column h2 {
  margin: 4px 0 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1px;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer-links li { line-height: 1.5; }
.site-footer a {
  color: #ffd09a;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.site-footer a:hover { color: #fff; }
.site-footer a:focus-visible { outline-color: #ffd09a; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  padding: 19px 0 21px;
  border-top: 1px solid #ffffff30;
  font-size: 12px;
  color: #c6dbe8;
}
.footer-back-top { font-weight: 700; white-space: nowrap; }
.footer-warning { text-align: center; }
@media (max-width: 800px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-bottom { justify-content: flex-start; }
  .footer-warning { text-align: left; }
}
@media (max-width: 540px) {
  .site-footer { padding: 27px 23px 0; border-radius: 19px; margin-top: 22px; }
  .footer-main { grid-template-columns: 1fr; gap: 24px; }
  .footer-intro { grid-column: auto; }
  .footer-column h2 { margin-bottom: 9px; }
  .footer-links { gap: 8px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 9px; padding: 17px 0 21px; }
  .footer-warning { text-align: left; }
}