.pw-map {
  --pw-map-ink: #184d42;
  --pw-map-cream: #fff8df;
  --pw-map-gold: #efd078;
  container: pw-map / inline-size;
  color: var(--pw-map-ink);
  font-family: inherit;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.pw-map *, .pw-map *::before, .pw-map *::after { box-sizing: border-box; }
.pw-map [hidden] { display: none !important; }
.pw-map__heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .4rem 0 1.35rem; }
.pw-map__eyebrow { margin: 0 0 .45rem; font-size: .72rem; line-height: 1.5; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #477269; }
.pw-map h2 { margin: 0; font-size: clamp(1.8rem, 4cqi, 3.1rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.12; color: var(--pw-map-ink); }
.pw-map__intro { margin: .65rem 0 0; font-size: .95rem; line-height: 1.65; max-width: 50ch; color: #486b60; }
.pw-map__seal { flex: 0 0 auto; width: 7.1rem; height: 7.1rem; display: grid; place-content: center; text-align: center; border: 1px solid #bdcba6; outline: 1px solid #bdcba6; outline-offset: -.4rem; border-radius: 50%; background: #f3efd4; transform: rotate(8deg); font-family: Georgia, serif; font-size: .9rem; line-height: 1.5; font-style: italic; }
.pw-map__landscape { overflow: hidden; border: 1px solid #9bb892; border-radius: 1.6rem; box-shadow: 0 1.2rem 3rem #173e2d16, inset 0 0 0 5px #f8f2d8; background: #d9e4b5; }
.pw-map__canvas { position: relative; aspect-ratio: 3 / 2; isolation: isolate; }
.pw-map__canvas::after { content: ''; position: absolute; z-index: 2; inset: .5rem; border: 1px solid #fff6da8c; border-radius: 1.15rem; pointer-events: none; }
.pw-map__art { display: block; width: 100%; height: 100%; }
.pw-map__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pw-map__small-pins { display: none; position: absolute; inset: 0; pointer-events: none; }
.pw-map__small-pin { position: absolute; transform: translate(-50%, -50%); display: grid; place-content: center; width: 1.35rem; height: 1.35rem; border: 1px solid #fff8df; border-radius: 50%; background: #184d42; color: #fff8df; font: 800 .7rem/1 system-ui,sans-serif; box-shadow: 0 2px 7px #122d29a3; }
.pw-map__heart-halo { transform-box: fill-box; transform-origin: center; animation: pwMapHeartGlow 7s ease-in-out infinite; }
.pw-map__heart-logo { transform-box: fill-box; transform-origin: center bottom; animation: pwMapHeartBreathe 9s ease-in-out infinite; }
.pw-map__firefly { transform-box: fill-box; transform-origin: center; animation: pwMapFirefly 8s ease-in-out infinite; }
.pw-map__firefly--two { animation-duration: 11s; animation-delay: -3s; }
.pw-map__firefly--three { animation-duration: 9s; animation-delay: -6s; }
.pw-map.is-motion-paused .pw-map__heart-halo, .pw-map.is-motion-paused .pw-map__heart-logo, .pw-map.is-motion-paused .pw-map__firefly { animation-play-state: paused; }
.pw-map__places { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.pw-map__place { appearance: none; position: absolute; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; transform: translate(-50%, -50%); gap: .45rem; color: var(--pw-map-ink); background: #fff8e8f2; border: 1px solid #c8ad6b; padding: .35rem .65rem .35rem .35rem; min-height: 44px; min-width: 44px; max-width: 14rem; width: max-content; font-family: inherit; font-size: .78rem; line-height: 1.25; font-weight: 800; text-align: left; cursor: pointer; pointer-events: auto; border-radius: 2rem; box-shadow: 0 4px 16px #173b374d; -webkit-tap-highlight-color: transparent; }
.pw-map__place[data-pw-place='village'], .pw-map__small-pin[data-pw-pin='village'] { left: 24%; top: 67%; }
.pw-map__place[data-pw-place='moulin'], .pw-map__small-pin[data-pw-pin='moulin'] { left: 45%; top: 36%; }
.pw-map__place[data-pw-place='jardin'], .pw-map__small-pin[data-pw-pin='jardin'] { left: 51%; top: 84%; }
.pw-map__place[data-pw-place='foret'], .pw-map__small-pin[data-pw-pin='foret'] { left: 17%; top: 28%; }
.pw-map__place[data-pw-place='phare'], .pw-map__small-pin[data-pw-pin='phare'] { left: 85%; top: 27%; }
.pw-map__place[data-pw-place='riviere'], .pw-map__small-pin[data-pw-pin='riviere'] { left: 73%; top: 63%; }
.pw-map__place[data-pw-place='rive-oubliee'], .pw-map__small-pin[data-pw-pin='rive-oubliee'] { left: 89%; top: 88%; }
.pw-map__number { display: grid; place-content: center; flex: 0 0 auto; width: 3.75rem; height: 3.75rem; min-width: 56px; min-height: 56px; border: 3px solid #fff9e0; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg); background: #245d4c; color: #fff9e0; box-shadow: 0 3px 0 #163e2f, 0 6px 15px #24492a29; font-size: 0; transition: background .15s ease, box-shadow .15s ease; }
.pw-map__number::after { content: attr(data-number); }
.pw-map__place .pw-map__number { width: 30px; height: 30px; min-width: 30px; min-height: 30px; border-width: 2px; font-size: .85rem; font-weight: 800; transform: none; border-radius: 50%; box-shadow: none; }
.pw-map__label { display: flex; flex-direction: column; min-width: 0; gap: .2rem; }
.pw-map__place .pw-map__label { background: none; border: 0; padding: 0; box-shadow: none; }
.pw-map__name { overflow-wrap: anywhere; }
.pw-map__status { display: block; font-size: .69rem; line-height: 1.35; font-weight: 650; color: #526753; }
.pw-map__status:empty { display: none; }
.pw-map__place.is-active .pw-map__number, .pw-map__list-place.is-active .pw-map__number { color: #234e3f; background: var(--pw-map-gold); border-color: #fff9df; box-shadow: 0 0 0 4px #245d4c, 0 6px 15px #24492a29; }
.pw-map__place.is-active .pw-map__label { color: #183e32; background: none; }
.pw-map__place.is-future .pw-map__number, .pw-map__list-place.is-future .pw-map__number { background: #e3e7ce; color: #4d6756; border-color: #f9f6e4; box-shadow: 0 3px 0 #92a187, 0 6px 15px #24492a15; }
.pw-map__place.is-future .pw-map__label { background: none; }
.pw-map__place:not(.is-active):hover .pw-map__number, .pw-map__list-place:not(.is-active):hover .pw-map__number { background: #437c60; color: #fff9df; }
.pw-map__place.is-future.is-active .pw-map__number, .pw-map__list-place.is-future.is-active .pw-map__number { color: #234e3f; background: var(--pw-map-gold); border-color: #fff9df; box-shadow: 0 0 0 4px #245d4c, 0 6px 15px #24492a29; }
.pw-map__place:hover .pw-map__label { border-color: #315d47; }
.pw-map__place:focus-visible, .pw-map__list-place:focus-visible { outline: 4px solid #173f37; outline-offset: 5px; background: #fff9dfd9; }
.pw-map__cartouche { position: absolute; z-index: 1; left: 2.5%; bottom: 2.5%; color: #fff7df; display: flex; flex-direction: column; gap: .25rem; max-width: 43%; background: #173e32db; padding: .7rem .9rem; border: 1px solid #e0c58399; border-radius: .75rem; box-shadow: 0 4px 18px #11281c40; }
.pw-map__cartouche span:first-child { font-family: Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(1rem, 2.3cqi, 1.8rem); letter-spacing: -.03em; }
.pw-map__cartouche span:last-child { font-size: .64rem; line-height: 1.5; }
.pw-map__legend { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.5rem; font-size: .74rem; line-height: 1.5; color: #47675a; padding: 1rem .2rem .2rem; }
.pw-map__legend > span { display: inline-flex; align-items: center; gap: .45rem; }
.pw-map__legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; flex: 0 0 auto; }
.pw-map__legend-current { background: #efd078; border: 2px solid #245d4c; }
.pw-map__legend-future { background: #e3e7ce; border: 1px dashed #647c65; }
.pw-map__legend .pw-map__mobile-hint { display: none; }
.pw-map__list { display: none; }
.pw-map__list-place { appearance: none; min-height: 64px; padding: .8rem; display: flex; align-items: center; gap: .85rem; border: 1px solid #bdcbb1; border-radius: .8rem; color: var(--pw-map-ink); background: #fffae9; font-family: inherit; font-size: .92rem; line-height: 1.35; font-weight: 750; text-align: left; width: 100%; cursor: pointer; }
.pw-map__list-place .pw-map__number { width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; font-size: .95rem; border-width: 2px; border-radius: 50%; transform: none; }
.pw-map__list-place.is-active { border-color: #35664e; background: #f6edc9; box-shadow: inset 0 0 0 1px #35664e; }
.pw-map__list-place.is-future { background: #f1f2e5; border-style: dashed; }
@container pw-map (max-width: 65.625rem) {
  .pw-map__place { max-width: 9.5rem; font-size: .73rem; background: transparent; border: 0; padding: 0; box-shadow: none; justify-content: center; }
  .pw-map__place .pw-map__label { display: none; }
  .pw-map__place .pw-map__number { width: 36px; height: 36px; min-width: 36px; min-height: 36px; box-shadow: 0 3px 10px #173b3770; }
  .pw-map__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding-top: .9rem; }
  .pw-map__legend .pw-map__mobile-hint { display: inline-flex; width: 100%; }
}
@container pw-map (max-width: 40.625rem) {
  .pw-map__heading { padding-bottom: 1rem; }
  .pw-map__seal { display: none; }
  .pw-map__eyebrow { font-size: .65rem; letter-spacing: .1em; }
  .pw-map h2 { font-size: clamp(1.55rem, 7cqi, 2.4rem); }
  .pw-map__intro { font-size: .88rem; line-height: 1.55; }
  .pw-map__landscape { border-radius: 1rem; }
  .pw-map__canvas::after { inset: .25rem; border-radius: .7rem; }
  .pw-map__places { display: none; }
  .pw-map__small-pins { display: block; }
  .pw-map__cartouche { display: none; }
  .pw-map__legend { font-size: .7rem; gap: .5rem 1rem; }
  .pw-map__list { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .pw-map__list-place { padding: .8rem; }
}
@container pw-map (max-width: 14rem) {
  .pw-map__list-place { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .pw-map__list-place .pw-map__label { width: 100%; }
}
@keyframes pwMapHeartGlow { 0%, 100% { opacity: .4; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.05); } }
@keyframes pwMapHeartBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.008); } }
@keyframes pwMapFirefly { 0%, 100% { transform: translate(0, 0); opacity: .7; } 35% { transform: translate(7px, -9px); opacity: 1; } 70% { transform: translate(-4px, -3px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .pw-map__number { transition: none; } .pw-map__heart-halo, .pw-map__heart-logo, .pw-map__firefly { animation: none; } }
@media (forced-colors: active) {
  .pw-map__place .pw-map__label, .pw-map__list-place { background: Canvas; color: CanvasText; border: 1px solid ButtonText; }
  .pw-map__number, .pw-map__place.is-future .pw-map__number, .pw-map__list-place.is-future .pw-map__number { color: ButtonText; background: ButtonFace; border: 2px solid ButtonText; }
  .pw-map__place.is-active .pw-map__number, .pw-map__list-place.is-active .pw-map__number { color: HighlightText; background: Highlight; outline: 3px solid Highlight; }
  .pw-map__place:focus-visible, .pw-map__list-place:focus-visible { outline-color: Highlight; }
}
