/* La photo reste immobile. Les calques de feuillage utilisent exactement le même cadrage. */
.td .lieux-hero {
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.td .lieux-hero h1, .td .lieux-hero .td-lede { max-width: 100% }
@media (min-width: 800px) {
  .td .lieux-hero { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) }
}
.td .lieux-scene { width: min(100%, 32rem); min-width: 0; margin: 0 auto }
.lieux-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 1rem;
  background: #d2c7af;
}
.lieux-photo .lieux-couloir {
  display: block; width: 100%; height: auto; margin: 0;
}
.lieux-photo [hidden], .lieux-scene figcaption [hidden] { display: none }
.lieux-photo button[hidden], .lieux-photo .lieux-plaques[hidden] { display: none }
.lieux-reflet, .lieux-reflet::before, .lieux-reflet::after, .lieux-photo::after {
  position: absolute; inset: 0; pointer-events: none;
}
.lieux-reflet { z-index: 1; transition: background-color 1.2s }
.lieux-scene[data-lit] .lieux-reflet { background-color: rgb(255 231 180 / 11%) }
.lieux-reflet::before, .lieux-reflet::after, .lieux-liane {
  content: "";
  background: url("/illus/parcours-psy/couloir-sortie-v1.webp") center / 100% 100% no-repeat;
  transform: none;
}
/* Une première brise passe dès l’ouverture. Chaque mouvement pivote autour de
   l’attache de la plante ; la liane retombe avec un léger retard. */
.lieux-reflet::before {
  mask-image: radial-gradient(ellipse 17% 6% at 5% 41%, #000 52%, transparent 100%);
  transform-origin: 4% 47%;
  animation: lieux-feuilles 3.1s ease-in-out -.36s infinite;
}
.lieux-liane {
  position: absolute; inset: 0; pointer-events: none;
  mask-image: radial-gradient(ellipse 4.8% 10% at 14.4% 60%, #000 72%, transparent);
  transform-origin: 14.5% 51.6%;
  animation: lieux-liane 3.7s ease-in-out -.32s infinite;
}
.lieux-reflet::after {
  mask-image: radial-gradient(ellipse 7% 6% at 96% 13.7%, #000 64%, transparent),
              radial-gradient(ellipse 5% 5% at 99% 29%, #000 68%, transparent);
  transform-origin: 94% 39%;
  animation: lieux-branches 3.9s ease-in-out -.62s infinite;
}
@keyframes lieux-feuilles {
  0%, 100% { transform: rotate(-1deg) }
  33% { transform: rotate(5deg) translateY(.18%) }
  61% { transform: rotate(-3.8deg) }
  79% { transform: rotate(.4deg) }
}
@keyframes lieux-liane {
  0%, 100% { transform: rotate(-2deg) }
  37% { transform: rotate(5.4deg) }
  66% { transform: rotate(-3.7deg) }
  84% { transform: rotate(.9deg) }
}
@keyframes lieux-branches {
  0%, 100% { transform: skewX(-1.2deg) }
  34% { transform: skewX(2.6deg) translateY(-.28%) }
  63% { transform: skewX(-1.8deg) translateY(.18%) }
  82% { transform: skewX(.2deg) }
}
/* Le jour filtré par les feuilles glisse sur le sol et le bas du mur. */
.lieux-photo::after {
  content: "";
  z-index: 1;
  background:
    radial-gradient(ellipse 4% 18% at 40% 82%, #43381966 0%, transparent 78%),
    radial-gradient(ellipse 7% 10% at 48% 90%, #4b48295e 0%, transparent 83%),
    radial-gradient(ellipse 12% 6% at 60% 83%, #504c2e63 0%, transparent 91%),
    radial-gradient(ellipse 10% 5% at 39% 72%, #6c623444 0%, transparent 90%);
  mix-blend-mode: multiply;
  animation: lieux-ombres 8.6s ease-in-out -2.3s infinite alternate;
}
@keyframes lieux-ombres {
  from { transform: translate(-1.8%, -.4%) skewX(-2deg); opacity: .48 }
  to { transform: translate(2.4%, .6%) skewX(1.8deg); opacity: .88 }
}
.lieux-affiche {
  position: absolute; z-index: 2; left: 33%; top: 8%; width: 36%; height: 38.5%; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 2.4cqw 2cqw 6.8cqw; gap: .35em;
  color: #253e4b; background: linear-gradient(124deg, #f1e6ca, #f7f0df 56%, #e3d5b6); overflow: hidden;
}
.lieux-affiche strong { font: 600 clamp(1.12rem, 7cqw, 2rem)/1.05 Georgia, serif; letter-spacing: -.03em }
.lieux-affiche [data-expansion] { font: 500 clamp(.64rem, 3.35cqw, 1rem)/1.18 system-ui, sans-serif; hyphens: auto; overflow-wrap: break-word }
.lieux-estampe { width: 68%; aspect-ratio: 1.8; background: radial-gradient(circle at 67% 21%, #bc9045 0 9%, transparent 10%), linear-gradient(160deg, transparent 52%, #94aaa2 53% 64%, #385b63 65%); opacity: .85 }
.lieux-affiche:not([data-poster="idle"]) .lieux-estampe { height: 2px; width: 22%; background: #ae884c }
.lieux-affiche[data-poster="1"] { background: linear-gradient(140deg, #e7f0ee, #c4d8d3); color: #203f42 }
.lieux-affiche[data-poster="2"] { background: linear-gradient(140deg, #fbecd0, #e5c88f); color: #4e3921 }
.lieux-photo button, .lieux-scene figcaption button { font-family: inherit; cursor: pointer }
.lieux-photo button:focus-visible, .lieux-scene figcaption button:focus-visible { outline: 3px solid #2675a9; outline-offset: 2px }
.lieux-photo .lieux-suivante { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: flex-end; padding: .15em .45em; color: #405563; background: transparent; border: 0; font: 600 1.1rem Georgia, serif }
.lieux-affiche .lieux-logo {
  position: absolute; z-index: 1; left: 0; bottom: 0;
  width: max(44px, 8cqw); height: max(44px, 8cqw); padding: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.lieux-affiche .lieux-logo span {
  display: block; width: clamp(.94rem, 5.3cqw, 1.65rem); aspect-ratio: 1;
  margin: 0 0 1.4cqw 1.8cqw; background: #385260; mix-blend-mode: multiply;
  mask: url("/outils/logo-mark.png") center / contain no-repeat;
  -webkit-mask: url("/outils/logo-mark.png") center / contain no-repeat;
}
.lieux-affiche .lieux-logo:focus-visible { outline-offset: -3px }
.lieux-plaques {
  position: absolute; z-index: 2; left: 30%; top: 49.3%; width: 42%; height: 24.2%;
  display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1.1cqw;
}
.lieux-plaques button {
  position: relative; box-sizing: border-box; min-width: 0; min-height: 0;
  display: grid; place-items: center; padding: 0 12%; margin: 0;
  color: #3b3023; font: 650 clamp(.77rem, 3.9cqw, 1.22rem)/1 Georgia, serif;
  letter-spacing: .09em; text-shadow: 0 1px #fff3;
  background: repeating-linear-gradient(2deg, #fff1 0 1px, transparent 1px 4px),
              linear-gradient(110deg, #b9a382 0%, #e2d1ad 18%, #e6d7ba 48%, #ccb895 77%, #af9977);
  border: 1px solid; border-color: #e8dbbe #8f7658 #6f593f #c5ae88; border-radius: 1px;
  box-shadow: inset 0 1px #fff6, inset 0 -1px #725a3d55, 0 2px #8a7456, 1px 4px 4px #39271182;
}
.lieux-plaques button::before, .lieux-plaques button::after {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: clamp(2px, .95cqw, 5px); aspect-ratio: 1; content: ""; border-radius: 50%;
  background: linear-gradient(140deg, transparent 32%, #655640 45% 58%, transparent 66%),
              radial-gradient(at 35% 24%, #fff6d0, #aa9878 48%, #776145 88%);
  box-shadow: 0 1px 1px #4b39287d;
}
.lieux-plaques button::before { left: 5% }
.lieux-plaques button::after { right: 5% }
.lieux-plaques button[aria-pressed="true"] { color: #193643; background-color: #e8daba; box-shadow: inset 0 2px 5px #fff9, 0 2px #877458, 1px 4px 4px #39271182 }
.td .lieux-scene figcaption { padding: .7rem .15rem 0; font: inherit; font-size: .9rem; line-height: 1.45 }
.lieux-scene figcaption button { display: block; min-height: 2rem; margin: .3rem 0 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; background: none; color: inherit; border: 0 }
@media (prefers-reduced-motion: reduce) {
  .lieux-reflet::before, .lieux-reflet::after, .lieux-liane, .lieux-photo::after { animation: none }
  .lieux-reflet { transition: none }
}
/* Le cadre est ancré en haut. La légende réserve sa hauteur selon les textes
   réellement affichés, à la largeur et au corps de police du visiteur. */
.td .lieux-hero {
  align-items: start;
}

.lieux-scene[data-ready] figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.lieux-scene[data-ready] .lieux-lecture,
.lieux-scene[data-ready] .lieux-mesure {
  grid-area: 1 / 1;
  align-self: start;
}

.lieux-mesure {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.lieux-scene[data-ready] .lieux-pause {
  grid-area: 2 / 1;
  justify-self: start;
}

.lieux-scene[data-ready] figcaption .lieux-pause[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}
html[data-lect-anim="reduites"] .lieux-reflet::before,
html[data-lect-anim="reduites"] .lieux-reflet::after,
html[data-lect-anim="reduites"] .lieux-liane,
html[data-lect-anim="reduites"] .lieux-photo::after { animation: none }
html[data-lect-anim="reduites"] .lieux-reflet { transition: none }

/* Maintenir la signature sous le texte dans les cadres les plus étroits. */
@container (max-width: 235px) {
  .lieux-affiche { gap: .12em; padding: 1cqw 1.05cqw 8.8cqw }
  .lieux-affiche strong { font-size: 6.4cqw }
  .lieux-affiche [data-expansion] { font-size: .61rem }
}