/* Carte interactive du Brabant wallon (27 communes). Couleurs reprises des variables du thème (palettes.css). */
.zone-map{position:relative;overflow:hidden}
.zone-bw{display:block;width:100%;height:auto;overflow:visible}
.bw{filter:drop-shadow(0 14px 18px color-mix(in srgb,var(--ink) 16%,transparent))}

.com{
  fill:color-mix(in srgb,var(--blue) 13%,var(--paper));
  stroke:var(--paper);stroke-width:1.8;stroke-linejoin:round;cursor:pointer;
  transition:fill .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);
  transform-box:fill-box;transform-origin:center;outline:none;
}
.com.is-base:not(.is-selected){fill:color-mix(in srgb,var(--blue) 28%,var(--paper))}
.com.is-hover{fill:color-mix(in srgb,var(--blue) 42%,var(--paper))}@media (hover:hover) and (pointer:fine){.com:hover{fill:color-mix(in srgb,var(--blue) 42%,var(--paper))}}
.com.is-selected{fill:var(--blue)}
.com:focus-visible{stroke:var(--ink);stroke-width:3}

/* repère de la base : le losange du logo, avec une onde discrète */
.base-pin{pointer-events:none}
.base-pin path{fill:var(--paper);stroke:var(--ink);stroke-width:2.4;stroke-linejoin:miter}
.base-pin circle:not(.pulse){fill:var(--ink)}
.base-pin .pulse{fill:none;stroke:var(--paper);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}

/* infobulle qui suit le curseur */
.zone-tip{
  position:absolute;left:0;top:0;z-index:3;pointer-events:none;
  padding:7px 12px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transform:translate(-50%,-135%);opacity:0;transition:opacity .15s;
}
.zone-tip.on{opacity:1}

.zone-map figcaption{align-items:center}
.cap-tag{
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;color:var(--ink);border:1px solid var(--line);
}
.cap-tag[hidden]{display:none}

/* liste des communes */
.com-list{
  list-style:none;margin:clamp(22px,3vw,32px) 0 0;padding:0;width:min(580px,100%);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;
}
.com-btn{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 0;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--line);
  font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em;
  transition:color .25s,padding .35s cubic-bezier(.16,1,.3,1);
}
.com-btn i{flex:none;width:8px;height:8px;border:1px solid currentColor;transform:rotate(45deg);transition:background .25s,transform .35s cubic-bezier(.16,1,.3,1)}
@media (hover:hover) and (pointer:fine){.com-btn:hover{color:var(--blue);padding-left:4px}}
.com-btn.is-selected{color:var(--blue)}
.com-btn.is-selected i{background:currentColor;transform:rotate(45deg) scale(1.2)}
.com-btn.is-base i{background:currentColor}
.com-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* apparition : les communes se révèlent depuis Incourt vers l'extérieur */
@media (prefers-reduced-motion:no-preference){
  .zone-bw .com{opacity:0}
  .zone-map.in .com{animation:com-in .9s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s)}
  .zone-map.in .base-pin .pulse{animation:pin-pulse 2.6s cubic-bezier(.16,1,.3,1) 1.2s infinite}
  @media (hover:hover) and (pointer:fine){.com:hover{transform:scale(1.025)}}
}
@keyframes com-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes pin-pulse{0%{opacity:.9;transform:scale(1)}80%,100%{opacity:0;transform:scale(2.8)}}

@media (max-width:860px){.com-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.com-list{grid-template-columns:1fr}}

/* Mise en page : texte en haut, carte pleine largeur dessous */
.zone-inner{grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:start}
.zone-text{width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(28px,6vw,88px);align-items:end}
.zone-text .eyebrow{grid-column:1/-1}
.zone-text h2{margin-bottom:0}
.zone-text>p:not(.eyebrow){max-width:46ch;margin:0}
@media (max-width:860px){.zone-text{grid-template-columns:1fr;row-gap:16px}}
.zone-map{padding:clamp(18px,3.5vw,48px);background:
  radial-gradient(60% 70% at 62% 40%,color-mix(in srgb,var(--blue) 7%,transparent),transparent 70%),var(--paper)}
.zone-bw{max-height:78vh}
.labels{pointer-events:none;font-size:10.5px;font-weight:600;letter-spacing:-.005em;text-anchor:middle;dominant-baseline:central;fill:var(--ink)}
.labels text{paint-order:stroke;stroke:color-mix(in srgb,var(--paper) 80%,transparent);stroke-width:3px;stroke-linejoin:round}
@media (max-width:760px){.labels{display:none}}
.zone-map figcaption{margin-top:clamp(14px,2vw,24px);padding-top:14px;border-top:1px solid var(--line)}
.labels text.is-selected{fill:#fff;stroke:none}