.section-mark {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
  margin-bottom: 14px;
}

.territory-section {
  width: min(100%, var(--max-content-width));
  margin-inline: auto;
  padding: clamp(40px, 6vw, 86px) var(--page-padding);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.territory-intro {
  max-width: 48ch;
}

.territory-intro .corps {
  margin-top: clamp(14px, 2vw, 22px);
}

.territory-map {
  width: 100%;
}

.territory-map svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.territory-map-shape {
  fill: var(--accent);
  stroke: none;
}

.territory-connector {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  opacity: 0.75;
}

.territory-marker {
  cursor: pointer;
  z-index: 1;
  /* Cree un vrai contexte d'empilement pour ce marqueur : sans ca,
     z-index sur un element SVG "nu" est peu fiable d'un moteur a l'autre. */
  isolation: isolate;
}

/* Fait passer le marqueur survole au-dessus de ses voisins : sans ca, un
   point dessine apres lui dans le SVG peut recouvrir son etiquette. */
.territory-marker:hover,
.territory-marker:focus-visible {
  z-index: 10;
}

.territory-marker-hit {
  fill: transparent;
}

/* Fond ocre uni (contraste 3:1 non-texte) : les points restent sombres avec
   une bordure blanche pour garantir un contraste suffisant (RGAA 1.4.11). */
.territory-marker-dot {
  fill: #111;
  stroke: #fff;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.2s ease, fill 0.2s ease;
}

.territory-marker--home .territory-marker-dot {
  fill: #111;
  stroke: #fff;
  stroke-width: 3;
}

.territory-marker:hover .territory-marker-dot,
.territory-marker:focus-visible .territory-marker-dot {
  transform: scale(1.5);
  fill: #fff;
  stroke: #111;
  outline: none;
}

/* Halo blanc derriere le texte (paint-order) : sert de fond au nom du
   projet pour qu'il reste lisible meme au-dessus d'un point voisin de
   couleur proche. */
.territory-marker-label {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: #111;
  stroke: #fff;
  stroke-width: 5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.territory-marker:hover .territory-marker-label,
.territory-marker:focus-visible .territory-marker-label {
  opacity: 1;
}

/* Point regroupant plusieurs projets au meme endroit (ex. une etude
   urbaine et le projet architectural qui en decoule) : un seul point,
   dont le survol ou le clic deplie la liste des projets a cet endroit. */
.territory-cluster {
  cursor: pointer;
  z-index: 1;
  isolation: isolate;
}

.territory-cluster:hover,
.territory-cluster:focus-within,
.territory-cluster.is-open {
  z-index: 10;
}

.territory-cluster-hit {
  fill: transparent;
}

.territory-cluster-hit:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

.territory-cluster-dot {
  /* Legerement plus grand qu'un point simple, pour signaler qu'il y a
     plusieurs projets a cet endroit. */
  r: 6px;
}

.territory-cluster:hover .territory-cluster-dot,
.territory-cluster:focus-within .territory-cluster-dot,
.territory-cluster.is-open .territory-cluster-dot {
  transform: scale(1.4);
  fill: #fff;
  stroke: #111;
}

.territory-cluster-list {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.territory-cluster:hover .territory-cluster-list,
.territory-cluster:focus-within .territory-cluster-list,
.territory-cluster.is-open .territory-cluster-list {
  opacity: 1;
  pointer-events: auto;
}

.territory-cluster-link-hit {
  fill: transparent;
}

.territory-cluster-link .territory-marker-label {
  opacity: 1;
  cursor: pointer;
}

.territory-cluster-link:hover .territory-marker-label,
.territory-cluster-link:focus-visible .territory-marker-label {
  fill: var(--accent-ink);
}

@media (min-width: 900px) {
  .territory-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}