/* Transforms individuels : le transform du défilement reste intact. */
[data-photo-parallax="image"] { translate: var(--photo-x, 0px) var(--photo-y, 0px); scale: var(--photo-scale, 1); }
[data-photo-parallax="background"] { translate: var(--photo-x, 0px) var(--photo-y, 0px); scale: var(--photo-scale, 1); }
[data-photo-parallax="before"]::before { translate: var(--photo-x, 0px) var(--photo-y, 0px); scale: var(--photo-scale, 1); }
/* Retour Tex 05/09 : « une fois activé, ça peut pas être plus discret ? »
   Le bouton occupait le coin haut droit, juste sous l'en-tête, et passait
   devant le titre de la section. Il descend en bas de l'écran, s'écrit en
   petit, et s'efface tout seul : après activation, ou après quelques secondes
   si personne n'y touche. iOS impose un geste pour autoriser le capteur, donc
   le bouton ne peut pas disparaître complètement avant ce geste, mais il n'a
   aucune raison de rester une étiquette permanente. */
.photo-motion-control {
  position: fixed; z-index: 59; bottom: max(14px, env(safe-area-inset-bottom)); right: 12px;
  max-width: calc(100vw - 24px); display: grid; justify-items: end; gap: 4px;
  opacity: .55; transition: opacity .45s ease, transform .45s ease;
}
.photo-motion-control:focus-within { opacity: 1; }
/* Effacement doux : le bouton s'en va sans faire sauter la mise en page. */
.photo-motion-control[data-faded="true"] { opacity: 0; transform: translateY(6px); pointer-events: none; }
.photo-motion-control[hidden] { display: none; }
/* Le bouton était posé PAR-DESSUS le texte de la dernière scène : mesuré, il
   recouvrait 17 px sur 90 de sa boîte. Un texte qui passe derrière un bouton
   est un défaut de placement, pas de contraste. Deux gestes : le bouton est
   opaque (il porte sa propre lisibilité, son libellé tient 11,5:1), et il
   s'efface tant que les scènes de la section 2 sont à l'écran, comme il le
   fait déjà au-dessus du guide et du footer. Aucune position ne le dégageait :
   le bloc de texte occupe toute la largeur et toute la hauteur utile. */
.photo-motion-button { min-height: 30px; border: 1px solid rgba(242,239,232,.18); border-radius: 999px; padding: 5px 11px; background: #0b0c0d; color: rgba(242,239,232,.82); font: 500 .6875rem/1.25 -apple-system,BlinkMacSystemFont,system-ui,sans-serif; cursor: pointer; }
.photo-motion-button:focus-visible { outline: 2px solid #f2efe8; outline-offset: 3px; }
.photo-motion-button:disabled { cursor: default; }
.photo-motion-status { margin: 0; max-width: 220px; border-radius: 6px; padding: 3px 7px; background: rgba(3,3,3,.92); color: #f2efe8; font: 600 .7rem/1.35 -apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
.photo-motion-status:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-photo-parallax="image"], [data-photo-parallax="background"], [data-photo-parallax="before"]::before { translate: none !important; scale: none !important; }
}
.photo-motion-control[data-sensor-state="active"] .photo-motion-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.photo-parallax-frame { position: absolute; inset: 0; z-index: -2; overflow: clip; pointer-events: none; }
@media (max-width: 800px) { .photo-parallax-frame { position: relative; inset: auto; width: 100%; z-index: auto; } }