/*! * Proxicom Motion v1.0 — « La maison de l'image » * Système d'animations inspiré de l'appareil photo : * mise au point, diaphragme, déclencheur, flash, développement. * CSS pur + proxicom-motion.js (aucune dépendance). * * Niveaux (attribut posé par proxicom-motion.js sur ) : * data-motion="full" → toutes les animations * data-motion="subtle" → confirmations d'action et transitions essentielles * data-motion="none" → aucune animation * prefers-reduced-motion force "none" ; le mode économie de data plafonne à "subtle". */ :root{--pm-orange:#ef7f1a;--pm-orange-fonce:#b95500;--pm-anthracite:#3c3c3b;--pm-papier:#f7f4ef;--pm-squelette:#efeae3;--pm-squelette-reflet:#ffffffa6;--pm-rapide:.16s;--pm-normal:.26s;--pm-lent:.6s;--pm-mise-au-point:cubic-bezier(.2, .8, .2, 1);--pm-ressort:cubic-bezier(.34, 1.45, .64, 1);--pm-sortie:cubic-bezier(.4, 0, 1, 1)}.pm-logo-arcs,.pm-logo-camera,.pm-viseur-arc{transform-box:fill-box;transform-origin:50%}.pm-logo-arcs{transform-box:view-box;transform-origin:50%}html[data-motion=full] .pm-logo.pm-joue .pm-logo-arcs{animation:pm-arcs-point .95s var(--pm-mise-au-point) both}html[data-motion=full] .pm-logo.pm-joue .pm-logo-camera{animation:pm-apparition-camera .42s var(--pm-ressort) .52s both}html[data-motion=subtle] .pm-logo.pm-joue .pm-logo-arcs{animation:pm-fondu var(--pm-normal) ease-out both}@keyframes pm-arcs-point{0%{opacity:0;transform:rotate(-140deg)scale(1.3)}55%{opacity:1;transform:rotate(10deg)scale(.95)}78%{transform:rotate(-3deg)scale(1.02)}to{opacity:1;transform:rotate(0)scale(1)}}@keyframes pm-apparition-camera{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes pm-fondu{0%{opacity:0}to{opacity:1}}.pm-diaphragme{color:var(--pm-orange);display:inline-block}.pm-diaphragme-lames,.pm-diaphragme-ouverture{transform-box:view-box;transform-origin:50%}html[data-motion=full] .pm-diaphragme-lames,html[data-motion=subtle] .pm-diaphragme-lames{animation:1.6s linear infinite pm-tourne}html[data-motion=full] .pm-diaphragme-ouverture,html[data-motion=subtle] .pm-diaphragme-ouverture{animation:.8s ease-in-out infinite alternate pm-respire}html[data-motion=none] .pm-diaphragme{opacity:.7}@keyframes pm-tourne{to{transform:rotate(360deg)}}@keyframes pm-respire{0%{transform:rotate(0)scale(.55)}to{transform:rotate(30deg)scale(1)}}.pm-squelette{background:var(--pm-squelette);border-radius:12px;position:relative;overflow:hidden}.pm-squelette:after{content:"";background:linear-gradient(100deg, transparent 20%, var(--pm-squelette-reflet) 50%, transparent 80%);position:absolute;inset:0;transform:translate(-100%)}html[data-motion=full] .pm-squelette:after,html[data-motion=subtle] .pm-squelette:after{animation:1.4s ease-in-out infinite pm-reflet}@keyframes pm-reflet{to{transform:translate(100%)}}.pm-mise-au-point{position:relative}.pm-mise-au-point .pm-viseur{pointer-events:none;position:absolute;inset:0}html[data-motion=full] .pm-mise-au-point.pm-joue .pm-sujet{animation:pm-net 1s var(--pm-mise-au-point) both}html[data-motion=full] .pm-mise-au-point.pm-joue .pm-viseur{animation:pm-viseur 1s var(--pm-mise-au-point) both}html[data-motion=full] .pm-mise-au-point.pm-joue .pm-viseur-point{animation:.38s ease-out .9s both pm-confirmation}html[data-motion=subtle] .pm-mise-au-point.pm-joue .pm-sujet,html[data-motion=subtle] .pm-mise-au-point.pm-joue .pm-viseur{animation:pm-fondu var(--pm-lent) ease-out both}@keyframes pm-net{0%{filter:blur(12px);opacity:.4;transform:scale(1.06)}60%{filter:blur(2px);opacity:1}to{filter:blur();opacity:1;transform:scale(1)}}@keyframes pm-viseur{0%{opacity:0;transform:scale(1.35)rotate(-20deg)}70%{opacity:1;transform:scale(.97)rotate(2deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes pm-confirmation{0%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}.pm-flash{opacity:0;pointer-events:none;border-radius:inherit;z-index:2;background:#fff;position:absolute;inset:0}.pm-vol{z-index:9999;pointer-events:none;transform-origin:50%;will-change:transform, opacity;border-radius:14px;position:fixed;overflow:hidden;box-shadow:0 10px 30px #14141440}.pm-compteur{display:inline-block}.pm-ajoute{transition:background-color var(--pm-normal) ease}.pm-developpe{--p:0;position:relative;overflow:hidden}.pm-developpe .pm-photo{filter:saturate(var(--p)) blur(calc((1 - var(--p)) * 3px));transition:filter var(--pm-normal) linear}.pm-developpe:after{content:"";background:var(--pm-papier);opacity:calc(1 - var(--p));transition:opacity var(--pm-normal) linear;pointer-events:none;position:absolute;inset:0}.pm-developpe-barre{background:var(--pm-orange);transform-origin:0;height:4px;transform:scaleX(var(--p));transition:transform var(--pm-normal) linear, opacity var(--pm-normal) ease;z-index:1;position:absolute;bottom:0;left:0;right:0}.pm-developpe.pm-fini .pm-developpe-barre{opacity:0}.pm-developpe .pm-tampon{opacity:0;z-index:1;transform:scale(.5)}.pm-developpe.pm-fini .pm-tampon{opacity:1;transform:scale(1)}html[data-motion=full] .pm-developpe.pm-fini .pm-tampon,html[data-motion=subtle] .pm-developpe.pm-fini .pm-tampon{transition:transform .32s var(--pm-ressort), opacity var(--pm-rapide) ease}.pm-developpe.pm-erreur .pm-developpe-barre{background:#b3261e}html[data-motion=none] .pm-developpe .pm-photo{filter:none;transition:none}html[data-motion=none] .pm-developpe:after{opacity:0}html[data-motion=none] .pm-developpe-barre{transition:none}.pm-flou .pm-photo{filter:blur(1.5px)}html[data-motion=full] .pm-flou .pm-photo,html[data-motion=subtle] .pm-flou .pm-photo{animation:.9s ease-in-out both pm-perte-nettete}@keyframes pm-perte-nettete{0%{filter:blur()}45%{filter:blur(3.5px)}to{filter:blur(1.5px)}}.pm-bulle{z-index:9999;pointer-events:none;width:28px;height:28px;color:var(--pm-orange);margin:-14px 0 0 -14px;position:fixed}html[data-motion=full] .pm-reflexion .pm-logo-arcs,html[data-motion=subtle] .pm-reflexion .pm-logo-arcs{animation:pm-tourne 1.3s var(--pm-mise-au-point) infinite}html.pm-pret[data-motion=full] .pm-apparait:not(.pm-vu){opacity:0;transform:translateY(14px)}html.pm-pret[data-motion=full] .pm-apparait.pm-vu{opacity:1;transition:opacity .48s var(--pm-mise-au-point) calc(var(--pm-i,0) * 70ms), transform .48s var(--pm-mise-au-point) calc(var(--pm-i,0) * 70ms);transform:none}html.pm-obturateur::view-transition-old(root){mix-blend-mode:normal;animation:none}html.pm-obturateur::view-transition-new(root){mix-blend-mode:normal;animation:none}html.pm-obturateur::view-transition-new(root){z-index:2}::view-transition-group(pm-photo-produit){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}@media (prefers-reduced-motion:reduce){.pm-logo-arcs,.pm-logo-camera,.pm-sujet,.pm-viseur,.pm-viseur-point,.pm-diaphragme-lames,.pm-diaphragme-ouverture,.pm-squelette:after,.pm-flou .pm-photo,.pm-apparait{transition:none!important;animation:none!important}.pm-apparait{opacity:1!important;transform:none!important}}