/* Les deux calques héritent du cadrage de la photographie. Le premier suit le
   détail vivant, le second suit l’objet choisi. Ils servent aussi de repli
   lorsque le navigateur ne dispose pas d’un contexte graphique accéléré. */
.pr-scene[data-atelier] { align-items:start; }
.pr-scene[data-atelier] .pr-photo { aspect-ratio:3/2; }
.pr-scene[data-atelier] .pr-image, .pr-scene[data-atelier] .at-rendu {
  position:absolute; display:block; inset:0; width:100%; height:100%; object-fit:fill;
}
.pr-scene[data-atelier] .at-rendu {pointer-events:none;}
.pr-scene[data-atelier] .pr-marque {z-index:1;}
.pr-scene[data-atelier] .pr-photo [data-cible] {z-index:2;border-radius:50%;}
.pr-scene[data-atelier] .pr-photo [data-son] {z-index:3;}
.pr-scene[data-atelier] .pr-panneaux {display:grid;grid-template-columns:minmax(0,1fr);}
.pr-scene[data-atelier] .pr-panneaux>[data-phase] {grid-area:1/1;min-width:0;overflow-wrap:anywhere;}
.pr-scene[data-atelier] [data-retour-reponse][hidden] {display:none!important;}
.pr-scene[data-atelier] .pr-contenu button,.pr-scene[data-atelier] .pr-contenu a {
  max-width:100%;min-height:44px;vertical-align:middle;
}
.pr-scene[data-atelier] [data-phase] :is(h3,h4)[tabindex="-1"]:focus {outline:none;}
.pr-scene[data-atelier] .at-detail,.pr-scene[data-atelier] .at-geste {
  position:absolute;inset:0;pointer-events:none;background:var(--at-image) center/100% 100% no-repeat;
}
.pr-scene[data-atelier] .at-detail {
  mask-image:radial-gradient(ellipse var(--lw,12%) var(--lh,16%) at var(--lx,50%) var(--ly,20%),#000 42%,transparent 99%);
  transform-origin:var(--lx) var(--ly);
  animation:at-feuillage 2.4s ease-in-out -.65s alternate infinite;
}
@keyframes at-feuillage {from{transform:translate(-.38%,-.14%) rotate(-1.5deg)}to{transform:translate(.65%,.3%) rotate(2.2deg)}}
@keyframes at-tissu {from{transform:skewX(-1.5deg) scaleX(.98)}to{transform:skewX(1.8deg) scaleX(1.03)}}
@keyframes at-onde {from{transform:scaleY(.965) translateX(-.32%);filter:brightness(.97)}to{transform:scaleY(1.035) translateX(.4%);filter:brightness(1.08)}}
@keyframes at-balancier {from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes at-clair {from{filter:brightness(.90)}to{filter:brightness(1.12)}}
@keyframes at-air {from{opacity:.08;transform:translate(-.5%,.85%)}55%{opacity:1}to{opacity:.15;transform:translate(.65%,-1.3%)}}
@keyframes at-nuage {from{transform:translateX(-1%)}to{transform:translateX(1.3%)}}
.pr-scene[data-motion="cloth"] .at-detail {animation-name:at-tissu;}
.pr-scene[data-motion="water"] .at-detail {animation-name:at-onde;}
.pr-scene[data-motion="pendulum"] .at-detail,.pr-scene[data-motion="wheel"] .at-detail {animation-name:at-balancier;}
.pr-scene[data-motion="light"] .at-detail {animation-name:at-clair;}
.pr-scene[data-motion="steam"] .at-detail {animation-name:at-air;}
.pr-scene[data-motion="cloud"] .at-detail {animation-name:at-nuage;animation-duration:4s;}
.pr-scene[data-atelier] .at-geste {
  mask-image:radial-gradient(ellipse 17% 21% at var(--ax,50%) var(--ay,50%),#000 30%,transparent 98%);
  opacity:0;transform-origin:var(--ax) var(--ay);
}
@media(prefers-reduced-motion:reduce) {
  .pr-scene[data-atelier] :is(.at-detail,.at-geste,.at-rendu) {display:none;animation:none;}
}
html[data-lect-anim="reduites"] .pr-scene[data-atelier] :is(.at-detail,.at-geste,.at-rendu) {display:none;animation:none;}
@media(max-width:720px) {
  .pr-scene[data-atelier] {gap:.75rem}
  .pr-scene[data-atelier] .pr-contenu h2 {font-size:clamp(1.3rem,5vw,1.8rem)}
}
.pr-scene[data-atelier] :is(.at-rendu,.at-detail,.at-geste)[hidden] { display:none!important; }
.pr-scene[data-atelier] .at-imprime {position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;pointer-events:none;}
.pr-scene[data-atelier] .at-compose .pr-marque {visibility:hidden;}
.pr-scene[data-atelier] .pr-marque[data-encre="gris"] {background:#50585b;}
.pr-scene[data-atelier] .pr-marque[data-encre="bleu"] {background:#27475e;}