/*
 * map/communes — porte depuis PageSecteur.astro de la maquette de Chez Loeli. Engagement 5 : aucun hexadecimal.
 */
.ivy-map--communes { padding-block: clamp( 72px, 9vw, 120px ); background-color: var( --ivy-surface ); background-image: var( --ivy-grain, none ); color: var( --ivy-ink ); }
.ivy-map--communes .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--communes .ivy-map__inner { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); } }
.ivy-map--communes .ivy-map__copy { min-width: 0; margin-block-end: clamp( 32px, 5vw, 56px ); }
.ivy-map--communes .ivy-map__header { display: grid; gap: 16px; }
.ivy-map--communes .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--communes .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--communes .ivy-map__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink ) ); }
.ivy-map--communes .ivy-map__lede { max-width: 62ch; font-size: var( --ivy-font-lead ); }
.ivy-map--communes .ivy-map__text { color: var( --ivy-text-color, var( --ivy-muted ) ); font-size: inherit; }
.ivy-map--communes .ivy-map__text > * { margin: 0; font-size: inherit; }
.ivy-map--communes .ivy-map__visual { margin-block-start: 34px; max-width: 520px; }
.ivy-map--communes .ivy-map__places { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var( --ivy-line ); }
.ivy-map--communes .ivy-map__place-row { display: grid; grid-template-columns: 28px minmax( 0, 1fr ); gap: 16px; padding-block: 20px; border-block-end: 1px solid var( --ivy-line ); }
.ivy-map--communes .ivy-map__pin { width: var( --ivy-commune_icon-size, 26px ); height: var( --ivy-commune_icon-size, 26px ); margin-top: 2px; background: var( --ivy-commune_icon-color, var( --ivy-accent ) ); -webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.1-6-10.2a6 6 0 0 1 12 0C18 15.9 12 21 12 21zM12 8.8a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2z'/%3E%3C/svg%3E" ) center / contain no-repeat; mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.1-6-10.2a6 6 0 0 1 12 0C18 15.9 12 21 12 21zM12 8.8a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2z'/%3E%3C/svg%3E" ) center / contain no-repeat; }
.ivy-map--communes .ivy-map__place-title { margin: 0; color: var( --ivy-commune_title-color, var( --ivy-ink ) ); }
.ivy-map--communes .ivy-map__place-text { margin: 0; color: var( --ivy-commune_text-color, var( --ivy-muted ) ); font-size: calc( var( --ivy-font-body ) * .882 ); }

/* --- Le croquis (partage avec map/communes) --- */
.ivy-map--communes .ivy-etang { margin: 0; color: var( --ivy-deep ); }
.ivy-map--communes .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--communes .ivy-etang__sea, .ivy-map--communes .ivy-etang__lake { fill: var( --ivy-water-color, var( --ivy-surface-soft ) ); }
.ivy-map--communes .ivy-etang__ripple { opacity: .7; }
.ivy-map--communes .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--communes .ivy-etang__water-name { fill: var( --ivy-water_name-color, var( --ivy-accent ) ); font-family: var( --ivy-font-accent ); font-weight: 400; }
.ivy-map--communes .ivy-etang__water-name--sea { }
.ivy-map--communes .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--communes .ivy-etang__radius { fill: var( --ivy-reach-color, var( --ivy-accent ) ); font-family: var( --ivy-font-accent ); font-weight: 400; }
.ivy-map--communes .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--communes .ivy-etang__place.is-active text { fill: var( --ivy-place_active-color, var( --ivy-ink ) ); font-weight: 600; }
.ivy-map--communes .ivy-etang__dot { fill: var( --ivy-dot-color, var( --ivy-line-soft ) ); stroke: var( --ivy-surface ); stroke-width: 2.5; }
.ivy-map--communes .is-active .ivy-etang__dot { fill: var( --ivy-dot_active-color, var( --ivy-support ) ); }
.ivy-map--communes .ivy-etang__house circle { fill: var( --ivy-surface ); stroke: var( --ivy-house-color, var( --ivy-ink ) ); stroke-width: 1.6; }
.ivy-map--communes .ivy-etang__house path { stroke: var( --ivy-house-color, var( --ivy-ink ) ); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ivy-map--communes .ivy-etang__house rect { fill: var( --ivy-house-color, var( --ivy-ink ) ); }
.ivy-map--communes .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--communes .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--communes .ivy-etang__pin text { font-size: 21px; }
	.ivy-map--communes .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--communes [data-ivy-in] .ivy-etang__circle,
	.ivy-motion-ready .ivy-map--communes [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--communes [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--communes [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--communes .ivy-hl { color: inherit; letter-spacing: 0; }