/* climat.serenodata.com : design system Sereno officiel (artefact « Sereno Design System »), tokens repris tels quels.
   Accueil, pages villes et méthode. */
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Variable.woff2?v=4fb4f08f9e1076b6") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-Italic.woff2?v=1a951c4ef5223184") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root {
  color-scheme: light;
  --petale: #DEC0C6; --dune: #FBB15A; --canopee: #0E482A; --argile: #704522; --lin: #F4EDE3; --nuit: #30292C;
  --neutral-0: #FFFFFF; --neutral-50: #FAF7F2; --neutral-100: #EDE5DA; --neutral-200: #D9CFC2; --neutral-400: #A69C96; --neutral-600: #625A5C; --neutral-800: #423A3D;
  --bg: var(--lin); --fg: var(--nuit); --fg-muted: var(--neutral-600); --border: var(--neutral-200); --action: var(--canopee); --action-hover: #0B3A22;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --m-sea: #E2DACE; --m-land: #FAF7F2; --m-dep: rgba(48,41,44,.10); --m-border: rgba(48,41,44,.28); --m-coast: rgba(48,41,44,.5);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font: 400 16px/24px var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--action); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--action-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--canopee); outline-offset: 2px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 767px) { .container { padding: 0 16px; } }
section.band { padding: 80px 0; }
@media (max-width: 767px) { section.band { padding: 56px 0; } }

/* navigation */
.nav { height: 72px; border-bottom: 1px solid var(--neutral-100); }
.nav .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg); }
.brand img { height: 22px; width: auto; display: block; }
.brand span { font-size: 14px; color: var(--fg-muted); border-left: 1px solid var(--border); padding-left: 12px; }
.nav nav { display: flex; gap: 24px; font-size: 14px; }
.nav nav a { color: var(--fg); text-decoration: none; }
.nav nav a:hover { text-decoration: underline; }
@media (max-width: 640px) { .nav nav a:not(:last-child) { display: none; } }

/* typographie */
.eyebrow { font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--fg-muted); margin: 0; }
.display { font-weight: 300; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.h2 { font-weight: 500; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -0.015em; margin: 0; text-wrap: balance; max-width: 22ch; }
.editorial { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 32px; margin: 0; text-wrap: pretty; max-width: 46ch; }
.editorial .num { font-family: var(--sans); font-style: normal; font-size: .92em; }
.small { font-size: 14px; line-height: 20px; margin: 0; }
.caption { font-size: 12px; line-height: 16px; color: var(--fg-muted); margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.big { font-weight: 300; font-size: clamp(48px, 6vw, 88px); line-height: .95; letter-spacing: -0.04em; white-space: nowrap; }
.stack { display: grid; gap: 16px; align-content: start; }

/* contrôles : boutons 4 px, 44 px */
.btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 4px; background: var(--action); color: var(--lin); font: 500 15px/1 var(--sans); text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { background: var(--action-hover); color: var(--lin); text-decoration: none; }
.btn.light { background: var(--lin); color: var(--canopee); }
.btn.ghost { background: transparent; color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.field { display: flex; gap: 8px; max-width: 440px; }
.field input, .select { height: 44px; border-radius: 4px; border: 1px solid var(--border); background: var(--neutral-0); padding: 0 14px; font: 400 16px var(--sans); color: var(--fg); }
.field input { flex: 1; min-width: 0; }
.msg { font-size: 14px; color: var(--fg-muted); min-height: 20px; margin: 0; }

/* 1 · la une */
.hero { padding: 56px 0 24px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; }
.fact { border-top: 1px solid var(--nuit); padding-top: 16px; display: grid; gap: 8px; }
.strip { padding: 8px 0 48px; }
.strip svg { display: block; width: 100%; height: auto; overflow: visible; }
.strip text { font-family: var(--sans); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 40px; } }

/* 2 · carte */
.mapsec { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; padding: 48px 0 80px; border-top: 1px solid var(--neutral-100); align-items: start; }
.map-box { position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--m-land); height: 520px; }
.map { width: 100%; height: 100%; }
.pin { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); }
.pin .v { font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; padding: 6px 8px; border-radius: 4px; border: 1px solid transparent; }
.pin.prov .v { border: 1px dashed var(--nuit); }
.pin .n { font: 500 12px/1.1 var(--sans); color: var(--nuit); text-shadow: 0 0 3px var(--m-land), 0 0 3px var(--m-land), 0 0 2px var(--m-land); white-space: nowrap; }
.pin .r { font: 500 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--argile); text-shadow: 0 0 3px var(--m-land), 0 0 3px var(--m-land); }
.pin:hover .v, .pin:focus-visible .v { outline: 2px solid var(--canopee); outline-offset: 2px; }
.map-legend { position: absolute; left: 12px; bottom: 12px; background: var(--neutral-0); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; font-size: 12px; line-height: 16px; display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; max-width: calc(100% - 64px); }
.map-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.maplibregl-ctrl-group { border-radius: 4px !important; box-shadow: none !important; border: 1px solid var(--border); }
.maplibregl-popup-content { background: var(--neutral-0); color: var(--nuit); border-radius: 8px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(48,41,44,.16); font-family: var(--sans); }
.maplibregl-popup-close-button { font-size: 18px; padding: 2px 8px; color: var(--fg-muted); }
.pop .t { font-size: 18px; font-weight: 500; }
.pop .x { font-weight: 300; font-size: 32px; letter-spacing: -0.03em; margin: 6px 0 2px; }
.pop .k { font-size: 13px; color: var(--fg-muted); }
.pop .btn { margin-top: 12px; height: 36px; font-size: 14px; padding: 0 14px; }
@media (max-width: 900px) { .mapsec { grid-template-columns: 1fr; } .map-box { height: 440px; } }

/* 3 · l'été qui s'allonge */
.ete { background: var(--neutral-50); border-top: 1px solid var(--neutral-100); border-bottom: 1px solid var(--neutral-100); }
.ete-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; align-items: center; }
.ete-figs { display: flex; gap: 32px; flex-wrap: wrap; }
.ete-figs > div { border-top: 1px solid var(--nuit); padding-top: 12px; display: grid; gap: 6px; min-width: 140px; }
.ete-figs .big { font-size: clamp(44px, 5vw, 72px); }
.curve svg { display: block; width: 100%; height: auto; }
.curve text { font-family: var(--sans); }
.curve-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--fg-muted); margin-top: 8px; }
.curve-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; margin-right: 6px; vertical-align: middle; }
@media (max-width: 900px) { .ete-grid { grid-template-columns: 1fr; } }

/* 4 · votre seuil */
.outil-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: 32px; }
.ctl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 32px; }
.tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: var(--neutral-0); }
.tabs button { font: 500 14px/1 var(--sans); color: var(--neutral-800); background: transparent; border: 0; border-right: 1px solid var(--border); padding: 0 14px; height: 44px; cursor: pointer; }
.tabs button:last-child { border-right: 0; }
.tabs button[aria-pressed="true"] { background: var(--nuit); color: var(--lin); }
.result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.result > div { border-top: 1px solid var(--nuit); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.result .now .big { color: var(--argile); }
.say { font-size: 18px; line-height: 28px; max-width: 64ch; margin: 28px 0 0; }
.warn { margin: 16px 0 0; max-width: 72ch; font-size: 14px; line-height: 20px; background: #FBEBD6; color: #8A4B00; border-radius: 4px; padding: 10px 14px; }
.bridge { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; background: var(--neutral-0); border: 1px solid var(--border); border-radius: 8px; padding: 24px; }
@media (max-width: 900px) { .outil-head, .result, .bridge { grid-template-columns: 1fr; } .result { gap: 20px; } }

/* 5 · appel à l'action, pied de page */
.cta { background: var(--canopee); color: var(--lin); }
.cta .h2 { color: var(--lin); }
.cta p { max-width: 56ch; margin: 0; }
footer { background: var(--nuit); color: var(--lin); padding: 48px 0; }
footer .container { display: grid; gap: 20px; }
footer img { height: 26px; width: auto; }
footer p { margin: 0; font-size: 13px; line-height: 20px; color: #D9CFC2; max-width: 100ch; }
footer a { color: var(--lin); }

[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- pages villes ---------- */
:root {
  /* graphiques de la page ville : journées en Argile, nuits en Canopée, chaud / froid dans la palette */
  --surface-1: var(--neutral-0); --text-primary: var(--nuit); --text-secondary: var(--neutral-800); --text-muted: var(--neutral-600);
  --grid: var(--neutral-100); --axis: var(--neutral-400); --empty: var(--neutral-100);
  --tx: #704522; --tn: #0E482A; --warm: #E99A3E; --cool: #6F9A80;
  --c-hot2: #704522; --c-hot1: #FBB15A; --c-mid: #EDE5DA; --c-cold1: #A9C3B2; --c-cold2: #0E482A;
  --ink-on-strong: #F4EDE3; --ink-on-soft: #30292C;
  --clim-1950: #A69C96; --clim-1975: #0E482A; --clim-now: #704522; --clim-2050: #E99A3E;
}
.provisoire { margin: 0; max-width: 64ch; font-size: 14px; line-height: 20px; background: #FBEBD6; color: #8A4B00; border-radius: 4px; padding: 10px 14px; }
.lead-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lead-facts > div { border-top: 1px solid var(--nuit); padding-top: 12px; display: grid; gap: 6px; align-content: start; }
.lead-facts .big { font-size: clamp(44px, 5vw, 72px); }
.lead-facts .nuits .big { color: var(--canopee); }
.sub { max-width: 64ch; margin: 0; color: var(--neutral-800); }
.band.alt { background: var(--neutral-50); border-top: 1px solid var(--neutral-100); border-bottom: 1px solid var(--neutral-100); }
.band.deep { border-top: 1px solid var(--neutral-100); }
.band-head { display: grid; gap: 16px; margin-bottom: 32px; }

/* contrôles des graphiques : même dessin que les onglets de l'accueil */
select, input[type="number"] { height: 44px; border-radius: 4px; border: 1px solid var(--border); background: var(--neutral-0); padding: 0 12px; font: 400 16px var(--sans); color: var(--fg); }
input[type="number"] { width: 5.5em; font-variant-numeric: tabular-nums; }
.chips, .seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: var(--neutral-0); }
.chip, .seg button { font: 500 14px/1 var(--sans); color: var(--neutral-800); background: transparent; border: 0; border-right: 1px solid var(--border); padding: 0 14px; height: 44px; cursor: pointer; }
.chip:last-child, .seg button:last-child { border-right: 0; }
.chip[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--nuit); color: var(--lin); }
.seg button { height: 36px; padding: 0 12px; font-size: 13px; }
.controls { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-bottom: 16px; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 10px 0; }
.controls .ctl, .ctl.inline { margin: 0; gap: 8px; }
.ctl-label { color: var(--fg-muted); font-size: 13px; }
.yr-nav { font: 400 18px/1 var(--sans); color: var(--fg); background: var(--neutral-0); border: 1px solid var(--border); border-radius: 4px; width: 44px; height: 44px; cursor: pointer; }
.yr-nav:disabled { opacity: .35; cursor: default; }
.check { display: inline-flex; gap: 8px; align-items: center; color: var(--neutral-800); cursor: pointer; font-size: 14px; }
@media (max-width: 767px) { .controls { position: static; } .lead-facts { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* résultats de l'outil des seuils, une colonne par climat */
.thr-grid { display: grid; gap: 20px; margin-top: 24px; }
.clim-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.clim { border-top: 3px solid var(--c); padding-top: 12px; display: grid; gap: 4px; align-content: start; }
.clim .k { font-size: 13px; color: var(--fg-muted); }
.clim .v { font-weight: 300; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.clim .s { font-size: 13px; color: var(--neutral-800); }
@media (max-width: 767px) { .clim-row { grid-template-columns: 1fr 1fr; } }
.thr-say { font-size: 18px; line-height: 28px; max-width: 64ch; margin: 8px 0 0; }
.thr-say b { font-weight: 500; }
.thr-link { margin: 0; font-size: 15px; color: var(--neutral-800); max-width: 72ch; }
.thr-caveat { margin: 0; max-width: 72ch; font-size: 14px; line-height: 20px; background: #FBEBD6; color: #8A4B00; border-radius: 4px; padding: 10px 14px; }

/* graphiques repris des pages de François */
.card { background: var(--neutral-0); border: 1px solid var(--border); border-radius: 8px; padding: 16px 16px 8px; position: relative; }
.card h3 { font-size: 16px; font-weight: 500; margin: 0 0 2px 4px; }
.card .note { color: var(--fg-muted); font-size: 13px; margin: 0 0 6px 4px; }
.card svg { display: block; width: 100%; height: auto; overflow: visible; }
.card svg text { font-family: var(--sans); }
.section { margin-bottom: 16px; }
.section > h3 { font-size: 16px; font-weight: 500; margin: 32px 0 12px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 8px 0 24px; }
.tile { border-top: 1px solid var(--nuit); padding-top: 10px; }
.tile .k { color: var(--fg-muted); font-size: 13px; }
.tile .v { font-weight: 300; font-size: 32px; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .s { color: var(--neutral-800); font-size: 13px; }
@media (max-width: 767px) { .pair { grid-template-columns: 1fr; } .tiles { grid-template-columns: 1fr 1fr; } }
.legend { display: flex; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 6px 4px; color: var(--neutral-800); font-size: 13px; }
.legend .sw { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
.legend label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.legend label .sw2 { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px; margin: 8px 4px 4px; font-size: 13px; }
.classes div { display: flex; align-items: center; gap: 8px; color: var(--neutral-800); }
.classes .box { width: 14px; height: 14px; border-radius: 2px; flex: none; border: 1px solid var(--border); }
.classes b { color: var(--fg); font-variant-numeric: tabular-nums; margin-left: 2px; font-weight: 500; }
.classes .help-cell { gap: 6px; color: var(--fg-muted); }
.help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--neutral-400); color: var(--fg-muted); font-size: 10px; cursor: help; flex: none; }
.help:hover::after, .help:focus::after { content: attr(data-tip); position: absolute; bottom: 22px; right: -120px; z-index: 5; white-space: pre; text-align: left; background: var(--neutral-0); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.6; box-shadow: 0 8px 24px rgba(48,41,44,.16); }
.tooltip { position: absolute; pointer-events: none; background: var(--neutral-0); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; box-shadow: 0 8px 24px rgba(48,41,44,.16); min-width: 180px; display: none; z-index: 4; }
.tooltip .d { font-weight: 500; margin-bottom: 4px; }
.tooltip table { border-collapse: collapse; width: 100%; }
.tooltip td { padding: 1px 0; color: var(--neutral-800); }
.tooltip td.v { text-align: right; color: var(--fg); font-variant-numeric: tabular-nums; padding-left: 12px; }
.foot { color: var(--fg-muted); font-size: 13px; margin-top: 16px; max-width: 95ch; }

/* autres villes */
.villes-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.villes-list a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--neutral-0); color: var(--fg); text-decoration: none; font-size: 14px; }
.villes-list a:hover { border-color: var(--canopee); color: var(--canopee); }
.villes-list a[aria-current="page"] { background: var(--nuit); border-color: var(--nuit); color: var(--lin); }

/* ---------- méthode ---------- */
.article { max-width: 68ch; padding: 56px 0 80px; }
.article h2 { font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; margin: 48px 0 12px; }
.article p, .article li { font-size: 17px; line-height: 28px; color: var(--neutral-800); }
.article strong { color: var(--fg); font-weight: 500; }
.article .editorial { margin: 24px 0 8px; }