/* Coupe d'une destination : strates, passages, salles (positions --x et --y en %, fournies
   par le depths-map.js de la destination) et panneau de la salle choisie. Les tailles en
   cqw suivent la largeur de la coupe. Voir js/components/depths.js.
   À la destination de définir : le fond de chaque .stratum--<id>, la couleur de chaque
   .room-node--<kind> et .way-line--<type>, et le style de ses formes de décor. */

.depths-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 28px; align-items: start; }

/* ---------- La coupe ---------- */
.depths { position: relative; aspect-ratio: 100 / 104; overflow: hidden; container-type: inline-size; border: 1px solid var(--line); background: #05070d; user-select: none; -webkit-user-select: none; }
.stratum { position: absolute; left: 0; right: 0; top: var(--from); height: calc(var(--to) - var(--from)); border-top: 1px dashed rgba(255, 255, 255, .1); pointer-events: none; }
.stratum:first-child { border-top: 0; }
.stratum-name, .stratum-note { position: absolute; top: 1cqw; font-size: clamp(.5rem, 1.25cqw, .66rem); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.stratum-name { left: 1.6cqw; color: rgba(255, 255, 255, .55); }
.stratum-note { left: 1.6cqw; top: calc(1cqw + 1.5em); font-weight: 600; letter-spacing: .12em; color: rgba(255, 255, 255, .26); }

.depths-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.depths-lines * { vector-effect: non-scaling-stroke; }
.ground { fill: none; stroke: rgba(207, 216, 232, .6); stroke-width: 1.5; }
.way-line { stroke: rgba(255, 255, 255, .3); stroke-width: 1.4; }

.room-node { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; place-items: center; width: clamp(22px, 4.4cqw, 34px); aspect-ratio: 1; padding: 0; cursor: pointer; transform: translate(-50%, -50%); background: none; border: 0; color: var(--page-accent, var(--gold)); }
.room-node i { width: 52%; aspect-ratio: 1; transform: rotate(45deg); border: 1.5px solid currentColor; background: #080c14; transition: transform .3s var(--ease), background .3s, box-shadow .3s; }
.room-node--zone i { border-radius: 50%; transform: none; }
.room-node.visited i { background: currentColor; }
.room-node:hover i, .room-node:focus-visible i { box-shadow: 0 0 0 4px rgba(255, 255, 255, .14); }
.room-node.is-current { z-index: 3; }
.room-node.is-current i { background: currentColor; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22), 0 0 22px currentColor; }
.room-node:focus-visible { outline: 0; }
.room-label { position: absolute; left: 50%; top: calc(100% - .2cqw); width: max-content; max-width: 17cqw; transform: translateX(-50%); font-size: clamp(.55rem, 1.42cqw, .72rem); font-weight: 600; line-height: 1.15; letter-spacing: .03em; text-align: center; color: rgba(231, 235, 245, .82); text-shadow: 0 1px 3px #000, 0 0 10px #000; transition: color .25s; }
.room-node:hover .room-label, .room-node.is-current .room-label { color: #fff; }
.room-node.is-current .room-label { font-weight: 700; }

.depths-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 16px; background: var(--panel-solid); border: 1px solid var(--line); border-top: 0; }
.depths-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.depths-legend li { display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.depths-legend i { width: 9px; height: 9px; border: 1.5px solid var(--c); transform: rotate(45deg); }
.depths-legend .round i { border-radius: 50%; transform: none; }
.depths-legend .square i { transform: none; }
.depths-count { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.depths-count b { font-size: 1.05rem; color: var(--gold-hi); }
.depths-note { margin: 10px 0 0; font-size: .78rem; color: var(--faint); }

/* ---------- Panneau de la salle ---------- */
.room { position: sticky; top: 84px; background: var(--panel-solid); border: 1px solid var(--line); }
.room:focus { outline: 0; }
.room::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 3px; background: linear-gradient(90deg, var(--page-accent, var(--gold)), transparent 70%); }
.room-photo { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #070a12; }
.room-photo img { width: 100%; height: 100%; object-fit: cover; animation: room-in .6s ease; }
@keyframes room-in { from { opacity: 0; transform: scale(1.04); } }
.room-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 10px; background: linear-gradient(0deg, rgba(6, 10, 22, .9), rgba(6, 10, 22, 0)); font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.room-body { padding: 20px 24px 24px; }
.room-body h3 { margin: 6px 0 2px; font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--pearl); }
.room-en { margin: 0 0 12px; font-family: var(--font-lore); font-style: italic; font-size: 1.05rem; color: var(--faint); }
.room-text { margin: 0 0 16px; font-size: .95rem; line-height: 1.65; color: var(--muted); }
.room-finds { display: grid; gap: 10px; margin: 18px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--line); }
.room-finds li { position: relative; display: flex; align-items: center; gap: 12px; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.room-finds .spot--inline { flex: none; margin-top: 0; }
.room-finds b { color: var(--pearl); font-weight: 700; }
.room-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ways-label { flex-basis: 100%; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.way { padding: 6px 12px; cursor: pointer; background: transparent; border: 1px solid var(--line-strong); font-size: .76rem; font-weight: 600; color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.way:hover, .way:focus-visible { background: #fff; color: var(--night); border-color: #fff; }

.room-intro { padding: 26px 24px 28px; }
.room-intro h3 { margin: 6px 0 10px; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.room-intro p:not(.tag) { margin: 0 0 12px; font-size: .95rem; line-height: 1.65; color: var(--muted); }
.room-intro ol { margin: 0; padding: 0 0 0 1.2em; font-size: .9rem; line-height: 1.7; color: var(--ink); }
.room-intro li::marker { color: var(--page-accent, var(--gold)); font-weight: 700; }

@media (max-width: 1020px) {
  .depths-layout { grid-template-columns: minmax(0, 1fr); }
  .room { position: relative; top: auto; scroll-margin-top: 80px; }
}
/* sur téléphone, la coupe garde une largeur lisible et se fait glisser */
.depths-swipe { display: none; }
@media (max-width: 680px) {
  .depths-scroll { overflow-x: auto; border: 1px solid var(--line); }
  .depths { width: 640px; border: 0; }
  .depths-swipe { display: inline; }
}