/*
 * map/etang — porte depuis le bloc « zone » de l'accueil de la maquette Astro de Chez Loeli.
 * Engagement 5 : aucun hexadecimal. Les pastilles et les liens reprennent la grammaire de la maquette.
 */
.ivy-map--etang { padding-block: clamp( 72px, 9vw, 120px ); background-image: var( --ivy-grain, none ); color: var( --ivy-ink ); }
.ivy-map--etang .ivy-map__inner { display: grid; gap: clamp( 28px, 5vw, 72px ); align-items: start; width: min( 100% - 2 * clamp( 20px, 5vw, 56px ), 1200px ); margin-inline: auto; }
@media ( min-width: 900px ) { .ivy-map--etang .ivy-map__inner { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); } }
.ivy-map--etang .ivy-map__copy { display: grid; gap: 0; justify-items: start; min-width: 0; }
.ivy-map--etang .ivy-map__eyebrow { margin: 0; color: var( --ivy-eyebrow-color, var( --ivy-ink ) ); font-size: var( --ivy-font-label ); font-weight: 600; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; }
.ivy-map--etang .ivy-map__eyebrow::before { content: ''; display: inline-block; width: 24px; height: 11px; margin-inline-end: 12px; vertical-align: -1px; background: var( --ivy-support ); -webkit-mask: var( --ivy-roof-mask ) center / contain no-repeat; mask: var( --ivy-roof-mask ) center / contain no-repeat; }
.ivy-map--etang .ivy-map__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink ) ); }
.ivy-map--etang .ivy-map__text { color: var( --ivy-text-color, var( --ivy-muted ) ); font-size: var( --ivy-font-lead ); }
.ivy-map--etang .ivy-map__text > * { margin: 0; font-size: inherit; }
.ivy-map--etang .ivy-map__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.ivy-map--etang .ivy-map__chip { padding: 8px 16px; border: 1px solid var( --ivy-line ); border-radius: var( --ivy-radius-action, 999px ); background-color: var( --ivy-zone-background-color, var( --ivy-surface-soft ) ); color: var( --ivy-zone-color, inherit ); font-size: calc( var( --ivy-font-body ) * .882 ); line-height: 1.65; }
.ivy-map--etang .ivy-map__links { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.ivy-map--etang .ivy-map__area-link { display: inline-flex; align-items: center; gap: 8px; color: var( --ivy-area-color, var( --ivy-accent ) ); font-weight: 600; text-decoration: none; }
.ivy-map--etang .ivy-map__area-link::after { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var( --ivy-arrow-mask ) center / contain no-repeat; mask: var( --ivy-arrow-mask ) center / contain no-repeat; transition: transform 200ms ease; }
.ivy-map--etang .ivy-map__area-link:hover::after { transform: translateX( 3px ); }
.ivy-map--etang .ivy-map__visual { width: 100%; max-width: 560px; justify-self: center; }

/* --- Le croquis (partage avec map/communes) --- */
.ivy-map--etang .ivy-etang { margin: 0; color: var( --ivy-deep ); }
.ivy-map--etang .ivy-etang__svg { display: block; width: 100%; height: auto; overflow: hidden; border-radius: calc( var( --ivy-radius-surface, 18px ) * 3 / 18 ); background-color: var( --ivy-surface ); }
.ivy-map--etang .ivy-etang__sea, .ivy-map--etang .ivy-etang__lake { fill: var( --ivy-water-color, var( --ivy-surface-soft ) ); }
.ivy-map--etang .ivy-etang__ripple { opacity: .7; }
.ivy-map--etang .ivy-etang__coast path { fill: none; stroke: var( --ivy-coast-color, var( --ivy-ink ) ); stroke-width: 1.4; stroke-linejoin: round; opacity: .75; }
.ivy-map--etang .ivy-etang__water-name { fill: var( --ivy-water_name-color, var( --ivy-accent ) ); font-family: var( --ivy-font-accent ); font-weight: 400; }
.ivy-map--etang .ivy-etang__water-name--sea { }
.ivy-map--etang .ivy-etang__circle { fill: color-mix( in srgb, var( --ivy-circle-color, var( --ivy-support ) ) 7%, transparent ); stroke: var( --ivy-circle-color, var( --ivy-support ) ); stroke-width: 1.8; stroke-dasharray: 2 8; stroke-linecap: round; }
.ivy-map--etang .ivy-etang__radius { fill: var( --ivy-reach-color, var( --ivy-accent ) ); font-family: var( --ivy-font-accent ); font-weight: 400; }
.ivy-map--etang .ivy-etang__pin text { font-size: 15px; fill: var( --ivy-place-color, var( --ivy-muted ) ); font-family: inherit; font-weight: 500; paint-order: stroke; stroke: var( --ivy-surface ); stroke-width: 5px; stroke-linejoin: round; }
.ivy-map--etang .ivy-etang__place.is-active text { fill: var( --ivy-place_active-color, var( --ivy-ink ) ); font-weight: 600; }
.ivy-map--etang .ivy-etang__dot { fill: var( --ivy-dot-color, var( --ivy-line-soft ) ); stroke: var( --ivy-surface ); stroke-width: 2.5; }
.ivy-map--etang .is-active .ivy-etang__dot { fill: var( --ivy-dot_active-color, var( --ivy-support ) ); }
.ivy-map--etang .ivy-etang__house circle { fill: var( --ivy-surface ); stroke: var( --ivy-house-color, var( --ivy-ink ) ); stroke-width: 1.6; }
.ivy-map--etang .ivy-etang__house path { stroke: var( --ivy-house-color, var( --ivy-ink ) ); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ivy-map--etang .ivy-etang__house rect { fill: var( --ivy-house-color, var( --ivy-ink ) ); }
.ivy-map--etang .ivy-etang__pin.is-home text { font-size: 19px; fill: var( --ivy-house-color, var( --ivy-ink ) ); font-family: var( --ivy-font-titre ); font-weight: 600; }
.ivy-map--etang .ivy-etang__caption { margin: 6px 0 0; color: var( --ivy-caption-color, var( --ivy-muted ) ); font-size: var( --ivy-font-label ); line-height: 1.5; text-align: end; }
@media ( max-width: 599px ) {
	.ivy-map--etang .ivy-etang__pin text { font-size: 21px; }
	.ivy-map--etang .ivy-etang__pin.is-home text { font-size: 24px; }
}
/* Le cercle s'ouvre, les communes se posent une a une quand le bloc entre dans l'ecran. */
@media ( prefers-reduced-motion: no-preference ) {
	.ivy-motion-ready .ivy-map--etang [data-ivy-in] .ivy-etang__circle,
	.ivy-motion-ready .ivy-map--etang [data-ivy-in] .ivy-etang__radius { opacity: 0; transform: scale( .82 ); transform-box: fill-box; transform-origin: center; transition: opacity .9s ease, transform 1.2s cubic-bezier( .22, 1, .36, 1 ); }
	.ivy-motion-ready .ivy-map--etang [data-ivy-in] .ivy-etang__place { opacity: 0; transform: translateY( 8px ); transition: opacity .5s ease, transform .6s cubic-bezier( .22, 1, .36, 1 ); transition-delay: calc( 500ms + var( --ivy-i, 0 ) * 110ms ); }
	.ivy-motion-ready .ivy-map--etang [data-ivy-in].ivy-in :is( .ivy-etang__circle, .ivy-etang__radius, .ivy-etang__place ) { opacity: 1; transform: none; }
}

/* Un mot en `{{ }}` dans ce titre : la maquette le pose en <span class="script">, qui n'y change ni la police ni la couleur mais coupe l'espacement des lettres. */
.ivy-map--etang .ivy-hl { color: inherit; letter-spacing: 0; }