/* Contrôles raffinés : filets gris fins, coins légèrement arrondis, libellés
   en casse normale. La police mono est réservée aux chiffres (codes de
   région, années, valeurs). Cette feuille se charge en dernier ; le préfixe
   « body » lui donne la priorité sur les !important de
   atlas-cartographic-test.css sans avoir à réécrire celle-ci. Aucune
   couleur de données n'est touchée : rampes et classes restent celles de
   l'article. */

:root{
  --r-panel:#ffffff;
  --r-panel-2:#f7f9fa;
  --r-ink:#0e1417;
  --r-mut:#61707a;
  --r-line:#d5dde1;
  --r-line-2:#eaeef0;
  --r-acc:#1b4965;
  --r-tint:#e8eff3;
  --r-tint-line:#b9ccd8;
  --r-sans:"Archivo",system-ui,-apple-system,sans-serif;
  --r-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r-ombre:0 1px 2px rgba(14,20,23,.08),0 0 0 1px rgba(14,20,23,.04);
  --r-ombre-flottante:0 8px 28px rgba(14,20,23,.12),0 0 0 1px rgba(14,20,23,.05);
}

/* ---------- en-têtes de panneaux ---------- */
body #side > .head,
body #stats .shead,
body #stats.atlas-results .shead,
body #depCurves .dch,
body #compare .dch,
body .advhead{
  min-height:0 !important;
  padding:14px 14px 12px 18px !important;
  background:var(--r-panel) !important;
  color:var(--r-ink) !important;
  border:0 !important;
  border-bottom:1px solid var(--r-line-2) !important;
  align-items:center !important;
  font-family:var(--r-sans) !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
}
body #side > .head::before,
body #stats .shead::before,
body #depCurves .dch::before,
body #compare .dch::before{content:none !important;display:none !important}
body #side > .head > span:first-child{font-size:14px !important;color:var(--r-ink) !important}
body #side > .head .bk{margin-right:6px;padding:2px 5px;border-radius:6px !important;color:var(--r-mut) !important}

body .atlas-icon-button,
body #side > .head .atlas-icon-button,
body #stats .shead .atlas-icon-button,
body #depCurves .dch .atlas-icon-button,
body #compare .dch .atlas-icon-button{
  width:28px !important;
  height:28px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:var(--r-mut) !important;
  box-shadow:none !important;
}
body .atlas-icon-button:hover,
body #side > .head .atlas-icon-button:hover{background:var(--r-panel-2) !important;color:var(--r-ink) !important}
body .atlas-icon-button[aria-pressed="true"]{background:var(--r-tint) !important;color:var(--r-acc) !important}

/* ---------- panneaux et sections ---------- */
body #side,
body #stats,
body #depCurves,
body #compare,
body #rTabs{border-color:var(--r-line) !important}

body .sec,
body #side .atlas-core-controls .sec,
body .atlas-advanced-body > .sec{
  padding:15px 18px 17px !important;
  border-bottom:1px solid var(--r-line-2) !important;
}
body .sec h3,
body #side .atlas-core-controls .sec > h3,
body .atlas-advanced-body > .sec > h3,
body .atlas-section-label{
  margin:0 0 10px !important;
  color:var(--r-mut) !important;
  font-family:var(--r-sans) !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
body .sec > h3::before{content:none !important}
body .muted{font-family:var(--r-sans) !important;font-size:11.5px;color:var(--r-mut)}

/* ---------- régions : pastilles ---------- */
body #regChips.reg{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  border:0 !important;
}
body #regChips .reg{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:6px !important;
  min-height:0 !important;
  padding:4px 10px !important;
  border:1px solid var(--r-line) !important;
  border-radius:999px !important;
  background:var(--r-panel) !important;
  color:var(--r-ink) !important;
  font-family:var(--r-sans) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
body #regChips .reg:nth-child(odd):not(.region-all){border-left:1px solid var(--r-line) !important}
body #regChips .region-all{color:var(--r-mut) !important;font-size:12px !important}
body #regChips .rcode{font:400 10.5px var(--r-mono) !important;color:var(--r-mut)}
body #regChips .rname{font-size:12px !important;font-weight:400 !important;overflow:visible !important;white-space:nowrap}
body #regChips .rmark{display:none !important}
body #regChips .reg:hover{background:var(--r-panel-2) !important;color:var(--r-ink) !important}
body #regChips .reg.on{background:var(--r-tint) !important;border-color:var(--r-tint-line) !important;color:var(--r-acc) !important}
body #regChips .reg.on .rcode{color:var(--r-acc)}

/* ---------- indicateur : liste à puces rondes ---------- */
body #modeSeg{
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  border:0 !important;
  background:none !important;
  padding:0 !important;
}
body #modeSeg button{
  position:relative !important;
  min-height:0 !important;
  padding:7px 10px 7px 34px !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:var(--r-mut) !important;
  font-family:var(--r-sans) !important;
  font-size:13px !important;
  font-weight:400 !important;
  text-align:left !important;
}
body #modeSeg button::before{
  content:"" !important;
  position:absolute;
  left:11px;
  top:50%;
  width:14px;
  height:14px;
  box-sizing:border-box;
  transform:translateY(-50%);
  border:1.5px solid #b3c0c7;
  border-radius:50%;
  background:var(--r-panel);
}
body #modeSeg button::after{display:none !important}
body #modeSeg button:hover{background:var(--r-panel-2) !important;color:var(--r-ink) !important}
body #modeSeg button.on{background:var(--r-tint) !important;color:var(--r-acc) !important}
body #modeSeg button.on::before{border:4px solid var(--r-acc)}

/* ---------- sélecteurs segmentés ---------- */
body .seg:not(#modeSeg),
body #winSeg,
body #scaleSeg{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:0 !important;
  padding:2px !important;
  border:1px solid var(--r-line) !important;
  border-radius:9px !important;
  background:var(--r-panel-2) !important;
  overflow:visible !important;
}
body #winSeg::before,body #winSeg::after,
body #scaleSeg::before,body #scaleSeg::after{content:none !important;display:none !important}
body .seg:not(#modeSeg) button,
body #winSeg button,
body #scaleSeg button{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:6px 10px !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:var(--r-mut) !important;
  font-family:var(--r-sans) !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}
body .seg:not(#modeSeg) button:hover,
body #winSeg button:hover,
body #scaleSeg button:hover{color:var(--r-ink) !important;background:transparent !important}
body .seg:not(#modeSeg) button.on,
body #winSeg button.on,
body #scaleSeg button.on{
  background:var(--r-panel) !important;
  color:var(--r-ink) !important;
  box-shadow:var(--r-ombre) !important;
}

/* ---------- année et curseur ---------- */
body .yr{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin:14px 0 4px !important;
  font-family:var(--r-sans) !important;
  font-size:11.5px !important;
  font-weight:500;
  color:var(--r-mut) !important;
}
body .yr b{font:500 20px var(--r-mono) !important;color:var(--r-ink) !important;font-variant-numeric:tabular-nums}

body .yctrl{display:flex !important;align-items:center !important;gap:6px !important;margin-top:4px !important;border:0 !important}
body .yctrl .yb{
  flex:none !important;
  width:26px !important;
  height:26px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  color:var(--r-mut) !important;
  font-size:9px !important;
}
body .yctrl .yb:hover{background:var(--r-panel-2) !important;color:var(--r-ink) !important}
body .yctrl .play,
body #play{
  flex:none !important;
  width:30px !important;
  height:30px !important;
  padding:0 !important;
  border:1px solid var(--r-line) !important;
  border-radius:50% !important;
  background:var(--r-panel) !important;
  color:var(--r-acc) !important;
  font-size:10px !important;
  box-shadow:var(--r-ombre) !important;
}
body .yctrl .play:hover{border-color:var(--r-tint-line) !important;background:var(--r-tint) !important}

body .yctrl input[type="range"],
body .oprow input[type="range"],
body input[type="range"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  height:18px !important;
  background:linear-gradient(to right,var(--r-acc) 0 var(--range-progress,50%),var(--r-line) var(--range-progress,50%) 100%) center/100% 2px no-repeat !important;
  border:0 !important;
  outline:none;
  cursor:pointer;
}
body input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  width:14px !important;
  height:14px !important;
  border:1.5px solid var(--r-acc) !important;
  border-radius:50% !important;
  background:var(--r-panel) !important;
  box-shadow:0 1px 3px rgba(14,20,23,.18) !important;
  cursor:grab;
}
body input[type="range"]::-moz-range-thumb{
  width:14px !important;
  height:14px !important;
  border:1.5px solid var(--r-acc) !important;
  border-radius:50% !important;
  background:var(--r-panel) !important;
  box-shadow:0 1px 3px rgba(14,20,23,.18) !important;
}
body .year-axis{margin:2px 68px 0 32px !important;font:400 10px var(--r-mono) !important;color:#9aa6ad !important}

/* ---------- légende ---------- */
body #legend .leg,
body .leg{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  margin-top:7px;
  font-family:var(--r-sans) !important;
  font-size:11.5px !important;
  color:var(--r-mut);
  border:0 !important;
}
body .leg .bar{height:7px !important;border:0 !important;border-radius:4px !important}

/* ---------- couches avancées ---------- */
body details.atlas-advanced > summary{
  padding:13px 18px !important;
  font-family:var(--r-sans) !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  color:var(--r-ink) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  background:var(--r-panel) !important;
  border-bottom:1px solid var(--r-line-2) !important;
  cursor:pointer;
}
body .ck{font-family:var(--r-sans) !important;font-size:12.5px !important;color:var(--r-ink)}
body input[type="checkbox"]{accent-color:var(--r-acc);border-radius:4px !important}

body .szc,
body .advregs .rc{
  padding:4px 10px !important;
  border:1px solid var(--r-line) !important;
  border-radius:999px !important;
  background:var(--r-panel) !important;
  color:var(--r-mut) !important;
  font-family:var(--r-mono) !important;
  font-size:10.5px !important;
}
body .szc.on{background:#f6ebe7 !important;border-color:#dcb3a6 !important;color:#a8442c !important}
body .advregs .rc.on{background:var(--r-tint) !important;border-color:var(--r-tint-line) !important;color:var(--r-acc) !important}

body .advbtn,
body .advbtn2,
body .favbtn,
body .sbtn,
body .cmpsel button,
body #depCurves .dcmbtn,
body .seg2 .sb,
body .selection-tools .sb{
  border:1px solid var(--r-line) !important;
  border-radius:8px !important;
  background:var(--r-panel) !important;
  color:var(--r-ink) !important;
  font-family:var(--r-sans) !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}
body .advbtn:hover,
body .advbtn2:hover,
body .favbtn:hover,
body .sbtn:hover,
body .cmpsel button:hover,
body .seg2 .sb:hover{background:var(--r-panel-2) !important;color:var(--r-ink) !important}
body .sbtn.primary,
body .seg2 .sb.on,
body .cmpsel button.on,
body #depCurves .dcmbtn.on{background:var(--r-tint) !important;border-color:var(--r-tint-line) !important;color:var(--r-acc) !important}
body .favbtn.on{background:#f8f1dd !important;border-color:#d9c48a !important;color:#8a6d1f !important}
body .selection-tools .sb:hover::after{border-radius:5px;font-family:var(--r-sans) !important;font-size:11px}

body select,
body input[type="text"],
body input[type="number"],
body input[type="search"],
body #glSearch{
  border:1px solid var(--r-line) !important;
  border-radius:7px !important;
  background:var(--r-panel) !important;
  color:var(--r-ink) !important;
  font-family:var(--r-sans) !important;
  font-size:12.5px !important;
}
body select:focus,
body input:focus{outline:none;border-color:var(--r-tint-line) !important;box-shadow:0 0 0 3px var(--r-tint) !important}

/* ---------- onglets du rail droit ---------- */
body #rTabs button{
  font-family:var(--r-sans) !important;
  font-size:12.5px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  color:var(--r-mut) !important;
  background:var(--r-panel) !important;
  border-bottom:2px solid transparent !important;
}
body #rTabs button.on{color:var(--r-ink) !important;border-bottom-color:var(--r-acc) !important}

/* ---------- cartes de valeurs ---------- */
body .scard,
body .dcc{border-radius:8px !important;border-color:var(--r-line-2) !important}
body .scard .k,
body .dcc .k,
body .dclab,
body .stgrp h5,
body #stats.atlas-results .atlas-impact-summary-title{
  font-family:var(--r-sans) !important;
  font-size:11px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-weight:500 !important;
}

/* ---------- fenêtres flottantes ---------- */
body #infoPop,
body #setPop,
body .advbox{
  border:0 !important;
  border-radius:12px !important;
  box-shadow:var(--r-ombre-flottante) !important;
  font-family:var(--r-sans) !important;
}
body #reopen,
body #statReopen{
  border:1px solid var(--r-line) !important;
  border-radius:8px !important;
  background:var(--r-panel) !important;
  color:var(--r-acc) !important;
  font-family:var(--r-sans) !important;
  box-shadow:var(--r-ombre) !important;
}
body #busy{border:1px solid var(--r-line) !important;border-radius:999px !important;
  background:var(--r-panel) !important;color:var(--r-acc) !important;box-shadow:var(--r-ombre) !important}

/* ---------- contrôles de la carte ---------- */
body .maplibregl-ctrl-group{
  border:0 !important;
  border-radius:9px !important;
  overflow:hidden;
  box-shadow:var(--r-ombre-flottante) !important;
}
body .maplibregl-ctrl-group button{border-radius:0 !important}
body .maplibregl-ctrl-group button + button{border-top:1px solid var(--r-line-2) !important}

/* ---------- mobile ---------- */
body .atlas-mobile-summary{border-radius:10px !important;font-family:var(--r-sans) !important}
body .atlas-sheet-handle{border-radius:999px !important;background:var(--r-line) !important}
@media (max-width:780px){
  body #side,
  body.rpanel #stats,
  body.rpanel #depCurves,
  body.rpanel #compare{border-radius:14px 14px 0 0 !important;border-top:1px solid var(--r-line) !important}
}

/* ---------- page Saisonnalité : boutons et régions ---------- */
body .selbtns{gap:5px !important}
body .selbtns .sb{
  padding:5px 11px !important;
  border:1px solid var(--r-line) !important;
  border-radius:8px !important;
  background:var(--r-panel) !important;
  color:var(--r-mut) !important;
  font-family:var(--r-sans) !important;
  font-size:12.5px !important;
}
body .selbtns .sb:hover{background:var(--r-panel-2) !important;color:var(--r-ink) !important}
body .selbtns .sb.on{background:var(--r-tint) !important;border-color:var(--r-tint-line) !important;color:var(--r-acc) !important}
body .atlas-seasonal-controls .reg{
  padding:4px 10px !important;
  border:1px solid var(--r-line) !important;
  border-radius:999px !important;
  background:var(--r-panel) !important;
  color:var(--r-ink) !important;
  font-family:var(--r-sans) !important;
  font-size:12px !important;
}
body .atlas-seasonal-controls .reg.on{background:var(--r-tint) !important;border-color:var(--r-tint-line) !important;color:var(--r-acc) !important}
body .atlas-seasonal-controls .reg .nd{font-size:12px !important;color:var(--r-ink) !important;margin-left:4px}
body .atlas-seasonal-controls .reg{font-family:var(--r-mono) !important;font-size:10.5px !important;color:var(--r-mut) !important}
body .atlas-seasonal-controls .reg.on .nd{color:var(--r-acc) !important}