/* Cartographic Grid design test — visual overrides only. */
/* Jetons repointés vers la palette du site. Cette feuille impose ses valeurs
   en !important ; changer le bloc ici suffit donc à propager la palette à
   toutes ses règles, sans en réécrire aucune. */
:root {
  --atlas-paper: var(--panel);
  --atlas-ink: var(--ink);
  --atlas-ice: var(--acc);
  --atlas-muted: var(--mut);
  --atlas-line: var(--line);
  --atlas-border: var(--line);
  --atlas-accent: var(--acc);
  --atlas-radius-sm: 2px;
  --atlas-radius-md: 2px;
  --accent: var(--acc);
}

html, body {
  color: var(--atlas-ink) !important;
  background: var(--bg) !important;
  font-family: "Archivo", system-ui, -apple-system, sans-serif !important;
}

button, select, input, textarea,
.maplibregl-ctrl-group,
.maplibregl-ctrl-group button {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.site-header {
  background: rgba(245, 245, 240, 0.97) !important;
  border-bottom: 2px solid var(--atlas-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-header::before {
  height: 6px !important;
  background: var(--atlas-ice) !important;
}

.site-header .brand-line {
  color: var(--atlas-ink) !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
  letter-spacing: .14em !important;
}

.site-header .nav a,
.site-header .nav .navdd-btn {
  color: var(--atlas-ink) !important;
  border-bottom-width: 2px !important;
}

.site-header .nav a:hover,
.site-header .nav a[aria-current="page"],
.site-header .nav .navdd:hover .navdd-btn {
  color: var(--atlas-ice) !important;
  border-bottom-color: var(--atlas-ice) !important;
}

.site-header .nav .navdd-menu {
  border: 2px solid var(--atlas-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--atlas-paper) !important;
  padding: 0 !important;
}

.site-header .nav .navdd-menu a {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--atlas-ink) !important;
}

#side,
#stats,
#depCurves,
#compare,
#rTabs,
.advbox,
#infoPop,
#setPop {
  background: var(--atlas-paper) !important;
  border-color: var(--atlas-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#side { border-right-width: 1px !important; }
#stats, #depCurves, #compare, #rTabs { border-left-width: 1px !important; }

.head,
#depCurves .dch,
.advhead,
.atlas-result-header {
  background: var(--atlas-ink) !important;
  color: var(--atlas-paper) !important;
  border-radius: 0 !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

#side > .head {
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  border-bottom: 3px solid var(--atlas-ice) !important;
}

#side > .head .bk,
#side > .head .hi,
#side > .head .x {
  color: var(--atlas-ink) !important;
}

#side > .head .atlas-icon-button {
  color: var(--atlas-ink) !important;
  background: transparent !important;
  border-color: var(--atlas-ink) !important;
}

#side > .head .atlas-icon-button:hover {
  color: #fff !important;
  background: var(--atlas-ice) !important;
  border-color: var(--atlas-ice) !important;
}

#side .atlas-core-controls,
#side .atlas-seasonal-controls,
#side .atlas-advanced-body,
.sec,
.dcc,
.scard {
  background: var(--atlas-paper) !important;
}

.sec,
#side .atlas-core-controls .sec,
.atlas-advanced-body > .sec {
  border-bottom: 1px solid var(--atlas-ink) !important;
  padding: 13px 14px !important;
}

.sec h3,
#side .atlas-core-controls .sec > h3,
.atlas-advanced-body > .sec > h3,
.atlas-section-label {
  color: var(--atlas-ink) !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

select,
input[type="text"],
input[type="number"],
#glSearch,
.seg button,
.seg2 .sb,
.reg button,
.yctrl .yb,
.favbtn,
.advbtn,
.advbtn2,
.sbtn,
.cmpsel button,
.atlas-icon-button {
  color: var(--atlas-ink) !important;
  background: var(--atlas-paper) !important;
  border: 1px solid var(--atlas-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.seg button:hover,
.seg2 .sb:hover,
.reg button:hover,
.yctrl .yb:hover,
.favbtn:hover,
.advbtn:hover,
.advbtn2:hover,
.sbtn:hover,
.cmpsel button:hover {
  color: var(--atlas-paper) !important;
  background: var(--atlas-ink) !important;
}

.seg button.on,
.seg2 .sb.on,
.reg button.on,
.yctrl .yb.on,
.sbtn.primary,
#rTabs button.on,
.atlas-icon-button[aria-pressed="true"] {
  color: #fff !important;
  background: var(--atlas-ice) !important;
  border-color: var(--atlas-ice) !important;
}

#rTabs button {
  border-radius: 0 !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
  text-transform: uppercase !important;
}

.atlas-mobile-summary {
  background: var(--atlas-ice) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.leg,
.yctrl,
.atlas-results-summary,
.dcstats,
.cmphead {
  border-color: var(--atlas-ink) !important;
}

#busy,
#reopen,
#statReopen,
.yctrl .play {
  background: var(--atlas-ice) !important;
  color: #fff !important;
  border: 1px solid var(--atlas-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.maplibregl-ctrl-group {
  border: 2px solid var(--atlas-ink) !important;
}

.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--atlas-ink) !important;
}

@media (max-width: 780px) {
  #side,
  body.rpanel #stats,
  body.rpanel #depCurves,
  body.rpanel #compare {
    border-radius: 0 !important;
    border-top: 1px solid var(--atlas-ink) !important;
    box-shadow: none !important;
  }

  .atlas-sheet-handle {
    border-radius: 0 !important;
    background: var(--atlas-ink) !important;
  }
}

/* Cartographic Index refinement */
:root {
  --atlas-result-width: min(360px, 38vw);
}

#side {
  overflow-x: hidden !important;
}

#side *,
#stats *,
#depCurves *,
#compare * {
  max-width: 100%;
}

#side > .head {
  min-height: 64px !important;
  padding: 24px 12px 9px 16px !important;
  border-left: 3px solid var(--atlas-ice) !important;
  border-bottom: 1px solid var(--atlas-ink) !important;
  align-items: flex-end !important;
}

#side > .head::before {
  content: "01 / Controls";
  position: absolute;
  top: 7px;
  left: 16px;
  color: var(--atlas-ice);
  font: 500 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

#side > .head > span:first-child {
  color: var(--atlas-ink) !important;
  font-size: 11px !important;
}

#side > .head .atlas-icon-button {
  width: 27px !important;
  height: 27px !important;
  padding: 0 !important;
}

#stats.atlas-results .shead,
#stats .shead,
#depCurves .dch,
#compare .dch {
  min-height: 58px !important;
  padding: 23px 12px 8px 16px !important;
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  border-left: 3px solid var(--atlas-ice) !important;
  border-bottom: 1px solid var(--atlas-ink) !important;
  box-shadow: none !important;
  position: sticky;
}

#stats .shead::before,
#depCurves .dch::before,
#compare .dch::before {
  position: absolute;
  top: 7px;
  left: 16px;
  color: var(--atlas-ice);
  font: 500 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

#stats .shead::before { content: "03 / Glacier detail"; }
#depCurves .dch::before { content: "03 / Regional curves"; }
#compare .dch::before { content: "03 / Comparison"; }

#stats .shead .x,
#depCurves .dch .hx,
#compare .dch .hx {
  color: var(--atlas-ink) !important;
}

#rTabs,
#stats,
#depCurves,
#compare,
body.rpanel #stats,
body.rpanel #depCurves,
body.rpanel #compare {
  width: var(--atlas-result-width) !important;
}

body.rpanel #map {
  right: var(--atlas-result-width) !important;
}

#rTabs button {
  color: var(--atlas-muted) !important;
  background: var(--atlas-paper) !important;
  border-bottom: 2px solid transparent !important;
}

#rTabs button.on {
  color: var(--atlas-ink) !important;
  background: var(--atlas-paper) !important;
  border-bottom-color: var(--atlas-ice) !important;
}

.reg,
.seg,
.seg2,
.cmpsel,
.atlas-result-buttons {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.reg button,
.seg button,
.seg2 .sb,
.cmpsel button,
select,
input {
  min-width: 0 !important;
}

#glResults,
.atlas-advanced-body,
.atlas-core-controls,
.atlas-seasonal-controls {
  overflow-x: hidden !important;
}

@media (max-width: 780px) {
  :root { --atlas-result-width: 100vw; }

  #rTabs,
  #stats,
  #depCurves,
  #compare,
  body.rpanel #stats,
  body.rpanel #depCurves,
  body.rpanel #compare {
    width: 100% !important;
  }

  body.rpanel #map { right: 0 !important; }
}

/* v4 — blueprint labels and an inspect surface that can breathe */
#side > .head,
#stats.atlas-results .shead,
#stats .shead,
#depCurves .dch,
#compare .dch {
  background: var(--panel-2) !important;
  border-top: 4px solid var(--atlas-ice) !important;
  border-left: 0 !important;
  color: var(--atlas-ink) !important;
}

#side > .head {
  min-height: 62px !important;
  padding-top: 24px !important;
}

#stats .shead,
#depCurves .dch,
#compare .dch {
  min-height: 62px !important;
  padding-top: 25px !important;
}

#side > .head::before,
#stats .shead::before,
#depCurves .dch::before,
#compare .dch::before {
  color: var(--acc) !important;
  font-weight: 700 !important;
}

#side > .head .atlas-icon-button,
#stats .shead .atlas-icon-button,
#depCurves .dch .atlas-icon-button,
#compare .dch .atlas-icon-button {
  background: var(--atlas-paper) !important;
  border: 1px solid rgba(5,5,5,.65) !important;
}

#resultResize {
  position: absolute;
  z-index: 9;
  top: 34px;
  right: calc(var(--atlas-result-width) - 5px);
  bottom: var(--bar);
  width: 10px;
  display: none;
  cursor: col-resize;
  touch-action: none;
}

#resultResize::after {
  content: "";
  position: absolute;
  inset: 0 4px;
  background: rgba(22,119,166,.42);
  transition: inset .15s ease, background .15s ease;
}

body.rpanel #resultResize { display: block; }
#resultResize:hover::after,
body.resizing-results #resultResize::after { inset-inline: 2px; background: var(--atlas-ice); }
body.resizing-results { cursor: col-resize !important; user-select: none !important; }

#stExpand { font-size: 15px !important; }

#stats.atlas-results { container-type: inline-size; }
#stats.atlas-results .stgrp { margin-top: 7px !important; }
#stats.atlas-results .stgrp h5 { margin-bottom: 0 !important; font-size: 9.5px !important; line-height: 1.25 !important; }
#stats.atlas-results .stgrp .cv { height: 100px !important; }
#stats.atlas-results .stgrp.stgrp-primary .cv { height: 120px !important; }
@container (min-width: 520px) {
  #stats.atlas-results .stgrp .cv { height: 150px !important; }
  #stats.atlas-results .stgrp.stgrp-primary .cv { height: 170px !important; }
}
#depCurves .dcwrap { height: clamp(300px, 36vh, 470px) !important; }
#depCurves .dcwrap2 { height: clamp(150px, 20vh, 240px) !important; }

@media (max-width: 900px) {
  #resultResize { display: none !important; }
  #rTabs {
    position: absolute !important;
    inset: auto 0 min(48dvh, calc(100% - 44px)) !important;
    width: 100% !important;
    height: 40px !important;
    border-left: 0 !important;
    z-index: 32 !important;
  }
  body.rpanel #stats,
  body.rpanel #depCurves,
  body.rpanel #compare,
  #stats.open {
    position: absolute !important;
    inset: auto 0 0 !important;
    width: 100% !important;
    height: min(48dvh, calc(100% - 44px)) !important;
    max-height: min(48dvh, calc(100% - 44px)) !important;
    border: 0 !important;
    border-top: 1px solid var(--atlas-ink) !important;
    overflow-y: auto !important;
    z-index: 31 !important;
  }
  body.rpanel #map { right: 0 !important; }
  #stats.atlas-results .stgrp .cv { height: 100px !important; }
  #stats.atlas-results .stgrp.stgrp-primary .cv { height: 120px !important; }
}

@media (max-width: 600px) {
  #rTabs { bottom: min(56dvh, calc(100% - 44px)) !important; }
  body.rpanel #stats,
  body.rpanel #depCurves,
  body.rpanel #compare,
  #stats.open {
    height: min(56dvh, calc(100% - 44px)) !important;
    max-height: min(56dvh, calc(100% - 44px)) !important;
  }
}

/* v5 — scientific controls: indexed regions, calibrated rails, geometry tools */
.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }

#regChips.reg { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0!important;border-top:1px solid rgba(5,5,5,.35); }
#regChips .reg { position:relative;display:grid;grid-template-columns:37px minmax(0,1fr) 3px;align-items:center;gap:6px;min-height:31px;padding:5px 6px!important;border:0!important;border-bottom:1px solid rgba(5,5,5,.35)!important;text-align:left;background:transparent!important;color:var(--atlas-ink)!important; }
#regChips .reg:nth-child(odd):not(.region-all) { border-left:1px solid rgba(5,5,5,.35)!important; }
#regChips .region-all { grid-column:1/-1;grid-template-columns:1fr 3px;text-transform:uppercase;letter-spacing:.08em; }
#regChips .rcode { font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
#regChips .rname { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:500; }
#regChips .rmark { align-self:stretch;background:transparent; }
#regChips .reg.on .rmark { background:var(--atlas-ice); }
#regChips .reg.on { color:var(--atlas-ink)!important;background:rgba(22,119,166,.09)!important; }
#regChips .reg:hover { color:var(--atlas-ink)!important;background:rgba(22,119,166,.15)!important; }

.yctrl { position:relative;gap:5px!important;margin-top:8px!important; }
.year-axis { display:flex;justify-content:space-between;margin:2px 57px 0 34px;color:var(--atlas-muted);font:500 8px ui-monospace,SFMono-Regular,Menlo,monospace; }
.yctrl input[type="range"],.oprow input[type="range"] { --range-progress:50%;appearance:none;-webkit-appearance:none;height:14px!important;background:linear-gradient(to right,var(--atlas-ice) 0 var(--range-progress),rgba(5,5,5,.18) var(--range-progress) 100%) center/100% 2px no-repeat!important;outline:none; }
.yctrl input[type="range"] { background:linear-gradient(to right,var(--feu) 0 var(--range-progress),rgba(5,5,5,.18) var(--range-progress) 100%) center/100% 2px no-repeat!important; }
.yctrl input[type="range"]::-webkit-slider-thumb,.oprow input[type="range"]::-webkit-slider-thumb { appearance:none;-webkit-appearance:none;width:5px;height:17px;border:0;border-radius:0;background:var(--atlas-ice);cursor:ew-resize; }
.yctrl input[type="range"]::-webkit-slider-thumb { width:7px;height:21px;background:var(--feu); }
.yctrl input[type="range"]::-moz-range-thumb,.oprow input[type="range"]::-moz-range-thumb { width:5px;height:17px;border:0;border-radius:0;background:var(--atlas-ice);cursor:ew-resize; }
.yctrl input[type="range"]::-moz-range-thumb { width:7px;height:21px;background:var(--feu); }

#scaleSeg { position:relative;display:grid!important;grid-template-columns:1fr 1fr;padding:3px;border:1px solid var(--atlas-ink);background:rgba(5,5,5,.08);overflow:hidden; }
#scaleSeg::before { content:"";position:absolute;inset:3px 50% 3px 3px;background:var(--atlas-ice);transition:transform .18s ease; }
#scaleSeg:has(button[data-scale="auto"].on)::before { transform:translateX(calc(100% - 3px)); }
#scaleSeg button { position:relative;z-index:1;border:0!important;background:transparent!important;color:var(--atlas-ink)!important; }
#scaleSeg button.on { color:#fff!important; }

.selection-tools { display:grid!important;grid-template-columns:repeat(3,44px);gap:7px!important; }
.selection-tools .sb { position:relative;width:44px;height:36px;padding:5px!important;flex:none!important; }
.selection-tools svg { width:27px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke; }
.selection-tools #selClear { margin-left:8px;border-color:rgba(5,5,5,.45)!important; }
.selection-tools .sb:hover::after { content:attr(title);position:absolute;z-index:20;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);padding:4px 6px;background:var(--atlas-ink);color:#fff;white-space:nowrap;font:500 9px ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none; }

/* v6 — remove binary boxes: editorial modes and instrument rails */
#modeSeg {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid rgba(5,5,5,.32);
}
#modeSeg button {
  position: relative;
  min-height: 35px;
  padding: 8px 9px 8px 38px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(5,5,5,.32) !important;
  background: transparent !important;
  color: var(--atlas-muted) !important;
  text-align: left;
  font-weight: 600;
}
#modeSeg button::before {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--atlas-muted);
  font: 600 9px ui-monospace,SFMono-Regular,Menlo,monospace;
}
#modeSeg button[data-mode="impact"]::before { content: "01"; }
#modeSeg button[data-mode="depot"]::before { content: "02"; }
#modeSeg button::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: transparent;
}
#modeSeg button.on { color: var(--atlas-ink) !important;background: transparent !important; }
#modeSeg button.on::after { background: var(--atlas-ice); }
#modeSeg button:hover { color: var(--atlas-ink) !important;background: rgba(22,119,166,.08) !important; }

#winSeg,
#scaleSeg {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 !important;
  padding: 0 0 13px !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible;
}
#winSeg::before,
#scaleSeg::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  height: 1px;
  background: rgba(5,5,5,.32);
  inset-block-start: auto;
  transform: none;
}
#winSeg::after,
#scaleSeg::after {
  content: "";
  position: absolute;
  left: calc(25% - 3px);
  bottom: 2px;
  width: 6px;
  height: 11px;
  background: var(--atlas-ice);
  transition: left .18s ease;
}
#winSeg:has(button[data-win="jja"].on)::after,
#scaleSeg:has(button[data-scale="auto"].on)::after { left: calc(75% - 3px); }
#scaleSeg:has(button[data-scale="auto"].on)::before { transform: none; }
#winSeg button,
#scaleSeg button {
  position: relative;
  z-index: 1;
  min-height: 28px;
  padding: 4px 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--atlas-muted) !important;
  font-weight: 600;
}
#winSeg button.on,
#scaleSeg button.on { color: var(--atlas-ink) !important;background: transparent !important; }
#winSeg button:hover,
#scaleSeg button:hover { color: var(--atlas-ice) !important;background: transparent !important; }

/* v12 — one compact scientific impact summary instead of three cards */
#stats.atlas-results .atlas-impact-summary {
  margin: 8px 0 10px;
  border-top: 1px solid rgba(5,5,5,.42);
  border-bottom: 1px solid rgba(5,5,5,.42);
}
#stats.atlas-results .atlas-impact-summary-title {
  padding: 6px 8px 5px;
  color: var(--atlas-muted);
  border-bottom: 1px solid rgba(5,5,5,.22);
  font: 700 9px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#stats.atlas-results .atlas-impact-summary .atlas-primary-metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  margin: 0;
}
#stats.atlas-results .atlas-impact-summary .scard {
  min-width: 0;
  padding: 7px 8px 8px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}
#stats.atlas-results .atlas-impact-summary .scard + .scard { border-left: 1px solid rgba(5,5,5,.25); }
#stats.atlas-results .atlas-impact-summary .scard .k { font-size: 8px;line-height: 1.15;white-space: nowrap; }
#stats.atlas-results .atlas-impact-summary .scard .v { margin-top: 3px;font-size: 14px;line-height: 1.1;white-space: nowrap; }