/* Halden Stories · carte de récits, atlas « carnet de terrain ».
   Cadre 1440 × 810 mis à l'échelle par app.js (--s) ; la carte et les récits débordent jusqu'aux bords de l'écran.
   Sur téléphone et tablette en portrait (.is-phone) : pas de mise à l'échelle des textes. */

@font-face { font-family: 'Source Sans 3'; src: url(/fonts/source-sans-3.woff2) format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/fonts/plex-mono-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/fonts/plex-mono-500.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/fonts/plex-mono-600.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #F6F3EA; --ink: #1C1A17; --ink-2: #3B3731; --terra: #C35933; --cream: #F3EBDA; --disc: #FCFAF4;
  --sans: 'Source Sans 3', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --s: 1; --H: 810px; --u: calc(var(--H) / 810);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.scene { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; }

/* ── Vue carte ───────────────────────────────────────────── */
.mapview { position: absolute; inset: 0; will-change: transform; }
.frame { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; transform-origin: 0 0; }
.frame--ui { pointer-events: none; }
.frame--ui > * { pointer-events: auto; }
.fills, .fill { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; }
.fill { opacity: 0; }
.fill canvas { position: absolute; display: block; }
.fill[data-zone="midwest"] { clip-path: url(#clip-midwest); }
.fill[data-zone="canada"] { clip-path: url(#clip-canada); }
.fill[data-zone="west"] { clip-path: url(#clip-west); }
.fill[data-zone="south"] { clip-path: url(#clip-south); }
.fill[data-zone="northeast"] { clip-path: url(#clip-northeast); }

.map { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; overflow: visible; }
.lakefill { fill: var(--paper); }
.ln { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ln.is-drawn { stroke-dasharray: none; }
.hit { fill: transparent; cursor: pointer; }
.dot { cursor: pointer; }
.dot__hit { fill: transparent; }
.dot__core, .dot__halo { fill: var(--terra); }
.dot__halo { opacity: .3; }
.ring { cursor: pointer; }
.ring__hit { fill: transparent; }
.ring__disc { fill: var(--disc); }
.ring__plus { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ring__text { font: 500 8.4px/1 var(--mono); fill: var(--ink); stroke: var(--disc); stroke-width: 2.4px; stroke-linejoin: round; paint-order: stroke; }

.lang { position: absolute; left: 60px; top: 38px; font: 500 10.2px/16px var(--mono); letter-spacing: .12em; color: var(--ink-2); display: flex; gap: 6px; }
.lang .on { color: var(--ink); }
.lang a { text-decoration: none; }
.lang a:hover { color: var(--terra); }
.lang .sep { opacity: .5; }

.intro { position: absolute; left: 60px; top: 219px; }
.eyebrow { margin: 0 0 20px; font: 500 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
h1 { margin: 0 0 26px; font: 700 54px/50px var(--sans); letter-spacing: -.022em; color: var(--ink); }
h1 em { font-style: normal; color: var(--terra); }
.lede { margin: 0; font: 400 13.2px/24px var(--mono); color: var(--ink-2); }

.coords { position: absolute; right: 60px; top: 38px; margin: 0; display: flex; flex-direction: column; align-items: flex-end; font: 400 10.2px/16px var(--mono); letter-spacing: .04em; color: var(--ink-2); }
.coords__zone { color: var(--ink); }

.zones { position: absolute; right: 60px; top: 443px; width: 300px; }
.zones__label { margin: 0 34px 0 0; text-align: right; font: 500 11px/14px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.zones__list { margin: 16px 34px 0 0; padding: 0; list-style: none; }
.zone { display: block; width: 100%; text-align: right; font: 400 25px/45px var(--mono); color: var(--ink); }
.zone.is-active { color: var(--terra); }
.ruler { position: absolute; right: 0; top: 28px; width: 14px; height: 230px; }
.ruler__ticks { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; border-right: 1px solid var(--ink);
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 7.6667px); opacity: .55; }
.ruler__marker { position: absolute; right: 0; top: 0; width: 14px; height: 2px; margin-top: -1px; background: var(--terra); }

.chips { display: none; }

/* ── Vue récit ───────────────────────────────────────────── */
.back { position: fixed; left: 0; top: 0; bottom: 0; width: calc(72px * var(--s)); z-index: 3; opacity: 0; pointer-events: none;
  display: flex; justify-content: center; align-items: flex-start; padding-top: calc(38px * var(--s));
  font: 500 calc(11px * var(--s))/1.4 var(--mono); letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.back:hover { color: var(--terra); }
.back:focus-visible { outline: none; text-decoration: underline 2px var(--terra); text-underline-offset: 5px; }   /* le bouton fait toute la hauteur : un cadre tracerait une ligne */
.is-phone .back:focus-visible { outline: 2px solid var(--terra); text-decoration: none; }
.is-story .back { pointer-events: auto; }

.story { position: fixed; top: 0; bottom: 0; right: 0; left: calc(72px * var(--s)); z-index: 2; overflow: hidden; background: var(--paper);
  transform: translateX(110%); visibility: hidden; touch-action: pan-y; }
.story.is-on { visibility: visible; }
.track { position: absolute; left: 0; top: 0; height: 100%; display: flex; will-change: transform; }
.st { display: flex; height: 100%; flex: none; }
.st__panel { position: relative; width: calc(var(--H) * .74); height: 100%; overflow: hidden; background: #d9d4c6; }
.st__panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st__card { position: relative; width: calc(var(--H) * .69); height: 100%; overflow: hidden; display: flex; flex-direction: column;
  padding: calc(var(--u) * 48); color: var(--paper); }
.st--midwest .st__card { background: #2F55D4; }
.st--canada .st__card { background: #23201C; }
.st--west .st__card { background: #C35933; }
.st--south .st__card { background: #1F4A35; }
.st--northeast .st__card { background: #D99A2B; color: var(--ink); }

.st__count { margin: 0; display: flex; align-items: center; gap: calc(var(--u) * 14); font: 500 calc(var(--u) * 12)/1 var(--mono); letter-spacing: .08em; }
.st__bar { position: relative; width: calc(var(--u) * 72); height: 1px; background: color-mix(in srgb, currentColor 35%, transparent); }
.st__fill { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; }
.st[data-i="0"] .st__fill { transform: scaleX(.2); }
.st[data-i="1"] .st__fill { transform: scaleX(.4); }
.st[data-i="2"] .st__fill { transform: scaleX(.6); }
.st[data-i="3"] .st__fill { transform: scaleX(.8); }
.st[data-i="4"] .st__fill { transform: scaleX(1); }
.st__photo { position: relative; margin-top: calc(var(--u) * 28); width: 100%; aspect-ratio: 3 / 2; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.st__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.st__text { position: relative; z-index: 1; margin-top: auto; max-width: calc(var(--u) * 330); }
.st__label { margin: 0 0 calc(var(--u) * 12); font: 500 calc(var(--u) * 11)/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.st__city { margin: 0 0 calc(var(--u) * 14); font: 600 calc(var(--u) * 42)/1.05 var(--mono); letter-spacing: -.02em; }
.st__body { margin: 0; font: 400 calc(var(--u) * 17)/1.45 var(--sans); }
.st__outline { position: absolute; right: calc(var(--u) * 22); bottom: calc(var(--u) * 150); width: calc(var(--u) * 250); height: calc(var(--u) * 200); opacity: .2; pointer-events: none; }
.st__outline use { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.st__badge { position: absolute; right: calc(var(--u) * 36); bottom: calc(var(--u) * 36); width: calc(var(--u) * 96); height: calc(var(--u) * 96); overflow: visible; }
.st__badge text { font: 500 7.6px/1 var(--mono); fill: currentColor; }
.st__badge-disc { fill: var(--disc); }
.st__badge-plus { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }

.cursor { position: fixed; left: 0; top: 0; z-index: 4; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: var(--cream);
  display: grid; place-items: center; pointer-events: none; opacity: 0; color: var(--ink); font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 6px 24px rgb(28 26 23 / .18); }
.has-cursor .story { cursor: none; }

.source { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

/* ── Téléphones et tablettes en portrait ─────────────────── */
.is-phone .frame--ui { position: absolute; inset: 0; width: auto; height: auto; transform: none !important; }
.is-phone .lang { left: auto; right: 20px; top: calc(18px + env(safe-area-inset-top)); z-index: 2; }
.is-phone .intro { left: 0; right: 0; top: 0; padding: calc(20px + env(safe-area-inset-top)) 20px 44px;
  background: linear-gradient(to bottom, var(--paper) 0, var(--paper) calc(100% - 52px), rgb(246 243 234 / 0) 100%); }
.is-phone .eyebrow { margin-bottom: 14px; }
.is-phone h1 { font-size: 40px; line-height: 38px; margin-bottom: 16px; }
.is-phone .lede { font-size: 12px; line-height: 20px; }
.is-phone .coords, .is-phone .zones { display: none; }
.is-phone .chips { display: flex; gap: 8px; position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); padding: 0 16px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.is-phone .chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 22px; background: var(--paper); font: 500 13px/42px var(--mono); color: var(--ink); }
.chip.is-active { background: var(--terra); border-color: var(--terra); color: var(--paper); }

.is-phone .back { top: calc(12px + env(safe-area-inset-top)); left: 12px; bottom: auto; width: auto; height: 44px; padding: 0 16px; align-items: center;
  border-radius: 22px; background: var(--paper); font-size: 12px; box-shadow: 0 2px 12px rgb(28 26 23 / .16); }
.is-phone .story { left: 0; }
.is-phone .st { flex-direction: column; width: var(--W); }
.is-phone .st__panel { width: 100%; height: 42%; flex: none; }
.is-phone .st__card { width: 100%; height: auto; flex: 1 1 0; min-height: 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
.is-phone .st__count { font-size: 11px; gap: 12px; }
.is-phone .st__bar { width: 56px; }
.is-phone .st__photo { margin-top: 14px; }
.is-phone .st__text { margin-top: 14px; max-width: calc(100% - 76px); }
.is-phone .st__label { font-size: 10px; margin-bottom: 6px; }
.is-phone .st__city { font-size: 32px; margin-bottom: 6px; }
.is-phone .st__body { font-size: 15px; line-height: 1.4; }
.is-phone .st__outline { right: 12px; bottom: 80px; width: 150px; height: 120px; }
.is-phone .st__badge { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 68px; height: 68px; }