@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --bg:#202224;
  --bg-deep:#151719;
  --grid:rgba(255,255,255,.045);
  --panel:rgba(27,29,31,.94);
  --line:rgba(255,255,255,.14);
  --text:#f4f4f1;
  --muted:#92969a;
  --orange:#ff8b1f;
  --orange-light:#ffb04c;
  --orange-dark:#c75c0b;
  --tile:#f2f2ed;
  --tile-side:#b9bab6;
  --tile-side-dark:#858783;
  --block:#34383b;
  --block-top:#414548;
  --block-side:#25282a;
  --green:#8fdf73;
  --gold:#f2c95c;
  --blue:#71b8e8;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif}
body{overflow:hidden}
button{font:inherit}

.navigator-app{height:100vh;min-height:720px;display:grid;grid-template-columns:176px 1fr;grid-template-rows:92px 1fr;background:var(--bg)}
.map-mobile-warning{display:none}

.topbar{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 38px 0 34px;
  background:#202224;
  border-top:10px solid #164c62;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:20;
}

.brand{display:flex;align-items:center;gap:14px}
.brand-mark{
  width:48px;height:48px;display:grid;place-items:center;
  background:linear-gradient(#ff9b29,#ef7915);
  color:white;font-size:25px;font-weight:700;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.35);
}
.brand small,.navigator-label,.floor-title span,.map-copy>span,.info-kicker{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#b5b7b8
}
.brand h1{margin:3px 0 0;font:600 25px/1 "Space Grotesk",sans-serif}
.floor-title{text-align:right}
.floor-title strong{display:block;margin-top:3px;font:600 29px/1 "Space Grotesk",sans-serif}

.navigator{
  position:relative;
  background:
    radial-gradient(circle at 50% 8%, rgba(106,196,174,.055), transparent 24%),
    linear-gradient(180deg,#171a1c 0%,#121516 100%);
  border-right:1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:15;
  overflow:hidden;
}
.navigator:before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015) 55%,transparent);
  pointer-events:none;
}
.navigator-top{
  width:100%;
  padding:17px 18px 13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:4;
}
.navigator-label{
  color:#d4d7d7;
  letter-spacing:.2em;
  font-size:10px;font-weight:800;
}
.navigator-count{
  color:#777d80;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

/* The old orange "tower" is deliberately gone. The navigator now uses a
   very thin central spine, letting the level cards carry the visual weight. */
.tower{
  position:relative;
  width:148px;
  flex:1;
  min-height:0;
  display:flex;
  justify-content:center;
  padding:7px 0 9px;
}
.tower:before{
  content:"";
  position:absolute;
  top:5px;bottom:7px;left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,
    rgba(94,186,168,.12) 0%,
    rgba(94,186,168,.48) 12%,
    rgba(113,184,232,.22) 52%,
    rgba(242,201,92,.34) 100%);
  box-shadow:0 0 10px rgba(94,186,168,.08);
}
.tower:after{
  content:"";
  position:absolute;
  top:20px;bottom:18px;left:50%;
  width:10px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(94,186,168,.035),transparent 20%,rgba(242,201,92,.025) 80%,transparent);
  pointer-events:none;
}
.tower-spire{
  position:absolute;
  top:0;
  left:50%;
  width:18px;
  height:18px;
  transform:translateX(-50%) rotate(45deg);
  border:1px solid rgba(105,207,181,.6);
  background:linear-gradient(135deg,#3b8f7c,#1d5d52);
  box-shadow:0 0 16px rgba(72,183,157,.15);
  z-index:3;
}
.tower-spire:after{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(219,250,239,.25);
}
.tower-stack{
  position:relative;
  z-index:2;
  width:124px;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:27px 7px 12px;
  overflow-y:auto;
  overflow-x:visible;
  scrollbar-width:none;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.tower-stack::-webkit-scrollbar{display:none}

.floor-button{
  --edge:#34393b;
  position:relative;
  flex:0 0 34px;
  width:96px;
  height:34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  cursor:pointer;
  color:#f5f6f4;
  background:linear-gradient(180deg,#34393b 0%,#292d2f 100%);
  box-shadow:
    0 4px 9px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.07),
    inset 0 -1px rgba(0,0,0,.24);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
  font-size:10px;
  font-weight:800;
  letter-spacing:.035em;
}
.floor-button:before,
.floor-button:after{
  content:"";
  position:absolute;
  top:7px;
  width:10px;
  height:18px;
  background:var(--edge);
  z-index:-1;
  opacity:.95;
}
.floor-button:before{
  left:-9px;
  clip-path:polygon(100% 0,100% 100%,0 72%,0 28%);
}
.floor-button:after{
  right:-9px;
  clip-path:polygon(0 0,100% 28%,100% 72%,0 100%);
}
.floor-button:hover{
  transform:translateX(3px);
  filter:brightness(1.12);
  border-color:rgba(255,255,255,.24);
}
.floor-button.active{
  background:linear-gradient(180deg,#4fb7b5 0%,#2e858b 100%);
  border-color:#9be8e5;
  box-shadow:
    0 0 0 2px rgba(92,210,201,.13),
    0 7px 18px rgba(0,0,0,.34),
    0 0 20px rgba(70,190,181,.16),
    inset 0 1px rgba(255,255,255,.25);
  transform:translateX(4px) scale(1.035);
}
.floor-button.active:before,.floor-button.active:after{background:#2f878d}
.floor-button.surface{
  --edge:#287983;
  background:linear-gradient(180deg,#55c2c3 0%,#338f98 100%);
  border-color:rgba(160,239,235,.55);
  box-shadow:0 5px 14px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.22);
}
.floor-button.surface:before,.floor-button.surface:after{background:#338f98}
.floor-button.surface:not(.active){transform:translateY(-1px)}
.floor-button.surface.active{
  background:linear-gradient(180deg,#69d0ce 0%,#3c9fa6 100%);
  border-color:#c0f5ef;
  box-shadow:0 0 0 2px rgba(92,210,201,.16),0 8px 22px rgba(0,0,0,.35),0 0 22px rgba(70,190,181,.18);
}


/* Profondeurs : une destination cliquable, dans le même langage visuel que la V15. */
.floor-button.depths{
  --edge:#46646a;
  background:linear-gradient(180deg,#465c61 0%,#303f42 100%);
  border-color:rgba(143,184,188,.34);
  color:#e2eeee;
}
.floor-button.depths:before,.floor-button.depths:after{background:#3a5054}
.floor-button.depths.active{
  background:linear-gradient(180deg,#5b777c 0%,#3b5357 100%);
  border-color:#a7d5d8;
  box-shadow:0 0 0 2px rgba(120,190,198,.12),0 7px 18px rgba(0,0,0,.34),0 0 18px rgba(80,150,160,.12);
}

.floor-button.boss{
  --edge:#806023;
  background:linear-gradient(180deg,#9d762d 0%,#72531c 100%);
  border-color:rgba(242,201,92,.38);
  color:#fff8df;
}
.floor-button.boss:before,.floor-button.boss:after{background:#7b591e}
.floor-button.boss:after{
  content:"✦";
  display:grid;
  place-items:center;
  width:12px;
  height:12px;
  top:10px;
  right:-15px;
  clip-path:none;
  background:none;
  color:#d8ad4d;
  font-size:8px;
  z-index:2;
}
.floor-button.boss.active{
  background:linear-gradient(180deg,#d2a63d 0%,#96701f 100%);
  border-color:#ffe4a0;
  box-shadow:0 0 0 2px rgba(242,201,92,.15),0 8px 20px rgba(0,0,0,.34),0 0 18px rgba(242,201,92,.14);
  transform:translateX(4px) scale(1.035);
}
.floor-number{position:relative;z-index:3;text-shadow:0 1px 2px rgba(0,0,0,.55)}

.navigator-hint{
  width:100%;
  padding:11px 8px 16px;
  text-align:center;
  color:#666;
  position:relative;
  z-index:4;
  border-top:1px solid rgba(255,255,255,.055);
  background:linear-gradient(180deg,rgba(18,21,22,.35),rgba(18,21,22,.96));
}
.navigator-hint span{display:block;font-size:18px;line-height:18px;color:#8d9698}
.navigator-hint small{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#707678}

.map-stage{
  position:relative;
  overflow:visible;
  background:
    linear-gradient(30deg,transparent 47%,rgba(255,255,255,.045) 48%,rgba(255,255,255,.045) 50%,transparent 51%),
    linear-gradient(150deg,transparent 47%,rgba(255,255,255,.045) 48%,rgba(255,255,255,.045) 50%,transparent 51%),
    radial-gradient(circle at 64% 42%,rgba(255,255,255,.035),transparent 36%),
    #202224;
  background-size:38px 22px,38px 22px,100% 100%,100% 100%;
}
.map-grid-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 70% 48%,rgba(255,139,31,.035),transparent 27%);
}

.map-copy{position:absolute;left:6.5%;top:7%;z-index:10;max-width:390px}
.map-copy>span{color:#c5c6c6}
.map-copy h2{margin:7px 0 8px;font:600 clamp(34px,4vw,58px)/.95 "Space Grotesk",sans-serif;letter-spacing:-.055em}
.map-copy p{margin:0;color:#9b9da0;font-size:13px;line-height:1.5;max-width:330px}

.iso-map-wrap{
  position:absolute;
  left:55%;
  top:62%;
  width:min(700px,64vw);
  height:auto;
  aspect-ratio:1064 / 810;
  transform:translate(-50%,-50%);
  overflow:hidden;
  pointer-events:auto;
  touch-action:none;
  cursor:grab;
  user-select:none;
}
.iso-map-wrap.is-dragging{cursor:grabbing}

.iso-grid-plane{display:none}

/*
  The SVG uses exactly the same isometric axes as the background:
  38px horizontally and 22px vertically per grid unit.
  No CSS 3D rotation is applied to the map itself.
*/
.iso-map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:auto;
  transform-origin:50% 50%;
  will-change:transform;
}
.isometric-svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.iso-block{transform-origin:center;}
.iso-block.clickable{pointer-events:auto;cursor:pointer}
.iso-map-wrap.is-dragging .iso-block.clickable{cursor:grabbing}

/* A water tile is a real low cube, not a flat blue diamond. */
.block-top{
  fill:#3d9edb;
  stroke:#123d5b;
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
.block-side-left,
.block-side-right{
  fill:#246d9d;
  stroke:#103b59;
  stroke-width:1.1;
  vector-effect:non-scaling-stroke;
}
.water .block-top{fill:#3d9edb}
.water .block-side-left,.water .block-side-right{fill:#246d9d}

/*
  IMPORTANT:
  One territory is ONE polygonal top measuring 3×3 background units.
  There are deliberately NO internal 3×3 lines.
*/
.iso-block.poi .block-top{fill:#668450}
.iso-block.point .block-top{fill:#3d92bd}
.iso-block.boss .block-top{fill:#806a3e}
.iso-block.poi .block-side-left,.iso-block.poi .block-side-right{fill:#3f5732}
.iso-block.point .block-side-left,.iso-block.point .block-side-right{fill:#275e7a}
.iso-block.boss .block-side-left,.iso-block.boss .block-side-right{fill:#574729}

.zone-code{
  fill:#fff;
  font:800 9px/1 "Space Grotesk",sans-serif;
  paint-order:stroke;
  stroke:rgba(0,0,0,.65);
  stroke-width:3px;
  pointer-events:none;
}

.iso-block.clickable:hover .block-top{filter:brightness(1.16)}
.iso-block.clickable:hover .block-side-left,
.iso-block.clickable:hover .block-side-right{filter:brightness(1.12)}
.iso-block.clickable:hover .zone-code{fill:#fff}

.map-controls{
  position:absolute;
  right:16px;
  top:16px;
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.map-controls button{
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:5px;
  background:rgba(24,26,28,.9);
  color:#eee;
  font:600 19px/1 "Space Grotesk",sans-serif;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(0,0,0,.25);
  transition:.15s ease;
}
.map-controls button:hover{
  background:#292c2f;
  border-color:rgba(255,255,255,.28);
  transform:translateY(-1px);
}
.map-controls button:active{transform:translateY(0) scale(.96)}
.map-zoom-label{
  position:absolute;
  right:16px;
  top:128px;
  z-index:40;
  min-width:34px;
  padding:5px 7px;
  border-radius:4px;
  background:rgba(24,26,28,.72);
  color:#999;
  text-align:center;
  font-size:9px;
  letter-spacing:.08em;
  pointer-events:none;
}

.info-card{
  position:absolute;
  right:4.5%;
  top:50%;
  transform:translate(30px,-50%);
  width:min(300px,25vw);
  padding:24px;
  background:rgba(27,29,31,.96);
  border:1px solid rgba(255,255,255,.14);
  border-radius:6px;
  box-shadow:0 20px 50px rgba(0,0,0,.42);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index:100;
}
.info-card.open{
  opacity:1;
  visibility:visible;
  transform:translate(0,-50%);
  pointer-events:auto;
  transition:opacity .2s ease, transform .2s ease, visibility 0s;
}
.info-close{
  position:absolute;
  right:9px;
  top:7px;
  width:28px;
  height:28px;
  padding:0;
  background:transparent;
  border:0;
  color:#888;
  font-size:22px;
  line-height:28px;
  cursor:pointer;
}
.info-close:hover{color:#fff}
.info-kicker{
  color:var(--orange-light);
}
.info-card h3{
  margin:8px 0;
  font:600 23px/1.05 "Space Grotesk",sans-serif;
}
.info-card p{
  margin:0;
  color:#a9abad;
  font-size:12px;
  line-height:1.55;
}
.info-meta{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:10px;
  color:#bbb;
}

.map-legend{
  position:absolute;right:4%;bottom:5%;display:flex;gap:18px;
  color:#777;font-size:9px;text-transform:uppercase;letter-spacing:.08em;z-index:10
}
.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:#999}
.legend-dot.accessible{background:var(--green)}
.legend-dot.point{background:var(--blue)}
.legend-dot.boss{background:var(--gold)}


/* ============================================================
   SURFACE ZONE MODAL
   Generic information window for clickable surface territories.
   ============================================================ */
.zone-modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility 0s linear .18s;
}

.zone-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .18s ease, visibility 0s;
}

.zone-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,9,10,.68);
  backdrop-filter:blur(3px);
}

.zone-modal-card{
  position:relative;
  z-index:1;
  width:min(620px,92vw);
  max-height:min(720px,88vh);
  overflow:auto;
  padding:30px;
  background:linear-gradient(180deg,#25292b 0%,#1b1e20 100%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 35px rgba(113,184,232,.08);
  transform:translateY(10px) scale(.985);
  transition:transform .18s ease;
}

.zone-modal.open .zone-modal-card{
  transform:translateY(0) scale(1);
}

.zone-modal-close{
  position:absolute;
  top:10px;
  right:12px;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  background:transparent;
  color:#92989a;
  font-size:26px;
  line-height:32px;
  cursor:pointer;
  transition:color .15s ease,transform .15s ease;
}

.zone-modal-close:hover{
  color:#fff;
  transform:scale(1.08);
}

.zone-modal-kicker{
  color:var(--orange-light);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.zone-modal-card h3{
  margin:7px 0 3px;
  font:600 clamp(27px,4vw,38px)/1 "Space Grotesk",sans-serif;
  letter-spacing:-.035em;
}

.zone-modal-code{
  color:#777e81;
  font:700 10px/1 "Space Grotesk",sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.zone-modal-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:26px;
}

.zone-modal-section{
  padding:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
}

.zone-modal-section-title{
  margin-bottom:11px;
  color:#aeb3b4;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}

.zone-modal-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.zone-modal-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 9px;
  background:rgba(0,0,0,.14);
  border-radius:4px;
  color:#e8e9e7;
  font-size:11px;
}

.zone-modal-item strong{
  color:#f2c95c;
  font:700 11px/1 "Space Grotesk",sans-serif;
}

.zone-modal-empty{
  color:#777d80;
  font-size:11px;
}

@media(max-width:620px){
  .zone-modal{padding:15px}
  .zone-modal-card{padding:24px 18px}
  .zone-modal-columns{grid-template-columns:1fr}
}

@media(max-width:900px){
  html,body{height:100%;min-height:0;overflow:hidden}
  .navigator-app{
    height:100vh;height:100dvh;min-height:0;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:68px 60px minmax(0,1fr);
  }
  .topbar{
    grid-row:1;grid-column:1;
    min-width:0;padding:0 16px;
    border-top-width:5px;
  }
  .brand{gap:9px;min-width:0}
  .brand-mark{width:38px;height:38px;font-size:20px;flex:0 0 38px}
  .brand small{font-size:8px}
  .brand h1{font-size:20px}
  .floor-title span{font-size:8px}
  .floor-title strong{font-size:20px}
  .navigator{
    grid-row:2;grid-column:1;
    min-width:0;overflow:hidden;
    flex-direction:row;align-items:stretch;
    border-right:0;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .navigator:before,.navigator-top,.navigator-hint,.tower-spire{display:none}
  .tower{width:100%;min-height:0;flex:1;padding:0}
  .tower:before,.tower:after{display:none}
  .tower-stack{
    width:100%;height:100%;min-height:0;
    flex-direction:row;align-items:center;justify-content:flex-start;
    gap:8px;padding:6px 12px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:rgba(105,207,181,.42) transparent;
  }
  .floor-button{
    flex:0 0 78px;width:78px;height:38px;
    font-size:9px;scroll-snap-align:center;
  }
  .floor-button:hover,.floor-button.active{transform:translateY(-1px)}
  .map-stage{grid-row:3;grid-column:1;min-width:0;min-height:0;overflow:hidden}
  .map-copy{left:16px;top:14px;right:16px;max-width:none}
  .map-copy>span{font-size:8px;letter-spacing:.12em}
  .map-copy h2{margin:5px 0;font-size:clamp(24px,5vw,34px)}
  .map-copy p{max-width:620px;font-size:11px;line-height:1.35}
  .map-help{display:block;margin-top:5px;color:#838b8d;font-size:9px;line-height:1.35}
  .iso-map-wrap{
    left:50%;top:57%;
    width:min(100vw,620px);
    height:auto;
    aspect-ratio:1064 / 810;
  }
  .map-controls{right:10px;top:10px;gap:6px}
  .map-controls button{width:38px;height:38px}
  .map-zoom-label{right:12px;top:178px}
  .map-legend{left:50%;right:auto;bottom:9px;transform:translateX(-50%);gap:10px;white-space:nowrap;font-size:8px}
  .info-card{
    right:12px;left:12px;bottom:42px;top:auto;width:auto;max-height:42dvh;overflow:auto;
    padding:18px;transform:translateY(18px);
  }
  .info-card.open{transform:translateY(0)}
  .info-card h3{font-size:20px}
  .zone-modal{padding:16px}
  .zone-modal-card{max-height:calc(100dvh - 32px);overflow:auto}
}

@media(max-width:480px){
  .navigator-app{grid-template-rows:62px 56px minmax(0,1fr)}
  .topbar{padding:0 11px}
  .floor-title{max-width:42%;}
  .floor-title span{display:none}
  .floor-title strong{font-size:17px;white-space:nowrap}
  .floor-button{flex-basis:70px;width:70px;height:36px}
  .map-copy{left:12px;right:12px;top:11px}
  .map-copy p{max-width:calc(100% - 55px);font-size:10px}
  .map-help{max-width:calc(100% - 64px);font-size:8px}
  .iso-map-wrap{top:59%}
  .map-controls{right:7px;top:8px}
  .map-controls button{width:34px;height:34px}
  .map-zoom-label{right:7px;top:158px}
  .map-legend{gap:7px;font-size:7px}
}


/* ============================================================
   TERRITORY DECORATIONS
   Illustrated scenes live inside the same SVG as their 3×3 cube,
   so zooming, panning and touch gestures move them together.
   ============================================================ */
.zone-decoration{
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 8px 7px rgba(0,0,0,.35));
  transition:filter .16s ease;
}

/* Hover highlight — triggered by the parent isometric territory. */
.iso-block.clickable:hover .zone-decoration{
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(255,255,255,.55))
    drop-shadow(0 8px 7px rgba(0,0,0,.35));
}
.zone-decoration-a1{
  overflow:visible;
}


/* ============================================================
   ILLUSTRATIONS DE ZONES — AFFICHAGE / MASQUAGE
   ============================================================ */
.zone-decoration{
  transition:opacity .2s ease;
}

.iso-map.decorations-hidden .zone-decoration{
  opacity:0;
}

#toggleDecorations{
  font-size:17px !important;
}

#toggleDecorations.active{
  background:#3b4044;
  border-color:rgba(255,255,255,.32);
}

#toggleDecorations:not(.active){
  opacity:.65;
}

body.modal-open{overflow:hidden}