.am-head { display: grid; gap: 3rem var(--gap); }
.am-head-text > .over { display: block; color: var(--muted); margin-bottom: 0.75rem; }
.am-open-text { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.am-head-fig figcaption a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

.am-head-fig { margin-inline: calc(-1 * var(--gutter)); }
.am-head-fig figcaption { padding-inline: var(--gutter); }
@media (min-width: 900px) {
  .am-head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .am-head-text { grid-column: 1 / 6; }
  .am-head-fig { grid-column: 6 / 13; margin-left: 0; margin-top: 2rem; }
  .am-head-fig figcaption { padding-left: 0; }
}

.am-deux-grid { display: grid; gap: 5rem var(--gap); }
.am-col-fig { margin-bottom: 2rem; }
.am-col-fig figcaption { color: var(--on-ink-muted); }
.am-col-fig figcaption a { color: var(--on-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.am-col .pr-h2 { margin-bottom: 1.5rem; }
.am-note { margin-top: 0; }
.am-note .pr-say { font-family: var(--display); font-weight: 500; font-size: 1.125rem; line-height: 1.4; }
@media (min-width: 900px) {
  .am-deux-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .am-col { grid-column: 1 / 7; }
  .am-col-b { grid-column: 8 / 13; margin-top: 8rem; }
}

.am { display: grid; gap: 3rem; }
.am-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.am-leg { padding: 0; margin-bottom: 0.75rem; font-family: var(--display); font-weight: 500; font-size: 1rem; line-height: 1.5; }

.am-lieux-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.5rem; }
.am-lieux-grid .am-tile { grid-column: span 2; }
.am-lieux-grid .am-tile-loisirs { grid-column: 2 / 4; }
.am-tile .dp-svg { height: 4rem; }
.am-touches { margin-top: 2rem; }
.am-touches-grid { display: grid; border-top: 1px solid var(--ink); }
.am-touches-grid .dp-chk { border-bottom: 1px solid var(--rule); padding-block: 0.75rem; }
.am-hint { padding: 0.5rem 0 0.75rem 2rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); border-bottom: 1px solid var(--rule); }
.am-selon { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); line-height: 1.15; }
.am-selon[hidden], .am-form[hidden], .am-r[hidden] { display: none; }

.am-rules { display: grid; }
.am-r { position: relative; display: grid; gap: 0.25rem; padding: 1.25rem 0 1.25rem 1.5rem; border-top: 1px solid var(--rule); }
.am-r:last-child { border-bottom: 1px solid var(--rule); }
.am-r::before { content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 1px; background: var(--ink); }
.am-r-at::before, .am-r-pc::before { width: 4px; }
.am-r-dp::before, .am-r-ag::before, .am-r-ag-si::before, .am-r-porteur::before, .am-r-destination::before, .am-r-combles::before { width: 2px; }
.am-r-ecusson::before, .am-r-ecusson-fac::before, .am-r-ecusson-erp::before { width: 8px; background: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--ink); }
.am-r-rien::before { width: 8px; background: none; box-shadow: inset 0 0 0 1px var(--ink); }
.am-r-doute::before, .am-r-at-si::before { background: none; border-left: 1px dashed var(--ink); }
.am-r dt { font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.am-r dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; max-width: 52ch; }
.am-r dd span { display: block; }
.am-r dd span[hidden] { display: none; }
.am-r dd b { display: block; margin-bottom: 0.25rem; font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; }

.am-sheet { margin: 0; padding: 1.5rem 1rem 1rem; }
.am-sheet .am-plan { max-height: 28rem; font-size: 8px; }
@media (min-width: 900px) { .am-sheet .am-plan { font-size: 6.5px; } }
.am-sheet .dp-dz { margin-top: 1rem; justify-self: start; }
.am-plan .am-mur { fill: var(--ink); stroke: none; }
.am-plan .am-cl { stroke-width: 2; }
.am-plan .am-porte { stroke-opacity: 0.55; }
.am-plan .am-lab { fill: var(--ink); stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; opacity: 0; }
.am-p path, .am-p circle { transition: stroke-opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), fill 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.am-plan .am-lab, .am-plan .am-zone-h, .am-plan .am-fac-h, .am-plan .am-chem-h { transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1); }

.am-p-interieur path, .am-p-interieur circle { stroke-opacity: 0.3; }
.am-p-communes .am-zone { stroke-dasharray: 3 3; stroke-opacity: 0.35; }
.am-plan .am-zone-h, .am-plan .am-fac-h, .am-plan .am-chem-h { opacity: 0; }
.am-plan .am-fac { fill: var(--ink); stroke: none; }
.am-p-ecusson .am-chem, .am-p-ecusson .am-chem-l { stroke-opacity: 0.4; }
.am-p-destination { opacity: 0; }
.am-plan .am-use { stroke-dasharray: 3 2; fill: var(--paper); }

.am-sheet[data-on~="interieur"] .am-p-interieur path, .am-sheet[data-on~="interieur"] .am-p-interieur circle { stroke-opacity: 1; }
.am-sheet[data-on~="interieur"] .am-p-interieur .am-lab,
.am-sheet[data-on~="facade"] .am-p-facade .am-lab,
.am-sheet[data-on~="communes"] .am-p-communes .am-lab,
.am-sheet[data-on~="ecusson"] .am-p-ecusson .am-lab,
.am-sheet[data-on~="destination"] .am-p-destination .am-lab { opacity: 1; }
.am-sheet[data-on~="facade"] .am-fac { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.am-sheet[data-on~="facade"] .am-fac-h { opacity: 1; }
.am-sheet[data-on~="communes"] .am-zone { stroke-dasharray: none; stroke-opacity: 1; stroke-width: 2; }
.am-sheet[data-on~="communes"] .am-zone-h { opacity: 0.6; }
.am-sheet[data-on~="ecusson"] .am-chem, .am-sheet[data-on~="ecusson"] .am-chem-l { stroke-opacity: 1; stroke-width: 2; }
.am-sheet[data-on~="ecusson"] .am-chem-h { opacity: 1; }
.am-sheet[data-on~="destination"] .am-p-destination { opacity: 1; }

.am-plan .i-log, .am-plan .i-loc, .am-plan .i-pub, .am-plan .i-lsr, .am-plan .v-log, .am-plan .v-pub { display: none; }
.am-sheet[data-lieu="appartement"] .i-log, .am-sheet[data-lieu="maison"] .i-log,
.am-sheet[data-lieu="local"] .i-loc, .am-sheet[data-lieu="erp"] .i-pub, .am-sheet[data-lieu="loisirs"] .i-lsr,
.am-sheet[data-lieu="appartement"] .v-log, .am-sheet[data-lieu="maison"] .v-log,
.am-sheet[data-lieu="local"] .v-pub, .am-sheet[data-lieu="erp"] .v-pub, .am-sheet[data-lieu="loisirs"] .v-pub { display: inline; }

.am-sheet[data-lieu="maison"]:not([data-on~="communes"]) .am-p-communes { display: none; }

@media (min-width: 900px) {
  .am { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--gap); align-items: start; }
  .am-form { grid-column: 1 / 13; }
  .am-lieux-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
  .am-lieux-grid .am-tile, .am-lieux-grid .am-tile-loisirs { grid-column: auto; }
  .am-tile .dp-svg { height: 5rem; }
  .am-touches-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; grid-auto-flow: row dense; }
  .am-hint { grid-column: 1 / -1; }
  .am-out { grid-column: 7 / 13; }
  .am-sheet { grid-column: 1 / 6; grid-row: 2 / span 2; position: sticky; top: calc(var(--header-h) + 2rem); padding: 2rem 1.5rem 1.5rem; }
  .am:not(.is-live) .am-sheet { grid-row: 1 / span 2; }
}

.am-planche-grid { grid-template-columns: minmax(0, 1fr); }
.am-planche .pc-img { display: block; height: auto; aspect-ratio: 3 / 2; }
.am-planche .pc-img img { object-fit: contain; }
.am-planche a.pc-img { cursor: zoom-in; }
.am-planche a.pc-img:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }
@media (min-width: 900px) {
  .am-planche-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .am-pc-details { grid-column: 1 / 7; }
  .am-pc-releve { grid-column: 7 / 13; }
}

.zoom { border: 0; padding: 0; max-width: 96vw; max-height: 94vh; background: #fff; color: var(--ink); }
.zoom::backdrop { background: rgba(5, 4, 9, 0.88); }
.zoom img { display: block; width: auto; height: auto; max-width: 96vw; max-height: calc(94vh - 3rem); object-fit: contain; }
.zoom p { margin: 0; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; }
.zoom button { appearance: none; background: none; border: 0; padding: 0; min-height: 3rem; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.zoom button:focus-visible { outline: 2px solid var(--ink); outline-offset: 0.25rem; }
html.zoom-open { overflow: hidden; }

.am-ba { display: grid; gap: 2rem 0.5rem; }
.am-ba-fig { margin: 0; }
.am-ba-fig figcaption { display: grid; gap: 0.125rem; margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); }
.am-ba-fig figcaption b { font-family: var(--display); font-weight: 500; font-size: 1.125rem; line-height: 1.3; color: var(--ink); }
.am-ba-cap { margin-top: 2rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.am-ba-cap a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 700px) { .am-ba { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .am-p path, .am-p circle, .am-plan .am-lab, .am-plan .am-zone-h, .am-plan .am-fac-h, .am-plan .am-chem-h { transition: none; }
}

@media (max-width: 700px) {
  .am-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}