.pr-scene {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem,3vw,2.5rem);
  margin: clamp(1.25rem,3vw,2.5rem) auto;
  padding: clamp(.8rem,2vw,1.6rem);
  border: 1px solid var(--line,#9d927d);
  border-radius: 1rem;
  color: var(--ink,inherit);
  text-align: start;
}
.pr-scene .pr-photo {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 3 / 2;
  border-radius: .6rem; background: #263b3d;
}
.pr-scene .pr-image { display:block; width:100%; height:100%; object-fit:cover; }
.pr-scene :is(.pr-detail,.pr-objet) > svg {display:block;width:100%;height:100%}
.pr-scene .pr-plan {
  position:absolute; inset:0; --agrandissement:1;
  transform:scale(var(--agrandissement));
  transform-origin:var(--focus-x,50%) var(--focus-y,50%);
  transition:transform .65s ease,transform-origin .65s ease;
}
.pr-scene[data-lecture="1"] .pr-plan {--agrandissement:1.055}
.pr-scene[data-lecture="2"] .pr-plan {--agrandissement:1.085}
.pr-scene[data-lecture="3"] .pr-plan {--agrandissement:1}
.pr-scene .pr-plan::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 44% 65% at var(--focus-x,50%) var(--focus-y,50%),transparent 20%,rgb(16 25 31 / 28%));
  opacity:0; transition:opacity .55s ease;
}
.pr-scene[data-lecture="1"] .pr-plan::after, .pr-scene[data-lecture="2"] .pr-plan::after { opacity:1; }
.pr-scene .pr-detail {
  position:absolute; inset:0; pointer-events:none; background:var(--image) center/cover;
  mask-image:radial-gradient(ellipse var(--w,10%) var(--h,12%) at var(--x,45%) var(--y,45%),black 35%,transparent 95%);
  transform-origin:var(--x) var(--y); animation:pr-vie 3.6s ease-in-out -1.4s infinite alternate;
}
@keyframes pr-vie { from {transform:scale(1.004) rotate(-.3deg);filter:brightness(.96)} to {transform:scale(1.024) rotate(.65deg);filter:brightness(1.09)} }
.pr-scene .pr-marque {
  position:absolute; left:var(--x); top:var(--y); width:var(--largeur); aspect-ratio:231/195;
  transform:translate(-50%,-50%) var(--plan); background:linear-gradient(155deg,#d9c397,#ad9065);
  mask:url("/outils/logo-mark.png") center/contain no-repeat; mix-blend-mode:screen; opacity:.65; pointer-events:none;
}
.pr-scene .pr-marque--encre {mix-blend-mode:multiply;background:#354e57}
.pr-scene[data-trois-gestes] .pr-detail {animation-name:pr-souffle}
@keyframes pr-souffle {
  from {transform:translate(-.12%,.12%) rotate(-.55deg);filter:brightness(.95)}
  to {transform:translate(.25%,-.25%) rotate(1.05deg);filter:brightness(1.1)}
}
.pr-scene[data-trois-gestes] [data-phase^="3-"] p {
  border-inline-start:2px solid var(--accent,#aa8758);
  padding-inline-start:.85em;
}
.pr-objet {
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:var(--image) center/cover;
  mask-image:radial-gradient(ellipse 14% 19% at var(--focus-x) var(--focus-y),#000 18%,transparent 93%);
  transform-origin:var(--focus-x) var(--focus-y);
}
.pr-scene[data-lecture="2"] .pr-objet {
  animation:pr-geste .85s ease-out both;
  --lever:-.45%; --tourner:.45deg;
}
.pr-scene[data-matiere="papier"] .pr-objet,
.pr-scene[data-matiere="tissu"] .pr-objet {--lever:-1.15%;--tourner:-1.5deg}
.pr-scene[data-matiere="reliure"] .pr-objet {--lever:-.85%;--tourner:1.1deg}
@keyframes pr-geste {
  0%,100% {opacity:0;transform:none}
  40% {opacity:1;transform:translateY(var(--lever)) rotate(var(--tourner));filter:brightness(1.09)}
}
.pr-scene button {font:inherit;cursor:pointer}
.pr-scene .pr-photo [data-cible] {
  position:absolute; z-index:1; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:max(15%,44px); height:max(23%,44px); padding:0; border:0; border-radius:.65rem;
  background:transparent; color:transparent;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
}
.pr-scene .pr-photo [data-cible]:focus-visible { outline: none; }
.pr-scene .pr-photo [data-cible]:focus-visible::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: .85rem; height: .85rem;
  transform: translate(-50%, -50%);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #26343c;
  pointer-events: none;
}
@media (forced-colors: active) {
  .pr-scene .pr-photo [data-cible]:focus-visible::after { border-color: Highlight; }
}
.pr-scene .pr-photo [data-son] {
  position:absolute; right:.35rem; bottom:.35rem; z-index:2; width:44px; height:44px; padding:10px;
  display:grid; place-items:center; border:0; border-radius:50%; background:#12282bdc;color:#fff;
}
.pr-scene [data-son] svg {width:19px;height:19px}
.pr-scene [data-son][aria-pressed="true"] .pr-son-off,.pr-scene [data-son][aria-pressed="false"] .pr-son-on {display:none}
.pr-scene :focus-visible {outline:2px solid var(--accent,#b47c2c);outline-offset:3px}
.pr-scene .pr-contenu {min-width:0}
.pr-scene .pr-contenu h2 {margin:0 0 .7rem; font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1.12}
.pr-scene .pr-contenu h3 {margin:0 0 .5rem; font-size:1.1rem;line-height:1.3}
.pr-scene .pr-contenu p {margin:.45rem 0 1rem;line-height:1.55}
.pr-scene .pr-contenu button, .pr-scene .pr-contenu a {display:inline-block; margin:.15rem .25rem .25rem 0;min-height:40px;box-sizing:border-box;align-content:center}
.pr-scene .pr-contenu button {
  border:1px solid currentColor; background:transparent;color:inherit;
  border-radius:.5rem;padding:.42rem .75rem;line-height:1.3;text-align:start;
}
.pr-scene .pr-contenu button:is(:hover,:focus-visible) {background:var(--bg-alt,#b6945920)}
.pr-scene .pr-panneaux { display:grid; grid-template-columns:minmax(0,1fr); }
.pr-scene .pr-panneaux > [data-phase] { grid-area:1 / 1; align-self:start; min-width:0; }
.pr-scene .pr-panneaux > [data-phase][hidden] { display:block!important; visibility:hidden; pointer-events:none; }
@media(max-width:720px) {
  .pr-scene {grid-template-columns:1fr;gap:.8rem}
  .pr-scene[data-lecture="1"] .pr-plan {--agrandissement:1.025}
  .pr-scene[data-lecture="2"] .pr-plan {--agrandissement:1.04}
}
@media(prefers-reduced-motion:reduce) {
  .pr-scene .pr-detail,.pr-scene .pr-plan,.pr-scene .pr-plan::after {animation:none;transition:none;transform:none}
}
html[data-lect-anim="reduites"] .pr-scene :is(.pr-detail,.pr-plan,.pr-plan::after) {animation:none;transition:none;transform:none}
html[data-lect-anim="reduites"] .pr-scene .pr-plan::after {transition:none}
@media(prefers-reduced-motion:reduce) {
  .pr-scene[data-trois-gestes] :is(.pr-detail,.pr-objet) {animation:none}
}
html[data-lect-anim="reduites"] .pr-scene[data-trois-gestes] :is(.pr-detail,.pr-objet) {animation:none}