/* ouvrage.css — II · la rue des ouvrages : une élévation d'architecte que l'on parcourt de côté.
   Sur une seule ligne de sol, la méthode se bâtit en trois étapes (piquets et première assise, murs à mi-hauteur, porte achevée),
   puis viennent les ouvrages : la porte d'AniDash, qui s'ouvre au survol et au focus pour montrer son entrée, et deux baies murées
   dont les assises ne sont qu'à moitié posées. Voix : précise, tracée — Outfit et étiquettes à chasse fixe.
   Rail à accroche (scroll-snap) dès 40rem, pile verticale en dessous ; sans JS, tout est lisible ; miroir en RTL par propriétés logiques. */

.street {
  margin-block-start: var(--s-6);
  --plot-w: clamp(11.5rem, 9rem + 3.5vw, 13.5rem);
}

.street__hint {
  display: none;
  margin-block-start: var(--s-6);
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.street:focus-visible {
  outline-offset: var(--s-2);
}

.street__track {
  display: grid;
  row-gap: var(--s-8);
}

.reach {
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: var(--s-5);
}

.reach__head {
  display: grid;
  row-gap: var(--s-1);
  padding-inline: var(--s-3);
}

.reach__label {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  font-weight: var(--w-label);
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-terra-text);
}

.reach__title {
  font-family: var(--f-ouvrage);
  font-size: var(--t-xl);
  font-weight: var(--w-numeral);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-title);
}

.reach__list {
  display: grid;
  row-gap: var(--s-6);
}

/* ── Une parcelle : l'élévation posée sur la ligne de sol, puis son texte ── */
.plot {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--s-4);
}

.plot__art {
  border-block-end: var(--stroke-ground) solid var(--c-ink);
}

.plot__elev {
  inline-size: 100%;
  aspect-ratio: 120 / 150;
  color: var(--c-ink);
}

.plot__enter {
  display: block;
  text-decoration: none;
}

.plot__text {
  display: grid;
  row-gap: var(--s-2);
  align-content: start;
  padding-block-start: var(--s-3);
  padding-inline: var(--s-3);
}

.plot__label {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  font-weight: var(--w-label);
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-terra-text);
}

.plot__name {
  font-family: var(--f-ouvrage);
  font-size: var(--t-lg);
  font-weight: var(--w-numeral);
  line-height: 1.2;
  letter-spacing: var(--track-title);
}

.plot__desc {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-ink-2);
}

.plot__addr {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  color: var(--c-ink-3);
  overflow-wrap: anywhere;
}

.plot__addr:empty {
  display: none;
}

.plot__entry {
  display: grid;
  row-gap: var(--s-2);
}

.plot__link {
  font-size: var(--t-sm);
  font-weight: var(--w-text-strong);
}

.plot--walled .plot__name {
  color: var(--c-ink-2);
}

/* ── L'élévation : traits d'architecte ── */
.el__ghost path {
  fill: none;
  stroke: var(--c-ink-3);
  stroke-width: 1px;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.el__ghost--wall path {
  stroke-dasharray: 2 5;
  opacity: 0.7;
}

.el__stakes path {
  fill: none;
  stroke: var(--c-ink-2);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.el__string {
  stroke-dasharray: 2 4;
}

.el__gate path,
path.el__gate {
  fill: var(--c-ink);
}

.el__door {
  fill: var(--c-door);
}

.el__sun {
  fill: var(--c-sun);
}

.el__course {
  fill: var(--c-terra);
}

.el__tick {
  fill: none;
  stroke: var(--c-ink-3);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.el__lit {
  fill: var(--c-sun);
  stroke: var(--c-ink);
  stroke-width: 0.6px;
}

.el__sun2 {
  fill: var(--c-paper);
  translate: 0 5px;
  opacity: 0;
  transition: translate var(--d-ouverture) var(--ease-ouverture) 120ms, opacity var(--d-ouverture) ease 120ms;
}

/* le vantail : une rotation 3D ne se rend pas proprement dans un SVG (aplatie en biais) ; il se replie à plat vers sa charnière */
.el__leaf {
  fill: var(--c-terra);
  stroke: var(--c-ink);
  stroke-width: 0.6px;
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transition: scale calc(var(--d-ouverture) * 1.4) var(--ease-ouverture);
}

:root[dir="rtl"] .el__leaf {
  transform-origin: 100% 50%;
}

.el__frame {
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 1.2px;
}

.el__rest {
  fill: none;
  stroke: var(--c-ink-3);
  stroke-width: 1px;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}

/* la porte d'AniDash s'ouvre au survol, au focus (clavier compris) et un instant à la première arrivée (.is-ajar, scenes.js) :
   le vantail se replie contre sa charnière, le soleil monte dans l'intérieur allumé */
.plot--open:is(:hover, :focus-within, .is-ajar) .el__leaf {
  scale: 0.14 1;
}

.plot--open:is(:hover, :focus-within, .is-ajar) .el__sun2 {
  translate: 0 0;
  opacity: 1;
}

/* avec une souris, l'entrée se découvre quand la porte s'ouvre ; au toucher et sans souris, elle reste lue */
@media (hover: hover) and (pointer: fine) {
  .plot--open .plot__entry {
    opacity: 0;
    translate: 0 0.5rem;
    transition: opacity var(--d-ouverture) var(--ease-ouverture), translate var(--d-ouverture) var(--ease-ouverture);
  }

  .plot--open:is(:hover, :focus-within, .is-ajar) .plot__entry {
    opacity: 1;
    translate: 0 0;
  }
}

.works__next {
  max-inline-size: var(--measure);
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-block-start: var(--stroke-hair) solid var(--c-line);
  color: var(--c-ink-2);
}

/* les animations d'arrivée (rue, étapes, portes) vivent dans scenes.css, déclenchées par .is-in (scenes.js) */

/* ── Rail : à partir de 40rem, la rue se parcourt de côté (accroche, clavier, sans script) ── */
@container wall (min-width: 40rem) {
  .street__hint {
    display: block;
  }

  .street {
    margin-block-start: var(--s-3);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s-3);
    padding-block-end: var(--s-4);
    scrollbar-width: thin;
    scrollbar-color: var(--c-ink-3) transparent;
  }

  .street__track {
    display: flex;
    inline-size: max-content;
    column-gap: 0;
  }

  .reach__list {
    display: flex;
    column-gap: 0;
  }

  .plot {
    inline-size: var(--plot-w);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    row-gap: 0;
    scroll-snap-align: start;
  }

  .plot__elev {
    max-block-size: 13rem;
    margin-inline: auto;
  }
}