1(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,32181,71164,38544,e=>{"use strict";let t,i,a,n=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"],s=new Set([...n,"pathRotation"]),r=(e,t,i)=>i>t?t:i<e?e:i,o={test:e=>"number"==typeof e,parse:parseFloat,transform:e=>e},l={...o,transform:e=>r(0,1,e)},u={...o,default:1},d=e=>Math.round(1e5*e)/1e5,c=/-?(?:\d+(?:\.\d+)?|\.\d+)/gu,p=/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu,h=(e,t)=>i=>!!("string"==typeof i&&p.test(i)&&i.startsWith(e)||t&&null!=i&&Object.prototype.hasOwnProperty.call(i,t)),m=(e,t,i)=>a=>{if("string"!=typeof a)return a;let[n,s,r,o]=a.match(c);return{[e]:parseFloat(n),[t]:parseFloat(s),[i]:parseFloat(r),alpha:void 0!==o?parseFloat(o):1}},f={...o,transform:e=>Math.round(r(0,255,e))},g={test:h("rgb","red"),parse:m("red","green","blue"),transform:({red:e,green:t,blue:i,alpha:a=1})=>"rgba("+f.transform(e)+", "+f.transform(t)+", "+f.transform(i)+", "+d(l.transform(a))+")"},v={test:h("#"),parse:function(e){let t="",i="",a="",n="";return e.length>5?(t=e.substring(1,3),i=e.substring(3,5),a=e.substring(5,7),n=e.substring(7,9)):(t=e.substring(1,2),i=e.substring(2,3),a=e.substring(3,4),n=e.substring(4,5),t+=t,i+=i,a+=a,n+=n),{red:parseInt(t,16),green:parseInt(i,16),blue:parseInt(a,16),alpha:n?parseInt(n,16)/255:1}},transform:g.transform},x=e=>({test:t=>"string"==typeof t&&t.endsWith(e)&&1===t.split(" ").length,parse:parseFloat,transform:t=>`${t}${e}`}),b=x("deg"),E=x("%"),y=x("px"),A=x("vh"),w=x("vw"),T={...E,parse:e=>E.parse(e)/100,transform:e=>E.transform(100*e)},S={test:h("hsl","hue"),parse:m("hue","saturation","lightness"),transform:({hue:e,saturation:t,lightness:i,alpha:a=1})=>"hsla("+Math.round(e)+", "+E.transform(d(t))+", "+E.transform(d(i))+", "+d(l.transform(a))+")"},R={test:e=>g.test(e)||v.test(e)||S.test(e),parse:e=>g.test(e)?g.parse(e):S.test(e)?S.parse(e):v.parse(e),transform:e=>"string"==typeof e?e:e.hasOwnProperty("red")?g.transform(e):S.transform(e),getAnimatableNone:e=>{let t=R.parse(e);return t.alpha=0,R.transform(t)}},L=/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu,q="number",I="color",N=/var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;function C(e){let t=e.toString(),i=[],a={color:[],number:[],var:[]},n=[],s=0,r=t.replace(N,e=>(R.test(e)?(a.color.push(s),n.push(I),i.push(R.parse(e))):e.startsWith("var(")?(a.var.push(s),n.push("var"),i.push(e)):(a.number.push(s),n.push(q),i.push(parseFloat(e))),++s,"${}")).split("${}");return{values:i,split:r,indexes:a,types:n}}function U({split:e,types:t}){let i=e.length;return a=>{let n="";for(let s=0;s<i;s++)if(n+=e[s],void 0!==a[s]){let e=t[s];e===q?n+=d(a[s]):e===I?n+=R.transform(a[s]):n+=a[s]}return n}}let P={test:function(e){return isNaN(e)&&"string"==typeof e&&(e.match(c)?.length||0)+(e.match(L)?.length||0)>0},parse:function(e){return C(e).values},createTransformer:function(e){return U(C(e))},getAnimatableNone:function(e){let t=C(e);return U(t)(t.values.map((e,i)=>((e,t)=>"number"==typeof e?t?.trim().endsWith("/")?e:0:"number"==typeof e?0:R.test(e)?R.getAnimatableNone(e):e)(e,t.split[i])))}},O=new Set(["brightness","contrast","saturate","opacity"]);function M(e){let[t,i]=e.slice(0,-1).split("(");if("drop-shadow"===t)return e;let[a]=i.match(c)||[];if(!a)return e;let n=i.replace(a,""),s=+!!O.has(t);return a!==i&&(s*=100),t+"("+s+n+")"}let j=/\b([a-z-]*)\(.*?\)/gu,k={...P,getAnimatableNone:e=>{let t=e.match(j);return t?t.map(M).join(" "):e}},D={...P,getAnimatableNone:e=>{let t=P.parse(e);return P.createTransformer(e)(t.map(e=>"number"==typeof e?0:"object"==typeof e?{...e,alpha:1}:e))}},_={...o,transform:Math.round},V={borderWidth:y,borderTopWidth:y,borderRightWidth:y,borderBottomWidth:y,borderLeftWidth:y,borderRadius:y,borderTopLeftRadius:y,borderTopRightRadius:y,borderBottomRightRadius:y,borderBottomLeftRadius:y,width:y,maxWidth:y,height:y,maxHeight:y,top:y,right:y,bottom:y,left:y,inset:y,insetBlock:y,insetBlockStart:y,insetBlockEnd:y,insetInline:y,insetInlineStart:y,insetInlineEnd:y,padding:y,paddingTop:y,paddingRight:y,paddingBottom:y,paddingLeft:y,paddingBlock:y,paddingBlockStart:y,paddingBlockEnd:y,paddingInline:y,paddingInlineStart:y,paddingInlineEnd:y,margin:y,marginTop:y,marginRight:y,marginBottom:y,marginLeft:y,marginBlock:y,marginBlockStart:y,marginBlockEnd:y,marginInline:y,marginInlineStart:y,marginInlineEnd:y,fontSize:y,backgroundPositionX:y,backgroundPositionY:y,rotate:b,pathRotation:b,rotateX:b,rotateY:b,rotateZ:b,scale:u,scaleX:u,scaleY:u,scaleZ:u,skew:b,skewX:b,skewY:b,distance:y,translateX:y,translateY:y,translateZ:y,x:y,y:y,z:y,perspective:y,transformPerspective:y,opacity:l,originX:T,originY:T,originZ:y,zIndex:_,fillOpacity:l,strokeOpacity:l,numOctaves:_},B={...V,color:R,backgroundColor:R,outlineColor:R,fill:R,stroke:
1R,borderColor:R,borderTopColor:R,borderRightColor:R,borderBottomColor:R,borderLeftColor:R,filter:k,WebkitFilter:k,mask:D,WebkitMask:D},F=e=>B[e],H=()=>({translate:0,scale:1,origin:0,originPoint:0}),z=()=>({x:H(),y:H()}),G=()=>({min:0,max:0}),X=()=>({x:G(),y:G()}),W=e=>!!(e&&e.getVelocity),$=new Set(["width","height","top","left","right","bottom",...n]),Q=e=>t=>t.test(e),Y=[o,y,E,b,w,A,{test:e=>"auto"===e,parse:e=>e}],K=e=>Y.find(Q(e));var J=e.i(47167);let Z=()=>{},ee=()=>{};J.default;let et=e=>t=>"string"==typeof t&&t.startsWith(e),ei=et("--"),ea=et("var(--"),en=e=>!!ea(e)&&es.test(e.split("/*")[0].trim()),es=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;function er(e){return"string"==typeof e&&e.split("/*")[0].includes("var(--")}let eo=/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u,el=e=>180*e/Math.PI,eu=e=>ec(el(Math.atan2(e[1],e[0]))),ed={x:4,y:5,translateX:4,translateY:5,scaleX:0,scaleY:3,scale:e=>(Math.abs(e[0])+Math.abs(e[3]))/2,rotate:eu,rotateZ:eu,skewX:e=>el(Math.atan(e[1])),skewY:e=>el(Math.atan(e[2])),skew:e=>(Math.abs(e[1])+Math.abs(e[2]))/2},ec=e=>((e%=360)<0&&(e+=360),e),ep=e=>Math.sqrt(e[0]*e[0]+e[1]*e[1]),eh=e=>Math.sqrt(e[4]*e[4]+e[5]*e[5]),em={x:12,y:13,z:14,translateX:12,translateY:13,translateZ:14,scaleX:ep,scaleY:eh,scale:e=>(ep(e)+eh(e))/2,rotateX:e=>ec(el(Math.atan2(e[6],e[5]))),rotateY:e=>ec(el(Math.atan2(-e[2],e[0]))),rotateZ:eu,rotate:eu,skewX:e=>el(Math.atan(e[4])),skewY:e=>el(Math.atan(e[1])),skew:e=>(Math.abs(e[1])+Math.abs(e[4]))/2};function ef(e){return+!!e.includes("scale")}function eg(e,t){let i,a;if(!e||"none"===e)return ef(t);let n=e.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);if(n)i=em,a=n;else{let t=e.match(/^matrix\(([-\d.e\s,]+)\)$/u);i=ed,a=t}if(!a)return ef(t);let s=i[t],r=a[1].split(",").map(ev);return"function"==typeof s?s(r):r[s]}function ev(e){return parseFloat(e.trim())}let ex=e=>e===o||e===y,eb=new Set(["x","y","z"]),eE=n.filter(e=>!eb.has(e)),ey={width:({x:e},{paddingLeft:t="0",paddingRight:i="0",boxSizing:a})=>{let n=e.max-e.min;return"border-box"===a?n:n-parseFloat(t)-parseFloat(i)},height:({y:e},{paddingTop:t="0",paddingBottom:i="0",boxSizing:a})=>{let n=e.max-e.min;return"border-box"===a?n:n-parseFloat(t)-parseFloat(i)},top:(e,{top:t})=>parseFloat(t),left:(e,{left:t})=>parseFloat(t),bottom:({y:e},{top:t})=>parseFloat(t)+(e.max-e.min),right:({x:e},{left:t})=>parseFloat(t)+(e.max-e.min),x:(e,{transform:t})=>eg(t,"x"),y:(e,{transform:t})=>eg(t,"y")};ey.translateX=ey.x,ey.translateY=ey.y;let eA=e=>e,ew={},eT=["setup","read","resolveKeyframes","preUpdate","update","preRender","render","postRender"];function eS(e,t){let i=!1,a=!0,n={delta:0,timestamp:0,isProcessing:!1},s=()=>i=!0,r=eT.reduce((e,t)=>(e[t]=function(e){let t=new Set,i=new Set,a=!1,n=!1,s=new WeakSet,r={delta:0,timestamp:0,isProcessing:!1};function o(t){s.has(t)&&(l.schedule(t),e()),t(r)}let l={schedule:(e,n=!1,r=!1)=>{let o=r&&a?t:i;return n&&s.add(e),o.add(e),e},cancel:e=>{i.delete(e),s.delete(e)},process:e=>{if(r=e,a){n=!0;return}a=!0;let s=t;t=i,i=s,t.forEach(o),t.clear(),a=!1,n&&(n=!1,l.process(e))}};return l}(s),e),{}),{setup:o,read:l,resolveKeyframes:u,preUpdate:d,update:c,preRender:p,render:h,postRender:m}=r,f=()=>{let s=ew.useManualTiming,r=s?n.timestamp:performance.now();i=!1,s||(n.delta=a?1e3/60:Math.max(Math.min(r-n.timestamp,40),1)),n.timestamp=r,n.isProcessing=!0,o.process(n),l.process(n),u.process(n),d.process(n),c.process(n),p.process(n),h.process(n),m.process(n),n.isProcessing=!1,i&&t&&(a=!1,e(f))};return{schedule:eT.reduce((t,s)=>{let o=r[s];return t[s]=(t,s=!1,r=!1)=>(!i&&(i=!0,a=!0,n.isProcessing||e(f)),o.schedule(t,s,r)),t},{}),cancel:e=>{for(let t=0;t<eT.length;t++)r[eT[t]].cancel(e)},state:n,steps:r}}let{schedule:eR,cancel:eL,state:eq,steps:eI}=eS("u">typeof requestAnimationFrame?requestAnimationFrame:eA,!0),eN=new Set,eC=!1,eU=!1,eP=!1;function eO(){if(eU){let e=Array.from(eN).filter(e=>e.needsMeasurement),t=new Set(e.map(e=>e.element)),i=new Map;t.forEach(e=>{let t,a=(t=[],eE.forEach(i=>{let a=e.getValue(i);void 0!==a&&(t.push([i,a.get()]),a.set(+!!i.startsWith("scale")))}),t);a.length&&(i.set(e,a),e.render())}
1),e.forEach(e=>e.measureInitialState()),t.forEach(e=>{e.render();let t=i.get(e);t&&t.forEach(([t,i])=>{e.getValue(t)?.set(i)})}),e.forEach(e=>e.measureEndState()),e.forEach(e=>{void 0!==e.suspendedScrollY&&window.scrollTo(0,e.suspendedScrollY)})}eU=!1,eC=!1,eN.forEach(e=>e.complete(eP)),eN.clear()}function eM(){eN.forEach(e=>{e.readKeyframes(),e.needsMeasurement&&(eU=!0)})}class ej{constructor(e,t,i,a,n,s=!1){this.state="pending",this.isAsync=!1,this.needsMeasurement=!1,this.unresolvedKeyframes=[...e],this.onComplete=t,this.name=i,this.motionValue=a,this.element=n,this.isAsync=s}scheduleResolve(){this.state="scheduled",this.isAsync?(eN.add(this),eC||(eC=!0,eR.read(eM),eR.resolveKeyframes(eO))):(this.readKeyframes(),this.complete())}readKeyframes(){let{unresolvedKeyframes:e,name:t,element:i,motionValue:a}=this;if(null===e[0]){let n=a?.get(),s=e[e.length-1];if(void 0!==n)e[0]=n;else if(i&&t){let a=i.readValue(t,s);null!=a&&(e[0]=a)}void 0===e[0]&&(e[0]=s),a&&void 0===n&&a.set(e[0])}for(let t=1;t<e.length;t++)e[t]??(e[t]=e[t-1])}setFinalKeyframe(){}measureInitialState(){}renderEndStyles(){}measureEndState(){}complete(e=!1){this.state="complete",this.onComplete(this.unresolvedKeyframes,this.finalKeyframe,e),eN.delete(this)}cancel(){"scheduled"===this.state&&(eN.delete(this),this.state="pending")}resume(){"pending"===this.state&&this.scheduleResolve()}}let ek=new Set([k,D]);function eD(e,t){let i=F(e);return ek.has(i)||(i=P),i.getAnimatableNone?i.getAnimatableNone(t):void 0}let e_=new Set(["auto","none","0"]);class eV extends ej{constructor(e,t,i,a,n){super(e,t,i,a,n,!0)}readKeyframes(){let{unresolvedKeyframes:e,element:t,name:i}=this;if(!t||!t.current)return;super.readKeyframes();for(let i=0;i<e.length;i++){let a=e[i];if("string"==typeof a&&en(a=a.trim())){let n=function e(t,i,a=1){ee(`Max CSS variable fallback depth detected in property "${t}". This may indicate a circular fallback dependency.`);let[n,s]=function(e){let t=eo.exec(e);if(!t)return[,];let[,i,a,n]=t;return[`--${i??a}`,n]}(t);if(!n)return;let r=window.getComputedStyle(i).getPropertyValue(n);if(r){let e=r.trim();return/^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(e)?parseFloat(e):e}return en(s)?e(s,i,a+1):s}(a,t.current);void 0!==n&&(e[i]=n),i===e.length-1&&(this.finalKeyframe=a)}}if(this.resolveNoneKeyframes(),!$.has(i)||2!==e.length)return;let[a,n]=e,s=K(a),r=K(n);if(er(a)!==er(n)&&ey[i]){this.needsMeasurement=!0;return}if(s!==r)if(ex(s)&&ex(r))for(let t=0;t<e.length;t++){let i=e[t];"string"==typeof i&&(e[t]=parseFloat(i))}else ey[i]&&(this.needsMeasurement=!0)}resolveNoneKeyframes(){let{unresolvedKeyframes:e,name:t}=this,i=[];for(let t=0;t<e.length;t++)(null===e[t]||function(e){if("number"==typeof e)return 0===e;if(null===e)return!0;return"none"===e||"0"===e||/^0[^.\s]+$/u.test(e)}(e[t]))&&i.push(t);i.length&&function(e,t,i){let a,n=0;for(;n<e.length&&!a;){let t=e[n];"string"==typeof t&&!e_.has(t)&&C(t).values.length&&(a=e[n]),n++}if(a&&i)for(let n of t)e[n]=eD(i,a)}(e,i,t)}measureInitialState(){let{element:e,unresolvedKeyframes:t,name:i}=this;if(!e||!e.current)return;"height"===i&&(this.suspendedScrollY=window.pageYOffset),this.measuredOrigin=ey[i](e.measureViewportBox(),window.getComputedStyle(e.current)),t[0]=this.measuredOrigin;let a=t[t.length-1];void 0!==a&&e.getValue(i,a).jump(a,!1)}measureEndState(){let{element:e,name:t,unresolvedKeyframes:i}=this;if(!e||!e.current)return;let a=e.getValue(t);a&&a.jump(this.measuredOrigin,!1);let n=i.length-1,s=i[n];i[n]=ey[t](e.measureViewportBox(),window.getComputedStyle(e.current)),null!==s&&void 0===this.finalKeyframe&&(this.finalKeyframe=s),this.removedTransforms?.length&&this.removedTransforms.forEac
1h(([t,i])=>{e.getValue(t).set(i)}),this.resolveNoneKeyframes()}}let eB=e=>1e3*e;function eF(e,t){-1===e.indexOf(t)&&e.push(t)}function eH(e,t){let i=e.indexOf(t);i>-1&&e.splice(i,1)}class ez{constructor(){this.subscriptions=[]}add(e){return eF(this.subscriptions,e),()=>eH(this.subscriptions,e)}notify(e,t,i){let a=this.subscriptions.length;if(a)if(1===a)this.subscriptions[0](e,t,i);else for(let n=0;n<a;n++){let a=this.subscriptions[n];a&&a(e,t,i)}}getSize(){return this.subscriptions.length}clear(){this.subscriptions.length=0}}function eG(e,t,i){t.startsWith("--")?e.style.setProperty(t,i):e.style[t]=i}function eX(e){let t;return()=>(void 0===t&&(t=e()),t)}let eW={};function e$(e,t){let i=eX(e);return()=>eW[t]??i()}let eQ=e$(()=>void 0!==window.ScrollTimeline,"scrollTimeline"),eY=e=>null!==e;function eK(e,{repeat:t,repeatType:i="loop"},a,n=1){let s=e.filter(eY),r=n<0||t&&"loop"!==i&&t%2==1?0:s.length-1;return r&&void 0!==a?a:s[r]}class eJ{constructor(){this.updateFinished()}get finished(){return this._finished}updateFinished(){this._finished=new Promise(e=>{this.resolve=e})}notifyFinished(){this.resolve()}then(e,t){return this.finished.then(e,t)}}let eZ=e=>Array.isArray(e)&&"number"==typeof e[0],e0=e$(()=>{try{document.createElement("div").animate({opacity:0}
1,{easing:"linear(0, 1)"})}catch(e){return!1}return!0},"linearEasing"),e1=(e,t,i=10)=>{let a="",n=Math.max(Math.round(t/i),2);for(let t=0;t<n;t++)a+=Math.round(1e4*e(t/(n-1)))/1e4+", ";return`linear(${a.substring(0,a.length-2)})`},e4=([e,t,i,a])=>`cubic-bezier(${e}, ${t}, ${i}, ${a})`,e2={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:e4([0,.65,.55,1]),circOut:e4([.55,0,1,.45]),backIn:e4([.31,.01,.66,-.59]),backOut:e4([.33,1.53,.69,.99])};function e3(e){return"function"==typeof e&&"applyToOptions"in e}class e9 extends eJ{constructor(e){if(super(),this.finishedTime=null,this.isStopped=!1,this.manualStartTime=null,!e)return;const{element:t,name:i,keyframes:a,pseudoElement:n,allowFlatten:s=!1,finalKeyframe:r,onComplete:o}=e;this.isPseudoElement=!!n,this.allowFlatten=s,this.options=e,ee(e.type);const l=function({type:e,...t}){return e3(e)&&e0()?e.applyToOptions(t):(t.duration??(t.duration=300),t.ease??(t.ease="easeOut"),t)}(e);this.animation=function(e,t,i,{delay:a=0,duration:n=300,repeat:s=0,repeatType:r="loop",ease:o="easeOut",times:l}={},u){let d={[t]:i};l&&(d.offset=l);let c=function e(t,i){if(t)return"function"==typeof t?e0()?e1(t,i):"ease-out":eZ(t)?e4(t):Array.isArray(t)?t.map(t=>e(t,i)||e2.easeOut):e2[t]}(o,n);Array.isArray(c)&&(d.easing=c);let p={delay:a,duration:n,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:s+1,direction:"reverse"===r?"alternate":"normal"};return u&&(p.pseudoElement=u),e.animate(d,p)}(t,i,a,l,n),!1===l.autoplay&&this.animation.pause(),this.animation.onfinish=()=>{if(this.finishedTime=this.time,!n){let e=eK(a,this.options,r,this.speed);this.updateMotionValue&&this.updateMotionValue(e),eG(t,i,e),this.animation.cancel()}o?.(),this.notifyFinished()}}play(){this.isStopped||(this.manualStartTime=null,this.animation.play(),"finished"===this.state&&this.updateFinished())}pause(){this.animation.pause()}complete(){this.animation.finish?.()}cancel(){try{this.animation.cancel()}catch(e){}}stop(){if(this.isStopped)return;this.isStopped=!0;let{state:e}=this;"idle"!==e&&"finished"!==e&&(this.updateMotionValue?this.updateMotionValue():this.commitStyles(),this.isPseudoElement||this.cancel())}commitStyles(){let e=this.options?.element;!this.isPseudoElement&&e?.isConnected&&this.animation.commitStyles?.()}get duration(){return Number(this.animation.effect?.getComputedTiming?.().duration||0)/1e3}get iterationDuration(){let{delay:e=0}=this.options||{};return this.duration+e/1e3}get time(){return(Number(this.animation.currentTime)||0)/1e3}set time(e){let t=null!==this.finishedTime;this.manualStartTime=null,this.finishedTime=null,this.animation.currentTime=eB(e),t&&this.animation.pause()}get speed(){return this.animation.playbackRate}set speed(e){e<0&&(this.finishedTime=null),this.animation.playbackRate=e}get state(){return null!==this.finishedTime?"finished":this.animation.playState}get startTime(){return this.manualStartTime??Number(this.animation.startTime)}set startTime(e){this.manualStartTime=this.animation.startTime=e}attachTimeline({timeline:e,rangeStart:t,rangeEnd:i,observe:a}){return(this.allowFlatten&&this.animation.effect?.updateTiming({easing:"linear"}),this.animation.onfinish=null,e&&eQ())?(this.animation.timeline=e,t&&(this.animation.rangeStart=t),i&&(this.animation.rangeEnd=i),eA):a(this)}}let e5=new Set(["opacity","clipPath","filter","transform","backgroundColor"]),{schedule:e6}=eS(queueMicrotask,!1);function e8(){t=void 0}let e7={now:()=>(void 0===t&&e7.set(eq.isProcessing||ew.useManualTiming?eq.timestamp:performance.now()),t),set:e=>{t=e,queueMicrotask(e8)}},te=(e,t)=>t?1e3/t*e:0,tt;class ti{constructor(e,t={}){this.canTrackVelocity=null,this.events={},this.updateAndNotify=e=>{let t=e7.now();if(this.updatedAt!==t&&this.setPrevFrameValue(),this.prev=this.current,this.setCurrent(e),this.current!==this.prev&&(this.events.change?.notify(this.current),this.dependents))for(let e of this.dependents)e.dirty()},this.hasAnimated=!1,this.setCurrent(e),this.owner=t.owner}setCurrent(e){this.current=e,this.updatedAt=e7.now(),null===this.canTrackVelocity&&void 0!==e&&(this.canTrackVelocity=!isNaN(parseFloat(this.current)))}setPrevFrameValue(e=this.current){this.prevFrameValue=e,this.prevUpdatedAt=this.updatedAt}onChange(e){return this.on("change",e)}on(e,t){this.events[e]||(this.events[e]=new ez);let i=this.events[e].add(t);return"change"===e?()=>{i(),eR.read(()=>{this.events.change.getSize()||this.stop()})}:i}clearListeners(){for(let e in this.events)this.events[e].clear()}attach(e,t){this.passiveEffect=e,this.stopPassiveEffect=t}set(e){this.passiveEffect?this.passiveEffect(e,this.updateAndNotify):this.updateAndNotify(e)}setWithVelocity(e,t,i){this.set(t),this.prev=void 0,this.prevFrameValue=e,this.prevUpdatedAt=this.updatedAt-i}jump(e,t=!0){this.updateAndNotify(e),this.prev=e,this.prevUpdatedAt=this.prevFrameValue=void 0,t&&this.stop(),this.stopPassiveEffect&&this.stopPassiveEffect()}dirty(){this.events.change?.notify(this.current)}addDependent(e){this.dependents||(this.dependents=new Set),this.dependents.add(e)}removeDependent(e){this.dependents&&this.dependents.delete(e)}get(){return tt&&tt.push(this),this.current}getPrevious(){return this.prev}getVelocity(){let e=e7.now();if(!this.canTrackVelocity||void 0===this.prevFrameValue||e-this.updatedAt>30)return 0;let t=Math.min(this.updatedAt-this.prevUpdatedAt,30);return te(parseFloat(this.current)-parseFloat(this.prevFrameValue),t)}start(e){return this.stop(),new Promise(t=>{this.hasAnimated=!0,this.animation=e(t),this.events.animationStart&&this.events.animationStart.notify()}).then(()=>{this.events.animationComplete&&this.events.animationComplete.notify(),this.clearAnimation()})}stop(){this.animation&&(this.animation.stop(),this.events.animationCancel&&this.events.animationCancel.notify()),this.clearAnimation()}isAnimating(){return!!this.animation}clearAnimation(){delete this.animation}destroy(){this.dependents?.clear(),this.events.destroy?.notify(),this.clearListeners(),this.stop(),this.stopPassiveEffect&&this.stopPassiveEffect()}}function ta(e,t){return new ti(e,t)}let tn=[...Y,R,P],ts=new WeakMap;function tr(e){return null!==e&&"object"==typeof e&&"function"==typeof e.start}function to(e){return"string"==typeof e||Array.isArray(e)}let tl=["animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","exit"],tu=["initial",...tl];function td(e){return tr(e.animate)||tu.some(t=>to(e[t]))}function tc(e){return!!(td(e)||e.variants)}let tp={current:null},th={current:!1};e.s(["hasReducedMotionListener",0,th,"prefersReducedMotion",0,tp],71164);let tm="u">typeof window;function tf(){if(th.current=!0,tm)if(window.matchMedia){let e=window.matchMedia("(prefers-reduced-motion)"),t=()=>tp.current=e.matches;e.addEventListener("change",t),t()}else tp.current=!1}function tg(e){let t=[{},{}];
1return e?.values.forEach((e,i)=>{t[0][i]=e.get(),t[1][i]=e.getVelocity()}),t}function tv(e,t,i,a){if("function"==typeof t){let[n,s]=tg(a);t=t(void 0!==i?i:e.custom,n,s)}if("string"==typeof t&&(t=e.variants&&e.variants[t]),"function"==typeof t){let[n,s]=tg(a);t=t(void 0!==i?i:e.custom,n,s)}return t}e.s(["initPrefersReducedMotion",0,tf],38544);let tx=["AnimationStart","AnimationComplete","Update","BeforeLayoutMeasure","LayoutMeasure","LayoutAnimationStart","LayoutAnimationComplete"],tb={};class tE{scrapeMotionValuesFromProps(e,t,i){return{}}constructor({parent:e,props:t,presenceContext:i,reducedMotionConfig:a,skipAnimations:n,blockInitialAnimation:s,visualState:r},o={}){this.current=null,this.children=new Set,this.isVariantNode=!1,this.isControllingVariants=!1,this.shouldReduceMotion=null,this.shouldSkipAnimations=!1,this.values=new Map,this.KeyframeResolver=ej,this.features={},this.valueSubscriptions=new Map,this.prevMotionValues={},this.hasBeenMounted=!1,this.events={},this.propEventSubscriptions={},this.notifyUpdate=()=>this.notify("Update",this.latestValues),this.render=()=>{this.current&&(this.triggerBuild(),this.renderInstance(this.current,this.renderState,this.props.style,this.projection))},this.renderScheduledAt=0,this.scheduleRender=()=>{let e=e7.now();this.renderScheduledAt<e&&(this.renderScheduledAt=e,eR.render(this.render,!1,!0))};const{latestValues:l,renderState:u}=r;this.latestValues=l,this.baseTarget={...l},this.initialValues=t.initial?{...l}:{},this.renderState=u,this.parent=e,this.props=t,this.presenceContext=i,this.depth=e?e.depth+1:0,this.reducedMotionConfig=a,this.skipAnimationsConfig=n,this.options=o,this.blockInitialAnimation=!!s,this.isControllingVariants=td(t),this.isVariantNode=tc(t),this.isVariantNode&&(this.variantChildren=new Set),this.manuallyAnimateOnMount=!!(e&&e.current);const{willChange:d,...c}=this.scrapeMotionValuesFromProps(t,{},this);for(const e in c){const t=c[e];void 0!==l[e]&&W(t)&&t.set(l[e])}}mount(e){if(this.hasBeenMounted)for(let e in this.initialValues)this.values.get(e)?.jump(this.initialValues[e]),this.latestValues[e]=this.initialValues[e];this.current=e,ts.set(e,this),this.projection&&!this.projection.instance&&this.projection.mount(e),this.parent&&this.isVariantNode&&!this.isControllingVariants&&(this.removeFromVariantTree=this.parent.addVariantChild(this)),this.values.forEach((e,t)=>this.bindToMotionValue(t,e)),"never"===this.reducedMotionConfig?this.shouldReduceMotion=!1:"always"===this.reducedMotionConfig?this.shouldReduceMotion=!0:(th.current||tf(),this.shouldReduceMotion=tp.current),this.shouldSkipAnimations=this.skipAnimationsConfig??!1,this.parent?.addChild(this),this.update(this.props,this.presenceContext),this.hasBeenMounted=!0}unmount(){for(let e in this.projection&&this.projection.unmount(),eL(this.notifyUpdate),eL(this.render),this.valueSubscriptions.forEach(e=>e()),this.valueSubscriptions.clear(),this.removeFromVariantTree&&this.removeFromVariantTree(),this.parent?.removeChild(this),this.events)this.events[e].clear();for(let e in this.features){let t=this.features[e];t&&(t.unmount(),t.isMounted=!1)}this.current=null}addChild(e){this.children.add(e),this.enteringChildren??(this.enteringChildren=new Set),this.enteringChildren.add(e)}removeChild(e){this.children.delete(e),this.enteringChildren&&this.enteringChildren.delete(e)}bindToMotionValue(e,t){let i;if(this.valueSubscriptions.has(e)&&this.valueSubscriptions.get(e)(),t.accelerate&&e5.has(e)&&this.current instanceof HTMLElement){let{factory:i,keyframes:a,times:n,ease:s,duration:r}=t.accelerate,o=new e9({element:this.current,name:e,keyframes:a,times:n,ease:s,duration:eB(r)}),l=i(o);this.valueSubscriptions.set(e,()=>{l(),o.cancel()});return}let a=s.has(e);a&&this.onBindTransform&&this.onBindTransform();let n=t.on("change",t=>{this.latestValues[e]=t,this.props.onUpdate&&eR.preRender(this.notifyUpdate),a&&this.projection&&(this.projection.isTransformDirty=!0),this.scheduleRender()});"u">typeof window&&window.MotionCheckAppearSync&&(i=window.MotionCheckAppearSync(this,e,t)),this.valueSubscriptions.set(e,()=>{n(),i&&i()})}sortNodePosition(e){return this.current&&this.sortInstanceNodePosition&&this.type===e.type?this.sortInstanceNodePosition(this.current,e.current):0}updateFeatures(){let e="animation";for(e in tb){let t=tb[e];if(!t)continue;let{isEnabled:i,Feature:a}=t;if(!this.features[e]&&a&&i(this.props)&&(this.features[e]=new a(this)),this.features[e]){let t=this.features[e];
1t.isMounted?t.update():(t.mount(),t.isMounted=!0)}}}triggerBuild(){this.build(this.renderState,this.latestValues,this.props)}measureViewportBox(){return this.current?this.measureInstanceViewportBox(this.current,this.props):X()}getStaticValue(e){return this.latestValues[e]}setStaticValue(e,t){this.latestValues[e]=t}update(e,t){(e.transformTemplate||this.props.transformTemplate)&&this.scheduleRender(),this.prevProps=this.props,this.props=e,this.prevPresenceContext=this.presenceContext,this.presenceContext=t;for(let t=0;t<tx.length;t++){let i=tx[t];this.propEventSubscriptions[i]&&(this.propEventSubscriptions[i](),delete this.propEventSubscriptions[i]);let a=e["on"+i];a&&(this.propEventSubscriptions[i]=this.on(i,a))}this.prevMotionValues=function(e,t,i){for(let a in t){let n=t[a],s=i[a];if(W(n))e.addValue(a,n);else if(W(s))e.addValue(a,ta(n,{owner:e}));else if(s!==n)if(e.hasValue(a)){let t=e.getValue(a);!0===t.liveStyle?t.jump(n):t.hasAnimated||t.set(n)}else{let t=e.getStaticValue(a);e.addValue(a,ta(void 0!==t?t:n,{owner:e}))}}for(let a in i)void 0===t[a]&&e.removeValue(a);return t}(this,this.scrapeMotionValuesFromProps(e,this.prevProps||{},this),this.prevMotionValues),this.handleChildMotionValue&&this.handleChildMotionValue()}getProps(){return this.props}getVariant(e){return this.props.variants?this.props.variants[e]:void 0}getDefaultTransition(){return this.props.transition}getTransformPagePoint(){return this.props.transformPagePoint}getClosestVariantNode(){return this.isVariantNode?this:this.parent?this.parent.getClosestVariantNode():void 0}addVariantChild(e){let t=this.getClosestVariantNode();if(t)return t.variantChildren&&t.variantChildren.add(e),()=>t.variantChildren.delete(e)}addValue(e,t){let i=this.values.get(e);t!==i&&(i&&this.removeValue(e),this.bindToMotionValue(e,t),this.values.set(e,t),this.latestValues[e]=t.get())}removeValue(e){this.values.delete(e);let t=this.valueSubscriptions.get(e);t&&(t(),this.valueSubscriptions.delete(e)),delete this.latestValues[e],this.removeValueFromRenderState(e,this.renderState)}hasValue(e){return this.values.has(e)}getValue(e,t){if(this.props.values&&this.props.values[e])return this.props.values[e];let i=this.values.get(e);return void 0===i&&void 0!==t&&(i=ta(null===t?void 0:t,{owner:this}),this.addValue(e,i)),i}readValue(e,t){let i=void 0===this.latestValues[e]&&this.current?this.getBaseTargetFromProps(this.props,e)??this.readValueFromInstance(this.current,e,this.options):this.latestValues[e];if(null!=i){let a,n;if("string"==typeof i&&(a=i,/^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(a)||(n=i,/^0[^.\s]+$/u.test(n))))i=parseFloat(i);else{let a;a=i,!tn.find(Q(a))&&P.test(t)&&(i=eD(e,t))}this.setBaseTarget(e,W(i)?i.get():i)}return W(i)?i.get():i}setBaseTarget(e,t){this.baseTarget[e]=t}getBaseTarget(e){let t,{initial:i}=this.props;if("string"==typeof i||"object"==typeof i){let a=tv(this.props,i,this.presenceContext?.custom);a&&(t=a[e])}if(i&&void 0!==t)return t;let a=this.getBaseTargetFromProps(this.props,e);return void 0===a||W(a)?void 0!==this.initialValues[e]&&void 0===t?void 0:this.baseTarget[e]:a}on(e,t){return this.events[e]||(this.events[e]=new ez),this.events[e].add(t)}notify(e,...t){this.events[e]&&this.events[e].notify(...t)}scheduleRenderMicrotask(){e6.render(this.render)}}class ty extends tE{constructor(){super(...arguments),this.KeyframeResolver=eV}sortInstanceNodePosition(e,t){return 2&e.compareDocumentPosition(t)?1:-1}getBaseTargetFromProps(e,t){let i=e.style;return i?i[t]:void 0}removeValueFromRenderState(e,{vars:t,style:i}){delete t[e],delete i[e]}handleChildMotionValue(){this.childSubscription&&(this.childSubscription(),delete this.childSubscription);let{children:e}=this.props;W(e)&&(this.childSubscription=e.on("change",e=>{this.current&&(this.current.textContent=`${e}`)}))}}function tA(e){return e.replace(/([A-Z])/g,e=>`-${e.toLowerCase()}`)}let tw=(e,t)=>t&&"number"==typeof e?t.transform(e):e,tT={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},tS=n.length;function tR(e,t,i){let{style:a,vars:r,transformOrigin:o}=e,l=!1,u=!1;for(let e in t){let i=t[e];if(s.has(e)){l=!0;continue}if(ei(e)){r[e]=i;continue}{let t=tw(i,V[e]);e.startsWith("origin")?(u=!0,o[e]=t):a[e]=t}}if(!t.transform&&(l||i?a.transform=function(e,t,i){let a="",s=!0;for(let r=0;r<tS;r++){let o=n[r],l=e[o];if(void 0===l)continue;let u=!0;
1if("number"==typeof l)u=l===+!!o.startsWith("scale");else{let e=parseFloat(l);u=o.startsWith("scale")?1===e:0===e}if(!u||i){let e=tw(l,V[o]);if(!u){s=!1;let t=tT[o]||o;a+=`${t}(${e}) `}i&&(t[o]=e)}}let r=e.pathRotation;return r&&(s=!1,a+=`rotate(${tw(r,V.pathRotation)}) `),a=a.trim(),i?a=i(t,s?"":a):s&&(a="none"),a}(t,e.transform,i):a.transform&&(a.transform="none")),u){let{originX:e="50%",originY:t="50%",originZ:i=0}=o;a.transformOrigin=`${e} ${t} ${i}`}}let tL={offset:"stroke-dashoffset",array:"stroke-dasharray"},tq={offset:"strokeDashoffset",array:"strokeDasharray"},tI=["transform","opacity","offsetDistance","offsetPath","offsetRotate","offsetAnchor"];function tN(e,{attrX:t,attrY:i,attrScale:a,pathLength:n,pathSpacing:s=1,pathOffset:r=0,...o},l,u,d){if(tR(e,o,u),l){e.style.viewBox&&(e.attrs.viewBox=e.style.viewBox);return}e.attrs=e.style,e.style={};let{attrs:c,style:p}=e;for(let e of tI)void 0!==c[e]&&(p[e]=c[e],delete c[e]);(p.transform||c.transformOrigin)&&(p.transformOrigin=c.transformOrigin??"50% 50%",delete c.transformOrigin),p.transform&&(p.transformBox=d?.transformBox??"fill-box",delete c.transformBox),void 0!==t&&(c.x=t),void 0!==i&&(c.y=i),void 0!==a&&(c.scale=a),void 0!==n&&function(e,t,i=1,a=0,n=!0){e.pathLength=1;let s=n?tL:tq;e[s.offset]=`${-a}`,e[s.array]=`${t} ${i}`}(c,n,s,r,!1)}let tC=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues","viewBox","gradientTransform","pathLength","startOffset","textLength","lengthAdjust"]),tU=e=>"string"==typeof e&&"svg"===e.toLowerCase();function tP(e,{style:t,vars:i},a,n){let s,r=e.style;for(s in t)r[s]=t[s];for(s in n?.applyProjectionStyles(r,a),i)r.setProperty(s,i[s])}let tO=["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"];function tM(e,t){return t.max===t.min?0:e/(t.max-t.min)*100}let tj={correct:(e,t)=>{if(!t.target)return e;if("string"==typeof e)if(!y.test(e))return e;else e=parseFloat(e);let i=tM(e,t.target.x),a=tM(e,t.target.y);return`${i}% ${a}%`}},tk=(e,t,i)=>e+(t-e)*i,tD={borderRadius:{...tj,applyTo:[...tO]},borderTopLeftRadius:tj,borderTopRightRadius:tj,borderBottomLeftRadius:tj,borderBottomRightRadius:tj,boxShadow:{correct:(e,{treeScale:t,projectionDelta:i})=>{let a=P.parse(e);if(a.length>5)return e;let n=P.createTransformer(e),s=+("number"!=typeof a[0]),r=i.x.scale*t.x,o=i.y.scale*t.y;a[0+s]/=r,a[1+s]/=o;let l=tk(r,o,.5);return"number"==typeof a[2+s]&&(a[2+s]/=l),"number"==typeof a[3+s]&&(a[3+s]/=l),n(a)}}};function t_(e,{layout:t,layoutId:i}){return s.has(e)||e.startsWith("origin")||(t||void 0!==i)&&(!!tD[e]||"opacity"===e)}function tV(e,t,i){let a=e.style,n=t?.style,s={};if(!a)return s;for(let t in a)(W(a[t])||n&&W(n[t])||t_(t,e)||i?.getValue(t)?.liveStyle!==void 0)&&(s[t]=a[t]);return s}function tB(e,t,i){let a=tV(e,t,i);for(let i in e)(W(e[i])||W(t[i]))&&(a[-1!==n.indexOf(i)?"attr"+i.charAt(0).toUpperCase()+i.substring(1):i]=e[i]);return a}class tF extends ty{constructor(){super(...arguments),this.type="svg",this.isSVGTag=!1,this.measureInstanceViewportBox=X}getBaseTargetFromProps(e,t){return e[t]}readValueFromInstance(e,t){if(s.has(t)){let e=F(t);return e&&e.default||0}if(tI.includes(t)){let i=getComputedStyle(e)[t];if("string"==typeof i&&i)return i.trim()}return t=tC.has(t)?t:tA(t),e.getAttribute(t)}scrapeMotionValuesFromProps(e,t,i){return tB(e,t,i)}build(e,t,i){tN(e,t,this.isSVGTag,i.transformTemplate,i.style)}renderInstance(e,t,i,a){for(let i in tP(e,t,void 0,a),t.attrs)e.setAttribute(tC.has(i)?i:tA(i),t.attrs[i])}mount(e){this.isSVGTag=tU(e.tagName),super.mount(e)}}function tH({top:e,left:t,right:i,bottom:a}){return{x:{min:t,max:i},y:{min:e,max:a}}}function tz(e){return void 0===e||1===e}function tG({scale:e,scaleX:t,scaleY:i}){return!tz(e)||!tz(t)||!tz(i)}function tX(e){return tG(e)||tW(e)||e.z||e.rotate||e.rotateX||e.rotateY||e.skewX||e.skewY}function tW(e){var t,i;return(t=e.x)&&"0%"!==t||(i=e.y)&&"0%"!==i}function t$(e,t,i,a,n){return void 0!==n&&(e=a+n*(e-a)),a+i*(e-a)+t}function tQ(e,t=0,i=1,a,n){e.min=t$(e.min,t,i,a,n),e.max=t$(e.max,t,i,a,n)}function tY(e,{x:t,y:i}){tQ(e.x,t.translate,t.scale,t.originPoint),tQ(e.y,i.translate,i.scale,i.originPoint)}function tK(e,t){e.min+=t,e.max+=t}function tJ(e,t,i,a,n=.5){let s=tk(e.min,e.max,n);tQ(e,t,i,s,a)}function tZ(e,t){return"string"==typeof e?parseFloat(e)/100*(t.max-t.min):e}function t0(e,t,i){let a=i??e;tJ(e.x,tZ(t.x,a.x),t.scaleX,t.scale,t.originX),tJ(e.y,tZ(t.y,a.y),t.scaleY,t.scale,t.originY)}function t1(e,t){return tH(function(e,t){if(!t)return e;let i=t({x:e.left,y:e.top}),a=t({x:e.right,y:e.bottom});return{top:i.y,left:i.x,bottom:a.y,right:a.x}}(e.getBoundingClientRect(),t))}class t4 extends ty{constructor(){super(...arguments),this.type="html",this.renderInstance=tP}mount(e){ee(e.style),super.mount(e)}readValueFromInstance(e,t){if(s.has(t))return this.projection?.isProjecting?ef(t):((e,t)=>{let{transform:i="none"}=getComputedStyle(e);return eg(i,t)})(e,t);{let i=window.getComputedStyle(e),a=(ei(t)?i.getPropertyValue(t):i[t])||0;return"string"==typeof a?a.trim():a}}measureInstanceViewportBox(e,{transformPagePoint:t}){return t1(e,t)}build(e,t,i){tR(e,t,i.transformTemplate)}scrapeMotionValuesFromProps(e,t,i){return tV(e,t,i)}}var t2=e.i(71645);let t3=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","switch","symbol","svg","text","tspan","use","view"];function t9(e){if("string"!=typeof e||e.includes("-"));else if(t3.indexOf(e)>-1||/[A-Z]/u.test(e))return!0;return!1}var t5=e.i(43476);let t6=(0,t2.createContext)({}),t8=(0,t2.createContext)({strict:!1}),t7=(0,t2.createContext)({transformPagePoint:e=>e,isStatic:!1,reducedMotion:"never"}),ie=(0,t2.createContext)({});function it(e){return Array.isArray(e)?e.join(" "):e}let ii=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function ia(e,t,i){for(let a in t)W(t[a])||t_(a,i)||(e[a]=t[a])}let is=()=>({...ii(),attrs:{}}),ir=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","propagate","ignoreStrict","viewport"]);function io(e){return e.startsWith("while")||e.startsWith("drag")&&"draggable"!==e||e.startsWith("layout")||e.startsWith("onTap")||e.startsWith("onPan")||e.startsWith("onLayout")||ir.has(e)}function il(e){return W(e)?e.get():e}let iu=(0,t2.createContext)(null),id=e=>(t,i)=>{let a,n=(0,t2.useContext)(ie),s=(0,t2.useContext)(iu),r=()=>(function({scrapeMotionValuesFromProps:e,createRenderState:t},i,a,n){return{latestValues:function(e,t,i,a){let n={},s=a(e,{});for(let e in s)n[e]=il(s[e]);let{initial:r,animate:o}=e,l=td(e),u=tc(e);t&&u&&!l&&!1!==e.inherit&&(void 0===r&&(r=t.initial),void 0===o&&(o=t.animate));let d=!!i&&!1===i.initial,c=(d=d||!1===r)?o:r;if(c&&"boolean"!=typeof c&&!tr(c)){let t=Array.isArray(c)?c:[c];for(let i=0;i<t.length;i++){let a=tv(e,t[i]);if(a){let{transitionEnd:e,transition:t,...i}=a;for(let e in i){let t=i[e];if(Array.isArray(t)){let e=d?t.length-1:0;t=t[e]}null!==t&&(n[e]=t)}for(let t in e)n[t]=e[t]}}}return n}(i,a,n,e),renderState:t()}})(e,t,n,s);return i?r():(null===(a=(0,t2.useRef)(null)).current&&(a.current=r()),a.current)},ic=id({scrapeMotionValuesFromProps:tV,createRenderState:ii}),ip=id({scrapeMotionValuesFromProps:tB,createRenderState:is}),ih={animation:["animate","variants","whileHover","whileTap","exit","whileInView","whileFocus","whileDrag"],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]},im=!1;function ig(){return!function(){if(im)return;let e={};for(let t in ih)e[t]={isEnabled:e=>ih[t].some(t=>!!e[t])};tb=e,im=!0}(),tb}let iv=Symbol.for("motionComponentSymbol"),ix="data-"+tA("framerAppearId"),ib=(0,t2.createContext)({});function iE(e){return e&&"object"==typeof e&&Object.prototype.hasOwnProperty.call(e,"current")}let iy="u">typeof window?t2.useLayoutEffect:t2.useEffect;function iA(e,{forwardMotionProps:t=!1,type:i}={},a,n){a&&function(e){let t=ig();for(let i in e)t[i]={...t[i],...e[i]};tb=t}(a);let s=i?"svg"===i:t9(e),r=s?ip:ic;function o(i,a){var o;let l,u,d,c={...(0,t2.useContext)(t7),...i,layoutId:function({layoutId:e}){let t=(0,t2.useContext)(t6).id;return t&&void 0!==e?t+"-"+e:e}(i)},{isStatic:p,isValidProp:h}=c,m=function(e){let{initial:t,animate:i}=function(e,t){if(td(e)){let{initial:t,animate:i}=e;return{initial:!1===t||to(t)?t:void 0,animate:to(i)?i:void 0}}return!1!==e.inherit?t:{}}(e,(0,t2.useContext)(ie));return(0,t2.useMemo)(()=>({initial:t,animate:i}),[it(t),it(i)])}(i),f=r(i,p);if(!p&&"u">typeof window){(0,t2.useContext)(t8).strict;let t=function(e){let{drag:t,layout:i}=ig();if(!t&&!i)return{};let a={...t,...i};return{MeasureLayout:t?.isEnabled(e)||i?.isEnabled(e)?a.MeasureLayout:void 0,ProjectionNode:a.ProjectionNode}}
1(c);l=t.MeasureLayout,m.visualElement=function(e,t,i,a,n,s){let{visualElement:r}=(0,t2.useContext)(ie),o=(0,t2.useContext)(t8),l=(0,t2.useContext)(iu),u=(0,t2.useContext)(t7),d=u.reducedMotion,c=u.skipAnimations,p=(0,t2.useRef)(null),h=(0,t2.useRef)(!1);a=a||o.renderer,!p.current&&a&&(p.current=a(e,{visualState:t,parent:r,props:i,presenceContext:l,blockInitialAnimation:!!l&&!1===l.initial,reducedMotionConfig:d,skipAnimations:c,isSVG:s}),h.current&&p.current&&(p.current.manuallyAnimateOnMount=!0));let m=p.current,f=(0,t2.useContext)(ib);m&&!m.projection&&n&&("html"===m.type||"svg"===m.type)&&function(e,t,i,a){let{layoutId:n,layout:s,drag:r,dragConstraints:o,layoutScroll:l,layoutRoot:u,layoutAnchor:d,layoutCrossfade:c}=t;e.projection=new i(e.latestValues,t["data-framer-portal-id"]?void 0:function e(t){if(t)return!1!==t.options.allowProjection?t.projection:e(t.parent)}(e.parent)),e.projection.setOptions({layoutId:n,layout:s,alwaysMeasureLayout:!!r||o&&iE(o),visualElement:e,animationType:"string"==typeof s?s:"both",initialPromotionConfig:a,crossfade:c,layoutScroll:l,layoutRoot:u,layoutAnchor:d})}(p.current,i,n,f);let g=(0,t2.useRef)(!1);(0,t2.useInsertionEffect)(()=>{m&&g.current&&m.update(i,l)});let v=i[ix],x=(0,t2.useRef)(!!v&&"u">typeof window&&!window.MotionHandoffIsComplete?.(v)&&window.MotionHasOptimisedAnimation?.(v));return iy(()=>{h.current=!0,m&&(g.current=!0,window.MotionIsMounted=!0,m.updateFeatures(),m.scheduleRenderMicrotask(),x.current&&m.animationState&&m.animationState.animateChanges())}),(0,t2.useEffect)(()=>{m&&(!x.current&&m.animationState&&m.animationState.animateChanges(),x.current&&(queueMicrotask(()=>{window.MotionHandoffMarkAsComplete?.(v)}),x.current=!1),m.enteringChildren=void 0)}),m}(e,f,c,n,t.ProjectionNode,s)}return(0,t5.jsxs)(ie.Provider,{value:m,children:[l&&m.visualElement?(0,t5.jsx)(l,{visualElement:m.visualElement,...c}):null,function(e,t,i,{latestValues:a},n,s=!1,r,o){let l=(r??t9(e)?function(e,t,i,a){let n=(0,t2.useMemo)(()=>{let i=is();return tN(i,t,tU(a),e.transformTemplate,e.style),{...i.attrs,style:{...i.style}}},[t]);if(e.style){let t={};ia(t,e.style,e),n.style={...t,...n.style}}return n}:function(e,t){let i,a,n={},s=(i=e.style||{},ia(a={},i,e),Object.assign(a,function({transformTemplate:e},t){return(0,t2.useMemo)(()=>{let i=ii();return tR(i,t,e),Object.assign({},i.vars,i.style)},[t])}(e,t)),a);return e.drag&&!1!==e.dragListener&&(n.draggable=!1,s.userSelect=s.WebkitUserSelect=s.WebkitTouchCallout="none",s.touchAction=!0===e.drag?"none":`pan-${"x"===e.drag?"y":"x"}`),void 0===e.tabIndex&&(e.onTap||e.onTapStart||e.whileTap)&&(n.tabIndex=0),n.style=s,n})(t,a,n,e),u=function(e,t,i,a){let n={};for(let s in e)("values"!==s||"object"!=typeof e.values)&&!W(e[s])&&((s.startsWith("on")?!io(s):a?.(s)??!io(s))||!0===i&&io(s)||!t&&!io(s)||e.draggable&&s.startsWith("onDrag"))&&(n[s]=e[s]);return n}(t,"string"==typeof e,s,o),d=e!==t2.Fragment?{...u,...l,ref:i}:{},{children:c}=t,p=(0,t2.useMemo)(()=>W(c)?c.get():c,[c]);return(0,t2.createElement)(e,{...d,children:p})}(e,i,(o=m.visualElement,u=(0,t2.useRef)(a),(0,t2.useInsertionEffect)(()=>{u.current=a}),d=(0,t2.useRef)(null),(0,t2.useCallback)(e=>{e&&f.onMount?.(e),o&&(e?o.mount(e):o.unmount());let t=u.current;if("function"==typeof t)if(e){let i=t(e);"function"==typeof i&&(d.current=i)}else d.current?(d.current(),d.current=null):t(e);else t&&(t.current=e)},[o])),f,p,t,s,h)]})}o.displayName=`motion.${"string"==typeof e?e:`create(${e.displayName??e.name??""})`}`;let l=(0,t2.forwardRef)(o);return l[iv]=e,l}class iw{constructor(e){this.isMounted=!1,this.node=e}update(){}}function iT(e,t,i){let a=e.getProps();return tv(a,t,void 0!==i?i:a.custom,e)}function iS(e,t){if(e?.inherit&&t){let{inherit:i,...a}=e;return{...t,...a}}return e}function iR(e,t){let i=e?.[t]??e?.default??e;return i!==e?iS(i,e):i}let iL=e=>Array.isArray(e);function iq(e,t){let i=e.getValue("willChange");if(W(i)&&i.add)return i.add(t);if(!i&&ew.WillChange){let i=new ew.WillChange("auto");e.addValue("willChange",i),i.add(t)}}let iI=(...e)=>e.reduce((e,t)=>i=>t(e(i)));function iN(e,t,i){return(i<0&&(i+=1),i>1&&(i-=1),i<1/6)?e+(t-e)*6*i:i<.5?t:i<2/3?e+(t-e)*(2/3-i)*6:e}function iC(e,t){return i=>i>0?t:e}let iU=(e,t,i)=>{let a=e*e,n=i*(t*t-a)+a;return n<0?0:Math.sqrt(n)},iP=[v,g,S];function iO(e){let t=iP.find(t=>t.test(e));if(Z(`'${e}' is not an animatable color. Use the equivalent color code instead.`),!t)return!1;let i=t.parse(e);return t===S&&(i=function({hue:e,saturation:t,lightness:i,alpha:a}){e/=360,i/=100;let n=0,s=0,r=0;if(t/=100){let a=i<.5?i*(1+t):i+t-i*t,o=2*i-a;n=iN(o,a,e+1/3),s=iN(o,a,e),r=iN(o,a,e-1/3)}else n=s=r=i;return{red:Math.round(255*n),green:Math.round(255*s),blue:Math.round(255*r),alpha:a}}(i)),i}let iM=(e,t)=>{let i=iO(e),a=iO(t);if(!i||!a)return iC(e,t);let n={...i};return e=>(n.red=iU(i.red,a.red,e),n.green=iU(i.green,a.green,e),n.blue=iU(i.blue,a.blue,e),n.alpha=tk(i.alpha,a.alpha,e),g.transform(n))},ij=new Set(["none","hidden"]);function ik(e,t){return i=>tk(e,t,i)}function iD(e){return"number"==typeof e?ik:"string"==typeof e?en(e)?iC:R.test(e)?iM:iB:Array.isArray(e)?i_:"object"==typeof e?R.test(e)?iM:iV:iC}function i_(e,t){let i=[...e],a=i.length,n=e.map((e,i)=>iD(e)(e,t[i]));return e=>{for(let t=0;t<a;t++)i[t]=n[t](e);return i}}function iV(e,t){let i={...e,...t},a={};for(let n in i)void 0!==e[n]&&void 0!==t[n]&&(a[n]=iD(e[n])(e[n],t[n]));return e=>{for(let t in a)i[t]=a[t](e);return i}}let iB=(e,t)=>{let i=P.createTransformer(t),a=C(e),n=C(t);if(!(a.indexes.var.length===n.indexes.var.length&&a.indexes.color.length===n.indexes.color.length&&a.indexes.number.length>=n.indexes.number.length))return Z(`Complex values '${e}' and '${t}
1' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`),iC(e,t);if(ij.has(e)&&!n.values.length||ij.has(t)&&!a.values.length)return ij.has(e)?i=>i<=0?e:t:i=>i>=1?t:e;return iI(i_(function(e,t){let i=[],a={color:0,var:0,number:0};for(let n=0;n<t.values.length;n++){let s=t.types[n],r=e.indexes[s][a[s]],o=e.values[r]??0;i[n]=o,a[s]++}return i}(a,n),n.values),i)};function iF(e,t,i){return"number"==typeof e&&"number"==typeof t&&"number"==typeof i?tk(e,t,i):iD(e)(e,t)}let iH=e=>{let t=({timestamp:t})=>e(t);return{start:(e=!0)=>eR.update(t,e),stop:()=>eL(t),now:()=>eq.isProcessing?eq.timestamp:e7.now()}};function iz(e){let t=0,i=e.next(t);for(;!i.done&&t<2e4;)t+=50,i=e.next(t);return t>=2e4?1/0:t}let iG=.01,iX=2,iW=.005,i$=.5;function iQ(e,t){return e*Math.sqrt(1-t*t)}let iY=["duration","bounce"],iK=["stiffness","damping","mass"];function iJ(e,t){return t.some(t=>void 0!==e[t])}function iZ(e=.3,t=.3){let i,a,n,s,o,l,u="object"!=typeof e?{visualDuration:e,keyframes:[0,1],bounce:t}:e,{restSpeed:d,restDelta:c}=u,p=u.keyframes[0],h=u.keyframes[u.keyframes.length-1],m={done:!1,value:p},{stiffness:f,damping:g,mass:v,duration:x,velocity:b,isResolvedFromDuration:E}=function(e){let t={velocity:0,stiffness:100,damping:10,mass:1,isResolvedFromDuration:!1,...e};if(!iJ(e,iK)&&iJ(e,iY))if(t.velocity=0,e.visualDuration){let i=2*Math.PI/(1.2*e.visualDuration),a=i*i,n=2*r(.05,1,1-(e.bounce||0))*Math.sqrt(a);t={...t,mass:1,stiffness:a,damping:n}}else{let i=function({duration:e=800,bounce:t=.3,velocity:i=0,mass:a=1}){let n,s;Z(eB(10));let o=1-t;o=r(.05,1,o),e=r(.01,10,e/1e3),o<1?(n=t=>{let a=t*o,n=a*e;return .001-(a-i)/iQ(t,o)*Math.exp(-n)},s=t=>{let a=t*o*e,s=Math.pow(o,2)*Math.pow(t,2)*e,r=Math.exp(-a),l=iQ(Math.pow(t,2),o);return(a*i+i-s)*r*(-n(t)+.001>0?-1:1)/l}):(n=t=>-.001+Math.exp(-t*e)*((t-i)*e+1),s=t=>e*e*(i-t)*Math.exp(-t*e));let l=function(e,t,i){let a=i;for(let i=1;i<12;i++)a-=e(a)/t(a);return a}(n,s,5/e);if(e=eB(e),isNaN(l))return{stiffness:100,damping:10,duration:e};{let t=Math.pow(l,2)*a;return{stiffness:t,damping:2*o*Math.sqrt(a*t),duration:e}}}({...e,velocity:0});(t={...t,...i,mass:1}).isResolvedFromDuration=!0}return t}({...u,velocity:-((u.velocity||0)/1e3)}),y=b||0,A=g/(2*Math.sqrt(f*v)),w=h-p,T=Math.sqrt(f/v)/1e3,S=5>Math.abs(w);if(d||(d=S?iG:iX),c||(c=S?iW:i$),A<1)n=iQ(T,A),s=(y+A*T*w)/n,i=e=>h-Math.exp(-A*T*e)*(s*Math.sin(n*e)+w*Math.cos(n*e)),o=A*T*s+w*n,l=A*T*w-s*n,a=e=>Math.exp(-A*T*e)*(o*Math.sin(n*e)+l*Math.cos(n*e));else if(1===A){i=e=>h-Math.exp(-T*e)*(w+(y+T*w)*e);let e=y+T*w;a=t=>Math.exp(-T*t)*(T*e*t-y)}else{let e=T*Math.sqrt(A*A-1);i=t=>{let i=Math.exp(-A*T*t),a=Math.min(e*t,300);return h-i*((y+A*T*w)*Math.sinh(a)+e*w*Math.cosh(a))/e};let t=(y+A*T*w)/e,n=A*T*t-w*e,s=A*T*w-t*e;a=t=>{let i=Math.exp(-A*T*t),a=Math.min(e*t,300);return i*(n*Math.sinh(a)+s*Math.cosh(a))}}let R={calculatedDuration:E&&x||null,velocity:e=>eB(a(e)),next:e=>{if(!E&&A<1){let t=Math.exp(-A*T*e),i=Math.sin(n*e),a=Math.cos(n*e),r=h-t*(s*i+w*a);return m.done=Math.abs(eB(t*(o*i+l*a)))<=d&&Math.abs(h-r)<=c,m.value=m.done?h:r,m}let t=i(e);return E?m.done=e>=x:m.done=Math.abs(eB(a(e)))<=d&&Math.abs(h-t)<=c,m.value=m.done?h:t,m},toString:()=>{let e=Math.min(iz(R),2e4),t=e1(t=>R.next(e*t).value,e,30);return e+"ms "+t},toTransition:()=>{}};return R}function i0(e,t,i){let a=Math.max(t-5,0);return te(i-e(a),t-a)}function i1({keyframes:e,velocity:t=0,power:i=.8,timeConstant:a=325,bounceDamping:n=10,bounceStiffness:s=500,modifyTarget:r,min:o,max:l,restDelta:u=.5,restSpeed:d}){let c,p,h=e[0],m={done:!1,value:h},f=i*t,g=h+f,v=void 0===r?g:r(g);v!==g&&(f=v-h);let x=e=>-f*Math.exp(-e/a),b=e=>v+x(e),E=e=>{let t=x(e),i=b(e);m.done=Math.abs(t)<=u,m.value=m.done?v:i},y=e=>{let t;if(t=m.value,void 0!==o&&t<o||void 0!==l&&t>l){var i;c=e,p=iZ({keyframes:[m.value,(i=m.value,void 0===o?l:void 0===l||Math.abs(o-i)<Math.abs(l-i)?o:l)],velocity:i0(b,e,m.value),damping:n,stiffness:s,restDelta:u,restSpeed:d})}};return y(0),{calculatedDuration:null,next:e=>{let t=!1;return(p||void 0!==c||(t=!0,E(e),y(e)),void 0!==c&&e>
1=c)?p.next(e-c):(t||E(e),m)}}}iZ.applyToOptions=e=>{let t=function(e,t=100,i){let a=i({...e,keyframes:[0,t]}),n=Math.min(iz(a),2e4);return{type:"keyframes",ease:e=>a.next(n*e).value/t,duration:n/1e3}}(e,100,iZ);return e.ease=t.ease,e.duration=eB(t.duration),e.type="keyframes",e};let i4=(e,t,i)=>(((1-3*i+3*t)*e+(3*i-6*t))*e+3*t)*e;function i2(e,t,i,a){return e===t&&i===a?eA:n=>0===n||1===n?n:i4(function(e,t,i,a,n){let s,r,o=0;do(s=i4(r=t+(i-t)/2,a,n)-e)>0?i=r:t=r;while(Math.abs(s)>1e-7&&++o<12)return r}(n,0,1,e,i),t,a)}let i3=i2(.42,0,1,1),i9=i2(0,0,.58,1),i5=i2(.42,0,.58,1),i6=e=>t=>t<=.5?e(2*t)/2:(2-e(2*(1-t)))/2,i8=e=>t=>1-e(1-t),i7=i2(.33,1.53,.69,.99),ae=i8(i7),at=i6(ae),ai=e=>e>=1?1:(e*=2)<1?.5*ae(e):.5*(2-Math.pow(2,-10*(e-1))),aa=e=>1-Math.sin(Math.acos(e)),an=i8(aa),as=i6(aa),ar={linear:eA,easeIn:i3,easeInOut:i5,easeOut:i9,circIn:aa,circInOut:as,circOut:an,backIn:ae,backInOut:at,backOut:i7,anticipate:ai},ao=e=>{if(eZ(e)){ee(e.length);let[t,i,a,n]=e;return i2(t,i,a,n)}return"string"==typeof e?(ee(ar[e],`Invalid easing type '${e}'`),ar[e]):e},al=(e,t,i)=>{let a=t-e;return a?(i-e)/a:1};function au({duration:e=300,keyframes:t,times:i,ease:a="easeInOut"}){var n;let s,o=Array.isArray(a)&&"number"!=typeof a[0]?a.map(ao):ao(a),l={done:!1,value:t[0]},u=function(e,t,{clamp:i=!0,ease:a,mixer:n}={}){let s=e.length;if(ee(t.length),1===s)return()=>t[0];if(2===s&&t[0]===t[1])return()=>t[1];let o=e[0]===e[1];e[0]>e[s-1]&&(e=[...e].reverse(),t=[...t].reverse());let l=function(e,t,i){let a=[],n=i||ew.mix||iF,s=e.length-1;for(let i=0;i<s;i++){let s=n(e[i],e[i+1]);t&&(s=iI(Array.isArray(t)?t[i]||eA:t,s)),a.push(s)}return a}(t,a,n),u=l.length,d=i=>{if(o&&i<e[0])return t[0];let a=0;if(u>1)for(;a<e.length-2&&!(i<e[a+1]);a++);let n=al(e[a],e[a+1],i);return l[a](n)};return i?t=>d(r(e[0],e[s-1],t)):d}((n=i&&i.length===t.length?i:(!function(e,t){let i=e[e.length-1];for(let a=1;a<=t;a++){let n=al(0,t,a);e.push(tk(i,1,n))}}(s=[0],t.length-1),s),n.map(t=>t*e)),t,{ease:Array.isArray(o)?o:t.map(()=>o||i5).splice(0,t.length-1)});return{calculatedDuration:e,next:t=>(l.value=u(t),l.done=t>=e,l)}}let ad={decay:i1,inertia:i1,tween:au,keyframes:au,spring:iZ};function ac(e){"string"==typeof e.type&&(e.type=ad[e.type])}let ap=e=>e/100;class ah extends eJ{constructor(e){super(),this.state="idle",this.startTime=null,this.isStopped=!1,this.currentTime=0,this.holdTime=null,this.playbackSpeed=1,this.delayState={done:!1,value:void 0},this.stop=()=>{let{motionValue:e}=this.options;e&&e.updatedAt!==e7.now()&&this.tick(e7.now()),this.isStopped=!0,"idle"!==this.state&&(this.teardown(),this.options.onStop?.())},this.options=e,this.initAnimation(),this.play(),!1===e.autoplay&&this.pause()}initAnimation(){let{options:e}=this;ac(e);let{type:t=au,repeat:i=0,repeatDelay:a=0,repeatType:n,velocity:s=0}=e,{keyframes:r}=e,o=t||au;o!==au&&"number"!=typeof r[0]&&(this.mixKeyframes=iI(ap,iF(r[0],r[1])),r=[0,100]);let l=o({...e,keyframes:r});"mirror"===n&&(this.mirroredGenerator=o({...e,keyframes:[...r].reverse(),velocity:-s})),null===l.calculatedDuration&&(l.calculatedDuration=iz(l));let{calculatedDuration:u}=l;this.calculatedDuration=u,this.resolvedDuration=u+a,this.totalDuration=this.resolvedDuration*(i+1)-a,this.generator=l}updateTime(e){let t=Math.round(e-this.startTime)*this.playbackSpeed;null!==this.holdTime?this.currentTime=this.holdTime:this.currentTime=t}tick(e,t=!1){let i,{generator:a,totalDuration:n,mixKeyframes:s,mirroredGenerator:o,resolvedDuration:l,calculatedDuration:u}=this;if(null===this.startTime)return a.next(0);let{delay:d=0,keyframes:c,repeat:p,repeatType:h,repeatDelay:m,type:f,onUpdate:g,finalKeyframe:v}=this.options;this.speed>0?this.startTime=Math.min(this.startTime,e):this.speed<0&&(this.startTime=Math.min(e-n/this.speed,this.startTime)),t?this.currentTime=e:this.updateTime(e);let x=this.currentTime-d*(this.playbackSpeed>=0?1:-1),b=this.playbackSpeed>=0?x<0:x>n;this.currentTime=Math.max(x,0),"finished"===this.state&&null===this.holdTime&&(this.currentTime=n);let E=this.currentTime,y=a;if(p){let e=Math.min(this.currentTime,n)/l,t=Math.floor(e),i=e%1;!i&&e>=1&&(i=1),1===i&&t--,(t=Math.min(t,p+1))%2&&("reverse"===h?(i=1-i,m&&(i-=m/l)):"mirror"===h&&(y=o)),E=r(0,1,i)*l}b?(this.delayState.value=c[0],i=this.delayState):i=y.next(E),s&&!b&&(i.value=s(i.value));let{done:A}=i;b||null===u||(A=this.playbackSpeed>=0?this.currentTime>=n:this.currentTime<=0);let w=null===this.holdTime&&("finished"===this.state||"running"===this.state&&A);return w&&f!==i1&&(i.value=eK(c,this.options,v,this.speed)),g&&g(i.value),w&&this.finish(),i}then(e,t){return this.finished.then(e,t)}get duration(){return this.calculatedDuration/1e3}get iterationDuration(){let{delay:e=0}=this.options||{};return this.duration+e/1e3}get time(){return this.currentTime/1e3}set time(e){e=eB(e),this.currentTime=e,null===this.startTime||null!==this.holdTime||0===this.playbackSpeed?this.holdTime=e:this.driver&&(this.startTime=this.driver.now()-e/this.playbackSpeed),this.driver?this.driver.start(!1):(this.startTime=0,this.state="paused",this.holdTime=e,this.tick(e))}getGeneratorVelocity(){let e=this.currentTime;if(e<=0)return this.options.velocity||0;if(this.generator.velocity)return this.generator.velocity(e);let t=this.generator.next(e).value;return i0(e=>this.generator.next(e).value,e,t)}get speed(){return this.playbackSpeed}set speed(e){let t=this.playbackSpeed!==e;t&&this.driver&&this.updateTime(e7.now()),this.playbackSpeed=e,t&&this.driver&&(this.time=this.currentTime/1e3)}play(){if(this.isStopped)return;let{driver:e=iH,startTime:t}=this.options;this.driver||(this.driver=e(e=>this.tick(e))),this.options.onPlay?.();let i=this.driver.now();"finished"===this.state?(this.updateFinished(),this.startTime=i):null!==this.holdTime?this.startTime=i-this.holdTime:this.startTime||(this.startTime=t??i),"finished"===this.state&&this.speed<0&&(this.startTime+=this.calculatedDuration),this.holdTime=null,this.state="running",this.driver.start()}pause(){this.state="paused",this.updateTime(e7.now()),this.holdTime=this.currentTime}complete(){"running"!==this.state&&this.play(),this.state="finished",this.holdTime=null}finish(){this.notifyFinished(),this.teardown(),this.state="finished",this.options.onComplete?.()}cancel(){this.holdTime=null,this.startTime=0,this.tick(0),this.teardown(),this.options.onCancel?.()}teardown(){this.state="idle",this.stopDriver(),this.startTime=this.holdTime=null}stopDriver(){this.driver&&(this.driver.stop(),this.driver=void 0)}sample(e){return this.startTime=0,this.tick(e,!0)}attachTimeline(e){return this.options.allowFlatten&&(this.options.type="keyframes",this.options.ease="linear",this.initAnimation()),this.driver?.stop(),e.observe(this)}}let am={anticipate:ai,backInOut:at,circInOut:as};class af extends e9{constructor(e){!function(e){"string"==typeof e.ease&&e.ease in am&&(e.ease=am[e.ease])}(e),ac(e),super(e),void 0!==e.startTime&&!1!==e.autoplay&&(this.startTime=e.startTime),this.options=e}updateMotionValue(e){let{motionValue:t,onUpdate:i,onComplete:a,element:n,...s}=this.options;if(!t)return;if(void 0!==e)return void t.set(e);let o=new ah({...s,autoplay:!1}),l=Math.max(10,e7.now()-this.startTime),u=r(0,10,l-10),d=o.sample(l).value,{name:c}=this.options;n&&c&&eG(n,c,d),t.setWithVelocity(o.sample(Math.max(0,l-u)).value,d,u),o.stop()}}let ag=(e,t)=>
1"zIndex"!==t&&!!("number"==typeof e||Array.isArray(e)||"string"==typeof e&&(P.test(e)||"0"===e)&&!e.startsWith("url("));function av(e){e.duration=0,e.type="keyframes"}let ax=/^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\(/,ab=new Set(["color","backgroundColor","outlineColor","fill","stroke","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"]),aE=eX(()=>Object.hasOwnProperty.call(Element.prototype,"animate"));class ay extends eJ{constructor({autoplay:e=!0,delay:t=0,type:i="keyframes",repeat:a=0,repeatDelay:n=0,repeatType:s="loop",keyframes:r,name:o,motionValue:l,element:u,...d}){super(),this.stop=()=>{this._animation&&(this._animation.stop(),this.stopTimeline?.()),this.keyframeResolver?.cancel()},this.createdAt=e7.now();const c={autoplay:e,delay:t,type:i,repeat:a,repeatDelay:n,repeatType:s,name:o,motionValue:l,element:u,...d},p=u?.KeyframeResolver||ej;this.keyframeResolver=new p(r,(e,t,i)=>this.onKeyframesResolved(e,t,c,!i),o,l,u),this.keyframeResolver?.scheduleResolve()}onKeyframesResolved(e,t,i,a){let n;this.keyframeResolver=void 0;let{name:s,type:r,velocity:o,delay:l,isHandoff:u,onUpdate:d}=i;this.resolvedAt=e7.now();let c=!0;!function(e,t,i,a){let n=e[0];if(null===n)return!1;if("display"===t||"visibility"===t)return!0;let s=e[e.length-1],r=ag(n,t),o=ag(s,t);return Z(`You are trying to animate ${t} from "${n}" to "${s}". "${r?s:n}" is not an animatable value.`),!!r&&!!o&&(function(e){let t=e[0];if(1===e.length)return!0;for(let i=0;i<e.length;i++)if(e[i]!==t)return!0}(e)||("spring"===i||e3(i))&&a)}(e,s,r,o)&&(c=!1,(ew.instantAnimations||!l)&&d?.(eK(e,i,t)),e[0]=e[e.length-1],av(i),i.repeat=0);let p={startTime:a?this.resolvedAt&&this.resolvedAt-this.createdAt>40?this.resolvedAt:this.createdAt:void 0,finalKeyframe:t,...i,keyframes:e},h=c&&!u&&function(e){let{motionValue:t,name:i,repeatDelay:a,repeatType:n,damping:s,type:r,keyframes:o}=e,l=t?.owner?.current;if(!(l instanceof HTMLElement)&&!(l instanceof SVGElement))return!1;let{onUpdate:u,transformTemplate:d}=t.owner.getProps();return aE()&&i&&(e5.has(i)||ab.has(i)&&function(e){for(let t=0;t<e.length;t++)if("string"==typeof e[t]&&ax.test(e[t]))return!0;return!1}(o))&&("transform"!==i||!d)&&!u&&!a&&"mirror"!==n&&0!==s&&"inertia"!==r}(p),m=p.motionValue?.owner?.current;if(h)try{n=new af({...p,element:m})}catch{n=new ah(p)}else n=new ah(p);n.finished.then(()=>{this.notifyFinished()}).catch(eA),this.pendingTimeline&&(this.stopTimeline=n.attachTimeline(this.pendingTimeline),this.pendingTimeline=void 0),this._animation=n}get finished(){return this._animation?this.animation.finished:this._finished}then(e,t){return this.finished.finally(e).then(()=>{})}get animation(){return this._animation||(this.keyframeResolver?.resume(),eP=!0,eM(),eO(),eP=!1),this._animation}get duration(){return this.animation.duration}get iterationDuration(){return this.animation.iterationDuration}get time(){return this.animation.time}set time(e){this.animation.time=e}get speed(){return this.animation.speed}get state(){return this.animation.state}set speed(e){this.animation.speed=e}get startTime(){return this.animation.startTime}attachTimeline(e){return this._animation?this.stopTimeline=this.animation.attachTimeline(e):this.pendingTimeline=e,()=>this.stop()}play(){this.animation.play()}pause(){this.animation.pause()}complete(){this.animation.complete()}cancel(){this._animation&&this.animation.cancel(),this.keyframeResolver?.cancel()}}let aA={type:"spring",stiffness:500,damping:25,restSpeed:10},aw={type:"keyframes",duration:.8},aT={type:"keyframes",ease:[.25,.1,.35,1],duration:.3},aS=new Set(["when","delay","delayChildren","staggerChildren","staggerDirection","repeat","repeatType","repeatDelay","from","elapsed"]),aR=(e,t,i,a={},n,r)=>o=>{let l=iR(a,e)||{},u=l.delay||a.delay||0,{elapsed:d=0}=a;d-=eB(u);let c={keyframes:Array.isArray(i)?i:[null,i],ease:"easeOut",velocity:t.getVelocity(),...l,delay:-d,onUpdate:e=>{t.set(e),l.onUpdate&&l.onUpdate(e)},onComplete:()=>{o(),l.onComplete&&l.onComplete()},name:e,motionValue:t,element:r?void 0:n};!function(e){for(let t in e)if(!aS.has(t))return!0;return!1}(l)&&Object.assign(c,((e,{keyframes:t})=>t.length>2?aw:s.has(e)?e.startsWith("scale")?{type:"spring",stiffness:550,damping:0===t[1]?2*Math.sqrt(550):30,restSpeed:10}:aA:aT)(e,c)),c.duration&&(c.duration=eB(c.duration)),c.repeatDelay&&(c.repeatDelay=eB(c.repeatDelay)),void 0!==c.from&&(c.keyframes[0]=c.from);let p=!1;if(!1!==c.type&&(0!==c.duration||c.repeatDelay)||(av(c),0===c.delay&&(p=!0)),(ew.instantAnimations||ew.skipAnimations||n?.shouldSkipAnimations||l.skipAnimations)&&(p=!0,av(c),c.delay=0),c.allowFlatten=!l.type&&!l.ease,p&&!r&&void 0!==t.get()){let e=eK(c.keyframes,l);if(void 0!==e)return void eR.update(()=>{c.onUpdate(e),c.onComplete()})}return l.isSync?new ah(c):new ay(c)},aL="u">typeof window;function aq(e,t,{delay:i=0,transitionOverride:a,type:n}={}){let{transition:s,transitionEnd:r,...o}=t,l=e.getDefaultTransition();s=s?iS(s,l):l;let u=s?.reduceMotion,d=s?.skipAnimations;a&&(s=a);let c=[],p=n&&e.animationState&&e.animationState.getState()[n],h=s?.path;for(let t in h&&h.animateVisualElement(e,o,s,i,c),o){let a=e.getValue(t,e.latestValues[t]??null),n=o[t];if(void 0===n||p&&function({protectedKeys:e,needsAnimating:t},i){let a=e.hasOwnProperty(i)&&!0!==t[i];return t[i]=!1,a}(p,t))continue;let r={delay:i,...iR(s||{},t)};d&&(r.skipAnimations=!0);let l=a.get();if(void 0!==l&&!a.isAnimating()&&!Array.isArray(n)&&n===l&&!r.velocity){eR.update(()=>a.set(n));continue}let h=!1;if(aL&&window.MotionHandoffAnimation){let i=e.props[ix];if(i){let e=window.MotionHandoffAnimation(i,t,eR);null!==e&&(r.startTime=e,h=!0)}}iq(e,t);let m=u??e.shouldReduceMotion;a.start(aR(t,a,n,m&&$.has(t)?{type:!1}:r,e,h));let f=a.animation;f&&c.push(f)}if(r){let t=()=>eR.update(()=>{r&&function(e,t){let{transitionEnd:i={},transition:a={},...n}=iT(e,t)||{};for(let t in n={...n,...i}){var s;let i=iL(s=n[t])?s[s.length-1]||0:s;e.hasValue(t)?e.getValue(t).set(i):e.addValue(t,ta(i))}}(e,r)});c.length?Promise.all(c).then(t):t()}return c}function aI(e,t,i,a=0,n=1){let s=Array.from(e).sort((e,t)=>
1e.sortNodePosition(t)).indexOf(t),r=e.size,o=(r-1)*a;return"function"==typeof i?i(s,r):1===n?s*a:o-s*a}function aN(e,t,i={}){let a=iT(e,t,"exit"===i.type?e.presenceContext?.custom:void 0),{transition:n=e.getDefaultTransition()||{}}=a||{};i.transitionOverride&&(n=i.transitionOverride);let s=a?()=>Promise.all(aq(e,a,i)):()=>Promise.resolve(),r=e.variantChildren&&e.variantChildren.size?(a=0)=>{let{delayChildren:s=0,staggerChildren:r,staggerDirection:o}=n;return function(e,t,i=0,a=0,n=0,s=1,r){let o=[];for(let l of e.variantChildren)l.notify("AnimationStart",t),o.push(aN(l,t,{...r,delay:i+("function"==typeof a?0:a)+aI(e.variantChildren,l,a,n,s)}).then(()=>l.notify("AnimationComplete",t)));return Promise.all(o)}(e,t,a,s,r,o,i)}:()=>Promise.resolve(),{when:o}=n;if(!o)return Promise.all([s(),r(i.delay)]);{let[e,t]="beforeChildren"===o?[s,r]:[r,s];return e().then(()=>t())}}let aC=tu.length;function aU(e,t){if(!Array.isArray(t))return!1;let i=t.length;if(i!==e.length)return!1;for(let a=0;a<i;a++)if(t[a]!==e[a])return!1;return!0}let aP=[...tl].reverse(),aO=tl.length;function aM(e=!1){return{isActive:e,protectedKeys:{},needsAnimating:{},prevResolvedValues:{}}}function aj(){return{animate:aM(!0),whileInView:aM(),whileHover:aM(),whileTap:aM(),whileDrag:aM(),whileFocus:aM(),exit:aM()}}let ak=0;function aD(e){return[e("x"),e("y")]}function a_(e,t,i,a={passive:!0}){return e.addEventListener(t,i,a),()=>e.removeEventListener(t,i,a)}let aV={x:!1,y:!1};function aB(e){return e.max-e.min}function aF(e,t,i,a=.5){e.origin=a,e.originPoint=tk(t.min,t.max,e.origin),e.scale=aB(i)/aB(t),e.translate=tk(i.min,i.max,e.origin)-e.originPoint,(e.scale>=.9999&&e.scale<=1.0001||isNaN(e.scale))&&(e.scale=1),(e.translate>=-.01&&e.translate<=.01||isNaN(e.translate))&&(e.translate=0)}function aH(e,t,i,a){aF(e.x,t.x,i.x,a?a.originX:void 0),aF(e.y,t.y,i.y,a?a.originY:void 0)}function az(e,t,i,a=0){e.min=(a?tk(i.min,i.max,a):i.min)+t.min,e.max=e.min+aB(t)}function aG(e,t,i,a=0){let n=a?tk(i.min,i.max,a):i.min;e.min=t.min-n,e.max=e.min+aB(t)}function aX(e,t,i,a){aG(e.x,t.x,i.x,a?.x),aG(e.y,t.y,i.y,a?.y)}let aW=e=>"object"==typeof e&&null!==e;function a$(e){return aW(e)&&"ownerSVGElement"in e}function aQ(e,t,i){if(null==e)return[];if(e instanceof EventTarget)return[e];if("string"==typeof e){let a=document;t&&(a=t.current);let n=i?.[e]??a.querySelectorAll(e);return n?Array.from(n):[]}return Array.from(e).filter(e=>null!=e)}let aY=new WeakMap,aK=(e,t,i)=>(a,n)=>n&&n[0]?n[0][e+"Size"]:a$(a)&&"getBBox"in a?a.getBBox()[t]:a[i],aJ=aK("inline","width","offsetWidth"),aZ=aK("block","height","offsetHeight");function a0({target:e,borderBoxSize:t}){aY.get(e)?.forEach(i=>{i(e,{get width(){return aJ(e,t)},get height(){return aZ(e,t)}})})}function a1(e){e.forEach(a0)}
1let a4=new Set;function a2(e,t){let n;return"function"==typeof e?(a4.add(e),a||(a=()=>{let e={get width(){return window.innerWidth},get height(){return window.innerHeight}};a4.forEach(t=>t(e))},window.addEventListener("resize",a)),()=>{a4.delete(e),a4.size||"function"!=typeof a||(window.removeEventListener("resize",a),a=void 0)}):(!i&&"u">typeof ResizeObserver&&(i=new ResizeObserver(a1)),(n=aQ(e)).forEach(e=>{let a=aY.get(e);a||(a=new Set,aY.set(e,a)),a.add(t),i?.observe(e)}),()=>{n.forEach(e=>{let a=aY.get(e);a?.delete(t),a?.size||i?.unobserve(e)})})}let a3=new Set(["BUTTON","INPUT","SELECT","TEXTAREA","A"]),a9=new Set(["INPUT","SELECT","TEXTAREA"]),a5=e=>"mouse"===e.pointerType?"number"!=typeof e.button||e.button<=0:!1!==e.isPrimary;function a6(e){return{point:{x:e.pageX,y:e.pageY}}}function a8(e,t,i,a){return a_(e,t,e=>a5(e)&&i(e,a6(e)),a)}let a7=({current:e})=>e?e.ownerDocument.defaultView:null,ne=(e,t)=>Math.abs(e-t),nt=new Set(["auto","scroll"]);class ni{constructor(e,t,{transformPagePoint:i,contextWindow:a=window,dragSnapToOrigin:n=!1,distanceThreshold:s=3,element:r}={}){if(this.startEvent=null,this.lastMoveEvent=null,this.lastMoveEventInfo=null,this.lastRawMoveEventInfo=null,this.handlers={},this.contextWindow=window,this.scrollPositions=new Map,this.removeScrollListeners=null,this.onElementScroll=e=>{this.handleScroll(e.target)},this.onWindowScroll=()=>{this.handleScroll(window)},this.updatePoint=()=>{var e,t;if(!(this.lastMoveEvent&&this.lastMoveEventInfo))return;this.lastRawMoveEventInfo&&(this.lastMoveEventInfo=na(this.lastRawMoveEventInfo,this.transformPagePoint));let i=ns(this.lastMoveEventInfo,this.history),a=null!==this.startEvent,n=(e=i.offset,t={x:0,y:0},Math.sqrt(ne(e.x,t.x)**2+ne(e.y,t.y)**2)>=this.distanceThreshold);if(!a&&!n)return;let{point:s}=i,{timestamp:r}=eq;this.history.push({...s,timestamp:r});let{onStart:o,onMove:l}=this.handlers;a||(o&&o(this.lastMoveEvent,i),this.startEvent=this.lastMoveEvent),l&&l(this.lastMoveEvent,i)},this.handlePointerMove=(e,t)=>{this.lastMoveEvent=e,this.lastRawMoveEventInfo=t,this.lastMoveEventInfo=na(t,this.transformPagePoint),eR.update(this.updatePoint,!0)},this.handlePointerUp=(e,t)=>{this.end();let{onEnd:i,onSessionEnd:a,resumeAnimation:n}=this.handlers;if((this.dragSnapToOrigin||!this.startEvent)&&n&&n(),!(this.lastMoveEvent&&this.lastMoveEventInfo))return;let s=ns("pointercancel"===e.type?this.lastMoveEventInfo:na(t,this.transformPagePoint),this.history);this.startEvent&&i&&i(e,s),a&&a(e,s)},!a5(e))return;this.dragSnapToOrigin=n,this.handlers=t,this.transformPagePoint=i,this.distanceThreshold=s,this.contextWindow=a||window;const o=na(a6(e),this.transformPagePoint),{point:l}=o,{timestamp:u}=eq;this.history=[{...l,timestamp:u}];const{onSessionStart:d}=t;d&&d(e,ns(o,this.history));const c={passive:!0,capture:!0};this.removeListeners=iI(a8(this.contextWindow,"pointermove",this.handlePointerMove,c),a8(this.contextWindow,"pointerup",this.handlePointerUp,c),a8(this.contextWindow,"pointercancel",this.handlePointerUp,c)),r&&this.startScrollTracking(r)}startScrollTracking(e){let t=e.parentElement;for(;t;){let e=getComputedStyle(t);(nt.has(e.overflowX)||nt.has(e.overflowY))&&this.scrollPositions.set(t,{x:t.scrollLeft,y:t.scrollTop}),t=t.parentElement}this.scrollPositions.set(window,{x:window.scrollX,y:window.scrollY}),window.addEventListener("scroll",this.onElementScroll,{capture:!0}),window.addEventListener("scroll",this.onWindowScroll),this.removeScrollListeners=()=>{window.removeEventListener("scroll",this.onElementScroll,{capture:!0}),window.removeEventListener("scroll",this.onWindowScroll)}}handleScroll(e){let t=this.scrollPositions.get(e);if(!t)return;let i=e===window,a=i?{x:window.scrollX,y:window.scrollY}:{x:e.scrollLeft,y:e.scrollTop},n={x:a.x-t.x,y:a.y-t.y};(0!==n.x||0!==n.y)&&(i?this.lastMoveEventInfo&&(this.lastMoveEventInfo.point.x+=n.x,this.lastMoveEventInfo.point.y+=n.y):this.history.length>0&&(this.history[0].x-=n.x,this.history[0].y-=n.y),this.scrollPositions.set(e,a),eR.update(this.updatePoint,!0))}updateHandlers(e){this.handlers=e}end(){this.removeListeners&&this.removeListeners(),this.removeScrollListeners&&this.removeScrollListeners(),this.scrollPositions.clear(),eL(this.updatePoint)}}function na(e,t){return t?{point:t(e.point)}:e}function nn(e,t){return{x:e.x-t.x,y:e.y-t.y}}function ns({point:e},t){return{point:e,delta:nn(e,nr(t)),offset:nn(e,t[0]),velocity:function(e){if(e.length<2)return{x:0,y:0};let t=e.length-1,i=null,a=nr(e);for(;t>=0&&(i=e[t],!(a.timestamp-i.timestamp>eB(.1)));)t--;if(!i)return{x:0,y:0};i===e[0]&&e.length>2&&a.timestamp-i.timestamp>2*eB(.1)&&(i=e[1]);let n=(a.timestamp-i.timestamp)/1e3;if(0===n)return{x:0,y:0};let s={x:(a.x-i.x)/n,y:(a.y-i.y)/n};return s.x===1/0&&(s.x=0),s.y===1/0&&(s.y=0),s}(t)}}function nr(e){return e[e.length-1]}function no(e,t,i){return{min:void 0!==t?e.min+t:void 0,max:void 0!==i?e.max+i-(e.max-e.min):void 0}}function nl(e,t){let i=t.min-e.min,a=t.max-e.max;return t.max-t.min<e.max-e.min&&([i,a]=[a,i]),{min:i,max:a}}function nu(e,t,i){return{min:nd(e,t),max:nd(e,i)}}
1function nd(e,t){return"number"==typeof e?e:e[t]||0}let nc=new WeakMap;class np{constructor(e){this.openDragLock=null,this.isDragging=!1,this.currentDirection=null,this.originPoint={x:0,y:0},this.constraints=!1,this.hasMutatedConstraints=!1,this.elastic=X(),this.latestPointerEvent=null,this.latestPanInfo=null,this.visualElement=e}start(e,{snapToCursor:t=!1,distanceThreshold:i}={}){let{presenceContext:a}=this.visualElement;if(a&&!1===a.isPresent)return;let n=e=>{t&&this.snapToCursor(a6(e).point),this.stopAnimation()},s=(e,t)=>{let{drag:i,dragPropagation:a,onDragStart:n}=this.getProps();if(i&&!a&&(this.openDragLock&&this.openDragLock(),this.openDragLock=function(e){if("x"===e||"y"===e)if(aV[e])return null;else return aV[e]=!0,()=>{aV[e]=!1};return aV.x||aV.y?null:(aV.x=aV.y=!0,()=>{aV.x=aV.y=!1})}(i),!this.openDragLock))return;this.latestPointerEvent=e,this.latestPanInfo=t,this.isDragging=!0,this.currentDirection=null,this.resolveConstraints(),this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!0,this.visualElement.projection.target=void 0),aD(e=>{let t=this.getAxisMotionValue(e).get()||0;if(E.test(t)){let{projection:i}=this.visualElement;if(i&&i.layout){let a=i.layout.layoutBox[e];a&&(t=aB(a)*(parseFloat(t)/100))}}this.originPoint[e]=t}),n&&eR.update(()=>n(e,t),!1,!0),iq(this.visualElement,"transform");let{animationState:s}=this.visualElement;s&&s.setActive("whileDrag",!0)},r=(e,t)=>{this.latestPointerEvent=e,this.latestPanInfo=t;let{dragPropagation:i,dragDirectionLock:a,onDirectionLock:n,onDrag:s}=this.getProps();if(!i&&!this.openDragLock)return;let{offset:r}=t;if(a&&null===this.currentDirection){this.currentDirection=function(e,t=10){let i=null;return Math.abs(e.y)>t?i="y":Math.abs(e.x)>t&&(i="x"),i}(r),null!==this.currentDirection&&n&&n(this.currentDirection);return}this.updateAxis("x",t.point,r),this.updateAxis("y",t.point,r),this.visualElement.render(),s&&eR.update(()=>s(e,t),!1,!0)},o=(e,t)=>{this.latestPointerEvent=e,this.latestPanInfo=t,this.stop(e,t),this.latestPointerEvent=null,this.latestPanInfo=null},l=()=>{let{dragSnapToOrigin:e}=this.getProps();(e||this.constraints)&&this.startAnimation({x:0,y:0})},{dragSnapToOrigin:u}=this.getProps();this.panSession=new ni(e,{onSessionStart:n,onStart:s,onMove:r,onSessionEnd:o,resumeAnimation:l},{transformPagePoint:this.visualElement.getTransformPagePoint(),dragSnapToOrigin:u,distanceThreshold:i,contextWindow:a7(this.visualElement),element:this.visualElement.current})}stop(e,t){let i=e||this.latestPointerEvent,a=t||this.latestPanInfo,n=this.isDragging;if(this.cancel(),!n||!a||!i)return;let{velocity:s}=a;this.startAnimation(s);let{onDragEnd:r}=this.getProps();r&&eR.postRender(()=>r(i,a))}cancel(){this.isDragging=!1;let{projection:e,animationState:t}=this.visualElement;e&&(e.isAnimationBlocked=!1),this.endPanSession();let{dragPropagation:i}=this.getProps();!i&&this.openDragLock&&(this.openDragLock(),this.openDragLock=null),t&&t.setActive("whileDrag",!1)}endPanSession(){this.panSession&&this.panSession.end(),this.panSession=void 0}updateAxis(e,t,i){let{drag:a}=this.getProps();if(!i||!nm(e,a,this.currentDirection))return;let n=this.getAxisMotionValue(e),s=this.originPoint[e]+i[e];this.constraints&&this.constraints[e]&&(s=function(e,{min:t,max:i},a){return void 0!==t&&e<t?e=a?tk(t,e,a.min):Math.max(e,t):void 0!==i&&e>i&&(e=a?tk(i,e,a.max):Math.min(e,i)),e}(s,this.constraints[e],this.elastic[e])),n.set(s)}resolveConstraints(){let{dragConstraints:e,dragElastic:t}=this.getProps(),i=this.visualElement.projection&&!this.visualElement.projection.layout?this.visualElement.projection.measure(!1):this.visualElement.projection?.layout,a=this.constraints;e&&iE(e)?this.constraints||(this.constraints=this.resolveRefConstraints()):e&&i?this.constraints=function(e,{top:t,left:i,bottom:a,right:n}){return{x:no(e.x,i,n),y:no(e.y,t,a)}}(i.layoutBox,e):this.constraints=!1,this.elastic=function(e=.35){return!1===e?e=0:!0===e&&(e=.35),{x:nu(e,"left","right"),y:nu(e,"top","bottom")}}(t),a!==this.constraints&&!iE(e)&&i&&this.constraints&&!this.hasMutatedConstraints&&aD(e=>{var t,a;let n;!1!==this.constraints&&this.getAxisMotionValue(e)&&(this.constraints[e]=(t=i.layoutBox[e],a=this.constraints[e],n={},void 0!==a.min&&(n.min=a.min-t.min),void 0!==a.max&&(n.max=a.max-t.min),n))})}resolveRefConstraints(){var e;let{dragConstraints:t,onMeasureDragConstraints:i}=this.getProps();if(!t||!iE(t))return!1;let a=t.current;ee();let{projection:n}=this.visualElement;if(!n||!n.layout)return!1;n.root&&(n.root.scroll=void 0,n.root.updateScroll());let s=function(e,t,i){let a=t1(e,i),{scroll:n}=t;return n&&(tK(a.x,n.offset.x),tK(a.y,n.offset.y)),a}(a,n.root,this.visualElement.getTransformPagePoint()),r=(e=n.layout.layoutBox,{x:nl(e.x,s.x),y:nl(e.y,s.y)});if(i){let e=i(function({x:e,y:t}){return{top:t.min,right:e.max,bottom:t.max,left:e.min}}(r));this.hasMutatedConstraints=!!e,e&&(r=tH(e))}return r}startAnimation(e){let{drag:t,dragMomentum:i,dragElastic:a,dragTransition:n,dragSnapToOrigin:s,onDragTransitionEnd:r}=this.getProps(),o=this.constraints||{};return Promise.all(aD(r=>{if(!nm(r,t,this.currentDirection))return;let l=o&&o[r]||{};(!0===s||s===r)&&(l={min:0,max:0});let u={type:"inertia",velocity:i?e[r]:0,bounceStiffness:a?200:1e6,bounceDamping:a?40:1e7,timeConstant:750,restDelta:1,restSpeed:10,...n,...l};return this.startAxisValueAnimation(r,u)})).then(r)}startAxisValueAnimation(e,t){let i=this.getAxisMotionValue(e);return iq(this.visualElement,e),i.start(aR(e,i,0,t,this.visualElement,!1))}stopAnimation(){aD(e=>this.getAxisMotionValue(e).stop())}getAxisMotionValue(e){let t=`_drag${e.toUpperCase()}`;return this.visualElement.getProps()[t]||this.visualElement.getValue(e,this.visualElement.latestValues[e]??0)}snapToCursor(e){aD(t=>{let{drag:i}=this.getProps();if(!nm(t,i,this.currentDirection))return;let{projection:a}=this.visualElement,n=this.getAxisMotionValue(t);if(a&&a.layout){let{min:i,max:s}=a.layout.layoutBox[t],r=n.get()||0;n.set(e[t]-tk(i,s,.5)+r)}})}scalePositionWithinConstraints(){if(!this.visualElement.current)return;let{drag:e,dragConstraints:t}=this.getProps(),{projection:i}=this.visualElement;if(!iE(t)||!i||!this.constraints)return;this.stopAnimation();let a={x:0,y:0};aD(e=>{let t=this.getAxisMotionValue(e);if(t&&!1!==this.constraints){var i,n;let s,o,l,u=t.get();a[e]=(i={min:u,max:u},n=this.constraints[e],s=.5,o=aB(i),(l=aB(n))>o?s=al(n.min,n.max-o,i.min):o>l&&(s=al(i.min,i.max-l,n.min)),r(0,1,s))}});let{transformTemplate:n}=this.visualElement.getProps();this.visualElement.current.style.transform=n?n({},""):"none",i.root&&i.root.updateScroll(),i.updateLayout(),this.constraints=!1,this.resolveConstraints(),aD(t=>{if(!nm(t,e,null))return;let i=this.getAxisMotionValue(t),{min:n,max:s}=this.constraints[t];i.set(tk(n,s,a[t]))}),this.visualElement.render()}addListeners(){let e;if(!this.visualElement.current)return;nc.set(this.visualElement,this);let t=this.visualElement.current,i=a8(t,"pointerdown",e=>{let{drag:i,dragListener:a=!0}=this.getProps(),n=e.target,s=n!==t&&(a9.has(n.tagName)||!0===n.isContentEditable);i&&a&&!s&&this.start(e)}),a=()=>{var i,a,n;let s,r,{dragConstraints:o}=this.getProps();iE(o)&&o.current&&(this.constraints=this.resolveRefConstraints(),e||(i=t,a=o.current,s=a2(i,nh(n=()=>this.scalePositionWithinConstraints())),r=a2(a,nh(n)),e=()=>{s(),r()}))},{projection:n}=this.visualElement,s=n.addEventListener("measure",a);n&&!n.layout&&(n.root&&n.root.updateScroll(),n.updateLayout()),eR.read(a);let r=a_(window,"resize",()=>this.scalePositionWithinConstraints()),o=n.addEventListener("didUpdate",({delta:e,hasLayoutChanged:t})=>{this.isDragging&&t&&(aD(t=>{let i=this.getAxisMotionValue(t);i&&(this.originPoint[t]+=e[t].translate,i.set(i.get()+e[t].translate))}),this.visualElement.render())});return()=>{r(),i(),s(),o&&o(),e&&e()}}getProps(){let e=this.visualElement.getProps(),{drag:t=!1,dragDirectionLock:i=!1,dragPropagation:a=!1,dragConstraints:n=!1,dragElastic:s=.35,dragMomentum:r=!0}=e;return{...e,drag:t,dragDirectionLock:i,dragPropagation:a,dragConstraints:n,dragElastic:s,dragMomentum:r}}}function nh(e){let t=!0;return()=>{if(t){t=!1;return}e()}}function nm(e,t,i){return(!0===t||t===e)&&(null===i||i===e)}let nf=e=>(t,i)=>{e&&eR.update(()=>e(t,i),!1,!0)},ng={hasAnimatedSinceResize:!0,hasEverUpdated:!1};var nv=t2;let nx=!1;class nb extends nv.Component{componentDidMount(){let{visualElement:e,layoutGroup:t,switchLayoutGroup:i,layoutId:a}=this.props,{projection:n}=e;n&&(t.group&&t.group.add(n),i&&i.register&&a&&i.register(n),nx&&n.root.didUpdate(),n.addEventListener("animationComplete",()=>{this.safeToRemove()}),n.setOptions({...n.options,layoutDependency:this.props.layoutDependency,onExitComplete:()=>this.safeToRemove()})),ng.hasEverUpdated=!0}getSnapshotBeforeUpdate(e){let{layoutDependency:t,visualElement:i,drag:a,isPresent:n}=this.props,{projection:s}=i;return s&&(s.isPresent=n,e.layoutDependency!==t&&s.setOptions({...s.options,layoutDependency:t}),nx=!0,a||e.layoutDependency!==t||void 0===t||e.isPresent!==n?s.willUpdate():this.safeToRemove(),e.isPresent!==n&&(n?s.promote():s.relegate()||eR.postRender(()=>{let e=s.getStack();e&&e.members.length||this.safeToRemove()}))),null}componentDidUpdate(){let{visualElement:e,layoutAnchor:t}=this.props,{projection:i}=e;i&&(i.options.layoutAnchor=t,i.root.didUpdate(),e6.postRender(()=>{!i.currentAnimation&&i.isLead()&&this.safeToRemove()}))}componentWillUnmount(){let{visualElement:e,layoutGroup:t,switchLayoutGroup:i}=this.props,{projection:a}=e;nx=!0,a&&(a.scheduleCheckAfterUnmount(),t&&t.group&&t.group.remove(a),i&&i.deregister&&i.deregister(a))}safeToRemove(){let{safeToRemove:e}=this.props;e&&e()}render(){return null}}function nE(e){let[t,i]=function(e=!0){let t=(0,t2.useContext)(iu);if(null===t)return[!0,null];let{isPresent:i,onExitComplete:a,register:n}=t,s=(0,t2.useId)();(0,t2.useEffect)(()=>
1{if(e)return n(s)},[e]);let r=(0,t2.useCallback)(()=>e&&a&&a(s),[s,a,e]);return!i&&a?[!1,r]:[!0]}(),a=(0,nv.useContext)(t6);return(0,t5.jsx)(nb,{...e,layoutGroup:a,switchLayoutGroup:(0,nv.useContext)(ib),isPresent:t,safeToRemove:i})}let ny=tO.length,nA=e=>"string"==typeof e?parseFloat(e):e,nw=e=>"number"==typeof e||y.test(e);function nT(e,t){return void 0!==e[t]?e[t]:e.borderRadius}let nS=nL(0,.5,an),nR=nL(.5,.95,eA);function nL(e,t,i){return a=>a<e?0:a>t?1:i(al(e,t,a))}function nq(e,t){e.min=t.min,e.max=t.max}function nI(e,t){nq(e.x,t.x),nq(e.y,t.y)}function nN(e,t){e.translate=t.translate,e.scale=t.scale,e.originPoint=t.originPoint,e.origin=t.origin}function nC(e,t,i,a,n){return e-=t,e=a+1/i*(e-a),void 0!==n&&(e=a+1/n*(e-a)),e}function nU(e,t,[i,a,n],s,r){!function(e,t=0,i=1,a=.5,n,s=e,r=e){if(E.test(t)&&(t=parseFloat(t),t=tk(r.min,r.max,t/100)-r.min),"number"!=typeof t)return;let o=tk(s.min,s.max,a);e===s&&(o-=t),e.min=nC(e.min,t,i,o,n),e.max=nC(e.max,t,i,o,n)}(e,t[i],t[a],t[n],t.scale,s,r)}let nP=["x","scaleX","originX"],nO=["y","scaleY","originY"];function nM(e,t,i,a){nU(e.x,t,nP,i?i.x:void 0,a?a.x:void 0),nU(e.y,t,nO,i?i.y:void 0,a?a.y:void 0)}function nj(e){return 0===e.translate&&1===e.scale}function nk(e){return nj(e.x)&&nj(e.y)}function nD(e,t){return e.min===t.min&&e.max===t.max}function n_(e,t){return Math.round(e.min)===Math.round(t.min)&&Math.round(e.max)===Math.round(t.max)}function nV(e,t){return n_(e.x,t.x)&&n_(e.y,t.y)}function nB(e){return aB(e.x)/aB(e.y)}function nF(e,t){return e.translate===t.translate&&e.scale===t.scale&&e.originPoint===t.originPoint}class nH{constructor(){this.members=[]}add(e){eF(this.members,e);for(let t=this.members.length-1;t>=0;t--){let i=this.members[t];if(i===e||i===this.lead||i===this.prevLead)continue;let a=i.instance;a&&!1!==a.isConnected||i.snapshot||(eH(this.members,i),i.unmount())}e.scheduleRender()}remove(e){if(eH(this.members,e),e===this.prevLead&&(this.prevLead=void 0),e===this.lead){let e=this.members[this.members.length-1];e&&this.promote(e)}}relegate(e){for(let t=this.members.indexOf(e)-1;t>=0;t--){let e=this.members[t];if(!1!==e.isPresent&&e.instance?.isConnected!==!1)return this.promote(e),!0}return!1}promote(e,t){let i=this.lead;if(e!==i&&(this.prevLead=i,this.lead=e,e.show(),i)){i.updateSnapshot(),e.scheduleRender();let{layoutDependency:a}=i.options,{layoutDependency:n}=e.options;(void 0===a||a!==n)&&(e.resumeFrom=i,t&&(i.preserveOpacity=!0),i.snapshot&&(e.snapshot=i.snapshot,e.snapshot.latestValues=i.animationValues||i.latestValues),e.root?.isUpdating&&(e.isLayoutDirty=!0)),!1===e.options.crossfade&&i.hide()}}exitAnimationComplete(){this.members.forEach(e=>{e.options.onExitComplete?.(),e.resumingFrom?.options.onExitComplete?.()})}scheduleRender(){this.members.forEach(e=>e.instance&&e.scheduleRender(!1))}removeLeadSnapshot(){this.lead?.snapshot&&(this.lead.snapshot=void 0)}}let nz=(e,t)=>e.depth-t.depth;class nG{constructor(){this.children=[],this.isDirty=!1}add(e){eF(this.children,e),this.isDirty=!0}remove(e){eH(this.children,e),this.isDirty=!0}forEach(e){this.isDirty&&this.children.sort(nz),this.isDirty=!1,this.children.forEach(e)}}let nX=["","X","Y","Z"],nW=0;function n$(e,t,i,a){let{latestValues:n}=t;n[e]&&(i[e]=n[e],t.setStaticValue(e,0),a&&(a[e]=0))}function nQ({attachResizeListener:e,defaultParent:t,measureScroll:i,checkIsScrollRoot:a,resetTransform:n}){return class{constructor(e={},i=t?.()){this.id=nW++,this.animationId=0,this.animationCommitId=0,this.children=new Set,this.options={},this.isTreeAnimating=!1,this.isAnimationBlocked=!1,this.isLayoutDirty=!1,this.isProjectionDirty=!1,this.isSharedProjectionDirty=!1,this.isTransformDirty=!1,this.updateManuallyBlocked=!1,this.updateBlockedByResize=!1,this.isUpdating=!1,this.isSVG=!1,this.needsReset=!1,this.shouldResetTransform=!1,this.hasCheckedOptimisedAppear=!1,this.treeScale={x:1,y:1},this.eventHandlers=new Map,this.hasTreeAnimated=!1,this.layoutVersion=0,this.updateScheduled=!1,this.scheduleUpdate=()=>this.update(),this.projectionUpdateScheduled=!1,this.checkUpdateFailed=()=>{this.isUpdating&&(this.isUpdating=!1,this.clearAllSnapshots())},this.updateProjection=()=>
1{this.projectionUpdateScheduled=!1,this.nodes.forEach(nJ),this.nodes.forEach(n6),this.nodes.forEach(n8),this.nodes.forEach(nZ)},this.resolvedRelativeTargetAt=0,this.linkedParentVersion=0,this.hasProjected=!1,this.isVisible=!0,this.animationProgress=0,this.sharedNodes=new Map,this.latestValues=e,this.root=i?i.root||i:this,this.path=i?[...i.path,i]:[],this.parent=i,this.depth=i?i.depth+1:0;for(let e=0;e<this.path.length;e++)this.path[e].shouldResetTransform=!0;this.root===this&&(this.nodes=new nG)}addEventListener(e,t){return this.eventHandlers.has(e)||this.eventHandlers.set(e,new ez),this.eventHandlers.get(e).add(t)}notifyListeners(e,...t){let i=this.eventHandlers.get(e);i&&i.notify(...t)}hasListeners(e){return this.eventHandlers.has(e)}mount(t){if(this.instance)return;this.isSVG=a$(t)&&!(a$(t)&&"svg"===t.tagName),this.instance=t;let{layoutId:i,layout:a,visualElement:n}=this.options;if(n&&!n.current&&n.mount(t),this.root.nodes.add(this),this.parent&&this.parent.children.add(this),this.root.hasTreeAnimated&&(a||i)&&(this.isLayoutDirty=!0),e){let i,a=0,n=()=>this.root.updateBlockedByResize=!1;eR.read(()=>{a=window.innerWidth}),e(t,()=>{let e=window.innerWidth;if(e!==a){let t,s;a=e,this.root.updateBlockedByResize=!0,i&&i(),t=e7.now(),s=({timestamp:e})=>{let i=e-t;i>=250&&(eL(s),n())},eR.setup(s,!0),i=()=>eL(s),ng.hasAnimatedSinceResize&&(ng.hasAnimatedSinceResize=!1,this.nodes.forEach(n5))}})}i&&this.root.registerSharedNode(i,this),!1!==this.options.animate&&n&&(i||a)&&this.addEventListener("didUpdate",({delta:e,hasLayoutChanged:t,hasRelativeLayoutChanged:i,layout:a})=>{if(this.isTreeAnimationBlocked()){this.target=void 0,this.relativeTarget=void 0;return}let s=this.options.transition||n.getDefaultTransition()||sn,{onLayoutAnimationStart:r,onLayoutAnimationComplete:o}=n.getProps(),l=!this.targetLayout||!nV(this.targetLayout,a),u=!t&&i;if(this.options.layoutRoot||this.resumeFrom||u||t&&(l||!this.currentAnimation)){this.resumeFrom&&(this.resumingFrom=this.resumeFrom,this.resumingFrom.resumingFrom=void 0);let t={...iR(s,"layout"),onPlay:r,onComplete:o};(n.shouldReduceMotion||this.options.layoutRoot)&&(t.delay=0,t.type=!1),this.startAnimation(t),this.setAnimationOrigin(e,u,t.path)}else t||n5(this),this.isLead()&&this.options.onExitComplete&&this.options.onExitComplete();this.targetLayout=a})}unmount(){this.options.layoutId&&this.willUpdate(),this.root.nodes.remove(this);let e=this.getStack();e&&e.remove(this),this.parent&&this.parent.children.delete(this),this.instance=void 0,this.eventHandlers.clear(),eL(this.updateProjection)}blockUpdate(){this.updateManuallyBlocked=!0}unblockUpdate(){this.updateManuallyBlocked=!1}isUpdateBlocked(){return this.updateManuallyBlocked||this.updateBlockedByResize}isTreeAnimationBlocked(){return this.isAnimationBlocked||this.parent&&this.parent.isTreeAnimationBlocked()||!1}startUpdate(){!this.isUpdateBlocked()&&(this.isUpdating=!0,this.nodes&&this.nodes.forEach(n7),this.animationId++)}getTransformTemplate(){let{visualElement:e}=this.options;return e&&e.getProps().transformTemplate}willUpdate(e=!0){if(this.root.hasTreeAnimated=!0,this.root.isUpdateBlocked()){this.options.onExitComplete&&this.options.onExitComplete();return}if(window.MotionCancelOptimisedAnimation&&!this.hasCheckedOptimisedAppear&&function e(t){if(t.hasCheckedOptimisedAppear=!0,t.root===t)return;let{visualElement:i}=t.options;if(!i)return;let a=i.props[ix];if(window.MotionHasOptimisedAnimation(a,"transform")){let{layout:e,layoutId:i}=t.options;window.MotionCancelOptimisedAnimation(a,"transform",eR,!(e||i))}let{parent:n}=t;n&&!n.hasCheckedOptimisedAppear&&e(n)}(this),this.root.isUpdating||this.root.startUpdate(),this.isLayoutDirty)return;this.isLayoutDirty=!0;for(let e=0;e<this.path.length;e++){let t=this.path[e];t.shouldResetTransform=!0,("string"==typeof t.latestValues.x||"string"==typeof t.latestValues.y)&&(t.isLayoutDirty=!0),t.updateScroll("snapshot"),t.options.layoutRoot&&t.willUpdate(!1)}let{layoutId:t,layout:i}=this.options;if(void 0===t&&!i)return;let a=this.getTransformTemplate();this.prevTransformTemplateValue=a?a(this.latestValues,""):void 0,this.updateSnapshot(),e&&this.notifyListeners("willUpdate")}update(){if(this.updateScheduled=!1,this.isUpdateBlocked()){let e=this.updateBlockedByResize;this.unblockUpdate(),this.updateBlockedByResize=!1,this.clearAllSnapshots(),e&&this.nodes.forEac
1h(n4),this.nodes.forEach(n1);return}if(this.animationId<=this.animationCommitId)return void this.nodes.forEach(n2);this.animationCommitId=this.animationId,this.isUpdating?(this.isUpdating=!1,this.nodes.forEach(n3),this.nodes.forEach(n9),this.nodes.forEach(nY),this.nodes.forEach(nK)):this.nodes.forEach(n2),this.clearAllSnapshots();let e=e7.now();eq.delta=r(0,1e3/60,e-eq.timestamp),eq.timestamp=e,eq.isProcessing=!0,eI.update.process(eq),eI.preRender.process(eq),eI.render.process(eq),eq.isProcessing=!1}didUpdate(){this.updateScheduled||(this.updateScheduled=!0,e6.read(this.scheduleUpdate))}clearAllSnapshots(){this.nodes.forEach(n0),this.sharedNodes.forEach(se)}scheduleUpdateProjection(){this.projectionUpdateScheduled||(this.projectionUpdateScheduled=!0,eR.preRender(this.updateProjection,!1,!0))}scheduleCheckAfterUnmount(){eR.postRender(()=>{this.isLayoutDirty?this.root.didUpdate():this.root.checkUpdateFailed()})}updateSnapshot(){!this.snapshot&&this.instance&&(this.snapshot=this.measure(),!this.snapshot||aB(this.snapshot.measuredBox.x)||aB(this.snapshot.measuredBox.y)||(this.snapshot=void 0))}updateLayout(){if(!this.instance||(this.updateScroll(),!(this.options.alwaysMeasureLayout&&this.isLead())&&!this.isLayoutDirty))return;if(this.resumeFrom&&!this.resumeFrom.instance)for(let e=0;e<this.path.length;e++)this.path[e].updateScroll();let e=this.layout;this.layout=this.measure(!1),this.layoutVersion++,this.layoutCorrected||(this.layoutCorrected=X()),this.isLayoutDirty=!1,this.projectionDelta=void 0,this.notifyListeners("measure",this.layout.layoutBox);let{visualElement:t}=this.options;t&&t.notify("LayoutMeasure",this.layout.layoutBox,e?e.layoutBox:void 0)}updateScroll(e="measure"){let t=!!(this.options.layoutScroll&&this.instance);if(this.scroll&&this.scroll.animationId===this.root.animationId&&this.scroll.phase===e&&(t=!1),t&&this.instance){let t=a(this.instance);this.scroll={animationId:this.root.animationId,phase:e,isRoot:t,offset:i(this.instance),wasRoot:this.scroll?this.scroll.isRoot:t}}}resetTransform(){if(!n)return;let e=this.isLayoutDirty||this.shouldResetTransform||this.options.alwaysMeasureLayout,t=this.projectionDelta&&!nk(this.projectionDelta),i=this.getTransformTemplate(),a=i?i(this.latestValues,""):void 0,s=a!==this.prevTransformTemplateValue;e&&this.instance&&(t||tX(this.latestValues)||s)&&(n(this.instance,a),this.shouldResetTransform=!1,this.scheduleRender())}measure(e=!0){var t;let i=this.measurePageBox(),a=this.removeElementScroll(i);return e&&(a=this.removeTransform(a)),so((t=a).x),so(t.y),{animationId:this.root.animationId,measuredBox:i,layoutBox:a,latestValues:{},source:this.id}}measurePageBox(){let{visualElement:e}=this.options;if(!e)return X();let t=e.measureViewportBox();if(!(this.scroll?.wasRoot||this.path.some(su))){let{scroll:e}=this.root;e&&(tK(t.x,e.offset.x),tK(t.y,e.offset.y))}return t}removeElementScroll(e){let t=X();if(nI(t,e),this.scroll?.wasRoot)return t;for(let i=0;i<this.path.length;i++){let a=this.path[i],{scroll:n,options:s}=a;a!==this.root&&n&&s.layoutScroll&&(n.wasRoot&&nI(t,e),tK(t.x,n.offset.x),tK(t.y,n.offset.y))}return t}applyTransform(e,t=!1,i){let a=i||X();nI(a,e);for(let e=0;e<this.path.length;e++){let i=this.path[e];!t&&i.options.layoutScroll&&i.scroll&&i!==i.root&&(tK(a.x,-i.scroll.offset.x),tK(a.y,-i.scroll.offset.y)),tX(i.latestValues)&&t0(a,i.latestValues,i.layout?.layoutBox)}return tX(this.latestValues)&&t0(a,this.latestValues,this.layout?.layoutBox),a}removeTransform(e){let t=X();nI(t,e);for(let e=0;e<this.path.length;e++){let i,a=this.path[e];tX(a.latestValues)&&(a.instance&&(tG(a.latestValues)&&a.updateSnapshot(),nI(i=X(),a.measurePageBox())),nM(t,a.latestValues,a.snapshot?.layoutBox,i))}return tX(this.latestValues)&&nM(t,this.latestValues),t}setTargetDelta(e){this.targetDelta=e,this.root.scheduleUpdateProjection(),this.isProjectionDirty=!0}setOptions(e){this.options={...this.options,...e,crossfade:void 0===e.crossfade||e.crossfade}}clearMeasurements(){this.scroll=void 0,this.layout=void 0,this.snapshot=void 0,this.prevTransformTemplateValue=void 0,this.targetDelta=void 0,this.target=void 0,this.isLayoutDirty=!1}forceRelativeParentToResolveTarget(){this.relativeParent&&this.relativeParent.resolvedRelativeTargetAt!==eq.timestamp&&this.relativeParent.resolveTargetDelta(!0)}resolveTargetDelta(e=!1){let t=this.getLead();this.isProjectionDirty||(this.isProjectionDirty=t.isProjectionDirty),this.isTransformDirty||(this.isTransformDirty=t.
1isTransformDirty),this.isSharedProjectionDirty||(this.isSharedProjectionDirty=t.isSharedProjectionDirty);let i=!!this.resumingFrom||this!==t;if(!(e||i&&this.isSharedProjectionDirty||this.isProjectionDirty||this.parent?.isProjectionDirty||this.attemptToResolveRelativeTarget||this.root.updateBlockedByResize))return;let{layout:a,layoutId:n}=this.options;if(!this.layout||!(a||n))return;this.resolvedRelativeTargetAt=eq.timestamp;let s=this.getClosestProjectingParent();if(s&&this.linkedParentVersion!==s.layoutVersion&&!s.options.layoutRoot&&this.removeRelativeTarget(),this.targetDelta||this.relativeTarget||(!1!==this.options.layoutAnchor&&s&&s.layout?this.createRelativeTarget(s,this.layout.layoutBox,s.layout.layoutBox):this.removeRelativeTarget()),this.relativeTarget||this.targetDelta){if(this.target||(this.target=X(),this.targetWithTransforms=X()),this.relativeTarget&&this.relativeTargetOrigin&&this.relativeParent&&this.relativeParent.target){var r,o,l,u;this.forceRelativeParentToResolveTarget(),r=this.target,o=this.relativeTarget,l=this.relativeParent.target,u=this.options.layoutAnchor||void 0,az(r.x,o.x,l.x,u?.x),az(r.y,o.y,l.y,u?.y)}else this.targetDelta?(this.resumingFrom?this.applyTransform(this.layout.layoutBox,!1,this.target):nI(this.target,this.layout.layoutBox),tY(this.target,this.targetDelta)):nI(this.target,this.layout.layoutBox);this.attemptToResolveRelativeTarget&&(this.attemptToResolveRelativeTarget=!1,!1!==this.options.layoutAnchor&&s&&!!s.resumingFrom==!!this.resumingFrom&&!s.options.layoutScroll&&s.target&&1!==this.animationProgress?this.createRelativeTarget(s,this.target,s.target):this.relativeParent=this.relativeTarget=void 0)}}getClosestProjectingParent(){if(!(!this.parent||tG(this.parent.latestValues)||tW(this.parent.latestValues)))if(this.parent.isProjecting())return this.parent;else return this.parent.getClosestProjectingParent()}isProjecting(){return!!((this.relativeTarget||this.targetDelta||this.options.layoutRoot)&&this.layout)}createRelativeTarget(e,t,i){this.relativeParent=e,this.linkedParentVersion=e.layoutVersion,this.forceRelativeParentToResolveTarget(),this.relativeTarget=X(),this.relativeTargetOrigin=X(),aX(this.relativeTargetOrigin,t,i,this.options.layoutAnchor||void 0),nI(this.relativeTarget,this.relativeTargetOrigin)}removeRelativeTarget(){this.relativeParent=this.relativeTarget=void 0}calcProjection(){let e=this.getLead(),t=!!this.resumingFrom||this!==e,i=!0;if((this.isProjectionDirty||this.parent?.isProjectionDirty)&&(i=!1),t&&(this.isSharedProjectionDirty||this.isTransformDirty)&&(i=!1),this.resolvedRelativeTargetAt===eq.timestamp&&(i=!1),i)return;let{layout:a,layoutId:n}=this.options;if(this.isTreeAnimating=!!(this.parent&&this.parent.isTreeAnimating||this.currentAnimation||this.pendingAnimation),this.isTreeAnimating||(this.targetDelta=this.relativeTarget=void 0),!this.layout||!(a||n))return;nI(this.layoutCorrected,this.layout.layoutBox);let s=this.treeScale.x,r=this.treeScale.y;!function(e,t,i,a=!1){let n,s,r=i.length;if(r){t.x=t.y=1;for(let o=0;o<r;o++){s=(n=i[o]).projectionDelta;let{visualElement:r}=n.options;(!r||!r.props.style||"contents"!==r.props.style.display)&&(a&&n.options.layoutScroll&&n.scroll&&n!==n.root&&(tK(e.x,-n.scroll.offset.x),tK(e.y,-n.scroll.offset.y)),s&&(t.x*=s.x.scale,t.y*=s.y.scale,tY(e,s)),a&&tX(n.latestValues)&&t0(e,n.latestValues,n.layout?.layoutBox))}t.x<1.0000000000001&&t.x>.999999999999&&(t.x=1),t.y<1.0000000000001&&t.y>.999999999999&&(t.y=1)}}(this.layoutCorrected,this.treeScale,this.path,t),e.layout&&!e.target&&(1!==this.treeScale.x||1!==this.treeScale.y)&&(e.target=e.layout.layoutBox,e.targetWithTransforms=X());let{target:o}=e;if(!o){this.prevProjectionDelta&&(this.createProjectionDeltas(),this.scheduleRender());return}this.projectionDelta&&this.prevProjectionDelta?(nN(this.prevProjectionDelta.x,this.projectionDelta.x),nN(this.prevProjectionDelta.y,this.projectionDelta.y)):this.createProjectionDeltas(),aH(this.projectionDelta,this.layoutCorrected,o,this.latestValues),this.treeScale.x===s&&this.treeScale.y===r&&nF(this.projectionDelta.x,this.prevProjectionDelta.x)&&nF(this.projectionDelta.y,this.prevProjectionDelta.y)||(this.hasProjected=!0,this.scheduleRender(),this.notifyListeners("projectionUpdate",o))}hide(){this.isVisible=!1}show(){this.isVisible=!0}scheduleRender(e=!0){if(this.options.visualElement?.scheduleRender(),e){let e=this.getStack();e&&e.scheduleRender()}this.resumingFrom&&!this.resumingFrom.instance&&(this.resumingFrom=void 0)}createProjectionDeltas(){this.prevProjectionDelta=z(),this.projectionDelta=z(),this.projectionDeltaWithTransform=z()}setAnimationOrigin(e,t=!1,i){let a,n=this.snapshot,s=n?n.latestValues:{},r={...this.latestValues},o=z();this.relativeParent&&this.relativeParent.options.layoutRoot||(this.relativeTarget=this.relativeTargetOrigin=void 0),this.attemptToResolveRelativeTarget=!t;let l=X(),u=(n?n.source:void 0)!==(this.layout?this.layout.source:void 0),d=this.getStack(),c=!d||d.members.length<=1,p=!!(u&&!c&&!0===this.options.crossfade&&!this.path.some(sa));this.animationProgress=0;let h=i?.interpolateProjection(e);this.mixTargetDelta=t=>{let i=t/1e3,n=h?.(i);if(n?(o.x.translate=n.x,o.x.scale=tk(e.x.scale,1,i),o.x.origin=e.x.origin,o.x.originPoint=e.x.originPoint,o.y.translate=n.y,o.y.scale=tk(e.y.scale,1,i),o.y.origin=e.y.origin,o.y.originPoint=e.y.originPoint):(st(o.x,e.x,i),st(o.y,e.y,i)),this.setTargetDelta(o),this.relativeTarget&&this.relativeTargetOrigin&&this.layout&&this.relativeParent&&this.relativeParent.layout){var d,m,f,g,v,x;aX(l,this.layout.layoutBox,this.relativeParent.layout.layoutBox,this.options.layoutAnchor||void 0),f=this.relativeTarget,g=this.relativeTargetOrigin,v=l,x=i,si(f.x,g.x,v.x,x),si(f.y,g.y,v.y,x),a&&(d=this.relativeTarget,m=a,nD(d.x,m.x)&&nD(d.y,m.y))&&(this.isProjectionDirty=!1),a||(a=X()),nI(a,this.relativeTarget)}u&&(this.animationValues=r,function(e,t,i,a,n,s){n?(e.opacity=tk(0,i.opacity??1,nS(a)),e.opacityExit=tk(t.opacity??1,0,nR(a))):s&&(e.opacity=tk(t.opacity??1,i.opacity??1,a));for(let n=0;n<ny;n++){let s=tO[n],r=nT(t,s),o=nT(i,s);(void 0!==r||void 0!==o)&&(r||(r=0),o||(o=0),0===r||0===o||nw(r)===nw(o)?(e[s]=Math.max(tk(nA(r),nA(o),a),0),(E.test(o)||E.test(r))&&(e[s]+="
1%")):e[s]=o)}(t.rotate||i.rotate)&&(e.rotate=tk(t.rotate||0,i.rotate||0,a))}(r,s,this.latestValues,i,p,c)),n&&void 0!==n.rotate&&(this.animationValues||(this.animationValues=r),this.animationValues.pathRotation=n.rotate),this.root.scheduleUpdateProjection(),this.scheduleRender(),this.animationProgress=i},this.mixTargetDelta(1e3*!!this.options.layoutRoot)}startAnimation(e){this.notifyListeners("animationStart"),this.currentAnimation?.stop(),this.resumingFrom?.currentAnimation?.stop(),this.pendingAnimation&&(eL(this.pendingAnimation),this.pendingAnimation=void 0),this.pendingAnimation=eR.update(()=>{var t,i,a;let n;ng.hasAnimatedSinceResize=!0,this.motionValue||(this.motionValue=ta(0)),this.motionValue.jump(0,!1),this.currentAnimation=(t=this.motionValue,i=[0,1e3],a={...e,velocity:0,isSync:!0,onUpdate:t=>{this.mixTargetDelta(t),e.onUpdate&&e.onUpdate(t)},onComplete:()=>{e.onComplete&&e.onComplete(),this.completeAnimation()}},(n=W(t)?t:ta(t)).start(aR("",n,i,a)),n.animation),this.resumingFrom&&(this.resumingFrom.currentAnimation=this.currentAnimation),this.pendingAnimation=void 0})}completeAnimation(){this.resumingFrom&&(this.resumingFrom.currentAnimation=void 0,this.resumingFrom.preserveOpacity=void 0);let e=this.getStack();e&&e.exitAnimationComplete(),this.resumingFrom=this.currentAnimation=this.animationValues=void 0,this.notifyListeners("animationComplete")}finishAnimation(){this.currentAnimation&&(this.mixTargetDelta&&this.mixTargetDelta(1e3),this.currentAnimation.stop()),this.completeAnimation()}applyTransformsToTarget(){let e=this.getLead(),{targetWithTransforms:t,target:i,layout:a,latestValues:n}=e;if(t&&i&&a){if(this!==e&&this.layout&&a&&sl(this.options.animationType,this.layout.layoutBox,a.layoutBox)){i=this.target||X();let t=aB(this.layout.layoutBox.x);i.x.min=e.target.x.min,i.x.max=i.x.min+t;let a=aB(this.layout.layoutBox.y);i.y.min=e.target.y.min,i.y.max=i.y.min+a}nI(t,i),t0(t,n),aH(this.projectionDeltaWithTransform,this.layoutCorrected,t,n)}}registerSharedNode(e,t){this.sharedNodes.has(e)||this.sharedNodes.set(e,new nH),this.sharedNodes.get(e).add(t);let i=t.options.initialPromotionConfig;t.promote({transition:i?i.transition:void 0,preserveFollowOpacity:i&&i.shouldPreserveFollowOpacity?i.shouldPreserveFollowOpacity(t):void 0})}isLead(){let e=this.getStack();return!e||e.lead===this}getLead(){let{layoutId:e}=this.options;return e&&this.getStack()?.lead||this}getPrevLead(){let{layoutId:e}=this.options;return e?this.getStack()?.prevLead:void 0}getStack(){let{layoutId:e}=this.options;if(e)return this.root.sharedNodes.get(e)}promote({needsReset:e,transition:t,preserveFollowOpacity:i}={}){let a=this.getStack();a&&a.promote(this,i),e&&(this.projectionDelta=void 0,this.needsReset=!0),t&&this.setOptions({transition:t})}relegate(){let e=this.getStack();return!!e&&e.relegate(this)}resetSkewAndRotation(){let{visualElement:e}=this.options;if(!e)return;let t=!1,{latestValues:i}=e;if((i.z||i.rotate||i.rotateX||i.rotateY||i.rotateZ||i.skewX||i.skewY)&&(t=!0),!t)return;let a={};i.z&&n$("z",e,a,this.animationValues);for(let t=0;t<nX.length;t++)n$(`rotate${nX[t]}`,e,a,this.animationValues),n$(`skew${nX[t]}`,e,a,this.animationValues);for(let t in e.render(),a)e.setStaticValue(t,a[t]),this.animationValues&&(this.animationValues[t]=a[t]);e.scheduleRender()}applyProjectionStyles(e,t){if(!this.instance||this.isSVG)return;if(!this.isVisible){e.visibility="hidden";return}let i=this.getTransformTemplate();if(this.needsReset){this.needsReset=!1,e.visibility="",e.opacity="",e.pointerEvents=il(t?.pointerEvents)||"",e.transform=i?i(this.latestValues,""):"none";return}let a=this.getLead();if(!this.projectionDelta||!this.layout||!a.target){this.options.layoutId&&(e.opacity=void 0!==this.latestValues.opacity?this.latestValues.opacity:1,e.pointerEvents=il(t?.pointerEvents)||""),this.hasProjected&&!tX(this.latestValues)&&(e.transform=i?i({},""):"none",this.hasProjected=!1);return}e.visibility="";let n=a.animationValues||a.latestValues;this.applyTransformsToTarget();let s=function(e,t,i){let a="",n=e.x.translate/t.x,s=e.y.translate/t.y,r=i?.z||0;if((n||s||r)&&(a=`translate3d(${n}px, ${s}px, ${r}px) `),(1!==t.x||1!==t.y)&&(a+=`scale(${1/t.x}, ${1/t.y}) `),i){let{transformPerspective:e,rotate:t,pathRotation:n,rotateX:s,rotateY:r,skewX:o,skewY:l}=i;e&&(a=`perspective(${e}px) ${a}`),t&&(a+=`rotate(${t}deg) `),n&&(a+=`rotate(${n}deg) `),s&&(a+=`rotateX(${s}deg) `),r&&(a+=`rotateY(${r}deg) `),o&&(a+=`skewX(${o}deg) `),l&&(a+=`skewY(${l}deg) `)}let o=e.x.scale*t.x,l=e.y.scale*t.y;return(1!==o||1!==l)&&(a+=`scale(${o}, ${l})`),a||"none"}(this.projectionDeltaWithTransform,this.treeScale,n);i&&(s=i(n,s)),e.transform=s;let{x:r,y:o}=this.projectionDelta;for(let t in e.transformOrigin=`${100*r.origin}% ${100*o.origin}% 0`,a.animationValues?e.opacity=a===this?n.opacity??this.latestValues.opacity??1:this.preserveOpacity?this.latestValues.opacity:n.opacityExit:e.opacity=a===this?void 0!==n.opacity?n.opacity:"":void 0!==n.opacityExit?n.opacityExit:0,tD){if(void 0===n[t])continue;let{correct:i,applyTo:r,isCSSVariable:o}=tD[t],l="none"===s?n[t]:i(n[t],a);if(r){let t=r.length;for(let i=0;i<t;i++)e[r[i]]=l}
1else o?this.options.visualElement.renderState.vars[t]=l:e[t]=l}this.options.layoutId&&(e.pointerEvents=a===this?il(t?.pointerEvents)||"":"none")}clearSnapshot(){this.resumeFrom=this.snapshot=void 0}resetTree(){this.root.nodes.forEach(e=>e.currentAnimation?.stop()),this.root.nodes.forEach(n1),this.root.sharedNodes.clear()}}}function nY(e){e.updateLayout()}function nK(e){let t=e.resumeFrom?.snapshot||e.snapshot;if(e.isLead()&&e.layout&&t&&e.hasListeners("didUpdate")){let{layoutBox:i,measuredBox:a}=e.layout,{animationType:n}=e.options,s=t.source!==e.layout.source;if("size"===n)aD(e=>{let a=s?t.measuredBox[e]:t.layoutBox[e],n=aB(a);a.min=i[e].min,a.max=a.min+n});else if("x"===n||"y"===n){let e="x"===n?"y":"x";nq(s?t.measuredBox[e]:t.layoutBox[e],i[e])}else sl(n,t.layoutBox,i)&&aD(a=>{let n=s?t.measuredBox[a]:t.layoutBox[a],r=aB(i[a]);n.max=n.min+r,e.relativeTarget&&!e.currentAnimation&&(e.isProjectionDirty=!0,e.relativeTarget[a].max=e.relativeTarget[a].min+r)});let r=z();aH(r,i,t.layoutBox);let o=z();s?aH(o,e.applyTransform(a,!0),t.measuredBox):aH(o,i,t.layoutBox);let l=!nk(r),u=!1;if(!e.resumeFrom){let a=e.getClosestProjectingParent();if(a&&!a.resumeFrom){let{snapshot:n,layout:s}=a;if(n&&s){let r=e.options.layoutAnchor||void 0,o=X();aX(o,t.layoutBox,n.layoutBox,r);let l=X();aX(l,i,s.layoutBox,r),nV(o,l)||(u=!0),a.options.layoutRoot&&(e.relativeTarget=l,e.relativeTargetOrigin=o,e.relativeParent=a)}}}e.notifyListeners("didUpdate",{layout:i,snapshot:t,delta:o,layoutDelta:r,hasLayoutChanged:l,hasRelativeLayoutChanged:u})}else if(e.isLead()){let{onExitComplete:t}=e.options;t&&t()}e.options.transition=void 0}function nJ(e){e.parent&&(e.isProjecting()||(e.isProjectionDirty=e.parent.isProjectionDirty),e.isSharedProjectionDirty||(e.isSharedProjectionDirty=!!(e.isProjectionDirty||e.parent.isProjectionDirty||e.parent.isSharedProjectionDirty)),e.isTransformDirty||(e.isTransformDirty=e.parent.isTransformDirty))}function nZ(e){e.isProjectionDirty=e.isSharedProjectionDirty=e.isTransformDirty=!1}function n0(e){e.clearSnapshot()}function n1(e){e.clearMeasurements()}function n4(e){e.isLayoutDirty=!0,e.updateLayout()}function n2(e){e.isLayoutDirty=!1}function n3(e){e.isAnimationBlocked&&e.layout&&!e.isLayoutDirty&&(e.snapshot=e.layout,e.isLayoutDirty=!0)}function n9(e){let{visualElement:t}=e.options;t&&t.getProps().onBeforeLayoutMeasure&&t.notify("BeforeLayoutMeasure"),e.resetTransform()}function n5(e){e.finishAnimation(),e.targetDelta=e.relativeTarget=e.target=void 0,e.isProjectionDirty=!0}function n6(e){e.resolveTargetDelta()}function n8(e){e.calcProjection()}function n7(e){e.resetSkewAndRotation()}function se(e){e.removeLeadSnapshot()}function st(e,t,i){e.translate=tk(t.translate,0,i),e.scale=tk(t.scale,1,i),e.origin=t.origin,e.originPoint=t.originPoint}function si(e,t,i,a){e.min=tk(t.min,i.min,a),e.max=tk(t.max,i.max,a)}function sa(e){return e.animationValues&&void 0!==e.animationValues.opacityExit}let sn={duration:.45,ease:[.4,0,.1,1]},ss=e=>"u">typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().includes(e),sr=ss("applewebkit/")&&!ss("chrome/")?Math.round:eA;function so(e){e.min=sr(e.min),e.max=sr(e.max)}function sl(e,t,i){return"position"===e||"preserve-aspect"===e&&!(.2>=Math.abs(nB(t)-nB(i)))}function su(e){return e!==e.root&&e.scroll?.wasRoot}let sd=nQ({attachResizeListener:(e,t)=>a_(e,"resize",t),measureScroll:()=>({x:document.documentElement.scrollLeft||document.body?.scrollLeft||0,y:document.documentElement.scrollTop||document.body?.scrollTop||0}),checkIsScrollRoot:()=>!0}),sc={current:void 0},sp=nQ({measureScroll:e=>({x:e.scrollLeft,y:e.scrollTop}),defaultParent:()=>{if(!sc.current){let e=new sd({});e.mount(window),e.setOptions({layoutScroll:!0}),sc.current=e}return sc.current},resetTransform:(e,t)=>{e.style.transform=void 0!==t?t:"none"},checkIsScrollRoot:e=>"fixed"===window.getComputedStyle(e).position});function sh(e,t){let i=aQ(e),a=new AbortController;return[i,{passive:!0,...t,signal:a.signal},()=>a.abort()]}function sm(e,t,i){let{props:a}=e;e.animationState&&a.whileHover&&e.animationState.setActive("whileHover","Start"===i);let n=a["onHover"+i];n&&eR.postRender(()=>n(t,a6(t)))}let sf=(e,t)=>
1!!t&&(e===t||sf(e,t.parentElement)),sg=new WeakSet;function sv(e){return t=>{"Enter"===t.key&&e(t)}}function sx(e,t){e.dispatchEvent(new PointerEvent("pointer"+t,{isPrimary:!0,bubbles:!0}))}function sb(e){return a5(e)&&!(aV.x||aV.y)}let sE=new WeakSet;function sy(e,t,i){let{props:a}=e;if(e.current instanceof HTMLButtonElement&&e.current.disabled)return;e.animationState&&a.whileTap&&e.animationState.setActive("whileTap","Start"===i);let n=a["onTap"+("End"===i?"":i)];n&&eR.postRender(()=>n(t,a6(t)))}let sA=new WeakMap,sw=new WeakMap,sT=e=>{let t=sA.get(e.target);t&&t(e)},sS=e=>{e.forEach(sT)},sR={some:0,all:1},sL=function(e,t){if("u"<typeof Proxy)return iA;let i=new Map,a=(i,a)=>iA(i,a,e,t);return new Proxy((e,t)=>a(e,t),{get:(n,s)=>"create"===s?a:(i.has(s)||i.set(s,iA(s,void 0,e,t)),i.get(s))})}({animation:{Feature:class extends iw{constructor(e){super(e),e.animationState||(e.animationState=function(e){let t=t=>Promise.all(t.map(({animation:t,options:i})=>(function(e,t,i={}){let a;if(e.notify("AnimationStart",t),Array.isArray(t))a=Promise.all(t.map(t=>aN(e,t,i)));else if("string"==typeof t)a=aN(e,t,i);else{let n="function"==typeof t?iT(e,t,i.custom):t;a=Promise.all(aq(e,n,i))}return a.then(()=>{e.notify("AnimationComplete",t)})})(e,t,i))),i=aj(),a=!0,n=!1,s=t=>(i,a)=>{let n=iT(e,a,"exit"===t?e.presenceContext?.custom:void 0);if(n){let{transition:e,transitionEnd:t,...a}=n;i={...i,...a,...t}}return i};function r(r){let{props:o}=e,l=function e(t){if(!t)return;if(!t.isControllingVariants){let i=t.parent&&e(t.parent)||{};return void 0!==t.props.initial&&(i.initial=t.props.initial),i}let i={};for(let e=0;e<aC;e++){let a=tu[e],n=t.props[a];(to(n)||!1===n)&&(i[a]=n)}return i}(e.parent)||{},u=[],d=new Set,c={},p=1/0;for(let t=0;t<aO;t++){var h,m;let f=aP[t],g=i[f],v=void 0!==o[f]?o[f]:l[f],x=to(v),b=f===r?g.isActive:null;!1===b&&(p=t);let E=v===l[f]&&v!==o[f]&&x;if(E&&(a||n)&&e.manuallyAnimateOnMount&&(E=!1),g.protectedKeys={...c},!g.isActive&&null===b||!v&&!g.prevProp||tr(v)||"boolean"==typeof v)continue;if("exit"===f&&g.isActive&&!0!==b){g.prevResolvedValues&&(c={...c,...g.prevResolvedValues});continue}let y=(h=g.prevProp,"string"==typeof(m=v)?m!==h:!!Array.isArray(m)&&!aU(m,h)),A=y||f===r&&g.isActive&&!E&&x||t>p&&x,w=!1,T=Array.isArray(v)?v:[v],S=T.reduce(s(f),{});!1===b&&(S={});let{prevResolvedValues:R={}}=g,L={...R,...S},q=t=>{A=!0,d.has(t)&&(w=!0,d.delete(t)),g.needsAnimating[t]=!0;let i=e.getValue(t);i&&(i.liveStyle=!1)};for(let e in L){let t=S[e],i=R[e];if(!c.hasOwnProperty(e))(iL(t)&&iL(i)?!aU(t,i)||y:t!==i)?null!=t?q(e):d.add(e):void 0!==t&&d.has(e)?q(e):g.protectedKeys[e]=!0}g.prevProp=v,g.prevResolvedValues=S,g.isActive&&(c={...c,...S}),(a||n)&&e.blockInitialAnimation&&(A=!1);let I=E&&y,N=!I||w;A&&N&&u.push(...T.map(t=>{let i={type:f};if("string"==typeof t&&(a||n)&&!I&&e.manuallyAnimateOnMount&&e.parent){let{parent:a}=e,n=iT(a,t);if(a.enteringChildren&&n){let{delayChildren:t}=n.transition||{};i.delay=aI(a.enteringChildren,e,t)}}return{animation:t,options:i}}))}if(d.size){let t={};if("boolean"!=typeof o.initial){let i=iT(e,Array.isArray(o.initial)?o.initial[0]:o.initial);i&&i.transition&&(t.transition=i.transition)}d.forEach(i=>{let a=e.getBaseTarget(i),n=e.getValue(i);n&&(n.liveStyle=!0),t[i]=a??null}),u.push({animation:t})}let f=!!u.length;return a&&(!1===o.initial||o.initial===o.animate)&&!e.manuallyAnimateOnMount&&(f=!1),a=!1,n=!1,f?t(u):Promise.resolve()}return{animateChanges:r,setActive:function(t,a){if(i[t].isActive===a)return Promise.resolve();e.variantChildren?.forEach(e=>e.animationState?.setActive(t,a)),i[t].isActive=a;let n=r(t);for(let e in i)i[e].protectedKeys={};return n},setAnimateFunction:function(i){t=i(e)},getState:()=>i,reset:()=>{i=aj(),n=!0}}}(e))}updateAnimationControlsSubscription(){let{animate:e}=this.node.getProps();tr(e)&&(this.unmountControls=e.subscribe(this.node))}mount(){this.updateAnimationControlsSubscription()}update(){let{animate:e}=this.node.getProps(),{animate:t}=this.node.prevProps||{};e!==t&&this.updateAnimationControlsSubscription()}unmount(){this.node.animationState.reset(),this.unmountControls?.()}}},exit:{Feature:class extends iw{constructor(){super(...arguments),this.id=ak++,this.isExitComplete=!1}update(){if(!this.node.presenceContext)return;let{isPresent:e,onExitComplete:t}=this.node.presenceContext,{isPresent:i}=this.node.prevPresenceContext||{};if(!this.node.animationState||e===i)return;if(e&&!1===i){if(this.isExitComplete){let{initial:e,custom:t}=this.node.getProps();if("string"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)){let i=iT(this.node,e,t);if(i){let{transition:e,transitionEnd:t,...a}=i;for(let e in a)this.node.getValue(e)?.jump(a[e])}}this.node.animationState.reset(),this.node.animationState.animateChanges()}else this.node.animationState.setActive("exit",!1);this.isExitComplete=!1;return}let a=this.node.animationState.setActive("exit",!e);t&&!e&&a.then(()=>
1{this.isExitComplete=!0,t(this.id)})}mount(){let{register:e,onExitComplete:t}=this.node.presenceContext||{};t&&t(this.id),e&&(this.unmount=e(this.id))}unmount(){}}},inView:{Feature:class extends iw{constructor(){super(...arguments),this.hasEnteredView=!1,this.isInView=!1}startObserver(){var e;let t;this.stopObserver?.();let{viewport:i={}}=this.node.getProps(),{root:a,margin:n,amount:s="some",once:r}=i,o={root:a?a.current:void 0,rootMargin:n,threshold:"number"==typeof s?s:sR[s]},l=e=>{let{isIntersecting:t}=e;if(this.isInView===t||(this.isInView=t,r&&!t&&this.hasEnteredView))return;t&&(this.hasEnteredView=!0),this.node.animationState&&this.node.animationState.setActive("whileInView",t);let{onViewportEnter:i,onViewportLeave:a}=this.node.getProps(),n=t?i:a;n&&n(e)};this.stopObserver=(e=this.node.current,t=function({root:e,...t}){let i=e||document;sw.has(i)||sw.set(i,{});let a=sw.get(i),n=JSON.stringify(t);return a[n]||(a[n]=new IntersectionObserver(sS,{root:e,...t})),a[n]}(o),sA.set(e,l),t.observe(e),()=>{sA.delete(e),t.unobserve(e)})}mount(){this.startObserver()}update(){if("u"<typeof IntersectionObserver)return;let{props:e,prevProps:t}=this.node;["amount","margin","root"].some(function({viewport:e={}},{viewport:t={}}={}){return i=>e[i]!==t[i]}(e,t))&&this.startObserver()}unmount(){this.stopObserver?.(),this.hasEnteredView=!1,this.isInView=!1}}},tap:{Feature:class extends iw{mount(){let{current:e}=this.node;if(!e)return;let{globalTapTarget:t,propagate:i}=this.node.props;this.unmount=function(e,t,i={}){let[a,n,s]=sh(e,i),r=e=>{let a=e.currentTarget;if(!sb(e)||sE.has(e))return;sg.add(a),i.stopPropagation&&sE.add(e);let s=t(a,e),r={...n,capture:!0},o=(e,t)=>{window.removeEventListener("pointerup",l,r),window.removeEventListener("pointercancel",u,r),sg.has(a)&&sg.delete(a),sb(e)&&"function"==typeof s&&s(e,{success:t})},l=e=>{o(e,a===window||a===document||i.useGlobalTarget||sf(a,e.target))},u=e=>{o(e,!1)};window.addEventListener("pointerup",l,r),window.addEventListener("pointercancel",u,r)};return a.forEach(e=>{(i.useGlobalTarget?window:e).addEventListener("pointerdown",r,n),aW(e)&&"offsetHeight"in e&&!("ownerSVGElement"in e)&&(e.addEventListener("focus",e=>((e,t)=>{let i=e.currentTarget;if(!i)return;let a=sv(()=>{if(sg.has(i))return;sx(i,"down");let e=sv(()=>{sx(i,"up")});i.addEventListener("keyup",e,t),i.addEventListener("blur",()=>sx(i,"cancel"),t)});i.addEventListener("keydown",a,t),i.addEventListener("blur",()=>i.removeEventListener("keydown",a),t)})(e,n)),a3.has(e.tagName)||!0===e.isContentEditable||e.hasAttribute("tabindex")||(e.tabIndex=0))}),s}(e,(e,t)=>(sy(this.node,t,"Start"),(e,{success:t})=>sy(this.node,e,t?"End":"Cancel")),{useGlobalTarget:t,stopPropagation:i?.tap===!1})}unmount(){}}},focus:{Feature:class extends iw{constructor(){super(...arguments),this.isActive=!1}onFocus(){let e=!1;try{e=this.node.current.matches(":focus-visible")}catch(t){e=!0}e&&this.node.animationState&&(this.node.animationState.setActive("whileFocus",!0),this.isActive=!0)}onBlur(){this.isActive&&this.node.animationState&&(this.node.animationState.setActive("whileFocus",!1),this.isActive=!1)}mount(){this.unmount=iI(a_(this.node.current,"focus",()=>this.onFocus()),a_(this.node.current,"blur",()=>this.onBlur()))}unmount(){}}},hover:{Feature:class extends iw{mount(){let{current:e}=this.node;e&&(this.unmount=function(e,t,i={}){let[a,n,s]=sh(e,i);return a.forEach(e=>{let i,a=!1,s=!1,r=t=>{i&&(i(t),i=void 0),e.removeEventListener("pointerleave",l)},o=e=>{a=!1,window.removeEventListener("pointerup",o),window.removeEventListener("pointercancel",o),s&&(s=!1,r(e))},l=e=>{if("touch"!==e.pointerType){if(a){s=!0;return}r(e)}};e.addEventListener("pointerenter",a=>{if("touch"===a.pointerType||aV.x||aV.y)return;s=!1;let r=t(e,a);"function"==typeof r&&(i=r,e.addEventListener("pointerleave",l,n))},n),e.addEventListener("pointerdown",()=>{a=!0,window.addEventListener("pointerup",o,n),window.addEventListener("pointercancel",o,n)},n)}),s}(e,(e,t)=>(sm(this.node,t,"Start"),e=>sm(this.node,e,"End"))))}unmount(){}}},pan:{Feature:class extends iw{constructor(){super(...arguments),this.removePointerDownListener=eA}onPointerDown(e){this.session=new ni(e,this.createPanHandlers(),{transformPagePoint:this.node.getTransformPagePoint(),contextWindow:a7(this.node)})}createPanHandlers(){let{onPanSessionStart:e,onPanStart:t,onPan:i,onPanEnd:a}=this.node.getProps();return{onSessionStart:nf(e),onStart:nf(t),onMove:nf(i),onEnd:(e,t)=>{delete this.session,a&&eR.postRender(()=>a(e,t))}}}mount(){this.removePointerDownListener=a8(this.node.current,"pointerdown",e=>this.onPointerDown(e))}update(){this.session&&this.session.updateHandlers(this.createPanHandlers())}unmount(){this.removePointerDownListener(),this.session&&this.session.end()}}},drag:{Feature:class extends iw{constructor(e){super(e),this.removeGroupControls=eA,this.removeListeners=eA,this.controls=new np(e)}mount(){let{dragControls:e}=this.node.getProps();e&&(this.removeGroupControls=e.subscribe(this.controls)),this.removeListeners=this.controls.addListeners()||eA}update(){let{dragControls:e}=this.node.getProps(),{dragControls:t}=this.node.prevProps||{};e!==t&&(this.removeGroupControls(),e&&(this.removeGroupControls=e.subscribe(this.controls)))}unmount(){this.removeGroupControls(),this.removeListeners(),this.controls.isDragging||this.controls.endPanSession()}},ProjectionNode:sp,MeasureLayout:nE},layout:{ProjectionNode:sp,MeasureLayout:nE}},(e,t)=>t.isSVG??t9(e)?new tF(t):new t4(t,{allowProjection:e!==t2.Fragment}));e.s(["motion",0,sL],32181)},46662,e=>{"use strict";var t=e.i(43476),i=e.i(71645),a=e.i(22016),n=e.i(75157),s=e.i(11823),r=e.i(31010);let o=e=>{var t;let i;return"saas"===e.voie||(t=e.id,((i=/-(\d+)$/.exec(t))?Number(i[1]):0)>=201)},l=s.default,u=(l.length,l.filter(o).length,new Set(l.filter(o).map(e=>e.id))),d=s.default.filter(e=>!u.has(e.id)),c=new Set(r.CHOIX.map(e=>e.id)),p=(()=>{let e=new Map;for(let t of d){let i=e.get(t.f);i?i.push(t.id):e.set(t.f,[t.id])}let t=new Set;for(let i of e.values()){let e=i.filter(e=>c.has(e)),a=i.filter(e=>!c.has(e)),n=Math.max(e.length,Math.floor(i.length/2));for(let i of[...e,...a].slice(0,n))t.add(i)}return t})(),h=d.length;d.reduce((e,t)=>
1e+(t.photos??0),0),[...c].filter(e=>d.some(t=>t.id===e)).length,p.size;var m=e.i(41857),f=e.i(47541);let g=[{genre:"servie",id:"HERO-18",titre:"The first screen",gain:"One photograph, one price, one button. Nothing to read before deciding.",boutique:"Soap works of Salon-de-Provence",vole:!0},{genre:"servie",id:"GRILLE-59",titre:"Four cards that sell from the home page",gain:"Subscription or one-off inside the card, and the button carries the price it just changed to.",boutique:"Klarvo",vole:!0},{genre:"servie",id:"KIT-02",titre:"The gift is a step, not a banner",gain:"Pick three at the pack price. The fourth one is a gift he chooses himself, and the total never moves for it.",boutique:"Marlowe",vole:!0},{genre:"servie",id:"ACHAT-51",titre:"The buy box, whole",gain:"Size, rhythm, add-ons and the free-shipping bar in one panel. Nothing new appears at the next step.",boutique:"Klarvo",vole:!0},{genre:"servie",id:"ACHAT-70",titre:"The box for something bought once",gain:"No subscription, no price per serving. The kit and the warranty carry it instead, and the four things you get stay the same whichever kit you pick.",boutique:"Field Supply"},{genre:"servie",id:"CLAIM-01",titre:"Four promises, each with its reason",gain:"The claim on top, what makes it true underneath. Nothing to take on trust.",boutique:"Katal",etroit:!0},{genre:"servie",id:"COMPAR-51",titre:"The read-out, number by number",gain:"Six rows recorded from public labels, for an identical serving. It names no one, and anyone can redo it.",boutique:"Katal",etroit:!0},{genre:"servie",id:"ANIM-03",titre:"Buy inside the photograph",gain:"Everything in the shot is on the shelf, and each thing carries its price where it stands.",boutique:"Field Supply"},{genre:"servie",id:"PANIER-02",titre:"Cart drawer",gain:"The add-on lives inside the drawer, so taking one never costs the cart already filled.",boutique:"Klarvo",garde:!0,etroit:!0},{genre:"vive",id:"captcha-promo",titre:"Photo captcha",gain:"Pick the squares that show the jar and the code is yours. He has looked at the product before the discount exists.",boutique:"Katal",garde:!0,etroit:!0},{genre:"film",id:"grattage-code",titre:"Scratch card",gain:"Scratch the foil, and the discount code is yours to copy.",boutique:"Katal",film:"/preuve/grattage-code-plat.mp4",affiche:"/preuve/grattage-code-plat.webp",ratio:"788 / 788",garde:!0,etroit:!0},{genre:"film",id:"sequence-numerotee",titre:"Fewer «where is my order»",gain:"The day it lands, written before he has to ask. That is the email he will not send.",boutique:"Kelvin",film:"/preuve/sequence-numerotee-390.mp4",affiche:"/preuve/sequence-numerotee-390.webp",ratio:"195 / 422",garde:!0,etroit:!0},{genre:"servie",id:"AVIS-70",titre:"The reviews, unfiltered",gain:"The whole distribution, four axes scored apart, and every review tied to an order number.",boutique:"Longshore"},{genre:"servie",id:"CADRE-60",titre:"The footer",gain:"The name, cut large under the columns. The last thing seen, and the only one to remember.",boutique:"Olivade"}],v=g.length;g.filter(e=>e.garde).map(e=>e.id);var x=e.i(32181),b=e.i(90047);let E=.944/3,y=(.944/3+.028)*100,A=(.944/3+.0224)*100,w=(1-(.944/3*2+.0224))/2*100,T=.43999999999999995/2*100,S=[{src:"/p/images/atelier/depart.webp",alt:"The one photo the shop had: the hot water bottle on a terracotta plinth"},{src:"/p/images/atelier/t-studio.webp",alt:"The same bottle, close on the ribbed rubber and the wool cuff"},{src:"/p/images/atelier/t-flatlay.webp",alt:"Three of the same bottles in an open shipping box, one cover folded on top"},{src:"/p/images/atelier/main.webp",alt:"The same bottle floating, lit hard, its shadow on the aubergine wall"},{src:"/p/images/atelier/t-etagere.webp",alt:"The same bottle worn at the waist, under a black jumper"},{src:"/p/images/atelier/t-levitation.webp",alt:"A hand setting the same bottle down on its plinth"}],R=[{mot:"Your one photo"},{mot:"Generated, six angles"},{mot:"Background removed"},{mot:"Placed on the page"}],L={duration:.66,ease:[.2,0,0,1]};function q({phase:e,nu:i,anime:a,index:n}){let s=a?L:{duration:0},r=3===e?{x:"20.24%",y:"-0.6%",scale:.39,opacity:1}:{x:"0%",y:"0%",scale:.5882352941176471,opacity:2===e&&i?1:0};return(0,t.jsxs)("div",{className:"axi-plateau","aria-hidden":n>0||void 0,children:[S.map((n,r)=>(0,t.jsx)(x.motion.div,{className:"axi-tuile",initial:!1,animate:function(e,t,i){let a,n=(a=Math.floor(e/3),{x:`${(e%3*y).toFixed(3)}%`,y:`${(w+a*A).toFixed(3)}%`,scale:E});return 0===t?{x:`${T}%`,y:`${T}%`,scale:.56,opacity:+(0===e)}:1===t?{...n,opacity:1}
1:2===t?3===e?{x:"0%",y:"0%",scale:1,opacity:+!i}:{...n,opacity:0}:3===e?{x:"0%",y:"0%",scale:1,opacity:0}:{...n,opacity:0}}(r,e,i),transition:a&&1===e?{...s,delay:.05*r}:s,children:(0,t.jsx)("img",{src:n.src,alt:n.alt,loading:"lazy",decoding:"async",draggable:!1})},n.src)),(0,t.jsx)(x.motion.div,{className:"axi-fiche-sol",initial:!1,animate:3===e?{opacity:1,y:"0%"}:{opacity:0,y:"6%"},transition:s,"aria-hidden":"true"}),(0,t.jsx)(x.motion.div,{className:"axi-calque",initial:!1,animate:r,transition:s,children:(0,t.jsx)("img",{src:"/p/images/atelier/main-cut.webp",alt:"The same photo with its background removed, the bottle standing free",loading:"lazy",decoding:"async",draggable:!1})}),(0,t.jsxs)(x.motion.div,{className:"axi-fiche",initial:!1,animate:3===e?{opacity:1,y:"0%"}:{opacity:0,y:"6%"},transition:s,children:[(0,t.jsx)("div",{className:"axi-marque",children:"AMBRE"}),(0,t.jsx)("p",{className:"axi-titre",children:"Ribbed rubber, wool cuff, six hours of heat."}),(0,t.jsx)("p",{className:"axi-prix",children:"$34.00"}),(0,t.jsx)("div",{className:"axi-bouton",children:"Add to cart"})]}),(0,t.jsx)(x.motion.div,{className:"axi-bulle axi-bulle-g",initial:!1,animate:3===e?{opacity:1,y:"0%"}:{opacity:0,y:"40%"},transition:a?{...s,delay:.34*(3===e)}:s,children:"Free shipping"}),(0,t.jsx)(x.motion.div,{className:"axi-bulle axi-bulle-d",initial:!1,animate:3===e?{opacity:1,y:"0%"}:{opacity:0,y:"40%"},transition:a?{...s,delay:.46*(3===e)}:s,children:"In cart · 1"})]})}let I=[{phase:0,nu:!1},{phase:1,nu:!1},{phase:2,nu:!0},{phase:3,nu:!1}];function N({sansCadre:e=!1}={}){return(0,t.jsxs)(e?"div":"section",{id:"images","aria-labelledby":e?void 0:"axi-t",className:"axi axi--fixe relative isolate",children:[(0,t.jsx)("style",{children:(0,b.cssServi)(C)}),(0,t.jsx)("div",{className:"shell axi-boite",children:(0,t.jsxs)("div",{className:"axi-grille",children:[(0,t.jsxs)("header",{className:"axi-tete",children:[(0,t.jsx)("p",{className:"axi-oeil",children:"It generates product photos too"}),(0,t.jsxs)("h2",{id:"axi-t",className:"axi-h2",children:["Send one photo."," ",(0,t.jsx)("span",{children:"Get the shoot, cut out, and placed on the page."})]})]}),(0,t.jsx)("ol",{className:"axi-scene axi-scene--fixe",children:I.map((e,i)=>(0,t.jsxs)("li",{className:"axi-bloc",children:[(0,t.jsx)(q,{phase:e.phase,nu:e.nu,anime:!1,index:i}),(0,t.jsxs)("p",{className:"axi-fixe",children:[(0,t.jsx)("b",{children:i+1})," ",R[i].mot]})]},R[i].mot))})]})})]})}let C=` 2/* 03/09, RONDE 23 : l'encre de cette section suit son sol, qui est passe au 3 clair. Les titres et le corps prennent les jetons --claire-*. */ 4.axi,.axi-tete,.axi-h2,.axi-oeil{color:var(--claire-encre)} 5.axi-oeil{color:var(--claire-encre-3)} 6 7/* â ï¸ AUCUN JETON LOCAL : --pl est un alias de lecture de :root. */ 8.axi{--pl:var(--satin-platine)} 9/* ð´ 25/08 â LE SOL EST #000000, ET C'EST MESURE, PAS UN GOUT. 10 Moodboard planche 02 : le mur du site vaut #08090C â R 8, G 9, B 12, donc 11 +4 VERS LE BLEU â quand l'etoffe mesure 0,18/255 d'ecart entre canaux. Une 12 matiere neutre exige un sol neutre : c'est ce decalage qui fabrique le bord 13 visible autour du satin. Les sections voisines (tablette, convoyeur, 14 pricing, closing) y sont deja passees ; rester sur --satin-sol ici 15 fabriquerait une MARCHE DE 12/255 a la jonction, c'est-a-dire exactement la 16 bande qu'on cherche a supprimer. 17 â ï¸ C'est la SEULE valeur en dur de ce fichier. Tout le reste consomme les 18 jetons de :root â --satin-surface, --satin-surface-filet, --satin-platine, 19 --satin-encre/-2/-3, --satin-sol-profond. */ 20/* ð´ 03/09, RONDE 23 â LE SOL PASSE AU CLAIR, ET LE RAISONNEMENT DU 25/08 21 TIENT TOUJOURS, IL A JUSTE CHANGE DE BOUT DE GAMME. 22 Il disait : \xab une matiere neutre exige un sol NEUTRE ; rester sur 23 --satin-sol fabriquerait une MARCHE de 12/255 a la jonction, c'est-a-dire 24 exactement la bande qu'on cherche a supprimer. \xbb C'etait juste, et la regle 25 est la meme aujourd'hui â sauf que les sections voisines sont passees au 26 clair. Un sol noir ici ne fabrique plus une marche de 12/255, il en 27 fabrique une de 240. 28 MESURE, dans un navigateur, sur la production : 'div#images.axi', 29 **450 px a 1440 et 530 px a 390, luminance 0**. C'etait le dernier gros 30 bloc noir de la page, et l'un des cinq qu'Angelo a comptes lui-meme. 31 â ï¸ ET LA SONDE DES BORDS NE POUVAIT PAS LE VOIR : '.axi' est un bloc 32 CENTRE dans une section claire, ses bords a lui ne sont pas les bords de 33 la page. Trouve en interrogeant CHAQUE element de plus de 200 px sur son 34 fond effectif â la mesure que le coordinateur a imposee, et elle attrape 35 ce que l'echantillon lateral manque par construction. */ 36.axi{background:var(--claire-sol)} 37.axi-boite{padding-top:64px;padding-bottom:64px} 38@media(min-width:768px){.axi-boite{padding-top:88px;padding-bottom:92px}} 39@media(min-width:1280px){.axi-boite{padding-top:104px;padding-bottom:110px}} 40 41.axi-grille{display:block} 42.axi-tete{max-width:36ch} 43.axi-scene{margin-top:28px;display:flex;flex-direction:column;gap:34px;align-items:center} 44.axi-bloc{width:100%;max-width:380px} 45.axi-som-pc{display:none} 46 47/* ââ ð´ 28/08 â LE SOMMAIRE REMPLIT SA COLONNE, IL N Y FLOTTE PLUS âââââââ 48 * MESURE sur la production a 1440, dans la bande de etapes.tsx : colonne de
49 * droite 450 px de haut (le plateau, en 4/5 de 360), quatre temps hauts de 50 * 240 px, et align-items:center qui partageait le reliquat â 105 px de noir 51 * au-dessus, 105 en dessous. \xab Le bail est mal mis sur la page \xbb, et c est 52 * aussi \xab il y a trop d espace dessous \xbb, deja dit ailleurs. 53 * â align-items:start ne repare rien : il pousse les 210 px de vide d un 54 * seul bloc EN BAS. Le vide ne se deplace pas, il se remplit. 55 * â La colonne s etire (stretch), l en-tete devient une colonne flexible et 56 * le sommaire prend TOUTE la hauteur qui reste. Chaque temps occupe alors 57 * un quart egal, mot en haut de sa bande, rail en bas : quatre filets 58 * regulierement espaces du haut au bas du plateau. La paire se lit en deux 59 * parts de meme hauteur. 60 * â ï¸ Rien de tout ca sous 1024 : la-bas le sommaire se lit SOUS le plateau, 61 * dans une colonne unique, il n y a aucune colonne voisine a egaler. */ 62@media(min-width:1024px){ 63 .axi-grille{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:70px;align-items:stretch} 64 .axi-tete{max-width:none;display:flex;flex-direction:column;min-height:0} 65 .axi-scene{margin-top:0;gap:30px;align-items:flex-start} 66 .axi-bloc{max-width:460px} 67 .axi-som-pc{display:flex;margin-top:36px;flex:1 1 auto;min-height:0} 68 .axi-som{flex:1 1 auto} 69 /* chaque temps prend un quart de la hauteur ; le mot en haut de sa bande, 70 son rail en bas, donc des filets a intervalles egaux. */ 71 .axi-som-l{flex:1 1 0;align-content:space-between} 72 .axi-som-tel{display:none} 73} 74 75/* == 03/09, NUIT - LES QUATRE ETATS COTE A COTE, POUR TOUT LE MONDE ======== 76 * 77 * C'est la generalisation du mode "mouvement reduit" du 31/08, qui posait 78 * DEUX etats cote a cote pour la meme raison : une chaine qui se raconte dans 79 * le temps ne se lit pas, une chaine qui se pose se lit d'un coup. 80 * 81 * ATTENTION LA LARGEUR DE COLONNE EST CE QUI DECIDE, ET ELLE EST MESUREE : 82 * la bande vit dans .ho-photo (etapes.tsx), coquille de 1180 px a 1440. 83 * Quatre colonnes a 18 px de gouttiere font 281 px chacune, donc un plateau 84 * de 281 x 351 (rapport 4/5). Le contenu du plateau est en pourcentages du 85 * conteneur et ses textes en cqw : ils sont rendus A LEUR TAILLE FINALE, 86 * jamais mis a l'echelle. Aucun transform:scale, nulle part. 87 * ATTENTION SOUS 900 px, DEUX COLONNES ET PAS QUATRE : a 390 px quatre 88 * colonnes donneraient 82 px de large, c'est-a-dire une trame, pas une 89 * demonstration. Deux colonnes rendent 169 px, et les quatre etats restent 90 * tous a l'ecran. 91 * ATTENTION TROIS CLASSES, ET C'EST UNE NECESSITE MESUREE (lecon du 31/08) : 92 * .ho-photo .axi-grille et .ho-photo .axi-bloc font deux classes et 93 * gagneraient sur .axi--fixe seul. On reprend la main sans toucher a 94 * etapes.tsx, ou une autre lane ecrit. 95 * ATTENTION AUCUN ACCENT GRAVE ICI : ce commentaire vit dans un litteral de 96 * gabarit TSX, deux accents graves le refermeraient. */ 97.axi.axi--fixe .axi-grille{display:block} 98.axi.axi--fixe .axi-tete{max-width:none;display:block} 99.axi.axi--fixe .axi-scene--fixe{ 100 list-style:none;margin:22px 0 0;padding:0; 101 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} 102@media(min-width:900px){ 103 .axi.axi--fixe .axi-scene--fixe{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} 104} 105.axi.axi--fixe .axi-scene--fixe .axi-bloc{width:100%;max-width:none;margin:0} 106.axi.axi--fixe .axi-scene--fixe .axi-fixe{margin-top:11px;font-size:14px} 107 108/* ââ L'\xc9NONC\xc9 â l'\xe9chelle du moodboard, planche 04 âââââââââââââââââââââââââ */ 109.axi-oeil{ 110 font-family:var(--font-sans);font-weight:600;font-size:12.5px;line-height:1; 111 letter-spacing:.16em;text-transform:uppercase;color:var(--pl);opacity:.62} 112.axi-h2{ 113 margin-top:16px;max-width:17ch;text-wrap:balance; 114 font-family:var(--font-display);font-weight:700; 115 font-size:clamp(31px,7.6vw,52px);line-height:1.04;letter-spacing:-.024em;color:var(--satin-encre)} 116@media(min-width:768px){.axi-h2{font-size:clamp(34px,3.9vw,52px)}} 117.axi-h2 span{font-weight:400;color:var(--claire-encre-2)} 118 119/* ââ LE SOMMAIRE âââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 120 * Quatre temps \xe9crits, un signe chacun, un rail chacun. Le rail du temps en 121 * cours se remplit \xe0 sa dur\xe9e exacte. â 'scaleX', jamais une largeur. */ 122/* borne a 460 : sans elle, a 1440, les rails filaient jusqu'a 1080 px alors 123 que le plus long des quatre mots en peint 245 â un trait qui va nulle part. */ 124.axi-som{list-style:none;margin:0;padding:0;max-width:460px; 125 display:flex;flex-direction:column;gap:2px} 126.axi-som-l{ 127 display:grid;grid-template-columns:26px minmax(0,1fr); 128 column-gap:12px;row-gap:9px;align-items:center;padding:11px 0 12px} 129.axi-som-i{ 130 display:grid;place-items:center;width:26px;height:26px; 131 color:var(--pl);opacity:.34; 132 transition:opacity .3s linear} 133.axi-som-m{ 134 /* l'inactif est un ETAT, pas une encre plus faible : meme couleur que le 135 reste de la maison, eteinte par l'opacite, et rallumee au temps courant. */ 136 font-family:var(--font-sans);font-weight:500;font-size:17px;line-height:1.3; 137 letter-spacing:-.005em;color:var(--satin-encre-3);opacity:.6; 138 transition:opacity .3s linear,color .3s linear} 139.axi-som-l.on .axi-som-i{opacity:1} 140.axi-som-l.on .axi-som-m{color:var(--satin-encre);font-weight:600;opacity:1} 141/* le rail traverse les deux colonnes : il mesure le TEMPS, pas le mot */ 142.axi-som-r{ 143 grid-column:1 / -1;position:relative;height:2px;overflow:hidden; 144 background:var(--satin-surface-filet)} 145.axi-som-b{ 146 position:absolute;inset:0;background:var(--pl);
147 transform:scaleX(0);transform-origin:0 50%;will-change:transform; 148 transition-property:transform} 149/* â ï¸ 31/08 â LE RAIL N EST PLUS FORCE A ZERO SOUS MOUVEMENT REDUIT. Il l 150 * etait par un transform en !important implicite (une regle plus tardive 151 * que le style en ligne ne l est pas, mais celle-ci gagnait par la media 152 * query), et les quatre temps rendus comme ACQUIS se retrouvaient avec 153 * quatre rails vides â la liste disait le contraire de ce qu elle 154 * montrait. Seule la TRANSITION est coupee : c est elle, le mouvement. */ 155@media(prefers-reduced-motion:reduce){ 156 .axi-som-b{transition:none} 157 .axi-som-i,.axi-som-m{transition:none} 158} 159 160/* ââ LE PLATEAU âââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 161 * container-type : les textes de la fiche se dimensionnent en cqw, donc \xe0 162 * leur TAILLE FINALE quelle que soit la largeur â jamais par une \xe9chelle. 163 * overflow:hidden : l'avant-bras sort du cadre et doit \xeatre coup\xe9 NET par 164 * le plateau, pas d\xe9border dans la section. 165 * Le sol passe \xe0 var(--satin-surface) â le cran \xab carte \xbb de la maison, un 166 * seul cran au-dessus du mur â et l'ar\xeate haute attrape la lumi\xe8re, qui culmine \xe0 167 * droite : une seule source, comme sur la photographie. */ 168.axi-plateau{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden; 169 container-type:inline-size;background:var(--satin-surface); 170 border:1px solid var(--satin-surface-filet)} 171.axi-plateau::before{ 172 content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:9;pointer-events:none; 173 background:linear-gradient(90deg, 174 rgba(220,227,236,0) 0%,rgba(220,227,236,.16) 28%, 175 rgba(220,227,236,.82) 78%,rgba(220,227,236,0) 100%)} 176 177.axi-tuile{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1; 178 transform-origin:0 0;will-change:transform,opacity;backface-visibility:hidden} 179.axi-tuile img{display:block;width:100%;height:100%;object-fit:cover} 180 181/* ââ LA FICHE PRODUIT, EN DEUX CALQUES ââââââââââââââââââââââââââââââââââ 182 * Elle occupe le bas du plateau, a partir de 44 % de sa hauteur. 183 * ð´ 28/08 â LE CARTON ET LE TEXTE SONT DEUX ELEMENTS, PAS UN. 184 * Le rang d empilement est le correctif : carton 2, produit detoure 3, 185 * texte 4, bulles 5. Le produit peut donc DEPASSER du carton sans jamais 186 * recouvrir un mot. Voir le commentaire du JSX pour le pourquoi de la 187 * separation (contexte d empilement fabrique par will-change). 188 * â ï¸ LES DEUX CALQUES PARTAGENT LA MEME BOITE : si l un bouge, l autre 189 * bouge, sinon le texte quitte son carton. */ 190.axi-fiche-sol,.axi-fiche{position:absolute;left:0;right:0;top:44%;bottom:0; 191 will-change:transform,opacity} 192.axi-fiche-sol{z-index:2;background:#f4f4f5} 193.axi-fiche{z-index:4;color:#0a0b0d;padding:5cqw 6cqw; 194 display:flex;flex-direction:column;pointer-events:none} 195.axi-marque{font-family:var(--font-display);font-weight:800;font-size:3.2cqw; 196 letter-spacing:0.2em;color:#0a0b0d} 197.axi-titre{margin-top:auto;max-width:62%;font-family:var(--font-display);font-weight:700; 198 font-size:5cqw;line-height:1.12;letter-spacing:-0.02em;color:#0a0b0d} 199/* â ï¸ un montant se compose en Inter, chiffres tabulaires â jamais dans la 200 police des titres (moodboard, planche 04). */ 201.axi-prix{margin-top:2.2cqw;font-family:var(--font-sans);font-size:4cqw;font-weight:600; 202 font-variant-numeric:tabular-nums;color:#0a0b0d} 203.axi-bouton{margin-top:3.4cqw;width:62%;background:#0a0b0d;color:#fff;text-align:center; 204 padding:2.9cqw 0;font-size:3.5cqw;font-weight:600;letter-spacing:-0.01em} 205 206/* ââ LE PRODUIT D\xc9TOUR\xc9 âââââââââââââââââââââââââââââââââââââââââââââââââ 207 * Bo\xeete 170 % du plateau : il ne fait donc que R\xc9DUIRE (0,39 en pose finale), 208 * aucun pixel n'est interpol\xe9 vers le haut. Rang 3 : au-dessus du carton, 209 * sous le texte. */ 210.axi-calque{position:absolute;
210left:0;top:0;width:170%;aspect-ratio:4/5;z-index:3; 211 transform-origin:0 0;will-change:transform,opacity;pointer-events:none} 212/* â ï¸ L OMBRE EST DIVISEE PAR L ECHELLE DE POSE. Un filtre est peint dans le 213 repere LOCAL de l element, puis mis a l echelle avec lui : ecrite en dur, 214 elle serait rendue a 0,39 de sa valeur, c est-a-dire absente. On vise 215 1,3 cqw de decalage et 2,2 cqw de flou A L ECRAN. */ 216.axi-calque img{display:block;width:100%;height:auto; 217 filter:drop-shadow(0 3.33cqw 5.64cqw rgba(0,0,0,0.55))} 218 219/* ââ LES BULLES âââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 220 * ð´ 28/08 â ELLES SONT REPLACEES AVEC LE PRODUIT. \xab In cart \xbb etait a 5 % 221 * du haut, collee au bord du plateau : elle se lisait comme tronquee par le 222 * bord de la bande. Elle descend et vient s accrocher a l epaule gauche du 223 * produit ; \xab Free shipping \xbb vient chevaucher l arete haute du carton, du 224 * cote ou le produit n est pas. Rang 5 : rien ne les couvre. */ 225.axi-bulle{position:absolute;z-index:5;border-radius:999px;background:#fff;color:#0a0b0d; 226 font-size:3.1cqw;font-weight:600;letter-spacing:-0.01em;padding:1.9cqw 3.4cqw; 227 white-space:nowrap;will-change:transform,opacity; 228 box-shadow:0 1.2cqw 3cqw rgba(0,0,0,0.45)} 229.axi-bulle-g{left:4%;top:36%} 230.axi-bulle-d{left:8%;top:9%} 231 232.axi-som-tel{margin-top:18px} 233.axi-fixe{margin-top:16px;font-size:16px;line-height:1.4;color:var(--claire-encre-2)} 234.axi-fixe b{color:var(--claire-encre);font-weight:700} 235.axi-fixe span{color:var(--claire-encre-3)} 236`,U={"ABO-01":{koTel:61,koBureau:21},"ACHAT-51":{koTel:27,koBureau:8},"ACHAT-53":{koTel:43,koBureau:12},"ACHAT-56":{koTel:40,koBureau:15},"ACHAT-57":{koTel:57,koBureau:16},"ACHAT-58":{koTel:36,koBureau:14},"ACHAT-70":{koTel:31,koBureau:15},"ACTIV-221":{koTel:163,koBureau:34},"ANIM-06":{koTel:270,koBureau:104},"AVIS-317":{koTel:21,koBureau:49},"CADRE-60":{koTel:81,koBureau:7},"CALCUL-201":{koTel:51,koBureau:26},"CALCUL-202":{koTel:68,koBureau:18},"CALCUL-221":{koTel:56,koBureau:49},"CAPTCHA-01":{koTel:57,koBureau:20},"CAPTCHA-OR":{koTel:78,koBureau:44},"CAS-379":{koTel:110,koBureau:32},"CAS-484":{koTel:245,koBureau:83},"COMPAR-463":{koTel:24,koBureau:28},"CONFIANCE-201":{koTel:56,koBureau:32},"CONFIANCE-202":{koTel:45,koBureau:13},"CONFORM-221":{koTel:85,koBureau:24},"CREDIT-344":{koTel:80,koBureau:30},"DEMO-303":{koTel:197,koBureau:85},"DEMO-316":{koTel:28,koBureau:19},"ETAPES-305":{koTel:192,koBureau:45},"ETAPES-391":{koTel:79,koBureau:19},"FAQ-02":{koTel:75,koBureau:17},"FAQ-03":{koTel:302,koBureau:163},"FAQ-06":{koTel:63,koBureau:18},"GRATTE-02":{koTel:28,koBureau:22},"GRILLE-53":{koTel:116,koBureau:35},"GRILLE-54":{koTel:396,koBureau:371},"GUIDE-57":{koTel:166,koBureau:55},"HERO-10":{koTel:37,koBureau:9},"HERO-16":{koTel:165,koBureau:166},"HERO-56":{koTel:24,koBureau:11},"HERO-57":{koTel:532,koBureau:247},"HERO-58":{koTel:97,koBureau:81},"HERO-65":{koTel:321,koBureau:180},"HERO-70":{koTel:84,koBureau:120},"KIT-01":{koTel:90,koBureau:72},"MEDIA-56":{koTel:255,koBureau:119},"MONTE-221":{koTel:39,koBureau:17},"MUR-222":{koTel:72,koBureau:30},"MUR-304":{koTel:33,koBureau:53},"PALIER-493":{koTel:308,koBureau:114},"PANIER-02":{koTel:35,koBureau:21},"PANIER-03":{koTel:37,koBureau:12},"PANIER-04":{koTel:95,koBureau:36},"PARRAIN-201":{koTel:69,koBureau:24},"PARRAIN-202":{koTel:133,koBureau:55},"PARRAIN-221":{koTel:41,koBureau:17},"PAS-406":{koTel:20,koBureau:73},"PLANS-319":{koTel:47,koBureau:19},"PONT-203":{koTel:164,koBureau:47},"PONT-204":{koTel:97,koBureau:33},"PONT-221":{koTel:114,koBureau:39},"PREUVE-53":{koTel:44,koBureau:31},"PREUVE-55":{koTel:55,koBureau:15},"QUOTA-221":{koTel:31,koBureau:15},"RETEN-221":{koTel:222,koBureau:53},"ROUE-01":{koTel:289,koBureau:187,koFin:12},"ROUTE-221":{koTel:54,koBureau:23},"SCRATCH-OR":{koTel:292,koBureau:160},"TABLEAU-480":{koTel:38,koBureau:36},"USAGE-526":{koTel:129,koBureau:40}};Object.values(U).reduce((e,t)=>e+t.koTel+t.koBureau,0);var P=e.i(26337),O=e.i(47611),M=e.i(74959),j=e.i(81848);let k={"ACHAT-51":{y:1090,f:995,yd:0,fd:1140},"GRILLE-59":{y:0,f:928,yd:0,fd:1e3},"KIT-02":{y:395,f:618,yd:0,fd:950}
236,"PANIER-02":{y:0,f:940,yd:0,fd:1e3},"COMPAR-51":{y:20,f:860,yd:0,fd:1200},"AVIS-70":{y:295,f:1060,yd:0,fd:1200},"MUR-221":{y:427,f:1090,yd:360,fd:830},"PALIER-737":{y:280,f:720,yd:340,fd:740},"CALCUL-221":{y:869,f:800,yd:120,fd:1090},"PLANS-663":{y:300,f:1150,yd:360,fd:740},"PARRAIN-221":{y:340,f:1050,yd:300,fd:1100},"PONT-221":{y:640,f:920,yd:120,fd:1e3},"COMPAR-909":{y:560,f:1e3,yd:240,fd:1130},"PREUVE-766":{y:110,f:870,yd:110,fd:780}},D={"grattage-code":360},_=i.createContext(null);function V({compte:e,panier:i,pastille:a,anneau:n}){return(0,t.jsxs)("div",{className:"vt-panier",ref:i,"aria-live":"polite",children:[(0,t.jsx)("span",{className:"vt-panier__anneau",ref:n,"aria-hidden":!0}),(0,t.jsx)("svg",{viewBox:"0 0 24 24",width:"19",height:"19","aria-hidden":!0,children:(0,t.jsxs)("g",{fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",children:[(0,t.jsx)("path",{d:"M3 4h2.2l2.3 11.2a1.6 1.6 0 0 0 1.6 1.3h8.3a1.6 1.6 0 0 0 1.6-1.2L21 8H6"}),(0,t.jsx)("circle",{cx:"10",cy:"20",r:"1.3"}),(0,t.jsx)("circle",{cx:"18",cy:"20",r:"1.3"})]})}),(0,t.jsx)("span",{className:"vt-panier__n",ref:a,children:e}),(0,t.jsx)("span",{className:"vt-panier__mot",children:0===e?"press any add button":"in the cart"})]})}let B=/\b(add|buy|take|order|checkout|get)\b/i;function F({id:e,vole:a,etroit:s}){let r=i.useRef(null),[o,l]=i.useState(520),[u,d]=i.useState(!1),[c,p]=i.useState(!1);i.useEffect(()=>{let e=window.matchMedia("(min-width:900px)"),t=()=>p(e.matches);return t(),e.addEventListener("change",t),()=>e.removeEventListener("change",t)},[]);let h=i.useContext(_),m=k[e];i.useEffect(()=>{let e=r.current;if(!e)return;let t=!0,i=null,n=new AbortController,s=!1,o=0,u=()=>{let i=e.contentDocument;if(!i||!t||s)return;s=!0;let a=e.style.height;e.style.height="0px";let n=Math.max(i.body?.scrollHeight??0,i.documentElement?.scrollHeight??0);e.style.height=a,s=!1,n>0&&Math.abs(n-o)>1&&(o=n,l(n))},d=()=>{let s=e.contentDocument,r=e.contentWindow;if(!s||!r||!t)return;u();let o=new r.ResizeObserver(u);if(i=o,o.observe(s.documentElement),s.body&&o.observe(s.body),s.fonts?.ready.then(u).catch(()=>{}),a&&h)for(let t of s.querySelectorAll("button, a, [role='button']")){let i=(t.textContent||"").trim();B.test(i)&&t.addEventListener("click",i=>{let a=t.getAttribute?.("href");a&&a.startsWith("#")&&i.preventDefault();let n=h.panier.current,o=h.pastille.current,l=h.anneau.current;if(!n||!o||!l)return;let u=0===h.compte;if(h.ajouter(1),(0,f.reduit)())return;let d=function(e,t){let i=t.defaultView;if(!i)return null;let a=e=>{if(e instanceof i.HTMLImageElement)return e.currentSrc||e.src||null;let t=/url\(["']?([^"')]+)/.exec(i.getComputedStyle(e).backgroundImage);return t?t[1]:null},n=e;for(let e=0;e<8&&n;e++){let e=null,i=null,s=0,r=0,o=.7*t.documentElement.clientWidth;for(let t of n.querySelectorAll("*")){let n=t.getBoundingClientRect();if(n.width<56||n.height<56)continue;let l=a(t);if(!l||l.startsWith("data:image/svg"))continue;let u=n.width*n.height;n.width<=o?u>s&&(s=u,e={src:l,r:n}):u>r&&(r=u,i={src:l,r:n})}if(e)return e;if(i)return i;n=n.parentElement}return null}(t,s);if(!d)return;let c=e.getBoundingClientRect(),p=Math.min(1,210/Math.max(d.r.width,d.r.height));(0,f.vol)({depart:{x:c.left+d.r.left+d.r.width/2,y:c.top+d.r.top+d.r.height/2},taille:{w:d.r.width*p,h:d.r.height*p},src:d.src.startsWith("http")?d.src:new URL(d.src,r.location.href).href,n:1,premier:u,panier:n,pastille:o,anneau:l})},{passive:!1,signal:n.signal})}};return e.addEventListener("load",d),e.contentDocument?.readyState==="complete"&&d(),()=>{t=!1,i?.disconnect(),n.abort(),e.removeEventListener("load",d)}},[e,a]);let g=!!m&&o>(c?m.fd:m.f)+40;return(0,t.jsxs)("div",{className:(0,n.cn)("vt-vitre",s&&"vt-vitre--etroit"),"data-ouvert":u?"":void 0,style:m?{"--vt-f-tel":`${m.f}px`,"--vt-f-bur":`${m.fd}px`,"--vt-y-tel":`${m.y}px`,"--vt-y-bur":`${m.yd}px`,"--vt-nat":`${o}px`}:void 0,children:[(0,t.jsx)("div",{className:(0,n.cn)("vt-cadre",s&&"vt-cadre--etroit",m&&"vt-cadre--vitre"),children:(0,t.jsx)("iframe",{ref:r,src:`/vitrine/${e}.html`,title:e,loading:"lazy",scrolling:"no",style:{height:o}})}),g?(0,t.jsxs)("button",{type:"button",className:"vt-plus","aria-expanded":u,onClick:()=>d(e=>!e),children:[(0,t.jsx)("span",{children:u?"Fold it back":"Open the whole component"}),(0,t.jsx)("svg",{viewBox:"0 0 16 16",width:"13",height:"13","aria-hidden":!0,
236children:(0,t.jsx)("path",{d:u?"M3 10l5-5 5 5":"M3 6l5 5 5-5",fill:"none",stroke:"currentColor",strokeWidth:"1.9",strokeLinecap:"round",strokeLinejoin:"round"})})]}):null]})}function H({src:e,affiche:a,ratio:n,larg:s}){let r=i.useRef(null);return i.useEffect(()=>{let e=r.current;if(!e)return;let t=new IntersectionObserver(([t])=>{t.isIntersecting?e.play().catch(()=>{}):e.pause()},{threshold:.35});return t.observe(e),()=>t.disconnect()},[]),(0,t.jsx)("div",{className:"vt-film",style:{aspectRatio:n,maxWidth:s?`${s}px`:void 0},children:(0,t.jsx)("video",{ref:r,src:e,poster:a,muted:!0,loop:!0,playsInline:!0,preload:"metadata"})})}function z({texte:e,classe:a}){let[n,s]=i.useState(!1);return(0,t.jsx)("button",{type:"button",className:a,"aria-label":n?"Copied":"Copy",onClick:async()=>{try{await navigator.clipboard.writeText(e)}catch{}s(!0),setTimeout(()=>s(!1),1600)},children:(0,t.jsx)("span",{className:"relative inline-block whitespace-nowrap before:invisible before:block before:h-0 before:overflow-hidden before:content-['copied']",children:n?"copied":"copy"})})}function G({code:e,ou:a,sur:n}){let[s,r]=i.useState(""),[o,l]=i.useState(!1),[u,d]=i.useState(null),[c,p]=i.useState(null);return o?(0,t.jsxs)("div",{className:"gl-code",children:[(0,t.jsx)("p",{className:"gl-code__t",children:"Your code"}),(0,t.jsxs)("div",{className:"gl-code__b",children:[(0,t.jsx)("b",{children:e}),(0,t.jsx)(z,{texte:e,classe:"gl-code__c"})]}),c?(0,t.jsxs)("p",{className:"gl-mail__f",children:["We could not save your address. Write to"," ",(0,t.jsx)("a",{href:"mailto:"+c,children:c}),"."]}):null,(0,t.jsx)("button",{type:"button",className:"gl-rejouer",onClick:n,children:"play it again"})]}):(0,t.jsxs)("form",{className:"gl-mail",onSubmit:e=>{e.preventDefault();let t=s.trim().toLowerCase();if(!/^[^\s@,;:<>"'()[\]\\]{1,64}@[A-Za-z0-9][A-Za-z0-9-]*(\.[A-Za-z]{2,})+$/.test(t))return void d("that does not look like an email address");d(null);let i=(0,m.identifiantEvenement)();fetch("/api/interet",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({email:t,ou:a,eventId:i,site:""})}).then(e=>e.ok?((0,m.pisterPixelSeul)("Lead",i),null):e.json()).then(e=>{e&&"non-garde"===e.code&&e.secours&&p(e.secours)}).catch(()=>{}),l(!0)},children:[(0,t.jsx)("label",{className:"gl-mail__t",htmlFor:`gl-${a}`,children:"Where should the code go?"}),(0,t.jsxs)("div",{className:"gl-mail__r",children:[(0,t.jsx)("input",{id:`gl-${a}`,type:"email",inputMode:"email",autoComplete:"email",placeholder:"[email protected]",value:s,onChange:e=>r(e.target.value)}),(0,t.jsx)("button",{type:"submit",children:"Get the code"})]}),u?(0,t.jsx)("p",{className:"gl-mail__f",children:u}):null]})}let X=[{src:"/packs/micron-04-ambre-x1.webp",pos:"22% 34%",bon:!1},{src:"/packs/01-depoli.webp",pos:"62% 46%",bon:!0},{src:"/packs/kelvin-05-x1.webp",pos:"30% 40%",bon:!1},{src:"/packs/01-depoli.webp",pos:"24% 62%",bon:!0},{src:"/packs/kelvin-05-x1.webp",pos:"62% 58%",bon:!1},{src:"/packs/micron-04-ambre-x1.webp",pos:"58% 62%",bon:!1},{src:"/packs/kelvin-05-x1.webp",pos:"44% 74%",bon:!1},{src:"/packs/micron-04-ambre-x1.webp",pos:"40% 74%",bon:!1},{src:"/packs/01-depoli.webp",pos:"48% 26%",bon:!0}];function W(){let[e,a]=i.useState([]),[s,r]=i.useState(!1),[o,l]=i.useState(!1),u=X.every((t,i)=>t.bon===e.includes(i))&&e.length>0;return(0,t.jsxs)("div",{className:"gl-vive gl-porte",children:[(0,t.jsxs)("div",{className:"gl-porte__tete",children:[(0,t.jsx)("p",{className:"gl-sur",children:"Unlock 20 %"}),(0,t.jsx)("h4",{children:"Pick every square with the frosted jar."})]}),s?(0,t.jsxs)("div",{className:"gl-porte__pied",children:[(0,t.jsx)("div",{className:"gl-gagne",children:X.filter(e=>e.bon).map((e,i)=>(0,t.jsx)("span",{style:{backgroundImage:`url(${e.src})`,backgroundPosition:e.pos}},i))}),(0,t.jsx)(G,{code:"KATAL-20",ou:"promo-gate",sur:()=>{a([]),r(!1),l(!1)}})]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"gl-grille",children:X.map((i,s)=>(0,t.jsx)("button",{type:"button",className:(0,n.cn)("gl-case",e.includes(s)&&"gl-case--pris"),"aria-pressed":e.includes(s),"aria-label":`Square ${s+1}`,style:{backgroundImage:`url(${i.src})`,backgroundPosition:i.pos},onClick:()=>{l(!1),a(e=>e.includes(s)?e.filter(e=>e!==s):[...e,s])}
236,children:(0,t.jsx)("span",{"aria-hidden":!0,className:"gl-case__c",children:(0,t.jsx)("svg",{viewBox:"0 0 24 24",width:"13",height:"13",children:(0,t.jsx)("path",{d:"M4 12.5 9.5 18 20 6.5",fill:"none",stroke:"currentColor",strokeWidth:"3"})})})},s))}),(0,t.jsxs)("div",{className:"gl-porte__barre",children:[(0,t.jsx)("p",{children:o?"Not those. The frosted one is KATAL.":"Pick 3"}),(0,t.jsx)("button",{type:"button",onClick:()=>u?r(!0):l(!0),children:"Unlock"})]})]})]})}function $({p:e}){return(0,t.jsxs)("div",{className:"vt-leg shell",children:[(0,t.jsxs)("div",{className:"vt-leg__k",children:[e.garde?(0,t.jsx)("span",{className:"vt-etoile","aria-hidden":!0,children:"â
"}):null,(0,t.jsx)("span",{className:"vt-leg__b",children:e.boutique})]}),(0,t.jsx)("h3",{className:"vt-leg__t",children:e.titre}),(0,t.jsx)("p",{className:"vt-leg__g",children:e.gain})]})}function Q({p:e}){return(0,t.jsxs)("article",{className:"vt-piece","data-piece":e.id,children:[(0,t.jsx)($,{p:e}),"servie"===e.genre?(0,t.jsx)(F,{id:e.id,vole:e.vole,etroit:e.etroit}):"film"===e.genre?(0,t.jsx)(H,{src:e.film,affiche:e.affiche,ratio:e.ratio,larg:D[e.id]}):(0,t.jsx)(W,{})]})}let Y=["ACHAT-51","GRILLE-59","KIT-02","PANIER-02","captcha-promo","grattage-code","COMPAR-51","AVIS-70"].map(e=>g.find(t=>t.id===e)).filter(e=>!!e),K=Y.length,J=[{genre:"servie",id:"MUR-221",boutique:"Ostrel",titre:"The paywall that shows the shape of what it hides.",gain:"Six of forty rows are open, the other thirty-four keep their columns and lose their values. The reader sees the report he is buying instead of a locked door."},{genre:"servie",id:"PALIER-737",boutique:"Havren",titre:"A price ladder where nobody is the most popular.",gain:"No badge decides for the reader. Each rung says how many workspaces actually sit on it, and what happens the day you go past it â the one thing a price page is usually quiet about."},{genre:"servie",id:"CALCUL-221",boutique:"Ostrel",titre:"A payback calculator that can answer no.",gain:"Three sliders, one figure, and every assumption on screen. Drop the hourly rate and it goes below zero in writing â a calculator that can never say no proves nothing."},{genre:"servie",id:"PLANS-663",boutique:"Ostrel",titre:"Two plans, and the yearly one is exactly a fifth cheaper.",gain:"The discount is an arithmetic the reader can check on the page, not a percentage he has to believe."},{genre:"servie",id:"PARRAIN-221",boutique:"Ostrel",titre:"A referral ladder you can aim past.",gain:"One more active account is the whole distance to the next rung, and the register underneath sums itself from rows anyone can read. Nobody subtracts in their head."},{genre:"servie",id:"PONT-221",boutique:"Ostrel",titre:"The migration bridge that names what will not come across.",gain:"Every migration page lists what transfers. This one also lists what does not, with the count â because the reader already knows that list exists."},{genre:"servie",id:"COMPAR-909",boutique:"Ostrel",titre:"A comparison the spreadsheet wins one row of.",gain:"Five to nil is not a comparison, it is an advert, and everybody skips it. The losing row
236stays in."},{genre:"servie",id:"PREUVE-766",boutique:"Ostrel",titre:"Five teams, and what each of them still does by hand.",gain:"Proof that names its own limits reads as a measurement. Proof without limits reads as a claim."}],Z=` 237.vt{position:relative;background:var(--color-k-0,#1e1e1e)} 238 239/* ââ L'EN-T\xcaTE âââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 240.vt-tete{padding:46px 0 26px} 241@media (min-width:860px){.vt-tete{padding:96px 0 46px}} 242.vt-h2{margin:14px 0 0;font-family:var(--font-display); 243 font-size:clamp(32px,4.6vw,58px);line-height:1.02;letter-spacing:-.03em; 244 color:#fff;max-width:17ch;text-wrap:balance} 245.vt-h2 span{display:block;color:rgba(255,255,255,.52);font-weight:400} 246.vt-lede{margin:14px 0 0;max-width:46ch;font-size:16.5px;line-height:1.5; 247 color:rgba(255,255,255,.62)} 248 249/* ââ LE PANIER QUI COLLE ââââââââââââââââââââââââââââââââââââââââââââââ * 250 * la propriete top vaut la hauteur de la barre de navigation : coll\xe9 \xe0 0, il passait 251 * DERRI\xc8RE elle et le vol se terminait sur un objet invisible. */ 252/* ð´ 27/08 â LA PASTILLE PASSE EN BAS DE FENETRE. Collee a 76 px du haut, 253 * elle tombait pile sur le HAUT des pieces â c est-a-dire sur leur titre et 254 * sur leur prix : releve sur trois bandes (le pied Olivade, le bouton 255 * \xab Pick 3 more products \xbb de KIT-02, le \xab $59 \xbb d ACHAT-51). Une pastille 256 * qui se pose sur un prix est pire qu une pastille absente. 257 * â En bas a droite : c est la ou le lecteur cherche un panier, et c est la 258 * zone la moins chargee de toutes les pieces. height:0 garde le flux 259 * intact, sticky fait le reste. */ 260.vt-collant{position:sticky;top:calc(100vh - 74px);z-index:26;display:flex; 261 justify-content:flex-end;pointer-events:none;height:0} 262@media (min-width:860px){.vt-collant{top:calc(100vh - 82px)}} 263.vt-panier{position:relative;display:inline-flex;align-items:center;gap:9px; 264 padding:9px 15px 9px 13px;border-radius:999px; 265 background:rgba(12,12,12,.88);color:#fff; 266 box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 12px 30px -14px rgba(0,0,0,.9); 267 backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px); 268 font-size:12.5px;letter-spacing:.01em;white-space:nowrap;will-change:transform} 269.vt-panier__n{min-width:21px;height:21px;display:inline-flex;align-items:center; 270 justify-content:center;border-radius:999px;background:#fff;color:#0b0b0b; 271 font-size:12px;font-weight:800;font-variant-numeric:tabular-nums; 272 transform-origin:50% 50%;will-change:transform} 273.vt-panier__mot{color:rgba(255,255,255,.55)} 274@media (max-width:640px){.vt-panier__mot{display:none}} 275/* l'anneau : il BAT au contact, il ne tourne pas. Un anneau qui tourne se lit 276 comme un chargement, donc comme une attente. */ 277.vt-panier__anneau{position:absolute;inset:-3px;border-radius:999px; 278 box-shadow:0 0 0 0 rgba(255,255,255,.55);opacity:0} 279.vt-panier__anneau.bat{animation:vt-bat .5s ease-out} 280@keyframes vt-bat{ 281 0%{opacity:.9;box-shadow:0 0 0 0 rgba(255,255,255,.55)} 282 100%{opacity:0;box-shadow:0 0 0 16px rgba(255,255,255,0)} 283} 284 285/* ââ LE VOL. Il vit dans <body>, en position fixe : les cadres ont leurs 286 * propres ar\xeates, un objet qui les quitte serait coup\xe9. 287 * â AUCUN FLOU SUR LA T\xcaTE : mesur\xe9 ailleurs â filtre SVG + ombre = 18 288 * images en 928 ms, l'objet SAUTE. Seuls les \xe9chos sont flout\xe9s. */ 289.kv-vol{position:fixed;left:0;top:0;z-index:60;pointer-events:none; 290 transform-origin:50% 50%;will-change:transform} 291.kv-vol .kv-vol__axe{width:100%;height:100%;transform-origin:50% 50%; 292 will-change:transform,filter} 293.kv-vol .kv-vol__anti{width:100%;height:100%;transform-origin:50% 50%} 294.kv-vol img{display:block;width:100%;height:100%;object-fit:contain; 295 transform-origin:50% 50%} 296.kv-vol.tete .kv-vol__anti{filter:drop-shadow(0 12px 14px rgba(6,8,12,.5))} 297.kv-vol.echo .kv-vol__axe{filter:blur(2.4px)} 298 299/* ââ UNE PI\xc8CE ââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 300.vt-piece{padding:0 0 44px} 301@media (min-width:860px){.vt-piece{padding:0 0 92px}} 302 303.vt-leg{padding-bottom:14px} 304.vt-leg__k{display:flex;align-items:center;gap:8px;margin-bottom:7px} 305.vt-leg__b{font-family:var(--font-mono),ui-monospace,monospace;font-size:10px; 306 text-transform:uppercase;letter-spacing:.17em;color:rgba(255,255,255,.42)} 307.vt-etoile{font-size:11px;line-height:1;color:var(--satin-platine)} 308.vt-leg__t{margin:0;font-family:var(--font-display); 309 font-size:clamp(21px,2.4vw,29px);line-height:1.06;letter-spacing:-.024em; 310 color:#fff;text-wrap:balance} 311.vt-leg__g{margin:7px 0 0;max-width:62ch;font-size:15px;line-height:1.45; 312 color:rgba(255,255,255,.58);text-wrap:balance} 313 314/* ââ LE CADRE âââââââââââââââââââââââââââââââââââââââââââââââââââââââââ * 315 * PLEINE LARGEUR : la pi\xe8ce est compos\xe9e pour la fen\xeatre, et elle calcule
316 * elle-m\xeame sa goutti\xe8re. La borner \xe0 la bo\xeete du site lui en ajouterait une 317 * seconde, et on lirait deux marges empil\xe9es. 318 * â Aucun transform:scale(), aucun zoom : l'\xe9chelle vaut 1, le texte est 319 * net par construction. */ 320/* ð´ 27/08 â LA COUPURE NETTE, ET C EST SON GRIEF N\xb01 : \xab la moitie des 321 * sections, tu as un truc en satin, sauf que l autre moitie d en haut, ca se 322 * coupe trop net, ce n est pas du tout bon. \xbb 323 * Chaque piece de la vitrine est un bloc CLAIR pose sur le noir de la 324 * section : sans bord, elle s arrete au rasoir, et le regard lit une image 325 * tranchee plutot qu une vitre. Le rayon + le filet interieur donnent a 326 * toutes les pieces LE MEME bord â c est l uniformite qu il reclame, pas 327 * l adoucissement. 328 * â ï¸ overflow:hidden est ce qui fait mordre le rayon sur le cadre a 329 * l interieur ; sans lui le coin reste carre. */ 330.vt-cadre{position:relative;width:100%;background:#fff; 331 border-radius:14px;overflow:hidden; 332 box-shadow:0 26px 60px -34px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.11)} 333@media (min-width:860px){.vt-cadre{border-radius:16px}} 334.vt-cadre iframe{display:block;width:100%;border:0} 335/* les pi\xe8ces compos\xe9es \xe0 390 : servies pleine largeur, elles flottent au 336 milieu d'un oc\xe9an de blanc. On les borne, et on garde le blanc AUTOUR 337 plut\xf4t que DEDANS. */ 338.vt-cadre--etroit{max-width:640px;margin:0 auto} 339 340/* ââ LA VITRE âââââââââââââââââââââââââââââââââââââââââââââââââââââââââ * 341 * ð´ 28/08 â MESUR\xc9 AU T\xc9L\xc9PHONE AVANT D'\xc9CRIRE : la section faisait 24 052 px 342 * sur une page de 31 516, soit 76 %. Les publicit\xe9s arrivent d'Instagram, \xe0 343 * 95 % sur t\xe9l\xe9phone : vingt-neuf \xe9crans de vitrine, ce n'est pas une preuve 344 * de richesse, c'est une porte ferm\xe9e. 345 * 346 * ââ CE QU'ON A REFUS\xc9 DE FAIRE, ET POURQUOI ââââââââââââââââââââââââââââââ 347 * â R\xc9DUIRE LES PI\xc8CES. transform:scale() et zoom rast\xe9risent le texte, et 348 * le rast\xe9ris\xe9 se voit â c'est la faute qu'on a d\xe9j\xe0 pay\xe9e. Ici l'\xe9chelle 349 * vaut UN : la pi\xe8ce garde sa taille de composition, on la fait seulement 350 * coulisser derri\xe8re une ouverture. 351 * â COUPER LE HAUT PAR D\xc9FAUT. Le haut d'une fiche produit, c'est une photo ; 352 * le moment d'argent (les paliers, le choix d'abonnement, le bouton) est 353 * MILLE PIXELS PLUS BAS. La vitre porte donc un d\xe9calage relev\xe9 pi\xe8ce par 354 * pi\xe8ce, et il est diff\xe9rent au t\xe9l\xe9phone et au bureau parce que la mise en 355 * page l'est. 356 * 357 * ââ ET LA PREUVE RESTE ENTI\xc8RE âââââââââââââââââââââââââââââââââââââââââââ 358 * Le bouton sous chaque vitre rend la pi\xe8ce compl\xe8te, en place, vivante. On 359 * ne cache rien : on d\xe9cide seulement ce qui se voit sans avoir \xe0 demander. 360 * 361 * â ï¸ LE min() N'EST PAS DE LA COQUETTERIE : une pi\xe8ce plus courte que sa vitre 362 * laisserait sinon du blanc sous elle, et un cadre \xe0 moiti\xe9 vide se lit 363 * comme une image qui n'a pas charg\xe9. */ 364.vt-vitre{position:relative;--vt-f:var(--vt-f-bur);--vt-y:var(--vt-y-bur)} 365@media (max-width:899.98px){.vt-vitre{--vt-f:var(--vt-f-tel);--vt-y:var(--vt-y-tel)}} 366.vt-vitre--etroit{max-width:640px;margin:0 auto} 367.vt-cadre--vitre{height:min(var(--vt-f), var(--vt-nat))} 368.vt-cadre--vitre iframe{position:absolute;left:0; 369 top:calc(-1 * min(var(--vt-y), max(0px, var(--vt-nat) - var(--vt-f))))} 370.vt-vitre[data-ouvert] .vt-cadre--vitre{height:var(--vt-nat)} 371.vt-vitre[data-ouvert] .vt-cadre--vitre iframe{top:0} 372 373/* le bouton d'ouverture. Il porte SON propre fond, discret : pos\xe9 sur le noir 374 * de la section il flotterait, et un texte qui flotte sous une image se lit 375 * comme une l\xe9gende, pas comme une commande. 376 * â ï¸ 46 px de haut : au-dessus du minimum tactile, et le texte \xe0 13,5 px. */ 377.vt-plus{display:flex;align-items:center;justify-content:center;gap:8px; 378 width:100%;min-height:46px;margin-top:12px;padding:0 18px; 379 border:0;border-radius:999px;cursor:pointer; 380 background:rgba(255,255,255,.07);color:rgba(255,255,255,.78); 381 box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); 382 font:inherit;font-size:13.5px;letter-spacing:.01em; 383 transition:background .16s ease,color .16s ease} 384@media (min-width:860px){.vt-plus{width:auto;margin-left:auto;margin-right:auto; 385 min-width:280px}} 386.vt-plus:hover{background:rgba(255,255,255,.13);color:#fff} 387.vt-plus:focus-visible{outline:2px solid #fff;outline-offset:3px} 388 389/* ââ LA RANGEE DES PIECES ETROITES âââââââââââââââââââââââââââââââââââ *
390 * Une colonne au telephone, deux au-dessus de 900 px. Pas quatre : a 1440 la 391 * boite du site fait 1380, donc 320 px par colonne â c est-a-dire MOINS que 392 * les 390 auxquels ces pieces sont composees. Une piece servie sous sa 393 * largeur de composition se replie sur sa mise en page de telephone dans une 394 * colonne de bureau : on montrerait un cas qu on ne livre pas. 395 * â align-items:start â sans lui, la plus courte s etire pour egaler sa 396 * voisine et son fond blanc grandit sous elle, ce qui se lit comme un 397 * trou. */ 398.vt-rangee{display:grid;gap:36px 40px;align-items:start;padding-bottom:44px} 399@media (min-width:900px){.vt-rangee{grid-template-columns:1fr 1fr;gap:56px 48px; 400 padding-bottom:92px}} 401/* dans une rangee, la piece ne porte plus sa propre marge basse ni sa boite : 402 c est la rangee qui tient l espace, sinon on additionne les deux. */ 403.vt-rangee .vt-piece{padding:0} 404.vt-rangee .vt-leg{padding-left:0;padding-right:0;max-width:none;width:100%} 405.vt-rangee .vt-cadre--etroit{max-width:none} 406 407.vt-film{position:relative;width:100%;max-width:390px;margin:0 auto; 408 overflow:hidden;background:#0b0b0b} 409.vt-film video{display:block;width:100%;height:100%;object-fit:cover} 410 411/* ââ LES PI\xc8CES VIVANTES ââââââââââââââââââââââââââââââââââââââââââââââ * 412 * Compos\xe9es \xe0 390 px, comme les films : au-dessus elles se centrent, elles ne 413 * s'\xe9tirent pas. Une part de commerce \xe9tir\xe9e n'est plus la part qu'on livre. */ 414.gl-vive{--gl-encre:#101318;--gl-encre-2:#5B6270;--gl-filet:#DDE0E4; 415 width:100%;max-width:390px;margin:0 auto;padding:18px 16px 20px; 416 background:#F4F5F3;color:var(--gl-encre); 417 font-family:var(--font-marchand),var(--font-sans),system-ui,sans-serif; 418 display:flex;flex-direction:column} 419.gl-vive *,.gl-vive *::before,.gl-vive *::after{box-sizing:border-box} 420.gl-sur{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.20em; 421 text-transform:uppercase;color:var(--gl-encre-2)} 422.gl-vive h4{margin:6px 0 0;font-size:29px;font-weight:800;letter-spacing:-.032em; 423 line-height:1.02} 424 425/* ââ LA PORTE PROMO âââââââââââââââââââââââââââââââââââââââââââââââââââ */ 426.gl-porte{background:#0F1116;color:#fff;--gl-encre:#fff;--gl-encre-2:rgba(255,255,255,.55)} 427.gl-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:16px} 428.gl-case{position:relative;aspect-ratio:1;border:0;padding:0;cursor:pointer; 429 background-color:#22252B;background-size:230%;background-repeat:no-repeat; 430 transition:transform .14s ease} 431.gl-case:hover{transform:scale(.97)} 432.gl-case:focus-visible{outline:2px solid #fff;outline-offset:2px} 433.gl-case__c{position:absolute;top:6px;left:6px;display:none; 434 width:22px;height:22px;align-items:center;justify-content:center; 435 background:#fff;color:#0F1116} 436.gl-case--pris{box-shadow:inset 0 0 0 3px #fff} 437.gl-case--pris .gl-case__c{display:flex} 438.gl-porte__barre{display:flex;align-items:center;justify-content:space-between; 439 gap:12px;margin-top:14px;padding-top:13px; 440 border-top:1px solid rgba(255,255,255,.22)} 441.gl-porte__barre p{margin:0;font-size:12.5px;letter-spacing:.02em; 442 color:rgba(255,255,255,.62)} 443.gl-gagne{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:16px}
444.gl-gagne span{display:block;aspect-ratio:1;background-color:#22252B; 445 background-size:230%;background-repeat:no-repeat;box-shadow:inset 0 0 0 2px #fff} 446.gl-porte__barre button{min-height:46px;padding:0 22px;border:0;background:#fff; 447 color:#0F1116;font:inherit;font-size:16px;font-weight:700;cursor:pointer; 448 transition:opacity .16s ease} 449.gl-porte__barre button:hover{opacity:.85} 450.gl-porte__barre button:focus-visible{outline:2px solid #fff;outline-offset:3px} 451.gl-porte__pied{margin-top:18px} 452 453/* ââ LA QUEUE COMMUNE : ADRESSE â CODE ââââââââââââââââââââââââââââââ */ 454.gl-mail__t{display:block;font-size:15px;font-weight:700;letter-spacing:-.012em} 455.gl-mail__r{display:flex;margin-top:10px;border:1px solid rgba(255,255,255,.34)} 456.gl-mail__r input{flex:1;min-width:0;min-height:52px;padding:0 13px;border:0; 457 background:transparent;color:inherit;font:inherit;font-size:16px} 458.gl-mail__r input::placeholder{color:var(--gl-encre-2)} 459.gl-mail__r input:focus{outline:0} 460.gl-mail__r input:focus-visible{outline:2px solid #fff;outline-offset:-2px} 461.gl-mail__r button{flex:0 0 auto;min-height:52px;padding:0 18px;border:0; 462 background:#fff;color:#0F1116;font:inherit;font-size:15px;font-weight:700; 463 cursor:pointer} 464.gl-mail__f{margin:9px 0 0;font-size:13px;color:#FF9A88} 465.gl-code__t{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.20em; 466 text-transform:uppercase;color:var(--gl-encre-2)} 467.gl-code__b{display:flex;align-items:stretch;margin-top:9px; 468 border:1.5px dashed #fff} 469.gl-code__b b{flex:1;display:flex;align-items:center;padding:0 14px;min-height:56px; 470 font-family:var(--font-mono),ui-monospace,monospace;font-size:21px;font-weight:700; 471 letter-spacing:.06em} 472/* â ï¸ 56 px de haut, PAS 36 : relev\xe9 du 22/08, ce bouton sortait sous le 473 minimum tactile alors que son voisin \xe9tait \xe0 56 sur la M\xcaME page. */ 474.gl-code__c{flex:0 0 auto;min-height:56px;padding:0 16px;border:0; 475 border-left:1.5px dashed #fff;background:transparent;color:inherit; 476 font-family:var(--font-mono),ui-monospace,monospace;font-size:11px; 477 text-transform:uppercase;letter-spacing:.14em;cursor:pointer} 478.gl-code__c:hover{background:#fff;color:#0F1116} 479.gl-rejouer{margin-top:13px;padding:0;border:0;background:transparent; 480 color:var(--gl-encre-2);font:inherit;font-size:12.5px;text-decoration:underline; 481 text-underline-offset:3px;cursor:pointer} 482.gl-rejouer:hover{color:#fff} 483 484@media (prefers-reduced-motion:reduce){ 485 .gl-case{transition:none} 486 .vt-panier__anneau.bat{animation:none} 487} 488`;function ee(){let e=i.useRef(null),a=i.useRef(null),n=i.useRef(null),[s,r]=i.useState(0),o=i.useRef(0);i.useEffect(()=>{o.current=s},[s]),i.useEffect(()=>{(0,f.prechauffer)("/packs/kelvin-05-vol.png")},[]);let l=i.useMemo(()=>({panier:e,pastille:a,anneau:n,get compte(){return o.current},ajouter:e=>r(t=>t+e)}),[]);return(0,t.jsxs)("section",{id:"components",className:"vt","aria-labelledby":"vt-t",children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:(0,b.cssServi)(Z)}}),(0,t.jsxs)("div",{className:"vt-tete shell",children:[(0,t.jsx)("p",{className:"tag text-white",children:"The shop window"}),(0,t.jsxs)("h2",{id:"vt-t",className:"vt-h2",children:["Everything a store that sells knows how to do.",(0,t.jsx)("span",{children:"Already built."})]}),(0,t.jsxs)("p",{className:"vt-lede",children:[K," components, and every one of them decides what a cart is worth. Running on this page, not pictured. Press any add button and watch the product fly to the cart."]})]}),(0,t.jsx)("div",{className:"vt-collant shell",children:(0,t.jsx)(V,{compte:s,panier:e,pastille:a,anneau:n})}),(0,t.jsxs)(_.Provider,{value:l,children:[(function(e){let t=[],i=[],a=()=>{1===i.length?t.push({seule:i[0]}):i.length>1&&t.push({rangee:i}),i=[]};for(let n of e)n.etroit?i.push(n):(a(),t.push({seule:n}));return a(),t})(Y).map((e,i)=>"seule"in e?(0,t.jsx)(Q,{p:e.seule},e.seule.id):(0,t.jsx)("div",{className:"vt-rangee shell",children:e.rangee.map(e=>(0,t.jsx)(Q,{p:e},e.id))},`r${i}`)),(0,t.jsx)(N,{sansCadre:!0})]})]})}function et(){return(0,t.jsxs)("section",{id:"live",className:"vt","aria-labelledby":"vs-t",children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:(0,b.cssServi)(Z)}}),(0,t.jsxs)("div",{className:"vt-tete shell",children:[(0,t.jsx)("p",{className:"tag text-white",children:"The library, running"}),(0,t.jsxs)("h2",{id:"vs-t",className:"vt-h2",children:[J.length," of them are running on this page.",(0,t.jsx)("span",{children:"Not pictured. Running."})]}),(0,t.jsx)("p",{className:"vt-lede",children:"Move the sliders, switch monthly to yearly, watch the hidden count come down. Each one opens to its full height under it."})]}),J.map(e=>(0,t.jsx)(Q,{p:e},e.id))]})}r.CHOIX.filter(e=>e.hb>=500&&e.hp>=520).length;let ei=new Set(["HERO-56","CADRE-60"]),ea=e=>!!U[e]&&!ei.has(e),en=new Set(["SCRATCH-OR","CAPTCHA-OR"]),es=e=>e.replace(/-bis$/,"");Object.keys(U).filter(ea).length;let er=new Set(P.default),eo=s.default.filter(o).filter(e=>er.has(e.id)),el=j.default,eu=r.CHOIX.length,ed=["PLANS","QUOTA","CREDIT","MONTE","RETEN","PONT","PARRAIN","MUR","PALIER","ACTIV","SIGNUP","CALCUL","COMPAR","CONFORM","AVIS","PREUVE","CONFIANCE","NOMBRE","CAS","SECU","TABLEAU","DEMO","USAGE","ETAPE","ETAPES","PAS","ROUTE","VISITE","ONGLET","ONGLETS","HEROS","CHAP","BENTO","MOSAIQUE","GRILLE","ATOUT","ATOUTS","BENEF","FAQS","FINAL","RDV","ANNUAIRE","RESEAU","LOGOS","EQUIPE","GALERIE","BANDE","BLOG","CHANGELOG","PIED"],ec=e=>{let t=ed.indexOf(e.split("-")[0]);return -1===t?ed.length:t},ep=e=>{let t=Number(e.split("-").pop());return Number.isFinite(t)?t>=800&&t<1e3?0:t>=500&&t<800?1:t<500?2:3:9},eh=(()=>{let e=[...[...eo].map((e,t)=>({e,i:t})).sort((e,t)=>
488ec(e.e.id)-ec(t.e.id)||ep(e.e.id)-ep(t.e.id)||e.i-t.i).map(e=>e.e)],t=[];for(;e.length;){let i={};for(let a=0;a<e.length;){let n=e[a].id.split("-")[0];(i[n]??0)<3?(i[n]=(i[n]??0)+1,t.push(e[a]),e.splice(a,1)):a++}}return t})(),em=eh.slice(0,eu).map((e,t)=>({n:t+1,id:e.id,hb:e.h1440,hp:e.h390,mot:el[e.f]??e.f.toLowerCase()})),ef=eh.slice(eu).map(e=>e.id),eg={"GRATTE-02":{n:167,id:"SCRATCH-OR",hb:718,hp:1111,mot:"scratch card",vedette:!0},"CAPTCHA-01":{n:166,id:"CAPTCHA-OR",hb:747,hp:980,mot:"captcha discount",vedette:!0}},ev=new Set(["HERO-12","HERO-10","PREUVE-55"]),ex={ecommerce:{vues:r.CHOIX.map(e=>eg[e.id]??e).filter(e=>!/captcha/i.test(e.id)&&!/captcha/i.test(e.mot)&&!ev.has(e.id)),restant:r.RESTANT,total:s.default.filter(e=>!o(e)).length,lignes:r.LIGNES_VUES},saas:{vues:em,restant:ef,total:s.default.filter(o).length,lignes:eh.slice(0,eu).reduce((e,t)=>e+(t.lignes||0),0)}},eb=e=>e.replace(/-[^-]*$/,""),eE=e=>{let t=[[],[],[]],i=[0,0,0],a=(e,a)=>{t[a].push(e),i[a]+=(e.lb??1400)/e.hb},n=new Set,s=e=>{let a=eb(e.id),n=[0,1,2].filter(e=>{let i;return((i=t[e]).length?eb(i[i.length-1].id):null)!==a});return(n.length?n:[0,1,2]).reduce((e,t)=>i[e]<=i[t]?e:t)};for(let t of e.filter(e=>e.vedette))a(t,0),n.add(t.id);let r=(e=>{let t=[],i=new Map;for(let a of e){let e=eb(a.id),n=i.get(e);n||(n=[],i.set(e,n),t.push(n)),n.push(a)}let a=[];for(let i=0;a.length<e.length;i++)for(let e of t)e[i]&&a.push(e[i]);return a})(e);for(let e of r)!n.has(e.id)&&ea(e.id)&&(a(e,s(e)),n.add(e.id));for(let e of r)n.has(e.id)||a(e,s(e));return t},ey=Math.ceil(6.7114093959731544),eA=e=>{if(!e.length)return e;let t=Math.ceil(ey/e.length);return t<=1?e:Array.from({length:t},()=>e).flat()},ew={ecommerce:eE(ex.ecommerce.vues).map(eA),saas:eE(ex.saas.vues).map(eA)},eT=M.default;function eS({id:e,v:a}){let n=i.useRef(null);return i.useEffect(()=>{let e=n.current;if(!e||"u"<typeof IntersectionObserver)return;let t=new IntersectionObserver(([t])=>{t.isIntersecting?e.play().catch(()=>{}):e.pause()},{threshold:.35});return t.observe(e),()=>t.disconnect()},[]),(0,t.jsxs)("video",{ref:n,className:"mu-t__i mu-t__v",poster:"/mur/vu/"+e+".webp",muted:!0,loop:!0,playsInline:!0,preload:"metadata","aria-hidden":"true",tabIndex:-1,children:[a.webm?(0,t.jsx)("source",{src:a.webm,type:"video/webm"}):null,(0,t.jsx)("source",{src:a.mp4,type:"video/mp4"})]})}function eR({c:e,charge:a,cle:s,film:r,anime:o,premiere:l}){let u=ea(e.id),d=o&&a?eT[e.id]?.bureau??null:null,c=O.default[e.id],p=c?.bureau??0,h=i.useRef(null),[m,f]=i.useState(!1);return i.useEffect(()=>{let e=h.current;if(!p||!e||"u"<typeof IntersectionObserver)return;let t=new IntersectionObserver(e=>{for(let t of e)f(t.isIntersecting&&t.intersectionRatio>=.6)},{threshold:[0,.6]});return t.observe(e),()=>t.disconnect()},[p]),(0,t.jsxs)("span",{className:"mu-t",ref:h,"data-film":u?s:void 0,style:p&&c?.fond?{background:c.fond}:void 0,children:[(0,t.jsx)("picture",{children:(0,t.jsx)("img",{className:(0,n.cn)("mu-t__i",p&&m&&"mu-t__i--pan"),src:a?"/mur/vu/"+e.id+".webp":void 0,alt:e.mot,loading:l?"eager":"lazy",fetchPriority:l?"high":"low",decoding:"async"})}),d?(0,t.jsx)(eS,{id:e.id,v:d}
488):null,u&&r?o?(0,t.jsx)(ek,{id:e.id,vue:"bureau",classe:"mu-t__f",bulle:!0}):(0,t.jsx)(eD,{id:e.id}):null]})}let eL=[.11,.37,.24];function eq(e,t,a,n){let s=i.useRef(null);return i.useEffect(()=>{let i=s.current;if(!i||!a)return;let r=i.firstElementChild;if(!r)return;let o=window.matchMedia("(prefers-reduced-motion:reduce)").matches;if(o){let e=r.getBoundingClientRect().width/2;e>2&&(i.scrollLeft=Math.round(e*(eL[n%eL.length]??.2)))}let l=0,u=0,d=0,c=0,p=0,h=0,m=!1,f=()=>r.getBoundingClientRect().width/2,g=()=>{let e=f();!(e<2)&&(i.scrollLeft<.5?i.scrollLeft+=e:i.scrollLeft>=e&&(i.scrollLeft-=e))};t&&!o&&(i.scrollLeft=l=f()),u=Math.round(i.scrollLeft);let v=a=>{c=requestAnimationFrame(v);let n=f();if(n<2)return;let s=d?Math.min(120,a-d):0;d=a,(l+=(t?-1:1)*e*s/1e3)>=n&&(l-=n),l<0&&(l+=n);let r=Math.round(l);r!==u&&(i.scrollLeft=r,u=r)},x=()=>{c||m||o||(u=Math.round(l=i.scrollLeft),d=0,c=requestAnimationFrame(v))},b=()=>{c&&(cancelAnimationFrame(c),c=0),window.clearTimeout(h),h=window.setTimeout(x,500)},E=0,y=0,A=0,w=!1,T=()=>{p&&(cancelAnimationFrame(p),p=0)},S=e=>{if(T(),b(),"touch"!==e.pointerType&&0===e.button){m=!0,w=!1,E=e.clientX,y=e.timeStamp,A=0,i.classList.add("mu-rail--tire");try{i.setPointerCapture(e.pointerId)}catch{}}},R=e=>{if(!m)return;let t=e.clientX-E;if(!w&&3>Math.abs(t))return;w=!0,E=e.clientX;let a=e.timeStamp-y;y=e.timeStamp,i.scrollLeft-=t,g(),u=Math.round(i.scrollLeft),a>0&&(A=-t/a*1e3),e.preventDefault()},L=e=>{if(m){m=!1,i.classList.remove("mu-rail--tire");try{i.releasePointerCapture(e.pointerId)}catch{}w?(()=>{let e=Math.max(-2600,Math.min(2600,A));if(30>Math.abs(e))return b();let t=0,a=n=>{let s=t?Math.min(60,n-t):0;t=n,i.scrollLeft+=e*s/1e3,g(),u=Math.round(i.scrollLeft),Math.abs(e*=Math.pow(.0022,s/1e3))>30?p=requestAnimationFrame(a):(p=0,b())};p=requestAnimationFrame(a)})():b()}},q=()=>{Math.abs(i.scrollLeft-u)>1.5&&b()};i.addEventListener("scroll",q,{passive:!0}),i.addEventListener("touchstart",b,{passive:!0}),i.addEventListener("pointerdown",S),i.addEventListener("pointermove",R,{passive:!1}),i.addEventListener("pointerup",L),i.addEventListener("pointercancel",L),i.addEventListener("wheel",b,{passive:!0}),i.addEventListener("keydown",b);let I=null;return"u">typeof IntersectionObserver?(I=new IntersectionObserver(e=>{e[0].isIntersecting?x():c&&(cancelAnimationFrame(c),c=0,window.clearTimeout(h))},{rootMargin:"300px 0px 300px 0px",threshold:0})).observe(i):o||(c=requestAnimationFrame(v)),()=>{cancelAnimationFrame(c),T(),window.clearTimeout(h),I?.disconnect(),i.removeEventListener("scroll",q),i.removeEventListener("touchstart",b),i.removeEventListener("pointerdown",S),i.removeEventListener("pointermove",R),i.removeEventListener("pointerup",L),i.removeEventListener("pointercancel",L),i.removeEventListener("wheel",b),i.removeEventListener("keydown",b)}},[e,t,a]),s}let eI=new Set,eN=0;function eC(e,t){if(eI.has(e))return!0;let i=U[e],a=(t?i?.koFin:i?.koBureau)??0;return en.has(e)?(eI.add(e),eN+=a,!0):!(a>200)&&!(eN+a>800)&&(eI.add(e),eN+=a,!0)}let eU=[],eP=218/148;function eO({v:e,retour:a,vitesse:n,charge:s,rang:r}){var o;let l=i.useSyncExternalStore(ej,()=>!(0,f.reduit)(),()=>!1),u=eq(n,!!a,s,r),d=function(e){let[t,a]=i.useState(()=>"u"<typeof IntersectionObserver);return i.useEffect(()=>{let t=e.current;if(!t||"u"<typeof IntersectionObserver)return;let i=new IntersectionObserver(e=>a(e[0].isIntersecting),{rootMargin:"300px 0px 300px 0px",threshold:0});return i.observe(t),()=>i.disconnect()},[e]),t}(u);o=s&&d,i.useEffect(()=>{let e=u.current;if(!e||!o||"u"<typeof IntersectionObserver)return;let t=Array.from(e.querySelectorAll('img[loading="lazy"]'));if(!t.length)return;let i=new IntersectionObserver(e=>{for(let t of e){if(!t.isIntersecting)continue;let e=t.target;e.loading="eager",i.unobserve(e)}},{root:e,rootMargin:"0px 900px 0px 900px",threshold:0});return t.forEach(e=>i.observe(e)),()=>i.disconnect()},[u,o]);let c=function(e,t,a){let[n,s]=i.useState([]),r=i.useRef([]);return i.useEffect(()=>{let i=e.current;if(!i||!t)return;let n=Array.from(i.querySelectorAll("[data-film]"));if(!n.length)return;let o=new Set,l=0,u=()=>{let e=i.getBoundingClientRect(),t=e.left+e.width/2,n=new Map;
488for(let e of o){let i=e.getBoundingClientRect(),a=e.dataset.film||"";a&&n.set(a,Math.abs(i.left+i.width/2-t))}let l=e.width<700?2:3,u=[],d=new Set;for(let e of n.keys())en.has(es(e))&&(eC(es(e),a),u.push(e),d.add(e));let c=0;for(let e of r.current)!d.has(e)&&n.has(e)&&!(c>=l)&&(u.push(e),d.add(e),c++);for(let[e]of[...n.entries()].filter(([e])=>!d.has(e)).sort((e,t)=>e[1]-t[1])){if(c>=l)break;eC(es(e),a)&&(u.push(e),c++)}r.current=u,s(e=>e.length===u.length&&e.every((e,t)=>e===u[t])?e:u)},d=new IntersectionObserver(e=>{for(let t of e)t.isIntersecting?o.add(t.target):o.delete(t.target);window.clearTimeout(l),l=window.setTimeout(u,220)},{root:i,threshold:.55});for(let e of n)d.observe(e);return()=>{window.clearTimeout(l),d.disconnect()}},[e,t,a]),t?n:eU}(u,s&&d,!l),p=new Map,h=e.map(e=>{let t=p.get(e.id)??0;return p.set(e.id,t+1),t}),m=(e,i,a)=>{let n=e.id+i+(h[a]?"-r"+h[a]:"");return(0,t.jsx)(eR,{c:e,cle:n,charge:s,anime:l,film:c.includes(n),premiere:""===i&&a<2},n)};return(0,t.jsx)("div",{className:"mu-rail mu-rail--doigt",ref:u,tabIndex:0,role:"group","aria-label":"Components â swipe to see more",children:(0,t.jsxs)("div",{className:"mu-piste",children:[e.map((e,t)=>m(e,"",t)),(0,t.jsx)("span",{className:"mu-piste__bis","aria-hidden":!0,children:e.map((e,t)=>m(e,"-bis",t))})]})})}function eM(e="700px 0px 300px 0px",t=3e3){let a=i.useRef(null),[n,s]=i.useState(!1);return i.useEffect(()=>{let i=a.current;if(!i)return;let n=!1,r=()=>{n||s(!0)};if("u"<typeof IntersectionObserver)return void r();let o=new IntersectionObserver(e=>{e[0].isIntersecting&&(r(),o.disconnect())},{rootMargin:e,threshold:.01});o.observe(i);let l=t>0?window.setTimeout(r,t):0;return()=>{n=!0,o.disconnect(),window.clearTimeout(l)}},[e,t]),[a,n]}let ej=e=>{if(!window.matchMedia)return()=>{};let t=window.matchMedia("(prefers-reduced-motion: reduce)");return t.addEventListener("change",e),()=>t.removeEventListener("change",e)};function ek({id:e,vue:a,classe:s="pa-film",bulle:r=!1}){let[o,l]=i.useState(!1),[u,d]=i.useState(!1);return(0,t.jsx)("picture",{children:(0,t.jsx)("img",{className:(0,n.cn)(s,o&&s+"--pret",u&&s+"--large"),src:r?"/vitrine-films/bulle/"+e+".webp":"/vitrine-films/"+e+"-"+a+".webp",alt:"","aria-hidden":!0,loading:"eager",decoding:"async",onLoad:e=>{let t=e.currentTarget;t.naturalHeight>0&&d(t.naturalWidth/t.naturalHeight>eP),l(!0)}})})}function eD({id:e}){let[a,s]=i.useState(!1),[r,o]=i.useState(!1);return(0,t.jsx)("picture",{children:(0,t.jsx)("img",{className:(0,n.cn)("mu-t__fin",a&&"mu-t__fin--pret",r&&"mu-t__fin--large"),src:"/vitrine-films/fin/"+e+".webp",alt:"","aria-hidden":!0,loading:"eager",decoding:"async",onLoad:e=>{let t=e.currentTarget;t.naturalHeight>0&&o(t.naturalWidth/t.naturalHeight>eP),s(!0)}})})}let e_=e=>[0,1].map(t=>e.filter((e,i)=>i%2===t)),eV={ecommerce:e_(ex.ecommerce.restant),saas:e_(ex.saas.restant)};function eB({v:e,retour:i,charge:a,rang:n}){let s=eq(115,!!i,a,n),r=i=>e.map(e=>(0,t.jsx)("span",{className:"mu-t",children:(0,t.jsxs)("picture",{children:[a?(0,t.jsx)("source",{media:"(max-width:859px)",srcSet:"/mur/reste-tel/"+e+".webp"}):null,(0,t.jsx)("img",{className:"mu-t__i",src:a?"/mur/reste/"+e+".webp":void 0,alt:"",loading:"eager",decoding:"async"})]})},e+i));return(0,t.jsx)("div",{className:"mu-rail mu-rail--doigt",ref:s,children:(0,t.jsxs)("div",{className:"mu-piste",children:[r(""),(0,t.jsx)("span",{className:"mu-piste__bis",children:r("-bis")})]})})}function eF({voie:e}){let i=eV[e],[n,s]=eM("600px 0px 200px 0px",0);return(0,t.jsxs)("div",{className:"ri",ref:n,children:[(0,t.jsxs)("div",{className:"ri-bande","aria-hidden":!0,children:[(0,t.jsx)(eB,{v:i[0],charge:s,rang:0}),(0,t.jsx)(eB,{v:i[1],retour:!0,charge:s,rang:1}),(0,t.jsx)("span",{className:"ri-voile","aria-hidden":!0})]}),(0,t.jsxs)("div",{className:"ri-mot shell",children:[(0,t.jsxs)("p",{className:"ri-reste",children:["You have seen ",ex[e].vues.length,"."," ",(0,t.jsxs)("b",{children:[h-ex[e].vues.length," more"]})," are behind the subscription."]}),(0,t.jsxs)(a.default,{className:"ri-cta",href:"/#pricing",children:["See all ",h," parts",(0,t.jsx)("svg",{viewBox:"0 0 16 16",width:"14",height:"14","aria-hidden":!0,
488children:(0,t.jsx)("path",{d:"M3 8h9M8.5 4l4 4-4 4",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]})]})]})}let eH=` 489/* ð´ 03/09 â RENVOI 2 (jury DA), le fond de cette section (id="components", 490 * "This is your library so far") passe a #101216 SUR L ACCUEIL SEULEMENT 491 * â meme bande 2 que Miracle, meme geste que celui deja fait sur ce 492 * heros le 02/09. La regle vit dans globals.css 493 * (body:has(#miracle) #components{background-color:#101216}), PAS ICI : 494 * #components sert AUSSI /for-saas, /library et /kelvin-qa (aucun des 495 * trois n a de #miracle), et la changer ici changerait ces pages-la en 496 * silence â exactement le piege que le commentaire de globals.css met en 497 * garde deux lignes plus haut ("la lecon du 31/08 tient"). Le sol reste 498 * var(--color-k-0) ici : c est la regle scopee qui fait la difference, 499 * uniquement sur / . */ 500/* ð´ 03/09 â LE RETOURNEMENT DU RAPPORT (voir globals.css section 5, la 501 * version claire). Le mur passe du noir (--color-k-0) au clair 502 * (--claire-sol) : Angelo a valide cette nuit un theme a base claire, 503 * noir en accent â pas l inverse. --color-k-0 N EST PAS RETOUCHE (le 504 * heros/Kelvin le porte encore ailleurs, intact) : cette section prend un 505 * jeton different. 506 * â ï¸ LES TUILES (.mu-t, les vignettes elles-memes) NE BOUGENT PAS : elles 507 * sont deja blanches (background #fff), c'est le contenu vivant des 508 * boutiques recopiees, on n'y touche pas â seuls le sol et le texte de 509 * la section changent. Le rideau (.ri, plus bas) RESTE NOIR, 510 * deliberement : une bande de contrepoint sombre, pas la matiere. 511 * â AUCUN ACCENT GRAVE DANS CE LITTERAL : un seul le refermerait et rendrait 512 * une erreur sur toute l application, la faute deja payee ailleurs dans 513 * ce meme fichier. */ 514.mu{position:relative;background:var(--claire-sol);overflow:hidden} 515 516/* ââ L EN-TETE âââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 517/* ð´ 09/09 â LA TETE TOUCHAIT LE BORD GAUCHE, ET ELLE ETAIT SEULE A LE 518 FAIRE. Le raccourci padding:46px 0 24px ecrase le padding-inline que la 519 classe shell pose (var(--gutter)) : releve sur la page servie, .mu-tete 520 commencait a x=0 a 390 px (le titre collait au bord de l ecran) et a x=100 521 a 1440, pendant que le bouton de la bande et l eyebrow PRICING de la section 522 suivante commencaient tous les deux a x=130. Une tete decalee de 30 px vers 523 la gauche par rapport a tout le reste de la page. 524 On n ecrit plus que le padding VERTICAL : la gouttiere du site reprend sa 525 place, et rien de la bande ne touche le bord. */ 526.mu-tete{padding-block:46px 24px} 527@media (min-width:860px){.mu-tete{padding-block:92px 40px}} 528.mu-h2{margin:13px 0 0;font-family:var(--font-display); 529 font-size:clamp(31px,4.4vw,54px);line-height:1.03;letter-spacing:-.03em; 530 color:var(--claire-encre);max-width:19ch;text-wrap:balance} 531.mu-h2 span{display:block;color:var(--claire-encre-3);font-weight:400} 532/* ââ LA LIGNE QUI DIT CE QUE LE PRODUIT EST âââââââââââââââââââ * 533 * ð´ 29/08, SA PAROLE : \xab on a oublie de mettre le plus important : les 534 * composants sont connectes au MCP et donc a l agent. Et la ce n est meme 535 * pas ecrit. \xbb Il a raison, et c est le point le plus cher de la page : 536 * sans cette ligne, la section se lit comme une bibliotheque a copier- 537 * coller â une marchandise qui ne vaut rien, il en existe des dizaines 538 * gratuites. Ce qu on vend est l inverse. 539 * â ï¸ ELLE EST BLANCHE ET ELLE PASSE DEVANT LA LIGNE GRISE. Quelqu un qui ne 540 * lit qu UNE ligne de cette section doit lire celle-la, pas l enumeration 541 * des mecaniques â qui, seule, decrit justement un catalogue. 542 * â ï¸ 40ch et 17 px : mesure a 390, elle tient en quatre lignes et la tete de 543 * section reste sous un ecran, sans defilement interne. */ 544/* ð´ 09/09 â 40ch ETAIT LA MESURE D UN PARAGRAPHE, PAS D UNE LIGNE. Il n y 545 a plus qu une phrase sous le titre : a 40ch elle retombait sur trois 546 lignes, c est-a-dire exactement le pave qu on vient de retirer. A 66ch elle
547 tient sur UNE ligne au bureau et sur deux au telephone, ou aucune largeur 548 ne fait mieux. ATTENTION AUCUNE POLICE CONDENSEE, AUCUN transform:scale : 549 c est la boite qui s ouvre, la lettre ne bouge pas d un centieme. */ 550.mu-dit{margin:15px 0 0;max-width:66ch;font-size:17px;line-height:1.42; 551 color:var(--claire-encre);font-weight:500;letter-spacing:-.005em} 552 553/* ââ LA PAIRE ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ * 554 * LES DEUX VOLETS SE PARTAGENT LA BOITE DE LA PAGE, moins le trait et ses 555 * deux jeux. 61,5 / 38,5 â releve a 390 : 198 px de bureau, 124 px de 556 * telephone, et rien ne deborde. 557 * â ï¸ 100cqw ET PAS 100vw : sur un bureau etroit, la barre de defilement de la 558 * page fait mentir vw de quinze pixels, et la paire depassait sa piste. 559 * L unite de conteneur mesure la PISTE, qui est ce qu on remplit. vw reste 560 * en repli pour les navigateurs qui ne connaissent pas les conteneurs. 561 * â ï¸ Au-dessus de 1 360, le rendu telephone est servi a 390 px, c est-a-dire a 562 * 1:1 : aucune reduction, aucun texte trouble. */ 563.pa{--pa-jeu:9px;--pa-entre:calc(1px + 2 * var(--pa-jeu));--pa-cap:320px; 564 --pa-util:calc(100vw - 2 * var(--gutter) - var(--pa-entre)); 565 --pa-wb:calc(var(--pa-util) * .615); 566 --pa-wt:calc(var(--pa-util) * .385); 567 padding:14px 0 2px} 568@supports (width:1cqw){ 569 .pa{--pa-util:calc(100cqw - 2 * var(--gutter) - var(--pa-entre))} 570} 571@media (min-width:640px){.pa{--pa-cap:400px;--pa-wb:370px;--pa-wt:200px}} 572@media (min-width:1024px){.pa{--pa-cap:520px;--pa-wb:620px;--pa-wt:320px}} 573@media (min-width:1360px){.pa{--pa-cap:600px;--pa-wb:760px;--pa-wt:390px}} 574 575.pa-tete{display:flex;align-items:flex-end;justify-content:space-between; 576 gap:12px;flex-wrap:wrap;padding-bottom:13px} 577.pa-tete__t{flex:1 1 260px;min-width:0} 578.pa-h3{margin:0;font-family:var(--font-display);font-weight:700; 579 font-size:clamp(19px,4.6vw,27px);line-height:1.14;letter-spacing:-.022em; 580 color:var(--claire-encre);text-wrap:balance} 581.pa-s{margin:7px 0 0;max-width:46ch;font-size:14px;line-height:1.45; 582 color:var(--claire-encre-2)} 583.pa-cmd{display:flex;align-items:center;gap:8px} 584/* â ï¸ SA ZONE DE TOUCHE FAIT 44 px, PAS SA HAUTEUR DE TEXTE. 585 Mesure du 29/08 : ce lien faisait 87x34 â le SEUL cliquable de la page 586 reellement sous le seuil, et c'est moi qui l'avais pose quelques heures plus 587 tot en rendant le chiffre verifiable. Les neuf autres \xab trop petits \xbb portent 588 deja ce calque : c'est la facon de la maison, et elle n'existait pas ici. 589 Le pseudo-element etend la prise SANS toucher a la mise en page du titre â 590 un padding, lui, ecarterait les lignes. */ 591.mu-h2__voir{position:relative;color:inherit;text-decoration:underline; 592 text-decoration-thickness:1px;text-underline-offset:5px; 593 text-decoration-color:rgba(11,13,16,.28)} 594.mu-h2__voir::after{content:"";position:absolute;left:0;right:0;top:50%; 595 height:44px;transform:translateY(-50%);pointer-events:auto} 596.mu-h2__voir:hover{text-decoration-color:currentColor} 597.pa-bouge{display:block;margin-top:6px;font-weight:600;color:var(--claire-pastel-bleu-encre)} 598.pa-n{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em; 599 color:var(--claire-encre-3);font-variant-numeric:tabular-nums; 600 margin-right:2px} 601.pa-n b{color:var(--claire-encre);font-weight:700} 602/* 44 px de cote : la cible tactile minimale, et elle n est pas negociable. 603 ð´ 03/09 â bouton noir (direction validee \xab les boutons noirs comme ca, 604 parfait \xbb), au lieu du cercle blanc-sur-noir de la version sombre. */ 605.pa-fl{display:inline-flex;align-items:center;justify-content:center; 606 width:44px;height:44px;border-radius:999px;color:#fff;cursor:pointer; 607 background:var(--claire-noir); 608 box-shadow:none;transition:background .16s ease} 609.pa-fl:hover{background:var(--claire-noir-survol)} 610.pa-fl:focus-visible{outline:2px solid var(--claire-noir);outline-offset:2px} 611 612.pa-piste{display:flex;overflow-x:auto;overflow-y:hidden; 613 scroll-snap-type:x mandatory;scroll-behavior:smooth; 614 overscroll-behavior-x:contain;container-type:inline-size; 615 scrollbar-width:none;-ms-overflow-style:none} 616.pa-piste::-webkit-scrollbar{display:none} 617/* ð¨ LES VUES ONT TOUTES LA MEME HAUTEUR, ET C EST OBLIGATOIRE : une piste 618 * dont la hauteur suit la piece ferait SAUTER la page a chaque pas, et une 619 * page qui bouge sous le doigt est le pire defaut d un carrousel. 620 * â ï¸ D ou le centrage vertical : une piece courte (une barre de navigation 621 * fait 194 px de rendu) occupait 70 px en haut d une vue de 382, et les 310 622 * qui restaient se lisaient comme un trou. Centree, elle se lit comme une 623 * piece courte â ce qu elle est. */ 624.pa-d{flex:0 0 100%;min-width:0;scroll-snap-align:center; 625 display:flex;flex-direction:column;align-items:center; 626 justify-content:center;padding-inline:var(--gutter)} 627 628/* ð¨ LES DEUX COLONNES PRENNENT LA MEME HAUTEUR, ET LA MESURE SE CALE EN BAS. 629 * Le rendu bureau est PLUS COURT que le rendu telephone â c est le sujet meme 630 * de la paire â mais laisse tel quel, le vide sous la carte de gauche se 631 * lisait comme un trou. La ligne de mesure, posee au fond des deux colonnes, 632 * ferme la composition ET dit le chiffre qui fait l argument : la meme page
633 * fait 1 660 px au bureau et 2 287 px au telephone. */ 634.pa-paire{display:flex;align-items:stretch;gap:var(--pa-jeu)} 635.pa-col{display:flex;flex-direction:column;gap:6px;min-width:0} 636.pa-e{font-family:var(--font-mono);font-size:9.5px;font-weight:600; 637 letter-spacing:.18em;text-transform:uppercase;color:var(--claire-encre-3)} 638/* â ï¸ 0,34 DONNAIT UN CONTRASTE DE 2,89 â sous le seuil de 4,5. 639 Mesure du 29/08 : du blanc a 34 % sur fond noir, en 10 px. C'etait le seul 640 cas REEL d'un relev\xe9 qui en annoncait 211 : les 210 autres etaient des fonds 641 que la mesure ne savait pas voir (un bouton dont le blanc vient d'ailleurs 642 que son background-color). Verifie a l oeil avant de toucher. 643 0,52 tient le seuil et reste une mention discrete â c'est une dimension 644 technique, elle ne doit pas concurrencer la piece qu'elle legende. */ 645.pa-px{margin-top:auto;padding-top:9px;font-family:var(--font-mono); 646 font-size:10px;letter-spacing:.06em;color:var(--claire-encre-3); 647 font-variant-numeric:tabular-nums;white-space:nowrap; 648 overflow:hidden;text-overflow:ellipsis} 649/* LE TRAIT QU IL A DEMANDE. Il court sur toute la hauteur de la paire : c est 650 lui qui fait lire les deux cartes comme UNE comparaison. */ 651.pa-trait{flex:0 0 1px;align-self:stretch;width:1px; 652 background:linear-gradient(180deg,rgba(11,13,16,.04), 653 rgba(11,13,16,.22) 14%,rgba(11,13,16,.22) 86%, 654 rgba(11,13,16,.04))} 655.pa-v{position:relative;display:block;overflow:hidden;background:#fff; 656 border-radius:9px; 657 box-shadow:0 16px 36px -26px rgba(11,13,16,.30), 658 inset 0 0 0 1px rgba(11,13,16,.08)} 659.pa-v img{display:block;width:100%;height:auto} 660/* LE FILM SE POSE SUR LA PHOTOGRAPHIE, IL NE LA REMPLACE PAS : elle reste 661 dessous, et c est elle qu on voit tant que le film n est pas peint â ou 662 pour toujours, si la piece n a pas de film. 663 â ï¸ cover ET PAS une mise a l echelle : le film est encode a sa taille 664 finale et seulement CADRE ici, par le haut. Aucun transform sur du texte. */ 665/* â AUCUN ACCENT GRAVE DANS CE COMMENTAIRE : il vit dans un litteral de 666 gabarit TSX, et un seul accent grave le referme â erreur 500 sur toute 667 l application. C est arrive deux fois. 668 â ï¸ Le selecteur porte pa-v img.pa-film et pas pa-film tout seul. La regle 669 juste au-dessus vise pa-v img : elle est PLUS SPECIFIQUE qu une classe 670 seule, et son height:auto gagnait sur le height:100% du film. Un element 671 remplace, en position absolue, dont la hauteur est auto, prend sa hauteur 672 INTRINSEQUE et laisse tomber bottom : le film debordait ou laissait du 673 blanc selon la piece, et object-fit n avait rien a caler. */ 674.pa-v img.pa-film{position:absolute;inset:0;width:100%;height:100%; 675 object-fit:cover;object-position:top center; 676 opacity:0;transition:opacity .32s ease} 677.pa-v img.pa-film--pret{opacity:1} 678/* la carte de gauche prend la hauteur QUE LE RENDU BUREAU A VRAIMENT, coupee 679 au plafond. Elle est plus courte que celle de droite, et c est le sujet. */ 680.pa-v--b{width:var(--pa-wb);height:calc(var(--hbc) * var(--pa-wb) / 1400)} 681/* celle de droite est bornee par la vitre : on donne le haut, jamais la page */ 682.pa-v--t{width:var(--pa-wt); 683 height:min(var(--pa-cap),calc(var(--hp) * var(--pa-wt) / 390))} 684 685.pa-mot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; 686 width:calc(var(--pa-wb) + var(--pa-wt) + var(--pa-entre)); 687 margin:13px 0 0;padding-top:11px; 688 border-top:1px solid var(--claire-filet); 689 font-family:var(--font-mono);font-size:10.5px;font-weight:600; 690 letter-spacing:.15em;text-transform:uppercase;color:var(--claire-encre-3)} 691.pa-etoile{color:var(--claire-pastel-bleu-encre);font-weight:700} 692 693/* ââ LES RANGS ââââââââââââââââââââââââââââââââââââââââââââââââââââââââ * 694 * Trois rangs qui glissent en sens contraires. Le sens contraire n est pas un 695 * effet : deux rangs qui vont du meme cote se lisent comme UN bandeau qui 696 * defile, et l oeil le range dans la meme case qu une frise de logos. En sens 697 * contraires, il lit un STOCK qu on lui fait passer devant. 698 * ð´ 28/08 AU SOIR â LE MASQUE PASSE DE 62 A 20 PX. A 390, un fondu de 62 px 699 * sur une vignette de 172 mangeait presque la moitie de la premiere et de la 700 * derniere : ca ne se lisait pas comme un mur qui defile, ca se lisait comme 701 * casse. Vingt pixels suffisent a noyer l arete, et l entame reste lisible. */ 702.mu-rails{padding:10px 0 4px} 703/* ð´ 30/08 â LE FONDU DE BORD PASSE DE 20 A 12 PX. Il fait partie de ce qu il 704 appelle \xab ca coupe a gauche, a droite \xbb : sur une bulle de 228, vingt pixels 705 dissolvaient encore de la matiere lisible aux deux entames. Douze suffisent 706 a noyer l arete du rail sans effacer le debut d une piece. */ 707/* ð´ 03/09 â RENVOI JURY (DA, ronde 15) : "vignettes tranchees net aux 708 * deux bords de chaque rangee, sans fondu ni fleche" -- le fondu de 12 px 709 * existait deja mais se perdait contre des photographies chargees (bord 710 * dissous sur a peine 6 % d'une tuile de 208 px). Il passe a 26 px, presque 711 * le double, jamais l'ancien exces de 62 px qui mangeait de la matiere 712 * lisible (lecon du 28/08). â ï¸ CECI EST DE LA PEINTURE STATIQUE 713 * (mask-image), AUCUN RAPPORT avec le gel d'animation sous mouvement 714 * reduit -- ce chantier-la n'est pas rouvert. */ 715.mu-rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg, 716 transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%); 717 mask-image:linear-gradient(90deg,transparent 0,#000 26px, 718 #000 calc(100% - 26px),transparent 100%)} 719.mu-rail + .mu-rail{margin-top:12px} 720/* ð¨ LE RANG QU ON POUSSE AU DOIGT â 29/08. 721 * \xab essaie de faire un truc ou la personne peut scroller, avec son doigt \xbb. 722 * C est un VRAI conteneur de defilement : le doigt le pousse parce qu il 723 * pousse un defilement natif, et la minuterie de useRailGlissant ecrit 724 * scrollLeft image par image pour qu il continue seul quand personne ne le 725 * tient. Mesure avant : scrollLeft 0 -> 0 apres un balayage de 216 px. 726 * â ï¸ overscroll-behavior-x CONTAIN : sans lui, arriver au bout du rang 727 * enchaine sur la page â sur iOS c est le geste de retour arriere. 728 * â ï¸ La barre est cachee mais le defilement reste : une barre grise en 729 * travers d un mur noir se lit comme un defaut de rendu. 730 * â AUCUN scroll-snap : la minuterie avance de moins d un pixel par image, 731 * un aimant la ramenerait a chaque image et la piste ne partirait jamais. */ 732/* 30/08 - LE CURSEUR DIT QUE CA SE TIRE. \xab on ne peut pas scroller le 733 carrousel \xbb : a la souris, un conteneur overflow-x sans barre visible n a 734 AUCUNE affordance. La main ouverte l annonce, la main fermee confirme que le 735 geste est pris. Et rien ne doit se selectionner sous la main : une image 736 qu on tire lance le glisser-deposer du navigateur et mange le geste. */ 737.mu-rail--doigt{overflow-x:auto;overflow-y:hidden; 738 overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none; 739 cursor:grab;-webkit-user-select:none;user-select:none} 740.mu-rail--doigt.mu-rail--tire{cursor:grabbing} 741.mu-rail--doigt img{-webkit-user-drag:none;user-select:none} 742.mu-rail--doigt::-webkit-scrollbar{width:0;height:0;display:none} 743.mu-rail--doigt:focus-visible{outline:2px solid var(--claire-noir); 744 outline-offset:2px} 745.mu-piste{display:flex;align-items:flex-start;gap:10px;width:max-content} 746/* LE RIDEAU GARDE L ANIMATION CSS, ET C EST VOULU : il vit SOUS un voile 747 couvert de texte, donc il ne doit surtout pas capter le doigt du visiteur 748 qui veut lire. Lui seul porte encore la classe mu-piste--auto. 749 ð¨ ELLE NE PART QU A L ENTREE DANS LA VUE : une piste qui glisse hors de 750 l ecran fait travailler le compositeur pour personne. */ 751.mu-piste--auto{animation:mu-glisse 30s linear infinite; 752 will-change:transform;animation-play-state:paused} 753.mu[data-vu="1"] .mu-piste--auto{animation-play-state:running} 754.mu-piste--retour{animation-direction:reverse} 755/* 30/08 - LE RIDEAU SUIT LE MUR. Ses tuiles sont passees de 132 a 228 px, donc 756 sa piste s est allongee d autant : a 150 s elle rendait 55 px/s contre les 757 115 des rangs du haut, et deux vitesses qui ne se ressemblent pas se lisent 758 comme deux sections differentes. Sa piste fait 8 330 px a 390 et 10 710 a 759 1440 : a 90 s elle rend 93 px/s et 119 px/s - un peu moins vite que le mur, 760 parce qu elle vit sous un degrade et qu on ne la lit pas. */ 761.mu-piste--lent{animation-duration:90s}
762.mu-piste__bis{display:flex;align-items:flex-start;gap:10px;margin-left:10px} 763@keyframes mu-glisse{ 764 from{transform:translate3d(0,0,0)} 765 to{transform:translate3d(-50%,0,0)} 766} 767 768/* ââ UNE BULLE ââââââââââââââââââââââââââââââââââââââââââââââââââââââââ * 769 * ð¨ LE CADRE EST STRICTEMENT LE MEME POUR LES CINQUANTE-HUIT : meme blanc, 770 * meme rayon, meme hauteur. C est LUI qui fait la collection. 771 * ð´ 28/08 AU SOIR â \xab il faudrait qu a un moment les bulles soient un peu 772 * plus grandes, parce que la on n arrive vraiment pas a voir. Mais pas 773 * beaucoup plus grand, un tout petit peu plus. \xbb 150x104 devient 172x122, 774 * 230x158 devient 262x186 : quinze pour cent, pas trente. 775 * â ï¸ LE RAPPORT DU CADRE ET CELUI DE LA VIGNETTE SONT LE MEME (1,44) : les 776 * fichiers sont recadres a l avance par scripts/vignettes-mur.mjs, donc 777 * aucun choix de cadrage n est laisse au navigateur et rien n est rogne. */ 778/* ââ 28/08, DEUXIEME AGRANDISSEMENT â \xab qu on les voie un peu mieux \xbb ââââââ 779 Premier passage : 150x104 -> 172x122 (+15 %), sur sa phrase \xab un peu plus 780 grandes, mais pas beaucoup plus \xbb. Il redemande : \xab tu te demerdes pour que 781 dans les bulles on les voie un peu mieux \xbb. 782 172x122 -> 198x140, soit +15 % encore. Deux raisons de ne pas aller plus loin 783 d un coup : 784 \xb7 la vignette est RENDUE a 540 px de large (scripts/vignettes-mur.mjs) ; 785 affichee a 198 elle garde 2,7 fois la densite servie, donc elle reste 786 nette meme sur un ecran a 3x. Au-dela de ~270 on tomberait sous 2x et 787 l image commencerait a mollir â il faudrait alors regenerer plus grand, 788 et le poids de la section suivrait. 789 \xb7 a 390 px de large, une bulle de 198 en laisse voir deux entieres et le 790 bord de la troisieme : le rail continue de dire \xab il y en a beaucoup \xbb. 791 Plus large, on n en verrait plus que deux, et la quantite â qui est 792 l argument de cette section â cesserait de se voir. 793 Le rapport 1,44 est conserve au pixel : 198 / 140 = 1,414 comme 172 / 122. */ 794/* ââ 30/08, TROISIEME AGRANDISSEMENT â LA CONTREPARTIE DE \xab NE PLUS COUPER \xbb 795 SA PHRASE : \xab fais que les bulles soient un peu plus grandes, pour qu on 796 puisse mieux voir l interieur, vu que du coup elles vont etre un peu plus 797 dezoomees. \xbb Il anticipe juste, et c est chiffrable : un film au rapport 798 2,13 recadre remplissait la hauteur a l echelle 0,277 ; contenu, il tient a 799 0,188 â soit 32 % plus petit. On rend une partie de ce terrain. 800 198x140 -> 228x158, +15 % : le meme increment qu il a accepte les deux fois 801 precedentes. 802 â ï¸ LA LIMITE EST LA DENSITE SERVIE, ET ELLE N EST PAS FRANCHIE. La vignette 803 est rendue a 540 px de large ; affichee dans 218 (228 moins le liset), 804 elle garde 2,48 fois la densite. Le plancher est 2x â c est a dire 270 px 805 d affichage â et on reste dessous. AUCUN fichier a regenerer, donc aucun 806 octet de plus : la section pese exactement le meme poids qu avant.
807 â ï¸ LE JEU PASSE DE 12 A 10 PX au telephone : c est ce qui garde deux bulles 808 en vue a 390. La quantite est l argument de la section, elle ne se troque 809 pas contre la lisibilite â on paie l agrandissement sur le jeu, pas sur 810 le compte. */ 811/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ * 812 * ð´ 31/08 â LA TUILE DU TELEPHONE PASSE EN 272 x 300, ET ELLE CHANGE DE 813 * SUJET. C EST LA REPARATION LA PLUS CHERE DE LA JOURNEE. 814 * 815 * MESURE SUR LA PRODUCTION, 390 px, iPhone, UA mobile : 816 * tuile servie 218 x 148 \xb7 image = le rendu d une page de 1 400 px 817 * facteur 0,1557 â un corps de 16 px mesure **2,49 px** a l ecran, 818 * un titre de 32 px, **4,98 px**. 819 * Le visiteur d Instagram â 110 par jour, tous au telephone â ne voyait pas 820 * des composants, il voyait des taches. L argument central du site etait 821 * illisible chez la totalite du trafic paye. 822 * 823 * â CE N ETAIT PAS UN PROBLEME DE DEFINITION. Servir le meme cadrage en 4x 824 * n aurait rien change : le texte aurait toujours fait 2,49 px A L ECRAN. 825 * Une vignette \xab page entiere de bureau \xbb n est pas le bon objet sur un 826 * telephone, quelle que soit sa qualite. 827 * 828 * â LE GESTE, EN DEUX PIECES. 829 * â LA TUILE MONTRE LE RENDU **TELEPHONE** de la piece ("/mur/vu-tel/"), pas 830 * son rendu bureau. La piece est composee a 390 px et montree dans 272 : 831 * echelle **0,697**, donc un corps de 16 px mesure **11,2 px** et un titre 832 * de 32 px, **22,3 px**. Quatre virgule cinq fois plus grand. 833 * â¡ LE CADRE DEVIENT UN PORTRAIT (272 x 300 au lieu de 228 x 158). Un cadre 834 * paysage sur un rendu telephone ne montre que 270 px de la piece â releve 835 * sur ACHAT-51 : la photo du pot, et rien d autre. En portrait on en montre 836 * **430 px**, c est-a-dire le titre, la copie ET la premiere mecanique. 837 * C est ce que le controle appelait \xab un cadrage sur une partie parlante \xbb. 838 * 839 * â AUCUN "transform:scale", AUCUN agrandissement apres coup : les vignettes 840 * sont rephotographiees a 390 px CSS en double densite (600 px de fichier 841 * pour 272 d affichage sur un ecran 2x) par "scripts/vignettes-mur-tel.mjs". 842 * â ï¸ LE BUREAU NE BOUGE PAS D UN PIXEL : tout ce bloc est repris a l identique 843 * dans la requete "min-width:860px" plus bas. 844 * ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 845/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ * 846 * ð´ð´ 01/09 â LE BLOC CI-DESSUS A ETE APPLIQUE TROP LOIN, ET ANGELO A DU LE 847 * REDIRE. LA TUILE DU TELEPHONE REDESCEND A 168 x 185. 848 * 849 * SA PHRASE, ET ELLE NOMME LA RECIDIVE : 850 * \xab La putain de section composant sur telephone, elle est beaucoup trop 851 * zoomee. On arrive a voir qu'une seule composante par une seule 852 * composante, et je t'ai dit qu'il fallait que ca soit beaucoup plus 853 * DEZOOME, et toi tu me ZOOMES. \xbb 854 * Et, juste avant : \xab le truc extremement inavouable, c'est que chaque fois 855 * je te demande de changer et a chaque fois, a chaque audit, tu me le 856 * remets. C'est une maladie. \xbb 857 * 858 * â LA MALADIE EST ICI, DANS CE FICHIER, ET ELLE EST DOCUMENTAIRE. 859 * Le bloc du 31/08 juste au-dessus est un raisonnement JUSTE qui a ete 860 * pousse au-dela de son terme. Il corrigeait un vrai defaut (un rendu 861 * BUREAU montre a 0,1557 : un corps de 16 px faisait 2,49 px, des taches). 862 * Le remede etait â : montrer le rendu TELEPHONE. Celui-la est garde. 863 * L'erreur etait â¡ : avoir AUSSI grossi le cadre. Les deux gestes ont ete 864 * ecrits comme un seul, donc chaque relecture les remettait ensemble. 865 * â ON SEPARE LES DEUX ICI, PAR ECRIT, POUR QUE PLUS PERSONNE NE LES 866 * RECOLLE. Le rendu telephone est acquis. La taille du cadre est A LUI. 867 * 868 * LA MESURE QUI TRANCHE, A 390 px D'ECRAN : 869 * avant 272 + 10 + 272 = 554 â UNE tuile entiere, et 108 px de la 2e 870 * apres 168 + 10 + 168 = 346 â DEUX tuiles entieres, et 34 px de la 3e 871 * Le rang recommence a dire \xab il y en a beaucoup \xbb â ce qui est TOUT 872 * l'argument de cette section. Une tuile seule ne dit rien d'une quantite. 873 * 874 * â ï¸ ET LA LISIBILITE N'EST PAS RENDUE, PARCE QUE â EST GARDE. La tuile 875 * montre toujours le rendu 390 px : a 168 l'echelle vaut 0,431, donc un 876 * corps de 16 px mesure 6,9 px et un titre de 32 px, 13,8 px. C'est 877 * 2,8 fois le desastre du 31/08 (2,49 px), pas un retour a lui. 878 * Une VIGNETTE de rang n'est pas un ecran de lecture : elle donne une 879 * silhouette et une quantite. Ce qui se lit se lit dans la vitrine, a 880 * l'echelle 1. 881 * â ï¸ AUCUN FICHIER A REGENERER, AUCUN OCTET DE PLUS : la vignette est tiree 882 * a 600 px ; affichee dans 158 (168 moins le liset) elle garde 3,8 fois la 883 * densite, tres au-dessus du plancher de 2x. 884 * â ï¸ LE RAPPORT EST CONSERVE AU PIXEL â 168/185 = 0,908 comme 272/300 â 885 * donc le cadre montre exactement la MEME REGION de la piece qu'avant
886 * (390 x 430 de composition) : rien n'est recadre, tout est reduit. 887 * â ï¸ LE BUREAU NE BOUGE TOUJOURS PAS : 288 x 200, requete min-width:860px. 888 * ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 889.mu-t{--mu-p:5px;flex:0 0 auto;display:block;position:relative; 890 /* ð´ 01/09 â \xab il faut que ce soit un peu plus dezoome \xbb (Angelo, sur le 891 carrousel qui monte juste sous le heros). Les tuiles perdent 18 % : on en 892 voit plus d un coup, et le rail se lit comme une bibliotheque plutot que 893 comme trois cartes. 168x185 -> 138x152 ; 288x200 -> 236x164 au-dessus de 894 860 px. Un seul geste, reversible en deux nombres. */ 895 /* ð´ 02/09 17 h â UNE SEULE BULLE, LA MEME SUR TELEPHONE ET PC : celle du bureau. 896 Les bulles telephone (portrait, tirage a part) etaient \xab horribles \xbb : supprimees. 897 Meme image, meme rapport 236/164, un peu plus petite sous 860 px. */ 898 width:208px;height:145px;padding:var(--mu-p); 899 background:#fff;border-radius:13px;overflow:hidden; 900 box-shadow:0 12px 26px -20px rgba(11,13,16,.35), 901 inset 0 0 0 1px rgba(11,13,16,.08)} 902/* â ï¸ "<picture>" est un element EN LIGNE : sans cette ligne, le "width:100%" 903 de l image se resout contre une boite qui se retracte sur son contenu, et 904 la vignette sort a sa taille intrinseque. La boite est donnee en clair. */ 905.mu-t picture{display:block;width:100%;height:100%} 906.mu-t__i{display:block;width:100%;height:100%; 907 object-fit:cover;object-position:top center;border-radius:2px} 908/* ðï¸ le film d'une bulle : la meme boite que la photographie, posee dessus */ 909.mu-t__v{position:absolute;inset:var(--mu-p);width:calc(100% - 2*var(--mu-p));height:calc(100% - 2*var(--mu-p));background:#fff} 910/* ðï¸ 02/09 â la bulle d'une page entiere DEFILE de haut en bas (voir Bulle). 911 Un palier de 10 % a chaque bout : l'oeil lit le depart et l'arrivee. */ 912/* ð´ 02/09 17 h â SA REGLE : \xab une page entiere se montre a ~50 %, puis on envoie 913 l autre 50 %. Du haut vers le bas, pas 25/25/25, et vite : c etait tellement long 914 que la bulle avait le temps de passer. \xbb Le tirage pan fait exactement DEUX hauteurs 915 de bulle (bulles-cadre.mjs) : object-position 0 % = la moitie haute, 100 % = la 916 moitie basse. On tient le haut, on envoie le bas en 0,7 s, on tient le bas, et on 917 REVIENT EN HAUT D UN COUP (pas de glissement vers le haut a l ecran). */ 918@keyframes mu-pan{0%,42%{object-position:50% 0%}54%,96%{object-position:50% 100%}100%{object-position:50% 0%}} 919/* la classe n arrive qu a l entree a l ecran (voir Bulle) : le cycle part du haut */ 920.mu-t__i--pan{animation:mu-pan 6s cubic-bezier(.4,0,.2,1) infinite} 921@media (prefers-reduced-motion:reduce){.mu-t__i--pan{animation:none}} 922/* ââ LE FILM DE LA BULLE â 29/08 âââââââââââââââââââââââââââââââââââââââ * 923 * Il SE POSE sur la photographie, il ne la remplace pas : elle reste dessous 924 * et reste le repli (film absent, film qui ne charge pas, animations 925 * coupees). Rien ne peut devenir un cadre vide. 926 * ð´ LA TAILLE EST ECRITE, ET C EST UNE CORRECTION MESUREE. Avec 927 * inset + width:auto, un element REMPLACE en position absolue prend sa 928 * taille INTRINSEQUE et laisse tomber les cotes opposes : releve a 390, les 929 * trois films montes faisaient 198x140, 198x156 et 198x121 dans une bulle
930 * de 198x140 â chacun le rapport de son propre fichier. Deux debordaient, 931 * un rentrait par hasard. On donne donc la boite en clair. 932 * â ï¸ Le decalage vaut le PADDING et non zero : le bloc contenant d un element 933 * absolu est la boite de PADDING, donc 0 recouvrirait le liset blanc qui 934 * fait la collection. 935 * â ï¸ object-fit:cover et cadrage par le haut â le meme point que la vignette 936 * fixe. AUCUN transform:scale : un texte mis a l echelle est rasterise, et 937 * le rasterise se voit. 938 * â ï¸ Il apparait en fondu, une fois PEINT : un WebP anime ne s affiche pas 939 * tant qu il n est pas decode, et sans le fondu la photographie sauterait 940 * d un coup au film. */ 941.mu-t__f{position:absolute;top:var(--mu-p);left:var(--mu-p); 942 width:calc(100% - 2 * var(--mu-p));height:calc(100% - 2 * var(--mu-p)); 943 object-fit:cover;object-position:top center;border-radius:2px; 944 opacity:0;transition:opacity .3s ease} 945.mu-t__f--pret{opacity:1} 946/* ð´ 30/08 â LE FILM PLUS LARGE QUE SON CADRE NE SE RECADRE PLUS. 947 \xab ca coupe a gauche, a droite. On n a pas la moindre idee de ce que c est. \xbb 948 Mesure : les 27 films portent VINGT rapports differents (1,27 a 2,13) pour 949 un cadre a 1,473. Au-dela de 1,473, cover remplit la hauteur et prend les 950 deux cotes â jusqu a 32 % de la largeur, 16 % par bord. Contenu, le film 951 entre en entier ; ce qui reste sous lui est le blanc de la carte, et il ne 952 se voit pas parce que la carte EST blanche. Le fond est pose sur l image 953 elle-meme : sans lui, la photographie fixe reapparaitrait par en dessous a 954 une AUTRE echelle, et la couture se verrait. */ 955.mu-t__f--large{object-fit:contain;object-position:top center;background:#fff}
956/* == L ETAT DE FIN â MEME BOITE QUE LA PELLICULE ======================== * 957 * Ce que voit celui qui a coupe les animations. Il occupe exactement le meme 958 * cadre que le film, avec la meme regle de recadrage : c est la MEME image a 959 * l arret, pas une seconde mise en page. 960 * Il apparait en fondu une fois peint â et sous mouvement reduit ce fondu 961 * dure 0,01 ms (regle globale de globals.css), donc il ne bouge pas : il est 962 * la. On garde la transition pour l unique cas ou la preference bascule en 963 * cours de visite. */ 964.mu-t__fin{position:absolute;top:var(--mu-p);left:var(--mu-p); 965 width:calc(100% - 2 * var(--mu-p));height:calc(100% - 2 * var(--mu-p)); 966 object-fit:cover;object-position:top center;border-radius:2px; 967 opacity:0;transition:opacity .3s ease} 968.mu-t__fin--pret{opacity:1} 969.mu-t__fin--large{object-fit:contain;object-position:top center;background:#fff} 970/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ * 971 * ð´ 31/08 â LE TELEPHONE PASSE DE TROIS RANGS A DEUX, ET C EST LE PRIX 972 * QU ON PAIE POUR LA LISIBILITE. 973 * 974 * La tuile passe de 158 a 300 px de haut. A trois rangs, le mur seul 975 * mesurerait 924 px au lieu de 500, et le rideau autant : +850 px sur une 976 * page qui fait deja quatorze ecrans. On ne peut pas agrandir les pieces ET 977 * garder le meme compte de rangs sans allonger la page d un ecran entier. 978 * â DEUX RANGS DE TUILES LISIBLES BATTENT TROIS RANGS DE TACHES. Le compte 979 * n est pas perdu pour autant : il est ECRIT (\xab All 242, already built \xbb), 980 * et chaque rang defile sans fin â personne n a jamais vu les 242 d un 981 * coup, meme a trois rangs. 982 * â ï¸ Le rang cache est retire de la MISE EN PAGE, pas du document : au-dessus 983 * de 860 px il revient sans qu une seule ligne de JSX bouge. 984 * â ï¸ Mesure apres : mur 612 px au lieu de 500. Le mur ne grandit que de 112. 985 * ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 986/* le troisieme rang est RENDU au telephone le 01/09 : il avait ete cache le 987 31/08 uniquement parce que la tuile faisait 300 px de haut. A 185 les trois 988 rangs tiennent dans 579 px â moins que les 612 que deux rangs coutaient. */ 989/* ð´ 31/08 â LA PELLICULE DU TELEPHONE EST UN AUTRE TIRAGE, PAS UN AUTRE 990 RECADRAGE. Vu sur une bande a l echelle 1, sur la production : une meme 991 tuile montrait DEUX RENDUS DE LA MEME PIECE, superposes â le titre en grand 992 (rendu telephone, la photographie du dessous) et le meme titre en petit, 993 decale (rendu bureau, la pellicule posee dessus). 994 La cause : le cadre est passe en portrait et sa photographie est devenue le 995 rendu 390 px, pendant que la pellicule restait le tirage BUREAU. Deux mises 996 en page de la meme piece dans la meme boite ne peuvent pas coller, quel que 997 soit l "object-fit" qu on leur donne â un recadrage n aurait fait que 998 choisir quelle moitie du mensonge montrer. 999 â "scripts/films-bulles-tel.mjs" tire les pellicules du film TELEPHONE 1000 ("<ID>-tel.webp", tourne a 390 px) au rapport du cadre du telephone. Film 1001 et photographie montrent alors la meme chose, au meme endroit, a la meme 1002 echelle : le passage de l une a l autre ne se voit plus. 1003 â ï¸ AUCUNE REGLE DE RECADRAGE N EST AJOUTEE ICI, ET C EST LE POINT : le 1004 tirage sort deja au bon rapport, donc "cover" ne coupe rien. */ 1005@media (min-width:860px){ 1006 .mu-piste,.mu-piste__bis{gap:18px} 1007 .mu-piste__bis{margin-left:18px} 1008 .mu-rail + .mu-rail{margin-top:16px} 1009 /* ð´ 30/08 â LE FONDU DE BORD PASSE DE 48 A 22 PX. \xab ca coupe a gauche, a 1010 droite \xbb : un fondu de 48 px dissolvait un cinquieme de la vignette 1011 d entame en pleine matiere. Vingt-deux px noient l arete sans manger la 1012 piece â le meme arbitrage qu au telephone le 28/08 (62 -> 20). */ 1013 /* ð´ 03/09 â meme renvoi, gabarit bureau : 22 -> 42 px sur une tuile de
1014 * 236 px (double, comme au telephone), toujours loin des 48 px qui 1015 * mangeaient la piece le 30/08. */ 1016 .mu-rail{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42px, 1017 #000 calc(100% - 42px),transparent 100%); 1018 mask-image:linear-gradient(90deg,transparent 0,#000 42px, 1019 #000 calc(100% - 42px),transparent 100%)} 1020 .mu-t{--mu-p:7px;width:236px;height:164px;border-radius:13px} 1021} 1022 1023/* ââ LE RIDEAU â LA QUATRIEME LIGNE ââââââââââââââââââââââââââââââââââââ * 1024 * \xab une quatrieme qu on ne voit quasiment pas : noircie sous un degrade, avec 1025 * un texte par-dessus qui dit ce qui reste et appelle l abonnement. \xbb 1026 * â Ce n est PAS une protection : une image noircie se detoure en trois 1027 * secondes. C est un ARGUMENT â il reste quelque chose a voir, et on le 1028 * voit qu il reste quelque chose. */ 1029/* ð¨ 29/08 â QUI DONNE SA HAUTEUR AU RIDEAU A CHANGE, ET C EST TOUT LE FIX. 1030 * Avant : la bande donnait la hauteur (204 px releves a 390) et le texte etait 1031 * pose PAR-DESSUS en absolu â donc un texte de 210 px sur un rideau de 204, 1032 * le titre colle a l arete de la premiere rangee de vignettes et le bouton qui 1033 * depasse par le bas. \xab Il faudrait que ca soit un peu plus en dessous. \xbb 1034 * Maintenant : le TEXTE est dans le flux et donne la hauteur, la bande passe 1035 * derriere en absolu et s etire sur toute cette hauteur. Le texte ne peut plus 1036 * deborder de ce qu il recouvre, par construction. */ 1037/* le rideau reprend EXACTEMENT le pas des rangs du haut : .mu-rails pose 1038 4 px sous son dernier rail, on ajoute les 8 qui manquent pour retrouver les 1039 12 px qui separent deux rangs du mur (16 au bureau). Mesure : 12 / 16. */ 1040/* ââ ð´ 03/09, RONDE 23 â LE RIDEAU PASSE AU CLAIR POUR DE BON âââââââââââ 1041 * SA PAROLE : \xab t as remarque quand meme que tu as mis tout le site en blanc 1042 * mais qu il reste des trucs ? [...] dans ce cas-la passe vraiment TOUT en 1043 * blanc, parce que la il y a trop de trucs. \xbb 1044 * MESURE (sonde des bords, '_nuit-0209/r23/_sonde-fonds.mjs', echelle 1, 1045 * animations figees) : run sombre y 2410 -> 2897 a 1440 (L 0..192) et 1046 * y 2598 -> 3134 a 390 (L 0..160), rattache a 'section#components.mu'. 1047 * C etait CETTE bande, et elle etait la derniere de la section. 1048 * 1049 * ââ CE QUE LA RONDE PRECEDENTE AVAIT ECRIT ICI, ET POURQUOI C EST TOMBE ââ 1050 * \xab le rideau reste noir, et c est voulu : une bande de contrepoint. \xbb Le 1051 * motif reel n etait pas le gout, c etait le COUT : l obscurite du rideau 1052 * n est pas un calque CSS, elle est CUITE DANS LES FICHIERS depuis le 28/08. 1053 * Poser 'background:#fff' sous des vignettes deja ramenees a 55 % vers 1054 * #08090c aurait rendu une bande GRISE SALE. La ronde 23 a donc fait le 1055 * chantier qui manquait plutot que de contourner : les 792 vignettes de 1056 * 'public/mur/reste{,-tel}/' sont RECUITES vers '--claire-sol'. 1057 * 1058 * ââ CE QUI NE BOUGE PAS, ET C EST L ESSENTIEL âââââââââââââââââââââââââââ 1059 * â LE VERROU ANTI-CLONAGE EST INTACT : meme flou 1,8 (le seul levier 1060 * irreversible) et meme k = 0,55. Seule la COULEUR vers laquelle on ramene 1061 * change. \xab Meme si la personne enleve le filtre par-dessus, ses composants 1062 * ont deja le filtre \xbb â c est toujours vrai, dans l autre sens. 1063 * â LA COMPENSATION DU 28/08 RESTE EXACTE : elle ne depend que de k. Les six 1064 * paliers du voile gardent leurs alphas AU CENTIEME, seule leur couleur est 1065 * retournee (voir '.ri-voile'). Aucune ligne de layout (marge, defilement, 1066 * masque, hauteurs) ne bouge dans cette ronde. 1067 * â AUCUN ACCENT GRAVE DANS CE LITTERAL : voir le bandeau en tete de 1068 * CSS_MUR. */ 1069.ri{position:relative;margin-top:8px;overflow:hidden;padding-bottom:26px; 1070 background:var(--claire-sol)} 1071@media (min-width:860px){.ri{margin-top:12px;padding-bottom:40px}} 1072/* == 30/08 - LE RIDEAU CESSE D ETRE UN TROU NOIR ET REDEVIENT LE MUR ====== 1073 SA PHRASE, photo de son ecran a l appui : \xab on ne voit pas assez, dans le 1074 fond, les autres sections - c est trop sombre. Et en plus elles sont plus 1075 petites que celles d au-dessus. Il y a une sorte d espace noir entre les 1076 deux, ca fait fake. Il faut que ca suive, comme s il y avait une ligne en 1077 plus - ou deux lignes de plus, une qui va vers la droite, une qui va vers 1078 la gauche, avec de vrais nouveaux composants, pas les memes, et pas juste 1079 des sombres. Et avec un degrade, et le texte ecrit la ou c est le plus 1080 sombre. \xbb 1081 1082 TROIS MESURES, TROIS GESTES. 1083 (1) LA TAILLE. Relevee a 390 : tuile du mur 228x158, tuile du rideau 1084 132x92 - 34 % de la surface. Une vignette rapetissee derriere du texte 1085 se lit comme une decoration ; a taille egale elle se lit comme la suite 1086 de la bibliotheque. La regle qui les rapetissait est supprimee : le 1087 rideau herite maintenant de .mu-t, donc 228x158 et 288x200 au pixel. 1088 (2) LE TROU. Le dernier rang du mur finissait a y=3124 et le rideau 1089 commencait a y=3256 : 132 px de noir. La bande reprend au meme pas que
1090 les rangs du haut (12 px, 16 au bureau) et le bloc qui occupait ce vide 1091 est parti. Le mur ne s arrete plus, il passe DERRIERE le texte. 1092 (3) L OBSCURITE. La bande etait a 0,22 sous un voile de 0,86 a 0,96 : une 1093 vignette blanche ressortait a 8/255, c est-a-dire invisible - \xab trop 1094 sombre \xbb. Elle passe a 0,58, et le voile devient un VRAI degrade qui 1095 part clair en haut (0,30) pour finir a son point le plus sombre sous le 1096 texte (0,94). Une vignette blanche rend alors 103/255 en haut de bande 1097 et 9/255 sous le texte : reconnaissable la ou on la regarde, effacee la 1098 ou on lit. 1099 ATTENTION L OPACITE ET PAS UN FILTRE : trois pistes en transform tournent 1100 ici en continu, un filter les repeindrait a chaque image. */ 1101/* ATTENTION AUCUN gap ICI : .mu-rail + .mu-rail pose deja 12 px (16 au 1102 bureau), et les deux s ajoutaient - 24 px entre deux rangs du rideau contre 1103 12 entre deux rangs du mur, donc une bande visiblement plus lache que ce 1104 qu elle prolonge. */ 1105/* == 28/08 - L OBSCURITE EST CUITE DANS LES FICHIERS, LE CSS NE FAIT PLUS QUE 1106 LA MISE EN SCENE. ========================================================= 1107 SA PHRASE : \xab quelqu un un peu habitue a coder pourrait litteralement les 1108 avoir, parce que c est juste une sorte de filtre qu on a mis par-dessus. 1109 Fais bien gaffe a ce que, meme si la personne arrive a enlever le filtre 1110 qu il y a par-dessus, ses composants aient deja en gros le filtre noir. \xbb 1111 1112 CE QUI ETAIT OUVERT : cette opacite et le voile sont DEUX CALQUES POSES 1113 DESSUS. Retires dans l inspecteur, les pieces payantes rendaient leur 1114 titre, leur prix et leur copie EN CLAIR - c est mesure, capture a l appui. 1115 Et l URL '/mur/reste/<ID>.webp' donnait l image propre sans meme ouvrir F12. 1116 1117 LE GESTE : 'scripts/vignettes-mur.mjs' cuit maintenant dans chaque fichier 1118 du rideau la definition d affichage (288x200), un flou de 1,8 et la matiere 1119 ramenee a 55 % vers le fond de section. Le flou est le seul levier 1120 irreversible des trois : il detruit de l information. 1121 1122 POURQUOI 1 ET PLUS 0,68 - ET LA PAGE NE BOUGE PAS. On vient d assombrir la 1123 MATIERE de 0,68 a 0,55 ; laisser 0,68 par-dessus ferait le trou noir qu il a 1124 fait corriger le 30/08 (\xab on ne voit pas assez, dans le fond, les autres 1125 sections - c est trop sombre \xbb). La bande passe donc a 1 et le voile est 1126 rouvert du meme montant : chaque palier vaut v2 = 1 - (0,68 / 0,55)(1 - v). 1127 Le poids de la vignette dans le pixel final est alors IDENTIQUE, et le 1128 residu vaut (1 - v)(0,68/0,55 - 1) x (fond - voile), soit moins de 1/255 par 1129 canal - le fond (8,9,12) et le voile (6,6,7) sont presque la meme couleur. 1130 ATTENTION 0,55 EST UN PLANCHER, PAS UN GOUT : le haut de la bande ne 1131 recevait que 0,68 x 0,80 = 0,544 de la vignette. Cuire plus sombre que ca 1132 demanderait un voile d alpha NEGATIF pour retrouver la page d aujourd hui. 1133 ATTENTION TOUJOURS L OPACITE ET PAS UN FILTRE (voir plus haut) - et c est 1134 l autre raison de cuire dans le fichier : c est gratuit a l execution. */ 1135/* ð´ 09/09 â LE CALQUE QUI COUPAIT LE DOIGT (pointer-events:none) TOMBE. Il protegeait le doigt de qui 1136 lisait le texte POSE sur la bande ; ce texte n existe plus, et la bande est 1137 devenue deux vrais rangs qu on pousse comme ceux du haut. Le laisser, c 1138 etait garder la moitie basse morte sous la main. ATTENTION le voile, lui, 1139 garde le sien : il ne doit rien intercepter. */ 1140.ri-bande{position:relative;display:flex;flex-direction:column;opacity:1} 1141/* 30/08 - LES TUILES DU RIDEAU FONT EXACTEMENT LA TAILLE DE CELLES DU MUR. 1142 \xab en plus elles sont plus petites que celles d au-dessus \xbb : elles etaient a 1143 132x92 contre 228x158, soit 34 % de la surface. On ne redefinit plus ni la 1144 largeur ni la hauteur - elles heritent de .mu-t, et les deux mesures se 1145 valent au pixel. Seul le liset blanc tombe : sous un degrade, un cadre blanc 1146 de 5 px autour de chaque vignette dessine une grille claire qui se lit avant 1147 les pieces. */ 1148/* ð´ 03/09, RONDE 23 â LE LISET PASSE EN TRAIT SOMBRE, ET IL PORTE UNE 1149 CHARGE. Le risque du recuit clair est l exact miroir de celui de 2026-08-31 1150 (\xab LOGOS-438 en 144 gris uniforme = chargement rate \xbb) : une piece pale 1151 ramenee vers le blanc DISPARAIT dans le sol. Un liset blanc a 8 % sur un 1152 sol clair est invisible ; le meme trait en encre a 8 % donne un bord a 1153 chaque tuile, donc la bande garde sa grille meme la ou la matiere est 1154 claire. Aucune autre propriete ne change. */ 1155.ri .mu-t{--mu-p:0px;box-shadow:inset 0 0 0 1px rgba(11,13,16,.10)} 1156/* ATTENTION LE VOILE EST DERRIERE LE MOT, PAS AUTOUR. Il couvre toute la 1157 bande et fabrique le point le plus sombre en bas, la ou le texte tombe. 1158 Le texte, lui, reste DANS LE FLUX : c est la lecon du 29/08 - un texte pose 1159 en absolu sur une bande plus courte que lui deborde de ce qu il recouvre. */ 1160/* LES SIX PALIERS SONT CALCULES, PAS CHOISIS - 28/08. Ils valaient .20 .34 1161 .68 .90 .94 .94 quand la bande etait a 0,68 et la matiere en clair dans le 1162 fichier. La matiere est maintenant cuite a 0,55 et la bande a 1 : chaque 1163 palier devient v2 = 1 - (0,68 / 0,55)(1 - v), ce qui rend au pixel pres le 1164 meme poids de vignette qu avant. Les valeurs, dans l ordre : 1165 .20 -> .011 .34 -> .184 .68 -> .604 .90 -> .876 .94 -> .926 1166 Le premier tombe presque a zero, et c est normal : c est la ou la vignette 1167 comptait le plus (0,544), donc la ou il n y a plus rien a retirer. */ 1168/* ð´ 03/09, RONDE 23 â LE VOILE EST RETOURNE, PAS RECALCULE. Les six alphas 1169 sont ceux du 28/08 AU CENTIEME PRES : ils encodent le poids de la vignette 1170 dans le pixel final (0,55 x (1 - v) a chaque palier), et ce poids ne depend 1171 pas de la couleur. Seule celle-ci change â rgba(6,6,7,x) devient 1172 rgba(249,250,252,x), deux ou trois niveaux PLUS CLAIR que le sol 1173 (245,246,249), exactement comme (6,6,7) etait deux ou trois niveaux plus 1174 SOMBRE que l ancien sol (8,9,12). Le residu tient donc le meme argument : 1175 le sol et le voile sont presque la meme couleur, moins de 1/255 par canal. 1176 La mecanique est identique â le point extreme du degrade tombe sous le 1177 texte, sauf qu il est maintenant le plus CLAIR. */ 1178.ri-voile{position:absolute;
1178left:0;right:0;top:0;bottom:0;pointer-events:none; 1179 background:linear-gradient(180deg, 1180 rgba(249,250,252,.011) 0%,rgba(249,250,252,.184) 15%, 1181 rgba(249,250,252,.604) 32%,rgba(249,250,252,.876) 46%, 1182 rgba(249,250,252,.926) 60%,rgba(249,250,252,.926) 100%)} 1183/* LE MOT REMONTE SUR LA BANDE : la marge negative le fait chevaucher les 1184 rangs au lieu de les suivre, donc il n existe plus une seule ligne de noir 1185 entre le mur et lui. La valeur vaut a peu pres deux rangs et demi - ce qui 1186 reste au-dessus est la matiere qu on voit passer. */ 1187/* â ï¸ 31/08 â LA VALEUR SUIT LA TUILE, ET ELLE NE SE RECOPIE PAS BETEMENT. 1188 Elle valait deux rangs sur trois, soit 71 % de la hauteur de la bande 1189 (â354 pour 498). Au telephone la bande a maintenant DEUX rangs de 300, soit 1190 612 : garder \xab 2 rangs \xbb aurait donne â638, c est-a-dire le texte AU-DESSUS 1191 de la bande, dans le noir. On garde la fraction, pas la formule : 435. */ 1192/* ð´ 03/09, NUIT â LA MARGE NEGATIVE TOMBE. Elle remontait le mot SUR la 1193 bande : c'est elle qui posait \xab This is your library so far. \xbb et la jauge 1194 \xab 65 / 168 \xbb par-dessus des vignettes en mouvement (releve : 9 blocs de 1195 texte a cheval sur des tuiles, aux deux largeurs). Le mot suit maintenant 1196 la bande dans le flux, et il ne peut plus, par construction, tomber sur 1197 quoi que ce soit. 1198 â ï¸ LE VIDE QUE LA MARGE COMBLAIT NE REVIENT PAS : le voile vit desormais 1199 DANS la bande et fond son bas dans le sol de la section, donc il n'y a ni 1200 arete ni bande de sol nu entre les deux. Le pas est celui des rangs. */ 1201.ri-mot{position:relative;width:100%;margin-top:26px} 1202@media (min-width:860px){.ri-mot{margin-top:30px}} 1203/* == 03/09, RONDE 23 - TOUT LE MOT DU RIDEAU PASSE EN ENCRE SOMBRE ======= 1204 * Il etait ecrit EN BLANC, du titre a la legende de la jauge, parce que le 1205 * point le plus sombre du voile tombait dessous. Le voile est retourne (voir 1206 * .ri-voile plus haut) : son point extreme est desormais le plus CLAIR, donc 1207 * du blanc y serait strictement invisible - pas discret, invisible.
1208 * ATTENTION AUCUN GRIS INVENTE : on prend les jetons de la version claire 1209 * (globals.css section 5) - --claire-encre pour ce qui porte, 1210 * --claire-encre-2 pour ce qui accompagne, --claire-encre-3 pour la 1211 * mention de service. 1212 * ATTENTION LES DEUX BOUTONS SUIVENT LE MEME RETOURNEMENT : ils etaient 1213 * CLAIRS sur sombre, ils deviennent NOIRS sur clair (--claire-noir, \xab les 1214 * boutons noirs comme ca, parfait \xbb). Leur hierarchie ne bouge pas : la 1215 * pastille arrondie reste le geste principal, le bloc droit reste le 1216 * second, et c est leur FORME qui les separe, exactement comme avant. */ 1217/* ð´ 09/09 â LES REGLES DU PAVE DE TEXTE SONT SUPPRIMEES AVEC LUI : 1218 .ri-p (\xab This is your library so far. \xbb), .ri-jauge et ses quatre enfants 1219 (le \xab 65 / 168 \xbb, sa barre, sa legende), .ri-q, .ri-shop, .ri-copie et 1220 .ri-voir. Plus aucun element ne les porte. On ne garde pas la feuille d un 1221 bloc retire : c est par la que le bloc revient. */ 1222/* ð´ 09/09 â LA LIGNE DU RESTE. Une ligne, une seule : c'est ce qui manquait 1223 apres la coupe du mur de texte, et ce n'est pas une raison pour remonter un 1224 pave. Elle est juste au-dessus du bouton, donc le nombre et le geste qui 1225 l'ouvre se lisent d'un seul regard. Chiffres tabulaires : le nombre change 1226 avec la selection, il ne doit pas faire danser la ligne. */ 1227.ri-reste{margin:0;font-size:16px;line-height:1.45;color:var(--claire-encre-2); 1228 font-variant-numeric:tabular-nums} 1229.ri-reste b{color:var(--claire-encre);font-weight:750} 1230@media (min-width:860px){.ri-reste{font-size:17px}} 1231/* le seul geste de la section : il prend donc le dessin du bouton principal */ 1232.ri-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px; 1233 margin-top:20px;min-height:54px;padding:0 26px;border-radius:999px; 1234 background:var(--claire-noir);color:#fff; 1235 font-size:16px;font-weight:700;letter-spacing:-.01em; 1236 transition:transform .16s ease,box-shadow .16s ease} 1237.ri-cta:hover{transform:translateY(-1px); 1238 box-shadow:0 14px 30px -14px rgba(11,13,16,.42)} 1239.ri-cta:focus-visible{outline:2px solid var(--claire-noir);outline-offset:3px} 1240/* ð´ 09/09 â .ri-libre EST SUPPRIMEE AVEC SON LIEN. \xab See the 65 open ones 1241 â no account \xbb etait le TROISIEME appel a l action de la meme bande, et il 1242 pointait sur la section qu on est en train de lire. Un seul geste reste. */ 1243 1244/* 30/08 - .mu-bouge ET .mu-tout SONT SUPPRIMEES AVEC LEUR BLOC. 1245 \xab c est quoi ce texte, "25 of them", "please please please look at them 1246 close" \xbb : la phrase quemandait, et \xab swipe a row to push it along \xbb etait 1247 une instruction d usage. Plus aucun element ne porte ces deux classes. */ 1248 1249/* ââ LE BAS DE LA SECTION âââââââââââââââââââââââââââââââââââââââââââââ 1250 * 30/08 - .mu-fin ET .mu-cta SONT SUPPRIMEES : le second bouton vers 1251 * #pricing a fusionne avec celui du rideau, qui porte desormais le dessin 1252 * du bouton principal. Le padding de fin est passe sur .ri, ou il ne s ajoute 1253 * plus a une seconde marge. */ 1254 1255/* ð¨ IMMOBILE, ET PAS SEULEMENT RALENTI. Une piste arretee au milieu de sa 1256 * course laisserait la moitie des vignettes hors de l ecran, sans aucun 1257 * moyen d y aller. On rend donc le rang defilable au doigt. */ 1258/* == MOUVEMENT REDUIT â ON ARRETE LE MOUVEMENT, ON NE CACHE RIEN ======== * 1259 * 1260 * ð¨ CE QUI L A DECLENCHE, ET C EST UN CLIENT SUR SON PORTABLE : \xab la ou il y 1261 * a tous les composants, ils ne tournent pas â on a l impression qu il n y a 1262 * QUE les composants qui sont devant nous. \xbb 1263 * Il a raison, et ce n est pas l arret qui le trompe : c est ce qu on avait 1264 * RETIRE en plus de l arret. 1265 * 1266 * ââ LES DEUX FAUTES CORRIGEES ICI, MESUREES SUR LA PRODUCTION âââââââââââ 1267 * â LE FONDU DE BORD ETAIT SUPPRIME (mask-image:none). Ce fondu n est PAS du 1268 * mouvement : c est le seul signe qui dit \xab la bande continue \xbb. Le retirer 1269 * exactement chez celui qui ne verra jamais la bande defiler, c est lui 1270 * retirer la seule information qui lui restait. Il revient. 1271 * â¡ LE RIDEAU ETAIT ARRETE A ZERO SUR SES TROIS RANGS (transform:none), donc 1272 * trois rangs parfaitement alignes sur le meme bord, sous overflow:hidden â 1273 * c est-a-dire une GRILLE de neuf tuiles, et rien qui dise qu il y en a 159. 1274 * On lui rend un DECALAGE FIXE par rang : aucune animation, aucune image 1275 * composee, mais trois bandes qui ne commencent pas au meme endroit et qui 1276 * sont coupees aux deux bords. 1277 * â ï¸ Le rideau garde overflow:hidden, et c est voulu : il vit SOUS un voile 1278 * couvert de texte, il ne doit pas capter le doigt de qui veut lire. Les 1279 * trois rangs de devant, eux, restent de vrais conteneurs de defilement. 1280 * â AUCUN transform ANIME ICI : ces trois valeurs sont des positions ECRITES 1281 * UNE FOIS, pas des animations a l arret. 1282 * â ï¸ AUCUN ACCENT GRAVE DANS CE COMMENTAIRE : il vit dans un litteral de
1283 * gabarit TSX, et deux accents graves le refermeraient â 500 sur toute 1284 * l application. C est la faute qui vient d etre commise ici meme. */ 1285@media (prefers-reduced-motion:reduce){ 1286 .mu-piste--auto{animation:none} 1287 .ri .mu-rail:nth-of-type(1) .mu-piste--auto{transform:translate3d(-14%,0,0)} 1288 .ri .mu-rail:nth-of-type(2) .mu-piste--auto{transform:translate3d(-31%,0,0)} 1289 .ri .mu-rail{overflow-x:hidden} 1290 .pa-piste{scroll-behavior:auto} 1291 .ri-cta{transition:none} 1292 /* ð¨ OBLIGATION, PAS CONFORT : qui coupe les animations ne recoit AUCUNE 1293 pellicule. La garde JS l empeche d etre telechargee ; celle-ci l empeche 1294 d etre PEINTE, meme si le document en portait une. 1295 â ï¸ .mu-t__fin N EST PAS DANS CETTE LISTE, ET C EST TOUT LE POINT : ce 1296 n est pas un film, c est UNE IMAGE â l etat que le geste a produit. La 1297 cacher reviendrait a refaire la faute qu on repare. */ 1298 .pa-v img.pa-film,.mu-t__f{display:none} 1299} 1300 1301/* ââ LA GRILLE FIXE â 03/09, LA PREUVE QUI SE POSE ââââââââââââââââââââââââ 1302 * Six pieces, entierement dans le cadre, aucune minuterie, aucun defilement 1303 * horizontal. La colonne fait 381 px a 1440 et 350 px a 390 : c'est LA MESURE 1304 * qui commande, pas le gout â le tirage servi est la capture d'une mise en 1305 * page de 390 px, donc a 381 px de large son texte est rendu a 0,977 de sa 1306 * taille reelle. Reduire la colonne, c'est reduire le texte de la piece. 1307 * â AUCUN transform:scale NULLE PART ICI : l'image est rendue a sa taille, 1308 * jamais mise a l'echelle. Un texte transforme est un texte rasterise. 1309 * â RIEN NE TOUCHE LES BORDS : la grille vit dans .shell. */ 1310.gf{padding:14px 0 4px} 1311/* ð¨ 04/09 AU SOIR â LE RANG REVIENT SUR UNE SEULE LIGNE, ET IL N'EN REPART 1312 * PLUS JAMAIS. Ses mots, redits une fois de trop : \xab arrete de mettre les 1313 * composants les uns sur les autres, ca fait que la page est beaucoup trop 1314 * longue pour rien... il faudrait qu'elle soit comme on avait avant, dans des 1315 * bulles sur une ligne et que ca parte a gauche a droite \xbb. 1316 * \xab ca part a gauche et a droite \xbb N'A JAMAIS VOULU DIRE un zigzag empile : 1317 * ca veut dire UNE LIGNE QUI DEFILE. Le menu vertical du 04/09 matin mesurait 1318 * 7 812 px sur la production, dans une section de 9 377 px, pour une page de 1319 * 17 946 : la moitie de l'accueil pour douze pieces. 1320 * â AUCUNE COLONNE ICI, PLUS JAMAIS. Une ligne, qui glisse toute seule, qu'on 1321 * prend au doigt â meme recette que les rangs du dessus (useRailGlissant : 1322 * on ecrit scrollLeft, jamais une propriete qui redispose). */ 1323.gf-g{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none; 1324 overscroll-behavior-x:contain;touch-action:pan-x pan-y} 1325.gf-g::-webkit-scrollbar{display:none} 1326.gf-piste{display:flex;align-items:flex-start;gap:16px;width:max-content} 1327.gf-piste__bis{display:flex;align-items:flex-start;gap:16px;margin-left:16px} 1328.gf-t{margin:0;flex:none;width:228px;display:flex;flex-direction:column;gap:11px} 1329.gf-t:focus-visible{outline:2px solid var(--claire-noir);outline-offset:4px} 1330@media (min-width:700px){ 1331 .gf-piste,.gf-piste__bis{gap:20px} 1332 .gf-piste__bis{margin-left:20px} 1333 .gf-t{width:268px;gap:13px} 1334} 1335/* le cadre porte le rapport du tirage (524 x 580) : la piece n'est ni 1336 recadree ni etiree, elle est servie entiere. */ 1337/* 04/09 -- LA CARTE DE VERRE, DEJA VALIDEE AILLEURS (etapes.tsx, pricing.tsx) : 1338 meme recette exacte, --claire-surface-haute + --claire-flou, pour que 1339 ce rail ne reinvente pas une troisieme texture de fond sur la meme page. 1340 Elle remplace le blanc plat que cette grille portait depuis sa creation 1341 (14h53 le 03/09) et qui n'avait jamais recu le traitement. */ 1342.gf-cadre{position:relative;display:block;width:100%;aspect-ratio:524 / 580; 1343 overflow:hidden;background:var(--claire-surface-haute); 1344 -webkit-backdrop-filter:var(--claire-flou);backdrop-filter:var(--claire-flou); 1345 border:1px solid var(--claire-filet);border-radius:13px; 1346 box-shadow:0 14px 30px -22px rgba(11,13,16,.38), 1347 inset 0 0 0 1px rgba(11,13,16,.10)} 1348/* LA BULLE PASTEL â un ACCENT, jamais un champ entier (regle de la maison, 1349 voir globals.css) : un seul point de couleur par carte, pas un fond teint. 1350 Alterne les deux teintes deja validees pour que le rail ne soit pas 1351 monochrome sans jamais peindre une surface large. */ 1352.gf-t:nth-child(odd) .gf-puce{background:var(--claire-pastel-bleu); 1353 color:var(--claire-pastel-bleu-encre)} 1354.gf-t:nth-child(even) .gf-puce{background:var(--claire-pastel-corail); 1355 color:var(--claire-pastel-corail-encre)} 1356.gf-puce{display:inline-flex;align-items:center;justify-content:center; 1357 width:7px;height:7px;border-radius:999px;margin-right:7px;flex:none} 1358.gf-photo,.gf-second{position:absolute;inset:0;display:block; 1359 width:100%;height:100%;object-fit:cover;object-position:top center} 1360/* LE DEUXIEME ETAT PHOTOGRAPHIE â il se pose SUR la premiere prise, il ne la 1361 remplace pas : film absent, film qui ne charge pas, geste jamais fait, la 1362 photographie reste dessous et reste le repli. Rien ne peut devenir vide. */ 1363.gf-second{opacity:0;transition:opacity .28s ease} 1364.gf-t:hover .gf-second,.gf-t:focus-within .gf-second{opacity:1} 1365@media (hover:none){.gf-t:active .gf-second{opacity:1}} 1366.gf-info{display:flex;align-items:center;gap:14px} 1367.gf-num{flex:none;font-family:var(--font-mono);font-size:13px;font-weight:700; 1368 letter-spacing:.04em;color:var(--claire-encre-3)} 1369.gf-mot{display:flex;align-items:center;font-family:var(--font-mono); 1370 font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; 1371 color:var(--claire-encre-2)}
1372/* â LE NOM RESTE UNE LEGENDE, A TOUTES LES LARGEURS. Il devenait un titre de 1373 * 32 px quand la piece prenait une ligne entiere ; sur une bulle de 268 px ce 1374 * titre-la deborde ou coupe le mot. La bulle porte l'image, pas une affiche. */ 1375@media (min-width:700px){ 1376 .gf-num{font-size:14px} 1377 .gf-puce{width:8px;height:8px} 1378} 1379.gf-compte{margin:22px 0 0;max-width:62ch;font-size:14.5px;line-height:1.5; 1380 color:var(--claire-encre-2)} 1381.gf-compte b{color:var(--claire-encre);font-weight:700; 1382 font-variant-numeric:tabular-nums} 1383@media (prefers-reduced-motion:reduce){.gf-second{transition:none}} 1384`,ez={ecommerce:{oeil:"The shop window",titre:"Every mechanic that makes a store sell.",ligne:"Buy boxes, price ladders, cart drawers, free-shipping bars."},saas:{oeil:"The library",titre:"Every mechanic that keeps a subscription.",ligne:"Paywalls, referral loops, price ladders, upgrade tables."}};function eG({voie:e="ecommerce"}={}){return ex[e].vues.length?(0,t.jsx)(eX,{voie:e}):null}function eX({voie:e}){let i=ex[e],a=ew[e],n=ez[e],[s,r]=eM();return(0,t.jsxs)("section",{id:"components",className:"mu","aria-labelledby":"mu-t",ref:s,"data-vu":r?"1":void 0,children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:(0,b.cssServi)(eH)}}),(0,t.jsxs)("div",{className:"mu-tete shell",children:[(0,t.jsx)("p",{className:"tag tag-encre",children:n.oeil}),(0,t.jsxs)("h2",{id:"mu-t",className:"mu-h2",children:[n.titre,(0,t.jsxs)("span",{children:["All ",i.total,", already built."]})]}),(0,t.jsx)("p",{className:"mu-dit",children:n.ligne})]}),(0,t.jsxs)("div",{className:"mu-rails",children:[(0,t.jsx)(eO,{v:a[0],vitesse:118,charge:r,rang:0}),(0,t.jsx)(eO,{v:a[1],retour:!0,vitesse:112,charge:r,rang:1}),(0,t.jsx)(eO,{v:a[2],vitesse:115,charge:r,rang:2})]}),i.restant.length?(0,t.jsx)(eF,{voie:e}):null]})}e.s(["Galerie",0,ee,"Vitrine",0,eG,"VitrineSaas",0,et,"VitrineVivante",0,ee],46063),e.i(46063),e.s(["Galerie",0,ee,"N_VITRINE",0,v,"Vitrine",0,eG,"VitrineSaas",0,et,"VitrineVivante",0,ee],46662)},9606,e=>{"use strict";var t=e.i(43476),i=e.i(71645),a=e.i(57688),n=e.i(22016);let s=` 1385#define TWO_PI 6.28318530718 1386#define PI 3.14159265358979323846 1387`,r=` 1388vec2 rotate(vec2 uv, float th) { 1389 return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv; 1390} 1391`,o=` 1392 color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5); 1393`,l=` 1394vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); } 1395float snoise(vec2 v) { 1396 const vec4 C = vec4(0.211324865405187, 0.366025403784439, 1397 -0.577350269189626, 0.024390243902439); 1398 vec2 i = floor(v + dot(v, C.yy)); 1399 vec2 x0 = v - i + dot(i, C.xx); 1400 vec2 i1; 1401 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); 1402 vec4 x12 = x0.xyxy + C.xxzz; 1403 x12.xy -= i1; 1404 i = mod(i, 289.0); 1405 vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) 1406 + i.x + vec3(0.0, i1.x, 1.0)); 1407 vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), 1408 dot(x12.zw, x12.zw)), 0.0); 1409 m = m * m; 1410 m = m * m; 1411 vec3 x = 2.0 * fract(p * C.www) - 1.0; 1412 vec3 h = abs(x) - 0.5; 1413 vec3 ox = floor(x + 0.5); 1414 vec3 a0 = x - ox; 1415 m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h); 1416 vec3 g; 1417 g.x = a0.x * x0.x + h.x * x0.y; 1418 g.yz = a0.yz * x12.xz + h.yz * x12.yw; 1419 return 130.0 * dot(m, g); 1420} 1421`,u=`#version 300 es 1422precision mediump float; 1423 1424uniform sampler2D u_image; 1425uniform float u_imageAspectRatio; 1426 1427uniform vec2 u_resolution; 1428uniform float u_time; 1429 1430uniform vec4 u_colorBack; 1431uniform vec4 u_colorTint; 1432 1433uniform float u_softness; 1434uniform float u_repetition; 1435uniform float u_shiftRed; 1436uniform float u_shiftBlue; 1437uniform float u_distortion; 1438uniform float u_contour; 1439uniform float u_angle; 1440 1441uniform float u_shape; 1442uniform bool u_isImage; 1443 1444in vec2 v_objectUV; 1445in vec2 v_responsiveUV; 1446in vec2 v_responsiveBoxGivenSize; 1447in vec2 v_imageUV; 1448 1449out vec4 fragColor; 1450 1451${s} 1452${r} 1453${l} 1454 1455float getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) { 1456 1457 float ch = mix(c2, c1, smoothstep(.0, 2. * blur, stripe_p)); 1458 1459 float border = w[0]; 1460 ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p)); 1461 1462 if (u_isImage == true) { 1463 bump = smoothstep(.2, .8, bump); 1464 } 1465 border = w[0] + .4 * (1. - bump) * w[1]; 1466 ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p)); 1467 1468 border = w[0] + .5 * (1. - bump) * w[1]; 1469 ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p)); 1470 1471 border = w[0] + w[1]; 1472 ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p)); 1473 1474 float gradient_t = (stripe_p - w[0] - w[1]) / w[2]; 1475 float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t)); 1476 ch = mix(ch, gradient, smoothstep(border, border + .5 * blur, stripe_p)); 1477 1478 // Tint color is applied with color burn blending 1479 ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a); 1480 return ch; 1481} 1482
1483float getImgFrame(vec2 uv, float th) { 1484 float frame = 1.; 1485 frame *= smoothstep(0., th, uv.y); 1486 frame *= 1.0 - smoothstep(1. - th, 1., uv.y); 1487 frame *= smoothstep(0., th, uv.x); 1488 frame *= 1.0 - smoothstep(1. - th, 1., uv.x); 1489 return frame; 1490} 1491 1492float blurEdge3x3(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius, float centerSample) { 1493 vec2 texel = 1.0 / vec2(textureSize(tex, 0)); 1494 vec2 r = radius * texel; 1495 1496 float w1 = 1.0, w2 = 2.0, w4 = 4.0; 1497 float norm = 16.0; 1498 float sum = w4 * centerSample; 1499 1500 sum += w2 * textureGrad(tex, uv + vec2(0.0, -r.y), dudx, dudy).r; 1501 sum += w2 * textureGrad(tex, uv + vec2(0.0, r.y), dudx, dudy).r; 1502 sum += w2 * textureGrad(tex, uv + vec2(-r.x, 0.0), dudx, dudy).r; 1503 sum += w2 * textureGrad(tex, uv + vec2(r.x, 0.0), dudx, dudy).r; 1504 1505 sum += w1 * textureGrad(tex, uv + vec2(-r.x, -r.y), dudx, dudy).r; 1506 sum += w1 * textureGrad(tex, uv + vec2(r.x, -r.y), dudx, dudy).r; 1507 sum += w1 * textureGrad(tex, uv + vec2(-r.x, r.y), dudx, dudy).r; 1508 sum += w1 * textureGrad(tex, uv + vec2(r.x, r.y), dudx, dudy).r; 1509 1510 return sum / norm; 1511} 1512 1513float lst(float edge0, float edge1, float x) { 1514 return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); 1515} 1516 1517void main() { 1518 1519 const float firstFrameOffset = 2.8; 1520 float t = .3 * (u_time + firstFrameOffset); 1521 1522 vec2 uv = v_imageUV; 1523 vec2 dudx = dFdx(v_imageUV); 1524 vec2 dudy = dFdy(v_imageUV); 1525 vec4 img = textureGrad(u_image, uv, dudx, dudy); 1526 1527 if (u_isImage == false) { 1528 uv = v_objectUV + .5; 1529 uv.y = 1. - uv.y; 1530 } 1531 1532 float cycleWidth = u_repetition; 1533 float edge = 0.; 1534 float contOffset = 1.; 1535 1536 vec2 rotatedUV = uv - vec2(.5); 1537 float angle = (-u_angle + 70.) * PI / 180.; 1538 float cosA = cos(angle); 1539 float sinA = sin(angle); 1540 rotatedUV = vec2( 1541 rotatedUV.x * cosA - rotatedUV.y * sinA, 1542 rotatedUV.x * sinA + rotatedUV.y * cosA 1543 ) + vec2(.5); 1544 1545 if (u_isImage == true) { 1546 float edgeRaw = img.r; 1547 edge = blurEdge3x3(u_image, uv, dudx, dudy, 6., edgeRaw); 1548 edge = pow(edge, 1.6); 1549 edge *= mix(0.0, 1.0, smoothstep(0.0, 0.4, u_contour)); 1550 } else { 1551 if (u_shape < 1.) { 1552 // full-fill on canvas 1553 vec2 borderUV = v_responsiveUV + .5; 1554 float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y; 1555 vec2 mask = min(borderUV, 1. - borderUV); 1556 vec2 pixel_thickness = min(250. / v_responsiveBoxGivenSize, vec2(.5)); 1557 float maskX = smoothstep(0.0, pixel_thickness.x, mask.x); 1558 float maskY = smoothstep(0.0, pixel_thickness.y, mask.y); 1559 maskX = pow(maskX, .25); 1560 maskY = pow(maskY, .25); 1561 edge = clamp(1. - maskX * maskY, 0., 1.); 1562 1563 uv = v_responsiveUV; 1564 if (ratio > 1.) { 1565 uv.y /= ratio; 1566 } else { 1567 uv.x *= ratio; 1568 } 1569 uv += .5; 1570 uv.y = 1. - uv.y; 1571 1572 cycleWidth *= 2.; 1573 contOffset = 1.5; 1574 1575 } else if (u_shape < 2.) { 1576 // circle 1577 vec2 shapeUV = uv - .5; 1578 shapeUV *= .67; 1579 edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.); 1580 } else if (u_shape < 3.) { 1581 // daisy 1582 vec2 shapeUV = uv - .5; 1583 shapeUV *= 1.68; 1584 1585 float r = length(shapeUV) * 2.; 1586 float a = atan(shapeUV.y, shapeUV.x) + .2; 1587 r *= (1. + .05 * sin(3. * a + 2. * t)); 1588 float f = abs(cos(a * 3.)); 1589 edge = smoothstep(f, f + .7, r); 1590 edge *= edge; 1591 1592 uv *= .8; 1593 cycleWidth *= 1.6; 1594 1595 } else if (u_shape < 4.) { 1596 // diamond 1597 vec2 shapeUV = uv - .5; 1598 shapeUV = rotate(shapeUV, .25 * PI); 1599 shapeUV *= 1.42; 1600 shapeUV += .5; 1601 vec2 mask = min(shapeUV, 1. - shapeUV); 1602 vec2 pixel_thickness = vec2(.15); 1603 float maskX = smoothstep(0.0, pixel_thickness.x, mask.x); 1604 float maskY = smoothstep(0.0, pixel_thickness.y, mask.y); 1605 maskX = pow(maskX, .25); 1606 maskY = pow(maskY, .25); 1607 edge = clamp(1. - maskX * maskY, 0., 1.); 1608 } else if (u_shape < 5.) { 1609 // metaballs 1610 vec2 shapeUV = uv - .5; 1611 shapeUV *= 1.3; 1612 edge = 0.; 1613 for (int i = 0; i < 5; i++) { 1614 float fi = float(i); 1615 float speed = 1.5 + 2./3. * sin(fi * 12.345); 1616 float angle = -fi * 1.5; 1617 vec2 dir1 = vec2(cos(angle), sin(angle));
1618 vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.)); 1619 vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17)); 1620 float d = length(shapeUV + traj); 1621 edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0); 1622 } 1623 edge = 1. - smoothstep(.65, .9, edge); 1624 edge = pow(edge, 4.); 1625 } 1626 1627 edge = mix(smoothstep(.9 - 2. * fwidth(edge), .9, edge), edge, smoothstep(0.0, 0.4, u_contour)); 1628 1629 } 1630 1631 float opacity = 0.; 1632 if (u_isImage == true) { 1633 opacity = img.g; 1634 float frame = getImgFrame(v_imageUV, 0.); 1635 opacity *= frame; 1636 } else { 1637 opacity = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge); 1638 if (u_shape < 2.) { 1639 edge = 1.2 * edge; 1640 } else if (u_shape < 5.) { 1641 edge = 1.8 * pow(edge, 1.5); 1642 } 1643 } 1644 1645 float diagBLtoTR = rotatedUV.x - rotatedUV.y; 1646 float diagTLtoBR = rotatedUV.x + rotatedUV.y; 1647 1648 vec3 color = vec3(0.); 1649 vec3 color1 = vec3(.98, 0.98, 1.); 1650 vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR)); 1651 1652 vec2 grad_uv = uv - .5; 1653 1654 float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR)); 1655 grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI); 1656 float direction = grad_uv.x; 1657 1658 float bump = pow(1.8 * dist, 1.2); 1659 bump = 1. - bump; 1660 bump *= pow(uv.y, .3); 1661 1662 1663 float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump); 1664 float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump); 1665 float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio); 1666 1667 float thin_strip_1_width = cycleWidth * thin_strip_1_ratio; 1668 float thin_strip_2_width = cycleWidth * thin_strip_2_ratio; 1669 1670 float noise = snoise(uv - t); 1671 1672 edge += (1. - edge) * u_distortion * noise; 1673 1674 direction += diagBLtoTR; 1675 float contour = 0.; 1676 direction -= 2. * noise * diagBLtoTR * (smoothstep(0., 1., edge) * (1.0 - smoothstep(0., 1., edge))); 1677 direction *= mix(1., 1. - edge, smoothstep(.5, 1., u_contour)); 1678 direction -= 1.7 * edge * smoothstep(.5, 1., u_contour); 1679 direction += .2 * pow(u_contour, 4.) * (1.0 - smoothstep(0., 1., edge)); 1680 1681 bump *= clamp(pow(uv.y, .1), .3, 1.); 1682 direction *= (.1 + (1.1 - edge) * bump); 1683 1684 direction *= (.4 + .6 * (1.0 - smoothstep(.5, 1., edge))); 1685 direction += .18 * (smoothstep(.1, .2, uv.y) * (1.0 - smoothstep(.2, .4, uv.y))); 1686 direction += .03 * (smoothstep(.1, .2, 1. - uv.y) * (1.0 - smoothstep(.2, .4, 1. - uv.y))); 1687 1688 direction *= (.5 + .5 * pow(uv.y, 2.)); 1689 direction *= cycleWidth; 1690 direction -= t; 1691 1692 1693 float colorDispersion = (1. - bump); 1694 colorDispersion = clamp(colorDispersion, 0., 1.); 1695 float dispersionRed = colorDispersion; 1696 dispersionRed += .03 * bump * noise; 1697 dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * (1.0 - smoothstep(.1, .5, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, 1., bump))); 1698 dispersionRed -= diagBLtoTR; 1699 1700 float dispersionBlue = colorDispersion; 1701 dispersionBlue *= 1.3; 1702 dispersionBlue += (smoothstep(0., .4, uv.y) * (1.0 - smoothstep(.1, .8, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, .8, bump))); 1703 dispersionBlue -= .2 * edge; 1704 1705 dispersionRed *= (u_shiftRed / 20.); 1706 dispersionBlue *= (u_shiftBlue / 20.); 1707 1708 float blur = 0.; 1709 float rExtraBlur = 0.; 1710 float gExtraBlur = 0.; 1711 if (u_isImage == true) { 1712 float softness = 0.05 * u_softness; 1713 blur = softness + .5 * smoothstep(1., 10., u_repetition) * smoothstep(.0, 1., edge); 1714 float smallCanvasT = 1.0 - smoothstep(100., 500., min(u_resolution.x, u_resolution.y)); 1715 blur += smallCanvasT * smoothstep(.0, 1., edge); 1716 rExtraBlur = softness * (0.05 + .1 * (u_shiftRed / 20.) * bump); 1717 gExtraBlur = softness * 0.05 / max(0.001, abs(1. - diagBLtoTR)); 1718 } else { 1719 blur = u_softness / 15. + .3 * contour; 1720 } 1721 1722 vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio); 1723 w[1] -= .02 * smoothstep(.0, 1., edge + bump); 1724 float stripe_r = fract(direction + dispersionRed); 1725 float r = getColorChanges(color1.r, color2.r, stripe_r, w, blur + fwidth(stripe_r) + rExtraBlur, bump, u_colorTint.r); 1726 float stripe_g = fract(direction); 1727 float g = getColorChanges(color1.g, color2.g, stripe_g, w, blur + fwidth(stripe_g) + gExtraBlur, bump, u_colorTint.g); 1728 float stripe_b = fract(direction - dispersionBlue); 1729 float b = getColorChanges(color1.b, color2.b, stripe_b, w, blur + fwidth(stripe_b), bump, u_colorTint.b); 1730 1731 color = vec3(r, g, b); 1732 color *= opacity; 1733 1734 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 1735 color = color + bgColor * (1. - opacity); 1736 opacity = opacity + u_colorBack.a * (1. - opacity); 1737 1738 ${o} 1739 1740 fragColor = vec4(color, opacity); 1741} 1742`,d=`#version 300 es 1743precision mediump float; 1744 1745layout(location = 0) in vec4 a_position; 1746 1747uniform vec2 u_resolution; 1748uniform float u_pixelRatio; 1749uniform float u_imageAspectRatio; 1750uniform float u_originX; 1751uniform float u_originY; 1752uniform float u_worldWidth; 1753uniform float u_worldHeight; 1754uniform float u_fit; 1755uniform float u_scale; 1756uniform float u_rotation; 1757uniform float u_offsetX; 1758uniform float u_offsetY; 1759 1760out vec2 v_objectUV; 1761out vec2 v_objectBoxSize; 1762out vec2 v_responsiveUV; 1763out vec2 v_responsiveBoxGivenSize; 1764out vec2 v_patternUV; 1765out vec2 v_patternBoxSize; 1766out vec2 v_imageUV; 1767 1768vec3 getBoxSize(float boxRatio, vec2 givenBoxSize) { 1769 vec2 box = vec2(0.);
1770 // fit = none 1771 box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y); 1772 float noFitBoxWidth = box.x; 1773 if (u_fit == 1.) { // fit = contain 1774 box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y); 1775 } else if (u_fit == 2.) { // fit = cover 1776 box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y); 1777 } 1778 box.y = box.x / boxRatio; 1779 return vec3(box, noFitBoxWidth); 1780} 1781 1782void main() { 1783 gl_Position = a_position; 1784 1785 vec2 uv = gl_Position.xy * .5; 1786 vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5); 1787 vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight); 1788 givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio; 1789 float r = u_rotation * 3.14159265358979323846 / 180.; 1790 mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r)); 1791 vec2 graphicOffset = vec2(-u_offsetX, u_offsetY); 1792 1793 1794 // =================================================== 1795 1796 float fixedRatio = 1.; 1797 vec2 fixedRatioBoxGivenSize = vec2( 1798 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 1799 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 1800 ); 1801 1802 v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize).xy; 1803 vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize; 1804 1805 v_objectUV = uv; 1806 v_objectUV *= objectWorldScale; 1807 v_objectUV += boxOrigin * (objectWorldScale - 1.); 1808 v_objectUV += graphicOffset; 1809 v_objectUV /= u_scale; 1810 v_objectUV = graphicRotation * v_objectUV; 1811 1812 // =================================================== 1813 1814 v_responsiveBoxGivenSize = vec2( 1815 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 1816 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 1817 ); 1818 float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y; 1819 vec2 responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy; 1820 vec2 responsiveBoxScale = u_resolution.xy / responsiveBoxSize; 1821 1822 #ifdef ADD_HELPERS 1823 v_responsiveHelperBox = uv; 1824 v_responsiveHelperBox *= responsiveBoxScale; 1825 v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.); 1826 #endif 1827 1828 v_responsiveUV = uv; 1829 v_responsiveUV *= responsiveBoxScale; 1830 v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.); 1831 v_responsiveUV += graphicOffset; 1832 v_responsiveUV /= u_scale; 1833 v_responsiveUV.x *= responsiveRatio; 1834 v_responsiveUV = graphicRotation * v_responsiveUV; 1835 v_responsiveUV.x /= responsiveRatio; 1836 1837 // =================================================== 1838 1839 float patternBoxRatio = givenBoxSize.x / givenBoxSize.y; 1840 vec2 patternBoxGivenSize = vec2( 1841 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 1842 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 1843 ); 1844 patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y; 1845 1846 vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize); 1847 v_patternBoxSize = boxSizeData.xy; 1848 float patternBoxNoFitBoxWidth = boxSizeData.z; 1849 vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize; 1850 1851 v_patternUV = uv; 1852 v_patternUV += graphicOffset / patternBoxScale; 1853 v_patternUV += boxOrigin; 1854 v_patternUV -= boxOrigin / patternBoxScale; 1855 v_patternUV *= u_resolution.xy; 1856 v_patternUV /= u_pixelRatio; 1857 if (u_fit > 0.) { 1858 v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x); 1859 } 1860 v_patternUV /= u_scale; 1861 v_patternUV = graphicRotation * v_patternUV; 1862 v_patternUV += boxOrigin / patternBoxScale; 1863 v_patternUV -= boxOrigin; 1864 // x100 is a default multiplier between vertex and fragmant shaders 1865 // we use it to avoid UV presision issues 1866 v_patternUV *= .01; 1867 1868 // =================================================== 1869 1870 vec2 imageBoxSize; 1871 if (u_fit == 1.) { // contain 1872 imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio; 1873 } else if (u_fit == 2.) { // cover 1874 imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio; 1875 } else { 1876 imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio); 1877 } 1878 imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio; 1879 vec2 imageBoxScale = u_resolution.xy / imageBoxSize; 1880 1881 v_imageUV = uv; 1882 v_imageUV *= imageBoxScale; 1883 v_imageUV += boxOrigin * (imageBoxScale - 1.); 1884 v_imageUV += graphicOffset; 1885 v_imageUV /= u_scale; 1886 v_imageUV.x *= u_imageAspectRatio; 1887 v_imageUV = graphicRotation * v_imageUV; 1888 v_imageUV.x /= u_imageAspectRatio; 1889 1890 v_imageUV += .5; 1891 v_imageUV.y = 1. - v_imageUV.y; 1892}`,c=8294400;class p{parentElement;canvasElement;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastRenderTime=0;currentFrame=0;speed=0;currentSpeed=0;providedUniforms;mipmaps=[];hasBeenDisposed=!1;resolutionChanged=!0;textures=new Map;minPixelRatio;maxPixelCount;isSafari=(function(){let e=navigator.userAgent.toLowerCase();return e.includes("safari")&&!e.includes("chrome")&&!e.includes("android")})();uniformCache={};textureUnitMap=new Map;ownerDocument;
1892constructor(e,t,i,a,n=0,s=0,r=2,o=c,l=[]){if(e?.nodeType===1)this.parentElement=e;else throw Error("Paper Shaders: parent element must be an HTMLElement");if(this.ownerDocument=e.ownerDocument,!this.ownerDocument.querySelector("style[data-paper-shader]")){const e=this.ownerDocument.createElement("style");e.innerHTML=m,e.setAttribute("data-paper-shader",""),this.ownerDocument.head.prepend(e)}const u=this.ownerDocument.createElement("canvas");this.canvasElement=u,this.parentElement.prepend(u),this.fragmentShader=t,this.providedUniforms=i,this.mipmaps=l,this.currentFrame=s,this.minPixelRatio=r,this.maxPixelCount=o;const d=u.getContext("webgl2",a);if(!d)throw Error("Paper Shaders: WebGL is not supported in this browser");this.gl=d,this.initProgram(),this.setupPositionAttribute(),this.setupUniforms(),this.setUniformValues(this.providedUniforms),this.setupResizeObserver(),visualViewport?.addEventListener("resize",this.handleVisualViewportChange),this.setupIntersectionObserver(),this.setSpeed(n),this.parentElement.setAttribute("data-paper-shader",""),this.parentElement.paperShaderMount=this,this.ownerDocument.addEventListener("visibilitychange",this.handleDocumentVisibilityChange)}initProgram=()=>{let e=function(e,t,i){let a=e.getShaderPrecisionFormat(e.FRAGMENT_SHADER,e.MEDIUM_FLOAT),n=a?a.precision:null;n&&n<23&&(t=t.replace(/precision\s+(lowp|mediump)\s+float;/g,"precision highp float;"),i=i.replace(/precision\s+(lowp|mediump)\s+float/g,"precision highp float").replace(/\b(uniform|varying|attribute)\s+(lowp|mediump)\s+(\w+)/g,"$1 highp $3"));let s=h(e,e.VERTEX_SHADER,t),r=h(e,e.FRAGMENT_SHADER,i);if(!s||!r)return null;let o=e.createProgram();return o?(e.attachShader(o,s),e.attachShader(o,r),e.linkProgram(o),e.getProgramParameter(o,e.LINK_STATUS))?(e.detachShader(o,s),e.detachShader(o,r),e.deleteShader(s),e.deleteShader(r),o):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(o)),e.deleteProgram(o),e.deleteShader(s),e.deleteShader(r),null):null}(this.gl,d,this.fragmentShader);e&&(this.program=e)};setupPositionAttribute=()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),t=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,t),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{let e={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_pixelRatio:this.gl.getUniformLocation(this.program,"u_pixelRatio"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution")};Object.entries(this.providedUniforms).forEach(([t,i])=>{if(e[t]=this.gl.getUniformLocation(this.program,t),i instanceof HTMLImageElement){let i=`${t}AspectRatio`;e[i]=this.gl.getUniformLocation(this.program,i)}}),this.uniformLocations=e};renderScale=1;parentWidth=0;parentHeight=0;parentDevicePixelWidth=0;parentDevicePixelHeight=0;devicePixelsSupported=!1;intersectionObserver=null;isInViewport=!0;resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(([e])=>{if(e?.borderBoxSize[0]){let t=e.devicePixelContentBoxSize?.[0];void 0!==t&&(this.devicePixelsSupported=!0,this.parentDevicePixelWidth=t.inlineSize,this.parentDevicePixelHeight=t.blockSize),this.parentWidth=e.borderBoxSize[0].inlineSize,this.parentHeight=e.borderBoxSize[0].blockSize}this.handleResize()}),this.resizeObserver.observe(this.parentElement)};setupIntersectionObserver=()=>{let e=this.ownerDocument.defaultView;e?.IntersectionObserver&&(this.intersectionObserver=new e.IntersectionObserver(([e])=>{this.isInViewport=e?.isIntersecting??!0,this.updateCurrentSpeed()}),this.intersectionObserver.observe(this.parentElement))};handleVisualViewportChange=()=>{this.resizeObserver?.disconnect(),this.setupResizeObserver()};handleResize=()=>{let e=0,t=0,i=Math.max(1,window.devicePixelRatio),a=visualViewport?.scale??1;if(this.devicePixelsSupported){let n=Math.max(1,this.minPixelRatio/i);e=this.parentDevicePixelWidth*n*a,t=this.parentDevicePixelHeight*n*a}else{var n;let s,r,o=Math.max(i,this.minPixelRatio)*a;this.isSafari&&(o*=Math.max(1,(n=this.ownerDocument,(r=Math.round(100*(s=outerWidth/((visualVie
1892wport?.scale??1)*(visualViewport?.width??window.innerWidth)+(window.innerWidth-n.documentElement.clientWidth)))))%5==0?r/100:33===r?1/3:67===r?2/3:133===r?4/3:s))),e=Math.round(this.parentWidth)*o,t=Math.round(this.parentHeight)*o}let s=Math.min(1,Math.sqrt(this.maxPixelCount)/Math.sqrt(e*t)),r=Math.round(e*s),o=Math.round(t*s),l=r/Math.round(this.parentWidth);(this.canvasElement.width!==r||this.canvasElement.height!==o||this.renderScale!==l)&&(this.renderScale=l,this.canvasElement.width=r,this.canvasElement.height=o,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=e=>{if(this.hasBeenDisposed)return;if(null===this.program)return void console.warn("Tried to render before program or gl was initialized");let t=e-this.lastRenderTime;this.lastRenderTime=e,0!==this.currentSpeed&&(this.currentFrame+=t*this.currentSpeed),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,.001*this.currentFrame),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.gl.uniform1f(this.uniformLocations.u_pixelRatio,this.renderScale),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),0!==this.currentSpeed?this.requestRender():this.rafId=null};requestRender=()=>{null!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};setTextureUniform=(e,t)=>{if(!t.complete||0===t.naturalWidth)throw Error(`Paper Shaders: image for uniform ${e} must be fully loaded`);let i=this.textures.get(e);i&&this.gl.deleteTexture(i),this.textureUnitMap.has(e)||this.textureUnitMap.set(e,this.textureUnitMap.size);let a=this.textureUnitMap.get(e);this.gl.activeTexture(this.gl.TEXTURE0+a);let n=this.gl.createTexture();this.gl.bindTexture(this.gl.TEXTURE_2D,n),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,t),this.mipmaps.includes(e)&&(this.gl.generateMipmap(this.gl.TEXTURE_2D),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR_MIPMAP_LINEAR));let s=this.gl.getError();if(s!==this.gl.NO_ERROR||null===n)return void console.error("Paper Shaders: WebGL error when uploading texture:",s);this.textures.set(e,n);let r=this.uniformLocations[e];if(r){this.gl.uniform1i(r,a);let i=`${e}AspectRatio`,n=this.uniformLocations[i];if(n){let e=t.naturalWidth/t.naturalHeight;this.gl.uniform1f(n,e)}}};areUniformValuesEqual=(e,t)=>e===t||!!(Array.isArray(e)&&Array.isArray(t))&&e.length===t.length&&e.every((e,i)=>this.areUniformValuesEqual(e,t[i]));setUniformValues=e=>{this.gl.useProgram(this.program),Object.entries(e).forEach(([e,t])=>{let i=t;if(t instanceof HTMLImageElement&&(i=`${t.src.slice(0,200)}|${t.naturalWidth}x${t.naturalHeight}`),this.areUniformValuesEqual(this.uniformCache[e],i))return;this.uniformCache[e]=i;let a=this.uniformLocations[e];if(!a)return void console.warn(`Uniform location for ${e} not found`);if(t instanceof HTMLImageElement)this.setTextureUniform(e,t);else if(Array.isArray(t)){let i=null,n=null;if(void 0!==t[0]&&Array.isArray(t[0])){let a=t[0].length;if(!t.every(e=>e.length===a))return void console.warn(`All child arrays must be the same length for ${e}`);i=t.flat(),n=a}else n=(i=t).length;switch(n){case 2:this.gl.uniform2fv(a,i);break;case 3:this.gl.uniform3fv(a,i);break;case 4:this.gl.uniform4fv(a,i);break;case 9:this.gl.uniformMatrix3fv(a,!1,i);break;case 16:this.gl.uniformMatrix4fv(a,!1,i);break;default:console.warn(`Unsupported uniform array length: ${n}`)}}else"number"==typeof t?this.gl.uniform1f(a,t):"boolean"==typeof t?this.gl.uniform1i(a,+!!t):console.warn(`Unsupported uniform type for ${e}: ${typeof t}`)})};getCurrentFrame=()=>this.currentFrame;setFrame=e=>{this.currentFrame=e,this.lastRenderTime=performance.now(),this.render(performance.now())};setSpeed=(e=1)=>{this.speed=e,this.updateCurrentSpeed()};updateCurrentSpeed=()=>{this.setCurrentSpeed(this.ownerDocument.hidden||!this.isInViewport?0:this.speed)};setCurrentSpeed=e=>{this.currentSpeed=e,null===this.rafId&&0!==e&&(this.lastRenderTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),null!==this.rafId&&0===e&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setMaxPixelCount=(e=c)=>{this.maxPixelCount=e,this.handleResize()};setMinPixelRatio=(e=2)=>{this.minPixelRatio=e,this.handleResize()};setUniforms=e=>{this.setUniformValues(e),this.providedUniforms={...this.providedUniforms,...e},this.render(performance.now())};handleDocumentVisibilityChange=()=>{this.updateCurrentSpeed()};dispose=()=>{this.hasBeenDisposed=!0,null!==this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.textures.forEac
1892h(e=>{this.gl.deleteTexture(e)}),this.textures.clear(),this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),visualViewport?.removeEventListener("resize",this.handleVisualViewportChange),this.ownerDocument.removeEventListener("visibilitychange",this.handleDocumentVisibilityChange),this.uniformLocations={},this.canvasElement.remove(),delete this.parentElement.paperShaderMount}}function h(e,t,i){let a=e.createShader(t);return a?(e.shaderSource(a,i),e.compileShader(a),e.getShaderParameter(a,e.COMPILE_STATUS))?a:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(a)),e.deleteShader(a),null):null}let m=`@layer paper-shaders { 1893 :where([data-paper-shader]) { 1894 isolation: isolate; 1895 position: relative; 1896 1897 & canvas { 1898 contain: strict; 1899 display: block; 1900 position: absolute; 1901 inset: 0; 1902 z-index: -1; 1903 width: 100%; 1904 height: 100%; 1905 border-radius: inherit; 1906 corner-shape: inherit; 1907 } 1908 } 1909}`;function f(){let e=(0,i.useRef)(null),a=(0,i.useRef)(null);return(0,i.useEffect)(()=>{let t=e.current;if(!t||!(window.matchMedia("(hover: hover) and (min-width: 900px)").matches&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches))return;let i=!1;try{let e=new p(t,u,{u_repetition:4,u_softness:.5,u_shiftRed:.3,u_shiftBlue:.3,u_distortion:0,u_contour:0,u_angle:45,u_scale:8,u_shape:1,u_offsetX:.1,u_offsetY:-.1},void 0,.6);if(i)return void e.destroy?.();a.current=e,t.dataset.vivant="1";let n=t.closest("a, button");if(!n)return;n.dataset.metal="1";let s=()=>e.setSpeed?.(1),r=()=>e.setSpeed?.(.6),o=()=>{e.setSpeed?.(2.4),window.setTimeout(()=>{e.setSpeed?.(n.matches(":hover")?1:.6)},300)};return n.addEventListener("pointerenter",s),n.addEventListener("pointerleave",r),n.addEventListener("pointerdown",o),()=>{n.removeEventListener("pointerenter",s),n.removeEventListener("pointerleave",r),n.removeEventListener("pointerdown",o),e.destroy?.(),a.current=null,delete t.dataset.vivant,delete n.dataset.metal}}catch{i=!0;return}},[]),(0,t.jsx)("span",{ref:e,className:"lm-surface","aria-hidden":!0})}var g=e.i(81764),v=e.i(90047);let x=["claude","gpt","cursor"].map(e=>g.OUTILS.find(t=>t.id===e)).filter(e=>!!e),b=` 1910.ch-grappe{ display:inline-flex; align-items:center; flex:0 0 auto; } 1911.ch-cercle{ display:inline-flex; align-items:center; justify-content:center; 1912 width:calc(var(--ch-h) * 0.68); height:calc(var(--ch-h) * 0.68); border-radius:50%; 1913 background:#ffffff; color:var(--claire-encre); box-shadow:0 0 0 1px var(--claire-filet-fort); position:relative; } 1914.ch-cercle + .ch-cercle{ margin-left:calc(var(--ch-h) * -0.2); } 1915.ch-cercle:nth-child(1){ z-index:3; } .ch-cercle:nth-child(2){ z-index:2; } .ch-cercle:nth-child(3){ z-index:1; } 1916.ch-mcp{ display:none; align-items:center; flex:0 0 auto; } 1917.ch-mcp svg{ width:calc(var(--ch-h) * 0.62); height:calc(var(--ch-h) * 0.62); } 1918[data-chaine="mcp"] .ch-grappe{ display:none; } 1919[data-chaine="mcp"] .ch-mcp{ display:inline-flex; } 1920`;function E(){return(0,t.jsx)("svg",{viewBox:"0 0 24 24","aria-hidden":!0,fill:"none",stroke:"currentColor",strokeWidth:2.4,strokeLinecap:"round",strokeLinejoin:"round",style:{height:"calc(var(--ch-h) * 0.613)",width:"calc(var(--ch-h) * 0.613)",flex:"0 0 auto"},children:(0,t.jsx)("path",{d:"M4 12h15M13.4 6.4 19 12l-5.6 5.6"})})}function y({centre:e=!0,classe:i}){return(0,t.jsxs)("div",{className:i,style:{display:"flex",alignItems:"center",justifyContent:e?"center":"flex-start",gap:"calc(var(--ch-h) * 0.355)",flexWrap:"nowrap"},children:[(0,t.jsx)("img",{src:"/marque/uxgen-encre.webp",alt:"uxgen",width:480,height:133,style:{height:"calc(var(--ch-h) * 0.839)",width:"auto",flex:"0 0 auto",position:"relative",top:"round(calc(var(--ch-h) * 0.1437), 1px)"}}),(0,t.jsx)(E,{}),(0,t.jsx)("span",{"data-maillon":"ai",style:{display:"flex",alignItems:"center",height:"var(--ch-h)",flex:"0 0 auto"},children:(0,t.jsxs)("span",{className:"ch-pastille",style:{display:"inline-flex",alignItems:"center",gap:"calc(var(--ch-h) * 0.22)",height:"calc(var(--ch-h) * 0.871)",padding:"0 calc(var(--ch-h) * 0.42) 0 calc(var(--ch-h) * 0.14)",border:"1.5px solid color-mix(in srgb, currentColor 35%, transparent)",borderRadius:999,background:"#ffffff",fontSize:"calc(var(--ch-h) * 0.44)",fontWeight:700,lineHeight:1,letterSpacing:"-0.012em",whiteSpace:"nowrap",color:"currentColor"},children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:(0,v.cssServi)(b)}}),(0,t.jsx)("span",{className:"ch-grappe","aria-hidden":"true",children:x.map(e=>(0,t.jsx)("span",{className:"ch-cercle",children:(0,t.jsx)(g.LogoOutil,{o:e,h:"calc(var(--ch-h) * 0.42)"})},e.id))}),(0,t.jsx)("span",{className:"ch-mcp","aria-hidden":"true",children:(0,t.jsxs)("svg",{viewBox:"7 7 166 166",fill:"none",stroke:"currentColor",strokeWidth:13,strokeLinecap:"round",children:[(0,t.jsx)("path",{d:"M23.5996 85.2532L86.2021 22.6507C94.8457 14.0071 108.86 14.0071 117.503 22.6507C126.147 31.2942 126.147 45.3083 117.503 53.9519L70.2254 101.23"}),(0,t.jsx)("path",{d:"M70.8789 100.578L117.504 53.952C126.148 45.3083 140.163 45.3083 148.806 53.952L149.132 54.278C157.776 62.9216 157.776 76.9357 149.132 85.5792L92.5139 142.198C89.6327 145.079 89.6327 149.75 92.5139 152.631L104.14 164.257"}),(0,t.jsx)("path",{d:"M101.853 38.3013L55.553 84.6011C46.9094 93.2447 46.9094 107.258 55.553 115.902C64.1966 124.546 78.2106 124.546 86.8543 115.902L133.154 69.6025"})]})}),"your AI"]})}),(0,t.jsx)(E,{}),(0,t.jsxs)("svg",{viewBox:"0 0 100 28.6",role:"img","aria-label":"Shopify",style:{height:"calc(var(--ch-h) * 0.871)",width:"auto",flex:"0 0 auto"},children:[(0,t.jsx)("path",{fill:"currentColor",d:"M11.3 1c.2 0 .3.1.5.2-1.2.5-2.4 1.8-3 4.6l-2.2.6c.7-2 2.1-5.4 4.7-5.4zm1.1 1c.2.6.4 1.3.4 2.4v.2l-2.9.8c.6-2.1 1.6-3 2.5-3.4zM15 3.8l-1.3.4v-.3c0-.9-.1-1.6-.3-2.2.7.2 1.3 1.1 1.6 2.1zm6.5 1.6c0-.1-.1-.2-.2-.2
1920-.2 0-2.3-.2-2.3-.2s-1.5-1.5-1.7-1.6c-.2-.2-.5-.1-.6-.1 0 0-.3.1-.8.3C15.4 2.2 14.5.9 13 .9h-.1c-.4-.6-1-.8-1.5-.8C7.8 0 6.1 4.5 5.5 6.8c-.8.2-1.6.5-2.5.8-.8.2-.8.3-.9 1C2 9.1 0 24.9 0 24.9l15.9 3 8.6-1.9s-3-20.4-3-20.6z"}),(0,t.jsx)("path",{fill:"currentColor",d:"M21.2 5.2C21.1 5.2 19 5 19 5s-1.5-1.5-1.7-1.6c-.1-.1-.1-.1-.2-.1l-1.2 24.6 8.6-1.9s-3-20.4-3-20.6c0-.1-.2-.2-.3-.2"}),(0,t.jsx)("path",{fill:"var(--ch-sol)",d:"m13 10-1.1 3.2s-.9-.5-2.1-.5c-1.7 0-1.8 1-1.8 1.3 0 1.4 3.8 2 3.8 5.4 0 2.7-1.7 4.4-4 4.4-2.7 0-4.1-1.7-4.1-1.7l.7-2.4s1.4 1.2 2.6 1.2c.8 0 1.1-.6 1.1-1.1 0-1.9-3.1-2-3.1-5.1 0-2.6 1.9-5.1 5.6-5.1 1.7-.1 2.4.4 2.4.4"}),(0,t.jsx)("path",{fill:"currentColor",d:"M34.6 15.9c-.9-.5-1.3-.9-1.3-1.4 0-.7.6-1.1 1.6-1.1 1.1 0 2.1.5 2.1.5l.8-2.4s-.7-.6-2.8-.6c-3 0-5 1.7-5 4.1 0 1.4 1 2.4 2.2 3.1 1 .6 1.4 1 1.4 1.6 0 .6-.5 1.2-1.5 1.2-1.4 0-2.8-.7-2.8-.7l-.8 2.4s1.2.8 3.3.8c3 0 5.2-1.5 5.2-4.2 0-1.5-1.1-2.6-2.4-3.3m12.1-5.1c-1.5 0-2.7.7-3.6 1.8l1.3-6.8H41l-3.3 17.3h3.4l1.1-5.9c.4-2.2 1.6-3.6 2.7-3.6.8 0 1.1.5 1.1 1.3 0 .5 0 1-.1 1.5l-1.3 6.8H48l1.3-7c.1-.7.2-1.6.2-2.2 0-2-1-3.2-2.8-3.2m8.7 9.9c-1.2 0-1.6-1-1.6-2.2 0-1.9 1-5.1 2.8-5.1 1.2 0 1.6 1 1.6 2 0 2.2-1 5.3-2.8 5.3zm1.7-9.9c-4.1 0-6.8 3.7-6.8 7.8 0 2.6 1.6 4.7 4.7 4.7 4 0 6.7-3.6 6.7-7.8 0-2.4-1.4-4.7-4.6-4.7zm10 10c-.9 0-1.4-.5-1.4-.5l.6-3.2c.4-2.1 1.5-3.5 2.7-3.5 1 0 1.4 1 1.4 1.9-.1 2.2-1.4 5.3-3.3 5.3zm3.3-10c-2.3 0-3.6 2-3.6 2L67 11h-3c-.1 1.2-.4 3.1-.7 4.5l-2.4 12.4h3.4l.9-5h.1s.7.4 2 .4c4 0 6.6-4.1 6.6-8.2 0-2.2-1-4.3-3.5-4.3zM78.7 6c-1.1 0-1.9.9-1.9 2 0 1 .6 1.7 1.6 1.7 1.1 0 2-.7 2-2 0-1-.7-1.7-1.7-1.7M74 23.1h3.4l2.3-12h-3.4l-2.3 12zm14.3-12h-2.4l.1-.6c.2-1.2.9-2.2 2-2.2.6 0 1.1.2 1.1.2l.7-2.7s-.6-.3-1.8-.3c-1.2 0-2.4.3-3.3 1.1-1.2 1-1.7 2.4-2 3.8l-.1.6H81l-.5 2.6h1.6l-1.8 9.5h3.4l1.8-9.5h2.3l.5-2.5zm8.1 0s-2.1 5.3-3.1 8.2c-.1-.9-.8-8.2-.8-8.2h-3.6l2 11c0 .2 0 .4-.1.6-.4.8-1.1 1.5-1.8 2-.6.5-1.4.8-1.9 1l.9 2.9c.7-.1 2.1-.7 3.3-1.8 1.5-1.4 3-3.7 4.4-6.7l4.1-8.9-3.4-.1z"})]})]})}var A=e.i(32181),w=e.i(71164),T=e.i(38544),S=e.i(77636);let R="https://www.uxgen.ai/mcp",L=[{id:"claude",logo:"claude",nom:"Claude",cmd:`claude mcp add --transport http uxgen ${R}`,ou:"Terminal",cible:"terminal",note:"Claude Code takes the line. Claude Desktop takes the address, in Connectors."},{id:"chatgpt",logo:"gpt",nom:"ChatGPT",cmd:R,ou:"ChatGPT ⺠Plugins ⺠new plugin",cible:"reglage",note:"paste the address, developer mode on"},{id:"cursor",logo:"cursor",nom:"Cursor",cmd:`"uxgen": { "type": "http", "url": "${R}" }`,ou:"~/.cursor/mcp.json",cible:"fichier",note:"one entry under mcpServers"},{id:"lovable",logo:"lovable",nom:"Lovable",cmd:R,ou:"Lovable ⺠Connectors ⺠MCP",cible:"reglage",note:"paste the address, authorise once"}];function q({id:e}){let i=g.OUTILS.find(t=>t.id===e);return i?(0,t.jsx)("span",{className:"mt-ic","aria-hidden":"true",children:(0,t.jsx)("svg",{viewBox:i.vb,fill:"currentColor",style:{height:`calc(var(--mt-lg) * ${i.ech})`,width:"auto"},children:(0,t.jsx)("path",{d:i.d})})}):null}function I({c:e}){let i={fill:"none",stroke:"currentColor",strokeWidth:1.9,strokeLinecap:"round",strokeLinejoin:"round"};return(0,t.jsxs)("svg",{className:"mt-ou-ic",viewBox:"0 0 24 24","aria-hidden":"true",children:["terminal"===e&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("rect",{x:"2.6",y:"4.2",width:"18.8",height:"15.6",rx:"2.4",...i}),(0,t.jsx)("path",{d:"m7 10 2.8 2.6L7 15.2M12.6 15.4h4.2",...i})]}),"fichier"===e&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("path",{d:"M6 2.9h7.2L19 8.7v12.4H6Z",...i}),(0,t.jsx)("path",{d:"M13.2 2.9v5.8H19",...i})]}),"reglage"===e&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("path",{d:"M9.4 2.8v5.4M14.6 2.8v5.4",...i}),(0,t.jsx)("path",{d:"M6.6 8.2h10.8v3.4a5.4 5.4 0 0 1-10.8 0Z",...i}),(0,t.jsx)("path",{d:"M12 17v4.2",...i})]})]})}let N=` 1921/* ð¨ LE BLOC EST UN ELEMENT FLEXIBLE, ET IL SE DIMENSIONNAIT SUR SON CONTENU. 1922 MESURE a 390 px : agent Claude -> .mt fait 330 px ; agent ChatGPT -> 281,4. 1923 Le parent (.tb-cta) est en display: flex et .mt y entre en flex-basis: 1924 auto, c est-a-dire a la largeur de son plus large enfant. Changer d agent 1925 changeait donc la LARGEUR DE TOUTE LA BARRE : les quatre pilules passaient 1926 de 79,5 a 67,3 px et \xab ChatGPT \xbb / \xab Lovable \xbb se coupaient en \xab Chat⦠\xbb / 1927 \xab Lova⦠\xbb (mesure : bScroll 45 px pour bClient 38). Une largeur qui depend 1928 du texte affiche est un piege permanent â on la fixe une fois pour toutes. 1929 â ï¸ Sur un bloc non flexible, width: 100% vaut auto : la regle ne coute 1930 rien la ou le parent n est pas en flex. */ 1931.mt { --mt-lg: 15px; width: 100%; align-self: stretch; } 1932.mt-ic { display: grid; place-items: center; } 1933 1934/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1935 ð´ 03/09 â TOUT CE BLOC ETAIT PEINT POUR LE FOND NOIR, ET LA PAGE EST 1936 PASSEE AU CLAIR. Sa parole, capture a l appui : \xab c est un bordel sans nom, 1937 elle est blanche, des trucs noirs, on comprend rien \xbb. 1938 MESURE sur 'vu-1440-fold.png' : quatre pastilles a fond #0E1013 posees sur 1939 un sol #f5f6f9 â des taches noires dans une page blanche â et la ligne
1940 d installation en #C9D0D8 sur #0B0D10, c est-a-dire un rectangle noir de 1941 plus. Le heros, lui, avait deja bascule. 1942 â TOUT PASSE AUX JETONS CLAIRS DE LA MAISON (globals.css, --claire-*). 1943 Aucune couleur inventee ici : sol-douce pour la bande, blanc pour la 1944 carte, filet pour le bord, encre / encre-2 pour le texte, et le NOIR 1945 uniquement comme accent (la pilule choisie, le survol de Copy). 1946 â ï¸ CE BLOC EST UN GABARIT JS : aucun accent grave ici, il fermerait la 1947 chaine et l erreur sortirait vingt lignes plus loin. 1948 â ï¸ '.mt .mt-...' et non '.mt-...' : globals.css peint ces memes classes en 1949 sombre a specificite (0,2,0) ; on remonte d un cran pour gagner a coup 1950 sur, quel que soit l ordre d insertion des feuilles. 1951 ð´ '.mt-mec' EST SUPPRIMEE AVEC SON BANDEAU : la phrase qu elle peignait a 1952 ete retiree le 31/08 (voir le commentaire dans le rendu), plus aucun 1953 element ne porte cette classe. On ne repeint pas du CSS mort. */ 1954.mt .mt-barre { margin-top: 16px; } 1955 1956/* ⪠L INTITULE ET LA NOTE â les deux mentions grises du bloc. 1957 #828B95 (globals) valait 5,52:1 sur le NOIR ; sur #f5f6f9 il tombe a 3,20:1, 1958 sous le seuil de 4,5. --claire-encre-2 (#4a515c) vaut 7,41:1 sur le sol et 1959 7,94:1 sur la carte blanche de l etape 01. */ 1960.mt .mt-lb { color: var(--claire-encre-2); } 1961.mt .mt-note { color: var(--claire-encre-2); } 1962 1963/* â LES PILULES S INVERSENT. Elles etaient claires sur fond sombre ; la 1964 choisie devient NOIRE PLEINE, encre blanche â le meme geste que le bouton 1965 du heros, deja fait. Les inactives : fond blanc, filet, encre-2. 1966 Ecart de luminance entre choisie et voisines : 0,004 contre 1,00, soit le 1967 maximum possible. Contrastes calcules : blanc sur --claire-noir = 19,46:1 ; 1968 --claire-encre-2 sur blanc = 8,01:1. */ 1969.mt .mt-pil { 1970 background: #FFFFFF; 1971 border-color: var(--claire-filet-fort); 1972 color: var(--claire-encre-2); 1973} 1974.mt .mt-pil.est-actif { color: #FFFFFF; border-color: var(--claire-noir); } 1975.mt .mt-pil.est-actif b { font-weight: 700; } 1976.mt .mt-fond { 1977 background: var(--claire-noir); 1978 box-shadow: 0 8px 20px -12px rgba(11,13,16,0.55); 1979} 1980/* ð´ 24/08 â LE SURVOL EFFACAIT LA PILULE ACTIVE (mesure : 1,1:1 sur son 1981 fond). Le :not() rend la regle inoffensive la ou elle n avait rien a faire ; 1982 il tient toujours, seule l encre change de cote. 1983 --claire-encre sur blanc = 19,46:1. */ 1984.mt .mt-pil:not(.est-actif):hover { 1985 color: var(--claire-encre); border-color: var(--claire-noir); 1986} 1987 1988/* â¡ LA DESTINATION â le bandeau qui coiffe la ligne. TOUJOURS visible, y 1989 compris sous 900 px ou .mt-note est masquee : c est lui qui porte la 1990 difference entre les quatre agents quand la commande est la meme. 1991 Il prend la nuance de bande (--claire-sol-douce) pour se distinguer de la 1992 ligne blanche posee dessous : un seul objet, deux etages. */ 1993.mt-ou { 1994 display: flex; align-items: center; gap: 7px; 1995 margin-top: 20px; padding: 7px 12px; 1996 border: 1px solid var(--claire-filet-fort); border-bottom: 0; 1997 border-radius: 9px 9px 0 0; 1998 background: var(--claire-sol-douce); overflow: hidden; 1999} 2000.mt-ou-t { 2001 min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2002 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 2003 font-size: 11px; font-weight: 600; letter-spacing: 0.01em; 2004 color: var(--claire-encre); 2005} 2006/* ð´ 24/08 â LE PIRE CONTRASTE DES DEUX PAGES : #5B636C sur #0F1216 valait 2007 3,08:1 a 9,5 px, pour un seuil de 4,5:1. C est l etiquette qui dit OU coller 2008 la ligne (\xab PASTE IN \xb7 Terminal \xbb) â donc l instruction, sur la seule ligne 2009 que la page demande de copier, ecrite dans la couleur la moins lisible du 2010 site. Le meme piege se rejoue a l envers sur fond clair : #8A939D sur 2011 #eceef2 ne vaut que 2,68:1. 2012 â --claire-encre-2 = 6,89:1 sur --claire-sol-douce. L icone suit, pour que 2013 l etiquette et son signe restent une seule chose. */ 2014.mt-ou-lb { 2015 flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.15em; 2016 text-transform: uppercase; color: var(--claire-encre-2); 2017} 2018.mt-ou-ic { 2019 flex: none; width: 13px; height: 13px; color: var(--claire-encre-2); 2020} 2021/* la ligne se colle au bandeau : un seul objet, deux etages. 2022 La carte blanche + le filet, la grammaire deja posee ailleurs sur la page. 2023 --claire-encre sur blanc = 19,46:1 pour la commande elle-meme. */ 2024.mt .mt-ligne { 2025 margin-top: 0; border-radius: 0 0 9px 9px; 2026 background: #FFFFFF; border-color: var(--claire-filet-fort); 2027} 2028.mt .mt-ligne code { color: var(--claire-encre); } 2029/* COPY reste SECONDAIRE â il ne peut pas etre noir plein, la pilule choisie 2030 l est deja a 40 px au-dessus et deux masses noires dans le meme bloc ne se 2031 lisent plus comme une hierarchie. Fond nuance, filet, encre : il se detache 2032 de la ligne blanche sans lui voler le rang. Au survol seulement, il prend le 2033 noir de la maison. --claire-encre sur --claire-sol-douce = 16,75:1. */ 2034.mt .mt-copie { 2035 background: var(--claire-sol-douce); 2036 border-color: var(--claire-filet-fort); 2037 color: var(--claire-encre); 2038 transition: color 160ms ease, border-color 160ms ease, 2039 background-color 160ms ease; 2040} 2041.mt .mt-copie:hover { 2042 background: var(--claire-noir); border-color: var(--claire-noir); 2043 color: #FFFFFF; 2044} 2045 2046/* ⢠LE REPLI PAR COURRIEL â le filet et la mention passent au clair eux 2047 aussi. Le champ lui-meme vient de 'ChampInteret' en ton clair (voir plus 2048 bas dans le rendu) : rien a peindre ici. */ 2049.mt .mt-envoi { border-top-color: var(--claire-filet); } 2050.mt .mt-envoi-p { color: var(--claire-encre-2); } 2051 2052/* ⢠LA NOTE REVIENT AU TELEPHONE. globals.css la masque sous 900 px, ce qui 2053 rendait trois pilules sur quatre litteralement inertes a l ecran. Elle est
2054 courte (une ligne de 12 px, ~17 px de haut) : le heros l absorbe. */ 2055@media (max-width: 899px) { 2056 .mt .mt-note { display: block; margin-top: 6px; font-size: 12px; } 2057} 2058 2059/* sous 620 les pilules se serrent : le nom NE DOIT PAS etre tronque 2060 (\xab Chat⦠\xbb, \xab Lova⦠\xbb etaient mesures avant cette passe). On reprend la 2061 place sur le remplissage, pas sur le corps du texte. */ 2062@media (max-width: 620px) { 2063 .mt { --mt-lg: 13px; } 2064 /* 13/09 (juge E) â MEME RESPIRATION SUR LES QUATRE PASTILLES. En largeur 2065 egale (flex-basis 0), \xab ChatGPT \xbb + son logo laissait 6 px de jeu contre 2066 11-12 aux autres (mesure a 390). Avec flex-basis auto, chaque pastille 2067 part de son contenu et l espace libre se partage a parts egales : le jeu 2068 est le meme partout, par construction. Les largeurs different de 2069 quelques pixels, la respiration non. */ 2070 .mt .mt-pil { padding: 0 5px; gap: 4px; flex: 1 1 auto; } 2071 .mt .mt-pil b { overflow: visible; text-overflow: clip; } 2072 .mt-ou { padding: 6px 10px; gap: 6px; } 2073 .mt-ou-t { font-size: 10.5px; } 2074} 2075@media (max-width: 379px) { 2076 .mt .mt-pil { padding: 0 4px; gap: 3px; } 2077 .mt-ou-lb { display: none; } 2078} 2079 2080/* ð´ 24/08 â LA LIGNE EST PASSEE DE 43 A 62 SIGNES, ET ELLE ETAIT COUPEE NET. 2081 .mt-ligne code est en white-space: nowrap + overflow-x: auto avec la 2082 barre de defilement MASQUEE (globals.css) : au telephone, la fin de la 2083 commande disparaissait derriere le bouton COPY sans une ellipse, sans un 2084 degrade, sans rien qui dise qu il manque quelque chose. C est la faute 2085 exacte que copy-line.tsx declare avoir reparee trois fois. 2086 MESURE a 390 : cadre 350 px, zone de code ~257 px une fois le bouton pose ; 2087 62 signes x 0,6 em a 11,5 px = 428 px. Il en manquait 171, soit 2088 \xab https://www.uxgen.ai/mcp \xbb en entier â c est-a-dire TOUT ce qui compte. 2089 â SOUS 640 PX LA COMMANDE PREND LA RANGEE, le bouton passe dessous a 2090 droite, et la ligne REVIENT A LA LIGNE au lieu de defiler en cachette. 2091 â ï¸ overflow-wrap: anywhere et non break-all : la coupure tombe aux 2092 espaces tant qu elle peut, donc jamais au milieu de l adresse (24 signes, 2093 ~166 px â elle tient sur une rangee de 327). Rien a recoller apres copie. 2094 â ï¸ Le premier ecran gagne ~30 px et c est le prix a payer : une commande 2095 amputee ne coute pas 30 px, elle coute le branchement. */ 2096@media (max-width: 639px) { 2097 .mt .mt-ligne { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; } 2098 .mt .mt-ligne code { 2099 flex: 1 1 100%; 2100 overflow-x: visible; 2101 white-space: pre-wrap; 2102 overflow-wrap: anywhere; 2103 line-height: 1.5; 2104 } 2105 .mt .mt-copie { margin-left: auto; } 2106} 2107`;function C({envoi:e=!1}={}){let[a,n]=i.useState(L[0].id),s="mt-actif-"+i.useId(),r=function(){w.hasReducedMotionListener.current||(0,T.initPrefersReducedMotion)();let[e]=(0,i.useState)(w.prefersReducedMotion.current);return e}(),o=L.find(e=>e.id===a)||L[0],[l,u]=i.useState(!1);async function d(){try{await navigator.clipboard.writeText(o.cmd),u(!0),window.setTimeout(()=>u(!1),1600)}catch{}}let c=r?{}:{initial:{opacity:0,y:5},animate:{opacity:1,y:0},transition:{duration:.22,ease:[.22,1,.36,1]}};return(0,t.jsxs)("div",{className:"mt",children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:(0,v.cssServi)(N)}}),(0,t.jsx)("p",{className:"mt-lb",children:"Where it plugs in"}),(0,t.jsx)("div",{className:"mt-barre",role:"tablist","aria-label":"Choose your coding agent",children:L.map(e=>{let i=e.id===a;return(0,t.jsxs)("button",{type:"button",role:"tab","aria-selected":i,className:"mt-pil"+(i?" est-actif":""),onClick:()=>n(e.id),children:[i&&!r&&(0,t.jsx)(A.motion.span,{layoutId:s,className:"mt-fond",transition:{type:"spring",stiffness:520,damping:40}}),i&&r&&(0,t.jsx)("span",{className:"mt-fond"}),(0,t.jsx)(q,{id:e.logo}),(0,t.jsx)("b",{children:e.nom})]},e.id)})}),(0,t.jsxs)(A.motion.div,{className:"mt-ou",...c,children:[(0,t.jsx)(I,{c:o.cible}),(0,t.jsx)("span",{className:"mt-ou-lb",children:"Paste in"}),(0,t.jsx)("span",{className:"mt-ou-t",children:o.ou})]},"ou-"+o.id),(0,t.jsxs)("div",{className:"mt-ligne",children:[(0,t.jsx)(A.motion.code,{...c,children:o.cmd},"cmd-"+o.id),(0,t.jsx)("button",{type:"button",className:"mt-copie",onClick:d,"aria-label":"Copy the command for "+o.nom,children:l?"Copied":"Copy"})]}),(0,t.jsx)("p",{className:"mt-note",children:o.note}),e?(0,t.jsxs)("div",{className:"mt-envoi",children:[(0,t.jsx)("p",{className:"mt-envoi-p",children:"Not at that machine right now?"}),(0,t.jsx)(S.ChampInteret,{ou:"commande",ton:"light",rang:"second",ligne:!0,libelle:"Send it to my laptop"})]}):null]})}let U=["My agent stopped inventing parts.","Every part is built to convert."];function P({voie:e="ecommerce"}){return"saas"!==e?null:(0,t.jsxs)("section",{className:"pm-av","aria-label":"What it does, in two lines",children:[(0,t.jsx)("div",{className:"pm-av-c",children:U.map((e,i)=>(0,t.jsx)("figure",{className:"pm-av-b",children:(0,t.jsx)("p",{className:"pm-av-p",children:e})},i))}),(0,t.jsx)("style",{children:(0,v.cssServi)(O)})]})}let O=` 2108.pm-av{position:relative;z-index:5;padding:40px 0 30px} 2109.pm-av-c{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px; 2110 align-items:start;max-width:1180px;margin:0 auto;padding:0 24px} 2111/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 2112 * ð´ LE TRAIT DU MILIEU â REFAIT, PARCE QU IL PARLAIT LA LANGUE DE L EN-TETE. 2113 * 2114 * \xab Cette ligne qui separe les deux, comme celle du header : celle-la, elle 2115 * ne parle de rien de tout ca. Il faudrait que ce soit comme si ca
2116 * appartenait au heros. CA CHANGE LE TON. \xbb 2117 * 2118 * ââ CE QUI ETAIT FAUX, ET IL A RAISON ââââââââââââââââââââââââââââââââââ 2119 * Le premier trait reprenait mot pour mot la grammaire de .tb-hd::after : 2120 * 1 px net, platine froid (#DCE3EC), et surtout UN DEGRADE SYMETRIQUE QUI 2121 * S ETEINT AUX DEUX BOUTS. Cette signature-la est celle du mobilier de 2122 * navigation : un filet qui meurt en haut ET en bas se lit comme un 2123 * separateur de barre d outils. Pose dans le heros, il y importait le ton de 2124 * l en-tete. 2125 * 2126 * ââ CE QUI APPARTIENT AU HEROS, LUI ââââââââââââââââââââââââââââââââââââ 2127 * Le heros n a pas de filets : il a de la MATIERE et UNE LUMIERE, et cette 2128 * lumiere entre par le coin HAUT-DROIT (le satin, voir .tb-satin). Sa 2129 * grammaire est photographique â pas d arete, pas de bout franc. 2130 * â Le trait devient donc un FILET DE LUMIERE, et il obeit a la lumiere du 2131 * heros au lieu d obeir a celle de l en-tete : 2132 * \xb7 il est VIF EN HAUT et se dissout vers le bas â une lumiere tombe, 2133 * elle ne s allume pas par le milieu. C est l inverse exact de la 2134 * signature de l en-tete, et c est la tout le changement de ton ; 2135 * \xb7 il n a PAS D ARETE : 3 px de large, degrade horizontal transparent -> 2136 * clair -> transparent, donc aucun bord a rencontrer ; 2137 * \xb7 il porte le blanc du heros (#F4F4F4, le jeton --tb-encre), pas le 2138 * platine froid de la barre de navigation ; 2139 * \xb7 il DEBORDE au-dessus des etoiles (top:-14px) : il traverse la 2140 * section, il ne la borde pas. 2141 * â Toujours aucun fond, aucun cadre, aucune carte : ca les decouperait du 2142 * heros, et sur ce point-la le premier jugement tenait. 2143 * ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 2144/* ð´ 28/08 â LE FILET DU MILIEU EST SUPPRIME, ET C EST SA TROISIEME DECISION 2145 * DESSUS. Il l a d abord demande, puis fait changer de nature (\xab il ne parle 2146 * de rien de tout ca, il faudrait que ca appartienne au heros \xbb), puis tranche : 2147 * \xab le petit trait chrome qui separe les deux, tu l enleves, meme sur telephone 2148 * et au bureau \xbb. 2149 * â ï¸ La lecon est dans la sequence : un separateur DIT que les deux choses sont 2150 * de meme nature et rangees cote a cote â c est du mobilier. Deux voix qui 2151 * parlent n ont pas besoin d etre separees ; l espace suffit, et il ne dit rien. 2152 * La dissymetrie (casse, longueur, construction) fait deja tout le travail que 2153 * le trait pretendait faire. 2154 * â Ne pas le remettre, sous aucune forme â ni degrade, ni filet de lumiere. */ 2155.pm-av-b{margin:0;display:flex;flex-direction:column;align-items:center; 2156 gap:12px;text-align:center} 2157.pm-et{display:flex;gap:4px;line-height:0} 2158/* â 28/08 : ETOILES D UN CRAN PLUS PETITES, ET D UN CRAN SEULEMENT. 2159 Sa phrase : un tout petit peu plus petites. Depart 11 px, montees a 17, 2160 redescendues a 15 : -12 %, toujours +36 % sur le point de depart. Le 2161 TEXTE, lui, ne bouge pas d un dixieme. */ 2162.pm-et svg{fill:#fff;width:15px;height:15px} 2163/* â ï¸ text-wrap:balance â MESURE, PAS COQUETTERIE. Sans lui, la ligne de gauche 2164 rendait a 390 \xab My agent stopped \xbb / \xab inventing \xbb / \xab from scratch. \xbb : une 2165 ligne du milieu de NEUF signes dans une colonne de 161 px, c est-a-dire un 2166 trou au milieu d une citation de trois lignes. Le moteur egalise les trois 2167 longueurs et le trou disparait. Il ne change RIEN au nombre de lignes. */ 2168.pm-av-p{margin:0;font-family:var(--font-sans);font-size:15px; 2169 line-height:1.36;letter-spacing:-.008em;color:#D7DBE2;max-width:22ch; 2170 text-wrap:balance} 2171@media (min-width:900px){ 2172 /* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 2173 * ð´ LA GARDE DU BUREAU SE MESURE EN HAUTEUR D ECRAN, PAS EN PIXELS FIXES.
2174 * Premier essai, 48/34 px fixes : a 1440 x 900 le bouton finissait a 762, 2175 * il restait 138 px â parfait. Mais SON ECRAN EST PLUS COURT QUE LE BANC 2176 * D ESSAI (la note du 23/08 sur .tb-in le dit deja, et on a deja rate un 2177 * defaut pour l avoir oublie). Mesure a 1440 x 768 : bouton a 762, il 2178 * restait SIX pixels. Six pixels ne sont pas une marge, c est un hasard : 2179 * une barre de favoris et l appel a l action passait sous la ligne. 2180 * â La garde est donc proportionnelle a la hauteur, bornee aux deux bouts : 2181 * sur un grand ecran elle prend sa pleine valeur, sur un portable court 2182 * elle rend exactement ce qui manque. Le corps du texte et la taille des 2183 * etoiles, eux, ne bougent PAS â on ne retrecit jamais ce qu il vient de 2184 * demander d agrandir, on ne reprend que du vide. 2185 * ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 2186 .pm-av{padding:clamp(32px,5svh,52px) 0 clamp(22px,3.4svh,36px)} 2187 /* \xab comme si le site etait divise en deux \xbb : chaque bloc est centre dans SA 2188 moitie, donc decale vers l interieur, jamais colle au bord. */ 2189 .pm-av-c{gap:0;padding:0 40px} 2190 .pm-av-b{gap:15px} 2191 /* â ï¸ 40ch, ET C EST UNE MESURE : a 27ch les deux avis repassaient a deux 2192 lignes. Les pull-quotes de getscrapbook tiennent sur UNE ligne, et une 2193 ligne unique se lit comme ce qu on lache, deux lignes comme ce qu on 2194 redige. 44 signes a 18 px = ~365 px, la colonne en fait 550. */ 2195 .pm-av-p{font-size:18px;line-height:1.38;max-width:40ch} 2196 .pm-et{gap:5px} 2197 .pm-et svg{width:18px;height:18px} 2198} 2199`;var M=e.i(42370),j=e.i(31466),k=e.i(74080);function D({saas:e=!1}){let[a,s]=(0,i.useState)(!1),[r,o]=(0,i.useState)(!1);(0,i.useEffect)(()=>o(!0),[]),(0,i.useEffect)(()=>{if(!a)return;let e=e=>{"Escape"===e.key&&s(!1)};document.addEventListener("keydown",e);let t=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",e),document.body.style.overflow=t}},[a]);let l=(0,t.jsxs)(t.Fragment,{children:[a?(0,t.jsx)("div",{className:"tb-mm-voile",onClick:()=>s(!1),"aria-hidden":"true"}):null,(0,t.jsxs)("nav",{id:"tb-mm-panneau",className:"tb-mm-panneau","aria-label":"Site","data-ouvert":a||void 0,inert:!a||void 0,children:[(0,t.jsx)(n.default,{className:e?void 0:"on","aria-current":e?void 0:"page",href:"/",onClick:()=>s(!1),children:"for e-commerce"}),(0,t.jsx)(n.default,{className:e?"on":void 0,"aria-current":e?"page":void 0,href:"/for-saas",onClick:()=>s(!1),children:"for SaaS"}),(0,t.jsx)("a",{href:e?"#scenes":"#components",onClick:()=>s(!1),children:e?"scenes":"what it builds"}),(0,t.jsx)("a",{href:"#pricing",onClick:()=>s(!1),children:"pricing"}),(0,t.jsx)(n.default,{href:"/blog",onClick:()=>s(!1),children:"blog"}),(0,t.jsx)("a",{className:"px",href:"/connexion",onClick:()=>s(!1),children:j.LIBELLE_ACTION})]})]});return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:(0,v.cssServi)(_)}}),(0,t.jsxs)("button",{type:"button",className:"tb-mm-bouton","aria-expanded":a,"aria-controls":"tb-mm-panneau","aria-label":a?"Close menu":"Open menu",onClick:()=>s(e=>!e),children:[(0,t.jsx)("span",{className:"tb-mm-trait","data-ouvert":a||void 0}),(0,t.jsx)("span",{className:"tb-mm-trait","data-ouvert":a||void 0})]}),r?(0,k.createPortal)(l,document.body):null]})}let _=` 2200.tb-mm-bouton{display:none} 2201@media (max-width:899px){ 2202 .tb-mm-bouton{ 2203 display:flex;align-items:center;justify-content:center; 2204 flex-direction:column;gap:5px; 2205 width:40px;height:40px;flex:0 0 auto; 2206 background:transparent;border:0;cursor:pointer; 2207 -webkit-tap-highlight-color:transparent; 2208 } 2209 .tb-mm-trait{ 2210 display:block;width:18px;height:2px;border-radius:2px; 2211 background:var(--claire-encre,#0b0d10); 2212 transition:transform .2s ease,opacity .2s ease; 2213 } 2214 .tb-mm-trait[data-ouvert]:first-child{transform:translateY(3.5px) rotate(45deg)} 2215 .tb-mm-trait[data-ouvert]:last-child{transform:translateY(-3.5px) rotate(-45deg)} 2216} 2217.tb-mm-voile{ 2218 position:fixed;inset:0;z-index:9990;background:rgba(11,13,16,.38); 2219 -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); 2220} 2221.tb-mm-panneau{ 2222 position:fixed;top:0;right:0;bottom:0;z-index:9991; 2223 width:min(78vw,320px); 2224 display:flex;flex-direction:column;gap:2px; 2225 padding:76px 22px 24px; 2226 /* 03/09, RONDE 23 : le panneau suit le site. Mesure sur la production a 2227 390 : 844 px de haut, luminance 13 -- une feuille NOIRE plein ecran qui 2228 s'ouvre par-dessus une page blanche. */ 2229 background:var(--claire-sol); 2230 border-left:1px solid rgba(255,255,255,.1); 2231 transform:translateX(100%); 2232 transition:transform .26s cubic-bezier(.22,.61,.36,1); 2233} 2234.tb-mm-panneau[data-ouvert]{transform:translateX(0)} 2235.tb-mm-panneau a{ 2236 padding:13px 2px;font-size:16px;color:var(--claire-encre-2); 2237 text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08); 2238} 2239.tb-mm-panneau a.on{color:var(--claire-encre);font-weight:600} 2240.tb-mm-panneau a.px{ 2241 margin-top:14px;text-align:center;border:1px solid rgba(255,255,255,.28); 2242 border-radius:999px;background:var(--claire-noir);color:#fff;font-weight:700; 2243}
2244@media (min-width:900px){ 2245 .tb-mm-voile,.tb-mm-panneau{display:none} 2246} 2247`;var V=e.i(91352);let B=(0,j.destination)(j.PLANS[0],"mois"),F=`${V.TOTAL_BOUTIQUE} e-commerce components for your AI, built to convert.`,H=` 2248.tb{ 2249 --tb-noir:var(--claire-sol); --tb-noir-profond:var(--claire-sol); --tb-mur:var(--claire-sol-douce); 2250 --tb-carte:#ffffff; --tb-platine:var(--claire-encre); --tb-encre:var(--claire-encre); 2251 --tb-gris:var(--claire-encre-3); --tb-gris-2:var(--claire-encre-2); --tb-filet:var(--claire-filet); 2252 background:var(--claire-sol); color:var(--claire-encre); 2253} 2254.tb-plug{ position:relative; z-index:5; order:8; } 2255.tb-txt h1{ font-size:clamp(33px,4.15vw,60px); letter-spacing:-0.026em; line-height:0.96; } 2256.tb-chaine{ --ch-h:clamp(23px,5.9vw,30px); --ch-sol:#000000; color:var(--tb-platine); margin-top:24px; margin-bottom:14px; } 2257.tb-chaine-p{ margin:5px 0 0; font-size:clamp(15px,1.05vw,15.5px); line-height:1.4; color:var(--tb-gris); } 2258@media (max-width: 899px){ 2259 .tb-txt .tb-chaine{ order:2; } 2260 .tb{ display:flex; flex-direction:column; } 2261 .tb-hd{ order:1; } 2262 .tb-in{ order:2; } 2263 .pm-av{ order:3; padding:22px 0 26px; } 2264 .tb-hd, .tb-in{ margin-inline:0; width:100%; } 2265 .tb-txt{ padding-bottom:0; } 2266 .tb-cta{ margin-top:26px; } 2267 .tb-plug .mt-note{ display:none; } /* 13/09 : la ligne de commande reste au telephone (Angelo) */ 2268 .tb-plug .mt-barre{ margin-bottom:2px; } 2269} 2270.tb-nv{ font-size:14px; color:var(--tb-gris); } 2271.tb-nv a.on,.tb-nv a:hover{ color:var(--tb-platine); } 2272.tb-nv .px{ border:1px solid var(--claire-noir); background:var(--claire-noir); color:#ffffff; 2273 font-weight:600; font-variant-numeric:tabular-nums; border-radius:999px; 2274 transition:background-color 200ms linear,border-color 200ms linear; } 2275.tb-nv a.px:hover{ background:var(--claire-noir-survol); border-color:var(--claire-noir-survol); color:#ffffff; } 2276.tb-sous-barre{ padding-top:56px; } 2277.tb-sign{ font-size:14px; color:var(--tb-gris-2); display:inline-block; padding-block:15px; margin-block:-15px; } 2278.tb-sign:hover{ color:var(--tb-platine); } 2279.tb-pz{ font-size:14px; color:var(--tb-gris); font-variant-numeric:tabular-nums; } 2280.tb-pz b{ color:var(--tb-encre); font-weight:700; } 2281.tb-plans{ text-decoration:none; padding-bottom:2px; border-bottom:1px solid color-mix(in srgb, currentColor 38%, transparent); } 2282.tb-plans-ancre{ display:none; text-decoration:line-through; color:var(--tb-gris); } 2283.tb-ai{ font-weight:inherit; } 2284@media (min-width:768px){ .tb-ai{ white-space:nowrap; } .tb-plans-ancre{ display:inline-block; } } 2285.tb-plans:hover{ color:var(--tb-platine); border-bottom-color:currentColor; } 2286.tb-in{ position:relative; z-index:1; } 2287.tb-hd::after{ content:""; position:absolute; left:30px; right:30px; bottom:-12px; height:1px; 2288 background:linear-gradient(90deg, rgba(11,13,16,0) 0%, rgba(11,13,16,0.03) 28%, rgba(11,13,16,0.16) 84%, rgba(11,13,16,0) 100%); 2289 pointer-events:none; } 2290.tb-go{ position:relative; isolation:isolate; overflow:hidden; background:var(--claire-noir); color:#ffffff; 2291 font-size:16px; font-weight:700; letter-spacing:-0.004em; } 2292.tb-go::before{ content:""; position:absolute; inset:-40% -14%; z-index:-1; 2293 background:linear-gradient(200deg,var(--claire-noir) 0 21%,var(--claire-noir-survol) 21% 100%); 2294 transition:transform 560ms cubic-bezier(0.22,0.61,0.24,1); } 2295.tb-go:hover{ background:var(--claire-noir); color:#ffffff; } 2296.tb-go:hover::before{ transform:translate3d(13%,0,0); } 2297.tb-go:focus-visible{ outline:2px solid var(--claire-noir); outline-offset:3px; } 2298.tb-go--metal{ position:relative; } 2299.tb-go--metal > .lm-surface{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; 2300 transition:opacity 420ms cubic-bezier(0.22,0.61,0.24,1); } 2301.tb-go--metal > .lm-surface[data-vivant]{ opacity:1; } 2302.tb-go--metal > .lm-surface canvas{ display:block; width:100% !important; height:100% !important; } 2303.tb-go--metal[data-metal]::after{ content:""; position:absolute; inset:2px; z-index:-1; border-radius:inherit; 2304 pointer-events:none; background:linear-gradient(180deg,#202020 0%,#000000 100%); } 2305.tb-go--metal[data-metal], .tb-go--metal[data-metal]:hover{ background:transparent; } 2306.tb-go--metal:active{ transform:translateY(1px); } 2307@media (prefers-reduced-motion:no-preference){ 2308 .tb-sur,.tb-txt h1,.tb-cta{ animation:tb-monte 780ms cubic-bezier(0.22,0.61,0.24,1) both; } 2309 .tb-txt h1{ animation-delay:70ms; } 2310 .tb-cta{ animation-delay:210ms; } 2311 .tb-hd::after{ animation:tb-trait 1200ms cubic-bezier(0.22,0.61,0.24,1) 260ms both; } 2312} 2313@keyframes tb-monte{ from{ opacity:0; transform:translate3d(0,13px,0); } to{ opacity:1; transform:none; } } 2314@keyframes tb-trait{ from{ opacity:0; } to{ opacity:1; } } 2315.tb-in{ align-items:start; min-height:0; row-gap:0; column-gap:0; padding-bottom:0; } 2316.tb-txt{ max-width:none; text-align:center; } 2317.tb-txt h1{ max-width:19ch; margin-inline:auto; } 2318.tb-sur{ margin-inline:auto; } 2319.tb-chaine{ max-width:640px; margin-inline:auto; } 2320.tb-cta{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:16px; } 2321.tb-cta .tb-go{ grid-column:2; } 2322.tb-cta .tb-pz.tb-plans{ grid-column:3; justify-self:start; } 2323.tb-cta .tb-pz.tb-libre{ grid-column:1 / -1; justify-self:center; text-align:center; } 2324@media (min-width:1000px){ 2325 .tb-txt h1{ font-size:clamp(44px,4.4vw,64px); line-height:1.0; letter-spacing:-0.028em; } 2326 .tb-txt{ padding-top:0; padding-bottom:0; } 2327} 2328.tb-sur{ display:inline-flex; align-items:center; gap:8px; margin:0; padding:9px 16px; 2329 border:1px solid var(--claire-filet); border-radius:999px; background:#ffffff; 2330 font-size:13px; font-weight:600; letter-spacing:0; text-transform:none;
2330 color:var(--claire-encre-2); 2331 box-shadow:0 1px 2px rgba(11,13,16,.04); } 2332.tb-sur::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--claire-noir); flex:0 0 auto; } 2333.tb-chaine{ --ch-sol:var(--claire-sol); color:var(--claire-encre); margin-top:26px; margin-bottom:0; 2334 padding-top:22px; border-top:1px solid var(--claire-filet); } 2335.tb-chaine-p{ color:var(--claire-encre-2); } 2336.tb-entree{ padding:48px 0 24px; } 2337.tb-entree:empty{ display:none; } 2338@media (max-width:899px){ .tb-entree{ order:7; } } 2339@media (min-width:1000px){ .tb-entree{ padding:64px 0 0; } .tb-plug{ padding-top:40px; padding-bottom:0; } } 2340`,z=` 2341.hab .tb-in{ display:block; } 2342.hab[data-aplat="gris"]{ --hab-aplat:color-mix(in srgb, var(--claire-sol-douce) 90%, var(--claire-noir)); } 2343.hab[data-aplat="nuit"]{ --hab-aplat:color-mix(in srgb, var(--claire-pastel-bleu-encre) 74%, var(--claire-noir)); } 2344.hab-bloc{ background:var(--hab-aplat); border-radius:var(--claire-rayon-lg); padding:22px 20px 124px; margin-top:12px; } 2345/* la passe de contraste : sur le gris, aucun gris moyen. L'encre 2 est l'encre \xe0 85 % (mesur\xe9 ⥠7:1 2346 sur l'aplat), et elle remplace le gris de service ET le gris de lecture dans le bloc. */ 2347.hab-bloc{ --hab-encre-2:color-mix(in srgb, var(--claire-encre) 85%, #ffffff); 2348 --tb-gris:var(--hab-encre-2); --tb-gris-2:var(--hab-encre-2); } 2349.hab-bloc .tb-sur{ background:#ffffff; color:var(--claire-encre); border-color:var(--claire-filet-fort); padding:7px 14px; } 2350.hab-bloc .tb-txt h1{ color:var(--claire-encre); margin-top:12px; } 2351.hab-bloc .tb-chaine{ --ch-sol:var(--hab-aplat); color:var(--claire-encre); margin-top:18px; padding-top:16px; 2352 border-top-color:var(--claire-filet-fort); } 2353.hab-bloc .tb-chaine-p{ color:var(--hab-encre-2); } 2354.hab-bloc .tb-pz, .hab-bloc .tb-plans{ color:var(--hab-encre-2); } 2355.hab-bloc .tb-pz b{ color:var(--claire-encre); } 2356.hab-bloc .tb-cta{ margin-top:20px; } 2357.hab[data-aplat="nuit"] .hab-bloc{ color:#ffffff; --hab-encre-2:rgba(255,255,255,.9); --tb-encre:#ffffff; --tb-platine:#ffffff; } 2358.hab[data-aplat="nuit"] .hab-bloc .tb-chaine{ color:#ffffff; border-top-color:rgba(255,255,255,.3); } 2359.hab[data-aplat="nuit"] .hab-bloc .tb-txt h1{ color:#ffffff; } 2360.hab[data-aplat="nuit"] .hab-bloc .tb-pz b{ color:#ffffff; } 2361 2362/* ââ LES DEUX TIRAGES â c\xf4te \xe0 c\xf4te \xc0 TOUTES LES LARGEURS, jamais empil\xe9s : 2363 la comparaison n'existe que si les deux \xe9tats sont vus d'un seul regard. 2364 gap 30 (390) / 72 (1440) : c'est l'interstice qui LOGE la fl\xe8che. */ 2365.hab-duo{ position:relative; display:grid; grid-template-columns:1fr 1fr; 2366 gap:30px; margin:-84px auto 0; padding-inline:10px; max-width:820px; } 2367.hab-tirage{ position:relative; margin:0; } 2368.hab-tirage:nth-of-type(2){ margin-top:18px; } 2369/* le tilt est sur le CADRE (l'image) ; la l\xe9gende reste DROITE sous le cadre. 2370 nth-of-type et pas first/last-child : la fl\xe8che (un svg) est aussi enfant du duo. */ 2371/* 13/09, derni\xe8re passe (\xab peaufine les couleurs \xbb) : UN seul gris (l'aplat), UNE encre (les jetons du 2372 site) â filets = --claire-filet / --claire-filet-fort, ombres en encre du site, rien d'interm\xe9diaire. */ 2373.hab-cadre{ background:#ffffff; border-radius:10px; padding:7px 7px 8px; 2374 border:1px solid var(--claire-filet); 2375 box-shadow:0 24px 48px -22px rgba(11,13,16,.38), 0 2px 6px rgba(11,13,16,.06); } 2376.hab-tirage:nth-of-type(1) .hab-cadre{ rotate:-3.5deg; } 2377.hab-tirage:nth-of-type(2) .hab-cadre{ rotate:3deg; } 2378.hab-vue{ display:block; aspect-ratio:1200 / 1070; border-radius:4px; overflow:hidden; background:var(--claire-sol-douce); } 2379.hab-vue img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; } 2380.hab-legende{ display:flex; flex-direction:column; gap:1px; margin:14px 4px 0; text-align:left; } 2381.hab-quoi--long{ display:none; } 2382.hab-quand{ font-size:13px; font-weight:700; line-height:1.25; color:var(--claire-encre); } 2383.hab-quoi{ font-size:12px; line-height:1.3; color:var(--claire-encre-2); } 2384 2385/* ââ LA FL\xc8CHE â un seul trait qui SE DESSINE : queue sur le coin du Before, arc au-dessus des 2386 deux coins, pointe sur le coin du After (pos\xe9 plus bas). T\xeate = deux pattes en arri\xe8re \xe0 \xb128\xb0 2387 de la tangente. pathLength=1 normalise la longueur ; vector-effect garde 2 px d'\xe9paisseur. 2388 G\xe9om\xe9trie mesur\xe9e : \xe0 390 les coins sont \xe0 â5 / +13 px du haut du duo, \xe0 1440 \xe0 â16 / +14 : 2389 la queue (y 34/70) et la pointe (y 62/70) tombent dessus. */ 2390.hab-fleche{ position:absolute; z-index:2; left:50%; top:-25px; translate:-50% 0; 2391 width:60px; height:42px; color:var(--claire-encre); 2392 fill:none; stroke:currentColor; stroke-width:2px; stroke-linecap:round; stroke-linejoin:round; 2393 pointer-events:none; } 2394.hab[data-aplat="nuit"] .hab-fleche{ color:#ffffff; } 2395.hab-fleche path{ vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0; } 2396@media (prefers-reduced-motion:no-preference){ 2397 .hab-fleche path{ stroke-dashoffset:1; animation:hab-trace 900ms cubic-bezier(0.2,0,0,1) 520ms forwards; } 2398 .hab-tirage{ animation:hab-pose 900ms cubic-bezier(0.22,0.61,0.24,1) 160ms both; } 2399 .hab-tirage:nth-of-type(2){ animation-delay:300ms; } 2400} 2401@keyframes hab-trace{ to{ stroke-dashoffset:0; } } 2402@keyframes hab-pose{ from{ opacity:0; translate:0 18px; } to{ opacity:1; translate:0 0; } } 2403 2404@media (min-width:760px){ 2405 /* resserr\xe9 (13/09 soir) : 24 en haut au lieu de 30, marges du titre et de la cha\xeene r\xe9duites, et la 2406 ligne de prix en double retir\xe9e â le haut des tirages monte de ~60 px et entre dans le premier 2407 \xe9cran \xe0 1440\xd7900 (mesur\xe9 : cadres \xe0 y â 540). La garde basse reste 176 : c'est elle qui tient 2408 la fl\xe8che (53 px au-dessus du duo) \xe0 distance du bouton. */ 2409 .hab-bloc{ padding:24px 40px 176px; margin-top:16px; } 2410 .hab-bloc .tb-txt h1{ margin-top:12px; }
2411 .hab-bloc .tb-chaine{ margin-top:18px; padding-top:16px; } 2412 /* 1132 px = le maximum qui tient dans le bloc (1180) avec 24 px d'air de chaque c\xf4t\xe9 â deux cadres 2413 de 530 px (\xab augmente un peu le tirage \xbb). Co\xfbt mesur\xe9 \xe0 1440\xd7900 : les l\xe9gendes passent sous 2414 le pli ; les deux tirages sont visibles \xe0 ~85 % d\xe8s le premier \xe9cran. */ 2415 .hab-duo{ gap:72px; margin-top:-118px; padding-inline:0; max-width:1132px; } 2416 .hab-cadre{ padding:12px; border-radius:14px; } 2417 .hab-tirage:nth-of-type(2){ margin-top:30px; } 2418 .hab-vue{ border-radius:6px; } 2419 .hab-legende{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:12px; margin:18px 6px 0; } 2420 .hab-quoi--long{ display:inline; } .hab-quoi--court{ display:none; } 2421 .hab-quand{ font-size:15px; } 2422 .hab-quoi{ font-size:13px; } 2423 .hab-fleche{ width:110px; height:77px; top:-53px; } 2424} 2425 2426/* ââ ð´ 13/09, 23 h â LA VERSION T\xc9L\xc9PHONE (⤠759 px), ET SEULEMENT ELLE ââââââââââââââââââââââââ 2427 Angelo, sur sa capture : \xab sur t\xe9l\xe9phone c'est assez moche⦠la version PC elle est tr\xe8s bien 2428 comme \xe7a, juste la version t\xe9l\xe9phone tu me la changes \xbb. Audit de la capture : 2429 \xb7 une BO\xceTE grise (rayon 28, 30 px de retrait) pos\xe9e sur un fond gris â deux gris qui se 2430 touchent sans se distinguer, et son bord bas qui coupe les tirages ; 2431 \xb7 deux tirages de 148 px, pench\xe9s, avec deux l\xe9gendes \xe0 deux hauteurs : illisibles, et l'\xe9cart 2432 de 18 px se lit comme un d\xe9faut, pas comme une intention ; 2433 \xb7 un bouton de 200 px flottant au milieu de 330, la ligne de prix soulign\xe9e comme un lien oubli\xe9. 2434 La r\xe9ponse : l'aplat devient une BANDE pleine largeur (plus de bo\xeete : un seul gris, celui de 2435 la bande, et le blanc des cadres qui se d\xe9tache dessus) ; les deux tirages s'EMPILENT droits, 2436 pleine largeur, cadr\xe9s au 4/3 sur le haut de page (l\xe0 o\xf9 la diff\xe9rence se voit), la l\xe9gende en 2437 pastille SUR le cadre (Before en blanc, After en encre : c'est l'After qu'on vend) ; la fl\xe8che 2438 se dresse entre les deux et se dessine toujours ; le bouton prend toute la largeur. Aucune 2439 r\xe8gle au-dessus de 760 px ne bouge. */ 2440@media (max-width:759px){ 2441 .hab-bloc{ margin:0 -30px; border-radius:0; padding:18px 24px 28px; --hab-aplat:var(--claire-sol-douce); } 2442 .hab-bloc .tb-txt h1{ font-size:32px; line-height:1.0; letter-spacing:-0.03em; margin-top:14px; max-width:none; } 2443 .hab-bloc .tb-chaine{ margin-top:20px; padding-top:18px; } 2444 .hab-bloc .tb-cta{ display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:22px; } 2445 .hab-bloc .tb-cta .tb-go{ display:flex; justify-content:center; width:100%; font-size:17px; padding-block:17px; } 2446 /* pas de survol au doigt : le d\xe9grad\xe9 \xe0 deux tons du bouton (fait pour le hover) dessinait un coin sombre \xe0 342 px */ 2447 .hab-bloc .tb-cta .tb-go::before{ background:var(--claire-noir-survol); } 2448 .hab-bloc .tb-cta .tb-pz.tb-plans{ align-self:center; border-bottom:0; } 2449 .hab-bloc .tb-cta .tb-pz.tb-plans:hover{ border-bottom:0; } 2450 2451 .hab-duo{ display:grid; grid-template-columns:1fr; gap:44px; margin:0 -30px; padding:14px 16px 30px; 2452 max-width:none; background:var(--claire-sol-douce); } 2453 .hab-tirage, .hab-tirage:nth-of-type(2){ margin:0; } 2454 .hab-cadre, .hab-tirage:nth-of-type(1) .hab-cadre, .hab-tirage:nth-of-type(2) .hab-cadre{ rotate:0deg; 2455 padding:6px; border-radius:14px; box-shadow:0 18px 40px -20px rgba(11,13,16,.35), 0 1px 3px rgba(11,13,16,.06); } 2456 .hab-tirage:nth-of-type(2) .hab-cadre{ box-shadow:0 26px 50px -22px rgba(11,13,16,.45), 0 1px 3px rgba(11,13,16,.06); } 2457 .hab-vue{ aspect-ratio:4 / 3; border-radius:9px; } 2458 /* la l\xe9gende passe SUR le cadre, en pastille : une ligne, jamais deux hauteurs */ 2459 .hab-legende{ position:absolute; top:16px; left:16px; z-index:1; flex-direction:row; align-items:baseline; gap:6px; 2460 margin:0; padding:7px 12px; border-radius:999px; background:#ffffff; border:1px solid var(--claire-filet-fort); 2461 box-shadow:0 2px 8px rgba(11,13,16,.10); } 2462 .hab-tirage:nth-of-type(2) .hab-legende{ background:var(--claire-noir); border-color:var(--claire-noir); } 2463 .hab-tirage:nth-of-type(2) .hab-quand, .hab-tirage:nth-of-type(2) .hab-quoi{ color:#ffffff; } 2464 .hab-tirage:nth-of-type(2) .hab-quoi{ opacity:.82; } 2465 .hab-quand{ font-size:13px; } 2466 .hab-quoi{ font-size:12px; } 2467 /* la fl\xe8che se dresse : m\xeame trait, tourn\xe9, entre les deux cadres */ 2468 .hab-fleche{ top:50%; left:50%; translate:-50% -50%; rotate:90deg; width:56px; height:40px; } 2469} 2470 2471`,G=[{id:"avant",quand:"Before",quoi:"what your AI builds alone",quoiCourt:"your AI, alone",alt:"The Kelvin product page as an AI builds it alone, on the default Shopify theme: one photo, a title, a price, Add to cart."},{id:"apres",quand:"After",quoi:"with uxgen",quoiCourt:"with uxgen",alt:"The same Kelvin product page built with uxgen: three price tiers, a complete-your-set box, reviews, and one Add to cart."}];e.s(["HeroAvantApres",0,function({aplat:e="gris",entree:s}={}){let r;return(0,t.jsxs)("section",{className:"tb hab","data-comp":"HERO-AVANT-APRES","data-aplat":e,"aria-labelledby":"tb-t",children:[(0,t.jsx)("script",{dangerouslySetInnerHTML:{__html:'try{if(/[?&]chaine=mcp(&|$)/.test(location.search))document.currentScript.parentElement.setAttribute("data-chaine","mcp")}catch(e){}'}}),(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:(0,v.cssServi)(H+z+M.CSS_MENU_COMPTE)}}),(0,t.jsxs)("header",{className:"tb-hd",children:[(0,t.jsx)(a.default,{className:"tb-mark",src:"/marque/uxgen-encre.webp",alt:"uxgen",width:480,height:133,priority:!0}),(0,t.jsxs)("nav",{className:"tb-nv",children:[(0,t.jsx)(n.default,{className:"on","aria-current":"page",href:"/",children:"for e-commerce"}),(0,t.jsx)(n.default,{href:"/for-saas",children:"for SaaS"}),(0,t.jsx)("a",{href:"#components",children:"what it builds"}),(0,t.jsx)("a",{href:"#pricing",children:"pricing"}),(0,t.jsx)(n.default,{href:"/blog",children:"blog"}),(0,t.jsx)("a",{className:"px",href:"/connexion?new=1",children:j.LIBELLE_ACTION})]}),(0,t.jsx)(M.PorteCompte,{className:"tb-sign"}),(0,t.jsx)(D,{})]}),(0,t.jsx)("div",{className:"tb-sous-barre",children:(0,t.jsx)(P,{voie:"ecommerce"})}),(0,t.jsxs)("div",{className:"tb-in",children:[(0,t.jsx)("div",{className:"hab-bloc",children:(0,t.jsxs)("div",{className:"tb-txt",children:[(0,t.jsx)("p",{className:"tb-sur",children:"For Shopify and custom stores"}),(0,t.jsx)("h1",{id:"tb-t",children:F.split("your AI").map((e,a,n)=>(0,t.jsxs)(i.Fragment,{children:[e,a<n.length-1?(0,t.jsx)("b",{className:"tb-ai",children:"your AI"}):null]},a))}),(0,t.jsxs)("div",{className:"tb-chaine",children:[(0,t.jsx)(y,{}),(0,t.jsx)("p",{className:"tb-chaine-p",children:"Your AI builds a
2471store youâre proud to show."})]}),(0,t.jsxs)("div",{className:"tb-cta",children:[(0,t.jsxs)("a",{className:"tb-go tb-go--metal",href:"/connexion?new=1",children:[(0,t.jsx)(f,{}),j.LIBELLE_ACTION,(0,t.jsx)("svg",{viewBox:"0 0 24 24","aria-hidden":"true",children:(0,t.jsx)("path",{d:"M13.2 4 21 11.8 13.2 19.6l-1.7-1.7 4.9-4.9H3v-2.4h13.4l-4.9-4.9L13.2 4Z"})})]}),(0,t.jsx)("a",{className:"tb-pz tb-plans",href:B.href??"#pricing",children:B.href?(r=B.label.indexOf(j.PRIX_ENTREE))<0?B.label:(0,t.jsxs)(t.Fragment,{children:[B.label.slice(0,r),(0,t.jsx)("s",{className:"tb-plans-ancre","data-ancre":"","aria-label":"was "+j.ANCRE_ENTREE,children:j.ANCRE_ENTREE})," ",B.label.slice(r)]}):j.APPEL_ACHAT})]})]})}),(0,t.jsxs)("div",{className:"hab-duo",children:[G.map((e,i)=>(0,t.jsxs)("figure",{className:"hab-tirage",children:[(0,t.jsx)("div",{className:"hab-cadre",children:(0,t.jsx)("div",{className:"hab-vue",children:(0,t.jsx)("img",{src:`/hero-avant-apres/${e.id}-1400.webp`,srcSet:`/hero-avant-apres/${e.id}-700.webp 700w, /hero-avant-apres/${e.id}-1400.webp 1400w`,sizes:"(min-width: 760px) 530px, calc(100vw - 44px)",width:1400,height:1248,alt:e.alt,loading:"eager",fetchPriority:0===i?"high":"auto",decoding:"async"})})}),(0,t.jsxs)("figcaption",{className:"hab-legende",children:[(0,t.jsx)("span",{className:"hab-quand",children:e.quand}),(0,t.jsxs)("span",{className:"hab-quoi",children:[(0,t.jsx)("span",{className:"hab-quoi--long",children:e.quoi}),(0,t.jsx)("span",{className:"hab-quoi--court",children:e.quoiCourt})]})]})]},e.id)),(0,t.jsx)("svg",{className:"hab-fleche",viewBox:"0 0 100 70","aria-hidden":"true",children:(0,t.jsx)("path",{pathLength:1,d:"M6 34C24 12 66 14 92 62M91.9 47 92 62 79.5 53.7"})})]}),(0,t.jsx)("div",{className:"tb-entree",children:s}),(0,t.jsx)("div",{className:"tb-plug",children:(0,t.jsx)(C,{})})]})]})}],9606)},11823,(e,t,i)=>{t.exports=JSON.parse('[{"id":"ABO-01","f":"ABO","quand":"consommable qui se rachète, et SEULEMENT si la remise d\'abonnement est réelle. â Ãconomie nulle","h390":793,"w390":390,"h1440":858,"w1440":1400,"vive":true,"photos":0,"poids":42771,"lignes":772},{"id":"ACHAT-51","f":"ACHAT","quand":"consommable dosé (poudre, gélules, sachets) dont le coût unitaire est l\'argument ; il faut au m","h390":2434,"w390":390,"h1440":1688,"w1440":1400,"vive":true,"photos":15,"poids":69289,"lignes":1123},{"id":"ACHAT-52","f":"ACHAT","quand":"catalogue à parfums, tailles ou coloris nombreux (6 à 12) qu\'on achète PLUSIEURS à la fois ; in","h390":1666,"w390":390,"h1440":887,"w1440":1400,"vive":true,"photos":8,"poids":55337,"lignes":943},{"id":"ACHAT-53","f":"ACHAT","quand":"produit à deux axes de choix (parfum à contenance) vendu aussi en abonnement ; il faut un vrai ","h390":2009,"w390":390,"h1440":1191,"w1440":1400,"vive":true,"photos":9,"poids":51720,"lignes":872},{"id":"ACHAT-54","f":"ACHAT","quand":"produit qu\'il faut CROIRE (soin, complément, hygiène) pour lequel une étude d\'usage réelle exis","h390":1889,"w390":390,"h1440":1329,"w1440":1400,"vive":true,"photos":7,"poids":52623,"lignes":867},{"id":"ACHAT-55","f":"ACHAT","quand":"équipement durable, cher à l\'unité, dont l\'achat bute sur la pose, le coût ou le sentiment de l","h390":1605,"w390":390,"h1440":1058,"w1440":1440,"vive":true,"photos":13,"poids":51110,"lignes":813},{"id":"ACHAT-56","f":"ACHAT","quand":"produit à taille ou à mesure (chaussure, vêtement, dosage) que le client connaît déjà dans un a","h390":1842,"w390":390,"h1440":1121,"w1440":1400,"vive":true,"photos":10,"poids":51434,"lignes":845},{"id":"ACHAT-57","f":"ACHAT","quand":"consommable qui se rachète à intervalle prévisible et dont le marchand veut faire de l\'abonneme","h390":1922,"w390":390,"h1440":1271,"w1440":1440,"vive":true,"photos":9,"poids":52843,"lignes":867},{"id":"ACHAT-58","f":"ACHAT","quand":"lot de 2 à 4 pièces qui se suivent dans l\'usage, dont au moins une se personnalise ; inutile po","h390":1800,"w390":390,"h1440":1136,"w1440":1400,"vive":true,"photos":9,"poids":55149,"lignes":891},{"id":"ACHAT-59","f":"ACHAT","quand":"lot de deux produits proches entre lesquels le client hésite ; le lot a sa propre fiche et son ","h390":2119,"w390":390,"h1440":1349,"w1440":1400,"vive":true,"photos":4,"poids":51425,"lignes":867},{"id":"ACHAT-60","f":"ACHAT","quand":"objet durable, cher à décrire et intime à acheter, dont la donnée te
2471chnique EST l\'argument ; un","h390":2260,"w390":390,"h1440":1429,"w1440":1400,"vive":true,"photos":8,"poids":52928,"lignes":865},{"id":"ACHAT-61","f":"ACHAT","quand":"produit vendu par assortiment (boissons, snacks, échantillons), où le client choisit une COMPOS","h390":1908,"w390":390,"h1440":1226,"w1440":1400,"vive":true,"photos":8,"poids":53136,"lignes":872},{"id":"ACHAT-62","f":"ACHAT","quand":"distribution physique â la marque vend surtout en rayon et la fiche doit router vers un point d","h390":2406,"w390":390,"h1440":1507,"w1440":1440,"vive":true,"photos":7,"poids":62138,"lignes":995},{"id":"ACHAT-70","f":"ACHAT","quand":"mono-produit DURABLE â un objet qu\'on n\'achète qu\'une fois. Il faut au moins un accessoire comp","h390":1971,"w390":390,"h1440":1525,"w1440":1400,"vive":true,"photos":8,"poids":58519,"lignes":904},{"id":"ACTIV-221","f":"ACTIV","quand":"produit en libre-service où le visiteur peut créer un compte sans parler à personne, et où la peur qui bloque l\'inscription n\'est pas le prix mais le TEMPS : « je vais y passer un après-midi ». La pièce répond en montrant la liste entière, chronométrée geste par geste, avant l\'inscription. â Ne se pose PAS sur un outil dont la mise en route passe par un intégrateur ou par une migration de données : afficher « 9 min » devant un déploiement de six semaines détruit la confiance au premier appel, et c\'est la famille PONT qui tient ce rôle.","h390":1460,"w390":390,"h1440":799,"w1440":1400,"vive":true,"photos":0,"poids":50093,"lignes":1123,"voie":"saas","squelettes":["S1","S5"]},{"id":"ANAT-01","f":"ANAT","quand":"objet DURABLE qui a des organes qu\'on ne voit pas sur une photo de catalogue : poches, fixation","h390":1452,"w390":390,"h1440":965,"w1440":1440,"vive":true,"photos":1,"poids":43319,"lignes":751},{"id":"ANIM-01","f":"ANIM","quand":"catalogue photographié pour de vrai, au moins deux prises de vue par produit. S\'il n\'y a qu\'une","h390":2102,"w390":390,"h1440":1052,"w1440":1400,"vive":false,"photos":0,"poids":46765,"lignes":815},{"id":"ANIM-03","f":"ANIM","quand":"photographie d\'ambiance où plusieurs produits sont visibles ensemble. Sans une vraie scène phot","h390":844,"w390":390,"h1440":1376,"w1440":1440,"vive":false,"photos":4,"poids":40073,"lignes":703},{"id":"ANIM-04","f":"ANIM","quand":"un seul chiffre de preuve vérifiable et daté (colis livrés, litres économisés, jours de délai m","h390":608,"w390":390,"h1440":403,"w1440":1400,"vive":true,"photos":0,"poids":41065,"lignes":746},{"id":"ANIM-06","f":"ANIM","quand":"marque qui a de la VRAIE matière photographiée en quantité (atelier, production, clients). Six ","h390":952,"w390":390,"h1440":1197,"w1440":1400,"vive":false,"photos":19,"poids":43706,"lignes":725},{"id":"ANIM-08","f":"ANIM","quand":"argument qui repose sur du vocabulaire de métier que le client ne connaît pas et n\'ira pas cher","h390":1163,"w390":390,"h1440":1005,"w1440":1400,"vive":false,"photos":1,"poids":37870,"lignes":675},{"id":"ANIM-09","f":"ANIM","quand":"une prise de position en cinq lignes, à lire dans l\'ordre â un choix de fabrication assumé, un ","h390":1113,"w390":390,"h1440":607,"w1440":1400,"vive":true,"photos":1,"poids":37031,"lignes":666},{"id":"ANIM-10","f":"ANIM","quand":"trois mesures issues du même dénominateur, vérifiables et datées. Si les trois n\'ont pas la mêm","h390":902,"w390":390,"h1440":535,"w1440":1400,"vive":true,"photos":0,"poids":37516,"lignes":685},{"id":"ANIM-11","f":"ANIM","quand":"trois à cinq collections aux noms courts et distincts, chacune ayant une vraie photographie d\'a","h390":1205,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":4,"poids":37930,"lignes":676},{"id":"ANIM-12","f":"ANIM","quand":"une garantie ou un engagement en trois clauses courtes, à côté d\'un chiffre unique (30 jours, 2","h390":1084,"w390":390,"h1440":639,"w1440":1400,"vive":false,"photos":0,"poids":37378,"lignes":670},{"id":"ANIM-13","f":"ANIM","quand":"deux photographies du MÃME sujet, prises dans les mêmes conditions, à deux dates. Sans mesure c","h390":783,"w390":390,"h1440":673,"w1440":1400,"vive":true,"photos":2,"poids":38780,"lignes":706},{"id":"ANIM-14","f":"ANIM","quand":"un parcours où chaque étape s\'AJOUTE aux précédentes : programme, abonnement, protocole. Si les","h390":2590,"w390":390,"h1440":2112,"w1440":1400,"vive":false,"photos":4,"poids":38779,"lignes":695},{"id":"ANIM-15","f":"ANIM","quand":"galerie d\'ambiance de six photographies où les objets sont achetables. Si les photos ne sont pa","h390":1016,"w390":390,"h1440":1402,"w1440":1400,"vive":true,"photos":6,"poids":39698,"lignes":718},{"id":"ANIM-16","f":"ANIM","quand":"un dossier long, en trois chapitres, qu\'on veut faire lire jusqu\'au bout : fabrication, ingrédi","h390":2234,"w390":390,"h1440":1557,"w1440":1400,"vive":true,"photos":3,"poids":39972,"lignes":717},{"id":"ANIM-17","f":"ANIM","quand":"DEUX prises de vue réelles du même exemplaire sont au disque : le pot ouvert, entier, et le MÃM","h390":1043,"w390":390,"h1440":744,"w1440":1400,"vive":true,"photos":1,"poids":47929,"lignes":878},{"id":"ANIM-18","f":"ANIM","quand":"QUATRE prises de vue réelles du même exemplaire, au même cadrage et au même objectif, sous quat","h390":1067,"w390":390,"h1440":764,"w1440":1400,"vive":true,"photos":4,"poids":54041,"lignes":1010},{"id":"ANNUAIRE-201","f":"ANNUAIRE","quand":"Dès que l\'acheteur utilise déjà une pile d\'outils et qu\'il n\'achètera pas sans savoir si le SIEN est dedans â c\'est le cas de tout outil métier, de toute API, de toute place de marché. On la pose au rang 5 de S2 et au rang 1 de S6, avec data-mode=\\"catalogue\\". â Ne se pose PAS si le produit ne se connecte à rien : un annuaire de trois entrées prouve l\'inverse de ce qu\'on voulait, et un champ de recherche devant trois fiches est une mise en scène. Dans ce cas on nomme les trois en clair, sans filtre.","h390":3400,"w390":390,"h1440":1184,"w1440":1400,"vive":true,"photos":0,"poids":77365,"lignes":1542,"voie":"saas","squelettes":["S2","S4","S6"]},{"id":"ANNUAIRE-202","f":"ANNUAIRE","quand":"Quand l\'acheteur ne cherche pas un nom mais une CHAÃNE : il veut savoir ce qui entre chez lui, ce que le produit en fait, et ce qui ressort. C\'est le rang 8 de S3 â le comité veut voir l\'authentification unique, l\'annuaire du personnel et le journal d\'audit rangés ensemble, pas noyés dans une grille alph
2471abétique â et la variante par métier du rang 5 de S2. â Ne se pose PAS à la place de l\'annuaire cherchable quand le catalogue dépasse une vingtaine d\'entrées : au-delà , ranger ne remplace pas chercher, et quatre piles de quinze fiches redeviennent une liste. Les deux se posent alors à la suite, la pile d\'abord, le champ ensuite.","h390":3400,"w390":390,"h1440":2650,"w1440":1400,"vive":false,"photos":0,"poids":65218,"lignes":1292,"voie":"saas","squelettes":["S2","S3","S6"]},{"id":"ANNUAIRE-221","f":"ANNUAIRE","quand":"le produit s\'insère dans une chaîne d\'outils déjà en place et où la première question de l\'acheteur est « est-ce que ça parle à ce qu\'on a ». C\'est aussi la page d\'entrée organique la plus rentable après le pont de migration : chaque nom cherché est une requête. â Ne se pose PAS quand la liste tient en trois lignes â un champ de recherche au-dessus de cinq tuiles est une machine qui tourne à vide, et le visiteur qui tape un mot dans un annuaire de cinq entrées lit un refus au lieu d\'un catalogue.","h390":2314,"w390":390,"h1440":946,"w1440":1400,"vive":true,"photos":0,"poids":50572,"lignes":1108,"voie":"saas","squelettes":["S2","S4"]},{"id":"APRES-01","f":"APRES","quand":"il existe un objet à forte marge qui se greffe sur ce qui vient d\'être acheté ET que la logisti","h390":1128,"w390":390,"h1440":900,"w1440":1440,"vive":true,"photos":1,"poids":39708,"lignes":713},{"id":"APRES-02","f":"APRES","quand":"le client a un abonnement ACTIF avec une prochaine livraison DATÃE et non expédiée. Aucune de c","h390":1033,"w390":390,"h1440":686,"w1440":1400,"vive":true,"photos":2,"poids":42364,"lignes":749},{"id":"AVIS-70","f":"AVIS","quand":"objet DURABLE dont l\'achat se juge sur plusieurs axes (confort, autonomie, finition, tenue dans","h390":2271,"w390":390,"h1440":1178,"w1440":1400,"vive":true,"photos":5,"poids":55836,"lignes":810},{"id":"BOITE-01","f":"BOITE","quand":"objet DURABLE livré avec plus d\'une pièce. 12/21 des fiches de durable le publient. à poser en ","h390":1730,"w390":390,"h1440":1007,"w1440":1400,"vive":false,"photos":6,"poids":42788,"lignes":734},{"id":"CADRE-51","f":"CADRE","quand":"fiche produit longue : la barre n\'apparaît qu\'APRÃS la sortie de la boîte d\'achat, jamais avant","h390":200,"w390":390,"h1440":194,"w1440":1400,"vive":true,"photos":1,"poids":37810,"lignes":678},{"id":"CADRE-52","f":"CADRE","quand":"produit à variante obligatoire (taille, pointure, coloris) : sans choix l\'ajout n\'a pas de sens","h390":333,"w390":390,"h1440":236,"w1440":1400,"vive":true,"photos":0,"poids":38910,"lignes":685},{"id":"CADRE-53","f":"CADRE","quand":"défaut recommandé du produit : mono-produit ou fiche à une seule offre. Un seul bouton dans tou","h390":350,"w390":390,"h1440":340,"w1440":1400,"vive":true,"photos":0,"poids":36725,"lignes":667},{"id":"CADRE-54","f":"CADRE","quand":"gabarit d\'en-tête par défaut : une marque, un bandeau permanent, quatre entrées de catalogue au","h390":200,"w390":390,"h1440":194,"w1440":1400,"vive":true,"photos":0,"poids":42834,"lignes":752},{"id":"CADRE-56","f":"CADRE","quand":"RÃSERVà aux maisons à plusieurs enseignes (neuf, fins de série, occasion, réparation). Sur une ","h390":844,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":0,"poids":38558,"lignes":676},{"id":"CADRE-59","f":"CADRE","quand":"TOUJOURS, ou presque : 12 boutiques sur 14 portent un bandeau haut permanent. Le premier messag","h390":200,"w390":390,"h1440":194,"w1440":1400,"vive":true,"photos":0,"poids":37654,"lignes":689},{"id":"CADRE-60","f":"CADRE","quand":"pied par défaut. Le nom géant en fin de page est le dernier geste de marque et ne coûte pas une","h390":1126,"w390":390,"h1440":1287,"w1440":1400,"vive":true,"photos":1,"poids":48217,"lignes":844},{"id":"CALCUL-201","f":"CALCUL","quand":"Pose-la quand l\'acheteur arbitre une DÃPENSE et non un outil : il utilise déjà quelque chose, il devra justifier la ligne devant quelqu\'un d\'autre, et le temps perdu est chiffrable en heures. Elle a du sens dès que le produit remplace du travail manuel répétitif. â Ne la pose PAS si le gain n\'est pas convert
2471ible en heures (un produit de goût, une esthétique, un contenu), ni sur une page où le prix n\'est pas affiché : un retour calculé sur un prix caché ne se vérifie pas, et un chiffre invérifiable retourne l\'argument contre vous.","h390":2320,"w390":390,"h1440":1228,"w1440":1400,"vive":true,"photos":0,"poids":71380,"lignes":1448,"voie":"saas","squelettes":["S2","S3"]},{"id":"CALCUL-202","f":"CALCUL","quand":"Pose-la dès que le produit se facture à l\'USAGE et non au siège : requêtes, événements, gigaoctets, minutes, crédits. Elle a du sens quand il existe un volume inclus et au moins deux paliers, parce que c\'est précisément ce qu\'une grille de paliers n\'arrive pas à montrer. â Ne la pose PAS sur un prix par siège â un curseur de sièges n\'apprend rien â, ni sur une page de plateforme d\'entreprise où aucun prix ne doit être affiché.","h390":1627,"w390":390,"h1440":1338,"w1440":1400,"vive":true,"photos":0,"poids":60659,"lignes":1278,"voie":"saas","squelettes":["S4","S5"]},{"id":"CALCUL-221","f":"CALCUL","quand":"logiciel dont le gain se raconte en TEMPS RÃCUPÃRà et dont l\'achat doit être défendu devant quelqu\'un qui n\'a pas vu la démonstration â un directeur, un contrôleur de gestion, un comité d\'achat. La pièce donne au visiteur la phrase qu\'il ira répéter. â Ne se pose PAS sur un produit en libre-service à quelques euros, ni sur un produit dont le gain est un GOÃT : un calculateur qui met un prix sur du plaisir se retourne contre le vendeur, et le visiteur qui trouve un petit chiffre s\'en va au lieu d\'essayer.","h390":1968,"w390":390,"h1440":1207,"w1440":1400,"vive":true,"photos":0,"poids":49275,"lignes":1100,"voie":"saas","squelettes":["S2","S3"]},{"id":"CAPTCHA-01","f":"CAPTCHA","quand":"premier achat à récompenser, code de remise réellement créé et testé en caisse, ET une photogra","h390":980,"w390":390,"h1440":747,"w1440":1400,"vive":true,"photos":1,"poids":65260,"lignes":1135},{"id":"CHOIX-01","f":"CHOIX","quand":"au moins DEUX modèles ou DEUX tailles au catalogue. 4/19 des fiches de durable en posent une en","h390":1333,"w390":390,"h1440":893,"w1440":1400,"vive":true,"photos":3,"poids":43874,"lignes":769},{"id":"CHROME-201","f":"CHROME","quand":"toujours, au rang 0 : c\'est la seule pièce qui ouvre les six squelettes, et la seule qui reste à l\'écran quand tout le reste défile. Elle sert le volet logiciel ET le volet marchand â rien dans sa structure ne suppose une application. â Le RUBAN d\'annonce, lui, ne se pose PAS quand il n\'y a rien de neuf à dire : une pilule qui ne porte aucun fait daté est le tell numéro un d\'une page fabriquée. On retire le nÅud entier, la barre ne bouge pas d\'un pixel.","h390":1503,"w390":390,"h1440":1469,"w1440":1400,"vive":false,"photos":0,"poids":42792,"lignes":988,"voie":"saas","squelettes":["S1","S2","S3","S4","S5","S6"]},{"id":"CHRONO-01","f":"CHRONO","quand":"une promotion qui a une DATE DE FIN décidée à l\'avance et tenue. Si la boutique n\'a pas de date","h390":1124,"w390":390,"h1440":900,"w1440":1440,"vive":true,"photos":1,"poids":44976,"lignes":774},{"id":"CHRONO-02","f":"CHRONO","quand":"opération commerciale datée, portée sur toutes les pages : elle se pose au-dessus de l\'en-tête.","h390":844,"w390":390,"h1440":900,"w1440":1440,"vive":true,"photos":0,"poids":42596,"lignes":751},{"id":"CLAIM-01","f":"CLAIM","quand":"TOUJOURS, ou presque, sur une fiche produit â et le plus tôt possible, juste sous la boîte d\'ac","h390":866,"w390":390,"h1440":409,"w1440":1400,"vive":false,"photos":0,"poids":37172,"lignes":672},{"id":"CLAIM-70","f":"CLAIM","quand":"boutique à PRIX UNIQUE dont la seule mécanique est le seuil de franco. Une seule chose est di","h390":786,"w390":390,"h1440":631,"w1440":1400,"vive":false,"photos":5,"poids":40131,"lignes":744},{"id":"COMPAR-51","f":"COMPAR","quand":"produit plus cher que le rayon, dont l\'écart se démontre par des GRANDEURS relevables (dose, du","h390":1327,"w390":390,"h1440":1131,"w1440":1440,"vive":true,"photos":1,"poids":54233,"lignes":961},{"id":"COMPAR-52","f":"COMPAR","quand":"marque à gamme courte (3 à 5 modèles) dont le visiteur hésite entre deux références ; jamais su","h390":1233,"w390":390,"h1440":1063,"w1440":1400,"vive":true,"photos":3,"poids":45115,"lignes":820},{"id":"COMPAR-53","f":"COMPAR","quand":"gamme de 3 ou 4 modèles dont l\'écart n\'est PAS chiffrable : on compare par le rôle. Si l\'écart ","h390":1269,"w390":390,"h1440":997,"w1440":1400,"vive":false,"photos":4,"poids":39735,"lignes":709},{"id":"COMPAR-54","f":"COMPAR","quand":"gamme de DEUX références, l\'une étant la version complète de l\'autre. Au-delà de deux, prendre ","h390":1132,"w390":390,"h1440":1318,"w1440":1400,"vive":false,"photos":2,"poids":38139,"lignes":691},{"id":"COMPAR-55","f":"COMPAR","quand":"gamme de consommables qui se combinent : le prix à l\'unité de consommation existe et se calcule","h390":1242,"w390":390,"h1440":924,"w1440":1440,"vive":false,"photos":5,"poids":43436,"lignes":767},{"id":"COMPAR-56","f":"COMPAR","quand":"le produit est aussi vendu ailleurs, PLUS CHER, et le prix de l\'autre canal est vérifiable et d","h390":687,"w390":390,"h1440":542,"w1440":1400,"vive":false,"photos":0,"poids":37351,"lignes":683},{"id":"COMPAR-57","f":"COMPAR","quand":"TROIS prises de vue réelles du même exemplaire, de plus en plus près (sur l\'étagère / l\'étiquet","h390":1165,"w390":390,"h1440":847,"w1440":1400,"vive":true,"photos":3,"poids":42357,"lignes":771},{"id":"COMPAR-70","f":"COMPAR","quand":"au moins DEUX modèles du même objet au catalogue. 5/21 des fiches de durable en posent un, cont","h390":1073,"w390":390,"h1440":1136,"w1440":1400,"vive":true,"photos":3,"poids":43394,"lignes":739},{"id":"COMPAR-VID-01","f":"COMPAR","quand":"le produit remplace un GESTE (un outil, une méthode, un ancien modèle) et que la différence se ","h390":844,"w390":390,"h1440":1088,"w1440":1440,"vive":true,"photos":2,"poids":40047,"lignes":704},{"id":"CONF-51","f":"CONF","quand":"entre le titre et le prix d\'une fiche, quand chaque argument peut être apparié à un fait vérifi","h390":659,"w390":390,"h1440":494,"w1440":1400,"vive":false,"photos":0,"poids":36429,"lignes":654},{"id":"CONF-52","f":"CONF","quand":"produit dont la composition ou l\'innocuité est le premier doute, et dont les rapports d\'analyse","h390":1221,"w390":390,"h1440":820,"w1440":1400,"vive":false,"photos":1,"poids":36459,"lignes":643},{"id":"CONF-53","f":"CONF","quand":"produit dont la promesse est forte et vérifiable, et pour lequel une page de démonstration scie","h390":844,"w390":390,"h1440":900,"w1440":1440,"vive":true,"photos":1,"poids":35376,"lignes":633},{"id":"CONF-55","f":"CONF","quand":"collé au bouton d\'achat de toute fiche dont le marchand offre une garantie de reprise chiffrée ","h390":276,"w390":390,"h1440":331,"w1440":1400,"vive":false,"photos":0,"poids":33197,"lignes":601},{"id":"CONF-56","f":"CONF","quand":"sous le bouton d\'une fiche, quand un franco existe et que le marchand publie une grille de frai","h390":416,"w390":390,"h1440":462,"w1440":1400,"vive":true,"photos":0,"poids":39859,"lignes":706},{"id":"CONF-57","f":"CONF","quand":"couture entre deux sections, quand cinq attributs suffisent à qualifier toute la gamme et qu\'au","h390":844,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":0,"poids":37522,"lignes":648},{"id":"CONF-58","f":"CONF","quand":"produit sensible (peau, ingestion, bébé, animal) où ce qui est ABSENT est le premier argument","h390":704,"w390":390,"h1440":618,"w1440":1400,"vive":false,"photos":0,"poids":35623,"lignes":625},{"id":"CONF-59","f":"CONF","quand":"marque à parti pris, sur une catégorie où une croyance répandue est fausse et documentée ; jama","h390":844,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":1,"poids":34428,"lignes":617},{"id":"CONFIANCE-201","f":"CONFIANCE","quand":"Dès que la décision passe par un comité où le RSSI et le juriste ont chacun un droit de veto : la rangée de conformités entre au rang 2, avant même les logos clients, parce qu\'elle est la première chose que l\'équipe sécurité cherche et qu\'elle ne doit pas avoir à défiler pour la trouver. â Ne se pose JAMAIS sur une page grand public en libre-service : personne ne réclame un rapport d\'audit pour suivre ses habitudes, et poser ce mur y fabrique une inquiétude qui n\'existait pas.","h390":2143,"w390":390,"h1440":1056,"w1440":1400,"vive":false,"photos":0,"poids":60502,"lignes":1186,"voie":"saas","squelettes":["S3"]},{"id":"CONFIANCE-202","f":"CONFIANCE","quand":"Se pose au rang 4 dès qu\'un juriste et un acheteur doivent instruire le dossier avant la signature : c\'est la pièce qui remplace les trois allers-retours par courriel que subit tout cycle entreprise, parce qu\'elle nomme chaque document, son régime d\'accès et le DÃLAI de réponse. â Ne se pose pas sur une page où l\'achat se fait à la carte bancaire en trois minutes : une liste de documents contractuels y fabrique une lourdeur qui fait fermer l\'onglet.","h390":3025,"w390":390,"h1440":1638,"w1440":1400,"vive":false,"photos":0,"poids":54864,"lignes":1112,"voie":"saas","squelettes":["S3"]},{"id":"CONFIANCE-203","f":"CONFIANCE","quand":"Se pose au rang 9 d\'un outil métier vendu à une PME, ou en pied de page développeur : le patron veut être rassuré en trois secondes, il n\'instruit pas un dossier. C\'est une BANDE, pas un chapitre â elle tient dans un écran de téléphone et elle renvoie au centre de confiance pour tout le reste. â Ne remplace JAMAIS le mur complet sur une page de plateforme entreprise : devant un comité, une bande de quatre jetons se lit comme une esquive, et le RSSI ira chercher ailleurs.","h390":612,"w390":390,"h1440":368,"w1440":1400,"vive":false,"photos":0,"poids":34029,"lignes":816,"voie":"saas","squelettes":["S2","S4"]},{"id":"CONFIANCE-204","f":"CONFIANCE","quand":"Se pose au rang 6, quand le comité a passé le mur et le centre de confiance et qu\'un ingénieur sécurité veut voir les contrôles un par un : c\'est la pièce qui remplace le questionnaire de sécurité de deux cents lignes qu\'on vous enverra sinon. Elle n\'a de sens que si vous pouvez nommer au moins vingt contrôles réels, avec leur état et leur date. â Ne se pose pas sur une page où personne ne demande de dossier : trente lignes de contrôles devant un acheteur en libre-service se lisent comme une notice de conformité, et il ferme l\'onglet.","h390":1966,"w390":390,"h1440":1229,"w1440":1400,"vive":true,"photos":0,"poids":68910,"lignes":1278,"voie":"saas","squelettes":["S3"]},{"id":"CONFORM-221","f":"CONFORM","quand":"logiciel vendu à une entreprise dont l\'achat passe par un comité â sécurité, juridique, achats â et où la question « où vivent nos données » arrive AVANT la question du prix. Le mur remplace le PDF qu\'on envoie par courriel trois jours plus tard. â Ne se pose PAS sur un outil grand public en libre-service : un cadre de conformité au-dessus de la ligne de flottaison d\'une page à 9 ⬠par mois refroidit une décision qui devait se prendre en trois minutes.","h390":1848,"w390":390,"h1440":860,"w1440":1400,"vive":true,"photos":0,"poids":39597,"lignes":928,"voie":"saas","squelettes":["S2","S3"]},{"id":"CREDIT-201","f":"CREDIT","quand":"â¦quand la page a déjà montré la chose et qu\'il ne reste plus qu\'à la faire croire par quelqu\'un d\'autre que soi. Elle se pose aux trois quarts de la page, jamais au-dessus de la ligne de flottaison : la preuve du haut est un CHIFFRE, la preuve du bas est une PAROLE. Elle vaut pour un logiciel comme pour une marque qui vend un objet â rien dans son vocabulaire n\'est propre à l\'un ou à l\'autre. â Ne se pose PAS devant un acheteur technique qui décide seul en vingt minutes : il lit un avis avec adjectif comme du bruit, et une deuxième démonstration lui vaudrait mieux. â Ne se pose pas non plus si l\'on n\'a pas au moins un avis réservé à montrer : c\'est lui qui fait tenir les autres.","h390":3166,"w390":390,"h1440":1319,"w1440":1400,"vive":false,"photos":0,"poids":43963,"lignes":994,"voie":"saas","squelettes":["S1","S2","S3","S5","S6"]},{"id":"ECHANT-01","f":"ECHANT","quand":"produit à plus de 30 ⬠qu\'on n\'ose pas essayer, dont le format réduit existe VRAIMENT en stock ","h390":1121,"w390":390,"h1440":914,"w1440":1400,"vive":true,"photos":2,"poids":39051,"lignes":699},{"id":"ENTETE-01","f":"ENTETE","quand":"boutique qui veut un haut de page léger et moderne sans dépendre d\'une photo de héros. Le verre","h390":200,"w390":390,"h1440":194,"w1440":1400,"vive":true,"photos":0,"poids":40201,"lignes":706},{"id":"ENTETE-03","f":"ENTETE","quand":"accueil d\'une marque qui a une VRAIE photographie de saison. Sans image forte ce gabarit ne vau","h390":404,"w390":390,"h1440":393,"w1440":1400,"vive":true,"photos":1,"poids":43190,"lignes":729},{"id":"ENTETE-04","f":"ENTETE","quand":"gabarit d\'en-tête à préférer par défaut quand la boutique a plus de six collections : le déplia","h390":200,"w390":390,"h1440":194,"w1440":1400,"vive":true,"photos":1,"poids":45668,"lignes":790},{"id":"FAQ-01","f":"FAQ","quand":"FAQ de fiche produit ou de bas de page, quand les objections sont COURTES et qu\'on veut qu\'elle","h390":2088,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":0,"poids":39883,"lignes":711},{"id":"FAQ-02","f":"FAQ","quand":"boutique dont les objections se rangent en FAMILLES distinctes (le produit / la commande / la l","h390":1020,"w390":390,"h1440":910,"w1440":1400,"vive":true,"photos":1,"poids":47432,"lignes":825},{"id":"FAQ-03","f":"FAQ","quand":"produit DOSà dont chaque ingrédient a une quantité publiable et deux prises de vue (la matière ","h390":1277,"w390":390,"h1440":757,"w1440":1400,"vive":true,"photos":0,"poids":58894,"lignes":1037},{"id":"FAQ-04","f":"FAQ","quand":"formule dont chaque entrée porte un SIGLE court et naturel (C, D3, B12, Zn, Mg, K2) et une quan","h390":908,"w390":390,"h1440":900,"w1440":1440,"vive":true,"photos":0,"poids":45837,"lignes":818},{"id":"FAQ-05","f":"FAQ","quand":"boutique qui a des CHIFFRES à montrer â part de réachat mesurée, tableau de composition, date d","h390":1027,"w390":390,"h1440":706,"w1440":1400,"vive":true,"photos":0,"poids":46747,"lignes":857},{"id":"FAQ-06","f":"FAQ","quand":"FAQ dont les questions se rangent VRAIMENT dans le temps du client (
2471avant la commande, à l\'arri","h390":1168,"w390":390,"h1440":680,"w1440":1400,"vive":true,"photos":1,"poids":40917,"lignes":740},{"id":"FAQS-201","f":"FAQS","quand":"au dernier rang de contenu, quand la page a fini d\'argumenter et qu\'il reste la peur qui empêche de cliquer. Elle sert dans les six squelettes, à une condition : que chaque question soit une objection RÃELLE, écrite comme le visiteur la pense. â Ne se pose PAS si les questions se réduisent à « Qu\'est-ce que [produit] ? » et « Comment ça marche ? » : une FAQ de remplissage ajoute six écrans de défilement entre l\'argument et le bouton, et elle coûte plus qu\'elle ne rapporte. Dans ce cas on supprime la section, on ne la remplit pas. â Dans S3, on retire les questions de prix : une page d\'entreprise n\'en porte aucune.","h390":2994,"w390":390,"h1440":1848,"w1440":1400,"vive":false,"photos":0,"poids":44296,"lignes":978,"voie":"saas","squelettes":["S1","S2","S3","S4","S5","S6"]},{"id":"FINAL-201","f":"FINAL","quand":"â¦toujours, et exactement une fois, au dernier rang de la page. Le parti se choisit sur la façon dont la décision se prend, jamais sur le goût : `libre` quand une personne décide seule et paie tout de suite, `double` quand un patron d\'équipe veut essayer ET voir quelqu\'un le montrer, `humain` quand un comité décide et qu\'aucun prix ne doit apparaître. â Le parti `double` ne se pose PAS sur une page entreprise : « Commencer » et « Essai gratuit » sont des mots qui disent au comité que ce produit n\'est pas fait pour lui. â Le parti `libre` ne se pose pas non plus là où il faut parler à quelqu\'un : un bouton unique sans issue humaine perd l\'acheteur qui a une question et pas de carte.","h390":1733,"w390":390,"h1440":877,"w1440":1400,"vive":true,"photos":0,"poids":50537,"lignes":1105,"voie":"saas","squelettes":["S1","S2","S3","S4","S5","S6"]},{"id":"GARANTIE-01","f":"GARANTIE","quand":"objet DURABLE dont la garantie se compte EN ANNÃES OU à VIE. 8/21 des fiches de durable la chif","h390":1127,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":0,"poids":39460,"lignes":689},{"id":"GRATTE-02","f":"GRATTE","quand":"premier achat à récompenser, code de remise réellement créé et testé en caisse, ET une page qui","h390":1113,"w390":390,"h1440":715,"w1440":1400,"vive":true,"photos":1,"poids":58894,"lignes":1113},{"id":"GRILLE-51","f":"GRILLE","quand":"catalogue rangé par usage, quatre entrées exactement ; exige un produit détourable, sinon le dé","h390":1095,"w390":390,"h1440":1104,"w1440":1400,"vive":false,"photos":0,"poids":42968,"lignes":749},{"id":"GRILLE-52","f":"GRILLE","quand":"catalogue à cinq rayons de poids inégaux ; le rayon le plus large est celui qu\'on veut faire ou","h390":543,"w390":390,"h1440":766,"w1440":1400,"vive":true,"photos":5,"poids":38122,"lignes":657},{"id":"GRILLE-53","f":"GRILLE","quand":"collection large où l\'on veut promettre plus de rayons que l\'écran n\'en montre ; exige au moins","h390":819,"w390":390,"h1440":823,"w1440":1400,"vive":true,"photos":0,"poids":45127,"lignes":760},{"id":"GRILLE-54","f":"GRILLE","quand":"catalogue d\'objets DÃTOURABLES rangés en six familles ; sur une photo de scène la pastille rond","h390":610,"w390":390,"h1440":734,"w1440":1400,"vive":true,"photos":0,"poids":45668,"lignes":750},{"id":"GRILLE-55","f":"GRILLE","quand":"catalogue déclinable en nuances ; reste juste sans note, sans avis et sans prix barré â tous le","h390":910,"w390":390,"h1440":754,"w1440":1400,"vive":false,"photos":8,"poids":39811,"lignes":678},{"id":"GRILLE-56","f":"GRILLE","quand":"catalogue en promotion avec un stock qui se termine ; les deux badges ne se posent que si les d","h390":1212,"w390":390,"h1440":1135,"w1440":1440,"vive":false,"photos":3,"poids":43850,"lignes":738},{"id":"GRILLE-57","f":"GRILLE","quand":"catalogue LARGE (six entrées et plus) qu\'on ne peut pas illustrer entièrement ; le seul composa","h390":844,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":6,"poids":38879,"lignes":658},{"id":"GRILLE-58","f":"GRILLE","quand":"arrivage ou drop à forte charge visuelle, quatre pièces exactement ; exige quatre photos de mêm","h390":723,"w390":390,"h1440":669,"w1440":1400,"vive":false,"photos":4,"poids":37715,"lignes":655},{"id":"GRILLE-59","f":"GRILLE","quand":"accueil d\'une boutique a PLUSIEURS produits, quand on veut vendre depuis l\'accueil sans passer ","h390":3048,"w390":390,"h1440":905,"w1440":1400,"vive":true,"photos":4,"poids":55254,"lignes":854},{"id":"GRILLE-60","f":"GRILLE","quand":"produit cher ou technique où la moitié des visiteurs veut comprendre avant d\'acheter ; inutile ","h390":1075,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":3,"poids":38523,"lignes":672},{"id":"GUIDE-51","f":"GUIDE","quand":"produit dont l\'usage se fait de DEUX façons également valables (froid/chaud, matin/soir, seul/e","h390":957,"w390":390,"h1440":952,"w1440":1400,"vive":true,"photos":6,"poids":44406,"lignes":803},{"id":"GUIDE-52","f":"GUIDE","quand":"gamme dont les références s\'emploient DANS UN ORDRE (soin, entretien, préparation). Sans ordre ","h390":940,"w390":390,"h1440":799,"w1440":1400,"vive":true,"photos":5,"poids":46689,"lignes":861},{"id":"GUIDE-55","f":"GUIDE","quand":"produit à POSER ou à installer, dont l\'objection dominante est « je ne saurai pas le faire ». L","h390":1359,"w390":390,"h1440":1033,"w1440":1400,"vive":true,"photos":2,"poids":42386,"lignes":755},{"id":"GUIDE-56","f":"GUIDE","quand":"entrée de boutique ou page de collection, quand une remise réelle existe ET qu\'une segmentation","h390":844,"w390":390,"h1440":900,"w1440":1440,"vive":true,"photos":0,"poids":40390,"lignes":745},{"id":"GUIDE-57","f":"GUIDE","quand":"produit dont l\'essentiel est INVISIBLE sur la photo (couches, capteurs, renforts) et dont chaqu","h390":1094,"w390":390,"h1440":1453,"w1440":1400,"vive":true,"photos":0,"poids":47198,"lignes":871},{"id":"GUIDE-58","f":"GUIDE","quand":"produit dont la valeur tient à QUATRE choix de matière mesurables. Sans grandeur chiffrée sous ","h390":1071,"w390":390,"h1440":985,"w1440":1400,"vive":false,"photos":1,"poids":37322,"lignes":682},{"id":"HERO-01","f":"HERO","quand":"produit cher et technique qu\'il faut CROIRE avant de vouloir : trois grandeurs vérifiables, cha","h390":1049,"w390":390,"h1440":965,"w1440":1400,"vive":false,"photos":1,"poids":38710,"lignes":681},{"id":"HERO-02","f":"HERO","quand":"marque SANS shooting : on n\'a que le packshot détouré. C\'est le héros de repli quand la photogr","h390":1044,"w390":390,"h1440":773,"w1440":1400,"vive":false,"photos":4,"poids":40693,"lignes":700},{"id":"HERO-03","f":"HERO","quand":"marque dont le NOM est l\'argument (mode, parfum, sport) et qui possède un détourage propre du p","h390":608,"w390":390,"h1440":776,"w1440":1400,"vive":false,"photos":1,"poids":35276,"lignes":635},{"id":"HERO-04","f":"HERO","quand":"produit de geste quotidien, marque qui a déjà des clients à montrer : la preuve sociale ouvre l","h390":1075,"w390":390,"h1440":772,"w1440":1400,"vive":false,"photos":4,"poids":37709,"lignes":669},{"id":"HERO-05","f":"HERO","quand":"produit d\'artisan ou de lot : le sceau porte une rareté VRAIE (numéro de lot, quantité produite","h390":844,"w390":390,"h1440":900,"w1440":1440,"vive":true,"photos":1,"poids":36608,"lignes":657},{"id":"HERO-06","f":"HERO","quand":"produit dont le résultat SE VOIT et se photographie (soin, entretien, rénovation, jardin). Inte","h390":798,"w390":390,"h1440":935,"w1440":1400,"vive":true,"photos":2,"poids":37494,"lignes":673},{"id":"HERO-07","f":"HERO","quand":"série réellement limitée (lot de matière, production d\'atelier, précommande fermée). INTERDIT s","h390":1004,"w390":390,"h1440":984,"w1440":1440,"vive":true,"photos":3,"poids":38866,"lignes":687},{"id":"HERO-08","f":"HERO","quand":"produit d\'usage long dont l\'objection est « est-ce que ça tient ? » : un avis entier, daté et r","h390":1058,"w390":390,"h1440":892,"w1440":1400,"vive":false,"photos":2,"poids":38408,"lignes":670},{"id":"HERO-09","f":"HERO","quand":"produit qui se décide sur des CARACTÃRISTIQUES vérifiables (dimensions, garantie, délai). La ca","h390":950,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":1,"poids":39897,"lignes":693},{"id":"HERO-10","f":"HERO","quand":"marque qui a BEAUCOUP d\'images et peu à dire dans le premier écran : atelier, collection, savoi","h390":640,"w390":390,"h1440":739,"w1440":1400,"vive":true,"photos":19,"poids":45191,"lignes":706},{"id":"HERO-12","f":"HERO","quand":"pièce unique ou pièce forte que la PHOTO vend à elle seule (mode, mobilier, objet). Le prix éta","h390":743,"w390":390,"h1440":700,"w1440":1400,"vive":false,"photos":1,"poids":35805,"lignes":645},{"id":"HERO-13","f":"HERO","quand":"produit acheté sur un besoin déjà formé, où ce qui bloque n\'est pas l\'envie mais trois question","h390":884,"w390":390,"h1440":786,"w1440":1400,"vive":false,"photos":1,"poids":37476,"lignes":667},{"id":"HERO-14","f":"HERO","quand":"produit unique qui sert à PLUSIEURS choses, et marque qui a cinq prises de vue distinctes. Sans","h390":663,"w390":390,"h1440":732,"w1440":1400,"vive":true,"photos":5,"poids":41771,"lignes":730},{"id":"HERO-15","f":"HERO","quand":"objet dont la valeur est dans les DÃTAILS de fabrication et qui existe en détourage propre. Int","h390":842,"w390":390,"h1440":946,"w1440":1400,"vive":true,"photos":1,"poids":39077,"lignes":713},{"id":"HERO-16","f":"HERO","quand":"produit à VARIANTES visibles (coloris, matières, formats) dont chacune se photographie. Jamais ","h390":920,"w390":390,"h1440":701,"w1440":1400,"vive":true,"photos":3,"poids":41423,"lignes":746}
2471,{"id":"HERO-51","f":"HERO","quand":"marque de vêtement ou d\'objet à forte photographie, une seule promesse à porter ; la section qu","h390":903,"w390":390,"h1440":768,"w1440":1400,"vive":false,"photos":1,"poids":34445,"lignes":609},{"id":"HERO-53","f":"HERO","quand":"marque d\'objet durable qui veut une page en PILE D\'OBJETS plutôt qu\'en bandes ; convient quand ","h390":990,"w390":390,"h1440":836,"w1440":1400,"vive":false,"photos":1,"poids":34830,"lignes":611},{"id":"HERO-54","f":"HERO","quand":"produit dont le GESTE se filme (verser, tartiner, ouvrir) et marque prête à mettre deux mots en","h390":727,"w390":390,"h1440":934,"w1440":1400,"vive":true,"photos":1,"poids":35895,"lignes":635},{"id":"HERO-55","f":"HERO","quand":"objet PETIT et cher dont la photographie ne peut pas tenir un plein bord : l\'échelle du titre r","h390":747,"w390":390,"h1440":1005,"w1440":1400,"vive":false,"photos":1,"poids":35040,"lignes":620},{"id":"HERO-56","f":"HERO","quand":"marque INSTALLÃE, forte photographie de paysage ou d\'usage ; jamais pour une marque inconnue â ","h390":939,"w390":390,"h1440":932,"w1440":1400,"vive":false,"photos":1,"poids":34919,"lignes":611},{"id":"HERO-57","f":"HERO","quand":"boutique de mode ou de saison qui a VRAIMENT deux ou trois offres à porter en même temps ; jama","h390":778,"w390":390,"h1440":727,"w1440":1400,"vive":true,"photos":3,"poids":38704,"lignes":678},{"id":"HERO-58","f":"HERO","quand":"boutique à plusieurs univers ou catégories dès le premier écran ; exige au moins quatre entrées","h390":698,"w390":390,"h1440":854,"w1440":1400,"vive":true,"photos":4,"poids":38153,"lignes":667},{"id":"HERO-59","f":"HERO","quand":"produit qui se photographie en scène large (cuisine, atelier, intérieur) et dont la promesse ti","h390":709,"w390":390,"h1440":780,"w1440":1400,"vive":false,"photos":1,"poids":34997,"lignes":617},{"id":"HERO-60","f":"HERO","quand":"produit cher qu\'il faut CROIRE avant de vouloir : trois grandeurs vérifiables tiennent le premi","h390":885,"w390":390,"h1440":868,"w1440":1400,"vive":false,"photos":1,"poids":35527,"lignes":628},{"id":"HERO-62","f":"HERO","quand":"produit à DÃCOUVERTE LENTE (abonnement, format inhabituel, marque nouvelle) qui a besoin de l\'a","h390":899,"w390":390,"h1440":1026,"w1440":1400,"vive":true,"photos":1,"poids":36888,"lignes":646},{"id":"HERO-63","f":"HERO","quand":"on a UNE photographie forte, large, où le sujet vit au centre-droit et les quatre coins restent","h390":1048,"w390":390,"h1440":661,"w1440":1400,"vive":false,"photos":5,"poids":41135,"lignes":670},{"id":"HERO-64","f":"HERO","quand":"catalogue à TROIS familles qui se valent, dont aucune ne mérite d\'écraser les deux autres en ha","h390":640,"w390":390,"h1440":700,"w1440":1400,"vive":true,"photos":4,"poids":42707,"lignes":740},{"id":"HERO-65","f":"HERO","quand":"trois offres à présenter en haut de page â trois produits, trois formats, trois moments d\'usage","h390":1163,"w390":390,"h1440":807,"w1440":1400,"vive":true,"photos":3,"poids":53839,"lignes":835},{"id":"HERO-70","f":"HERO","quand":"marque de vêtement ou d\'accessoire PORTÃ, dont l\'objection n\'est pas le prix mais « est-ce que","h390":441,"w390":390,"h1440":831,"w1440":1400,"vive":true,"photos":3,"poids":50709,"lignes":948},{"id":"HEROS-201","f":"HEROS","quand":"premier écran d\'un produit dont l\'objet vendu EST une interface dense â une console d\'exploitation, une plateforme, un outil métier â et dont l\'acheteur veut voir la matière avant de lire une promesse. La fenêtre applicative doit dépasser le bas de l\'écran : c\'est une affaire de CONTENU (huit lignes de liste au minimum), jamais de CSS. â Ne se pose PAS sur un produit dont la sortie est une image, un texte ou un son : là c\'est la SORTIE qu\'on montre en grand, pas la console qui l\'a produite, et c\'est HEROS-202 ou une galerie qui tient ce rang. â Ne se pose pas non plus quand la promesse tient en trois mots et qu\'un seul bouton suffit : ce héros porte deux appels, il suppose une décision à plusieurs.","h390":1346,"w390":390,"h1440":875,"w1440":1400,"vive":false,"photos":0,"poids":53828,"lignes":1154,"voie":"saas","squelettes":["S2","S3","S4","S6"]},{"id":"HEROS-202","f":"HEROS","quand":"premier écran d\'un produit en libre-service, décidé par UNE personne, seule, en trois minutes, avec sa carte déjà dans la poche. Sa seule objection n\'est pas le prix, c\'est « est-ce que ça va être pénible ? » â d\'où un seul bouton et trois réassurances collées dessous, jamais un second appel qui ouvrirait une deuxième décision. â Ne se pose PAS sur une vente assistée ni sur une plateforme d\'entreprise : « sans carte bancaire » y sonne comme un jouet, et un comité qui doit dire oui à cinq n\'a que faire d\'une résiliation en un clic. â Ne se pose pas non plus quand l\'application est trop maigre pour donner trois fragments lisibles : deux morceaux qui flottent valent mieux qu\'un troisième vide.","h390":1774,"w390":390,"h1440":911,"w1440":1400,"vive":false,"photos":0,"poids":44879,"lignes":1024,"voie":"saas","squelettes":["S1","S5"]},{"id":"KIT-01","f":"KIT","quand":"objet DURABLE autour duquel gravitent au moins trois pièces RÃELLEMENT compatibles (qui se fixe","h390":1240,"w390":390,"h1440":1103,"w1440":1400,"vive":true,"photos":5,"poids":45902,"lignes":796},{"id":"KIT-02","f":"KIT","quand":"boutique à PLUSIEURS références interchangeables (soin, épicerie, café, bougies, snack) où l\'on","h390":2567,"w390":390,"h1440":1913,"w1440":1400,"vive":true,"photos":5,"poids":74690,"lignes":1222},{"id":"LIVRAISON-01","f":"LIVRAISON","quand":"TOUJOURS, et TOUJOURS JUSTE SOUS LA BOÃTE D\'ACHAT â durable comme consommable. C\'est la bande q","h390":1135,"w390":390,"h1440":751,"w1440":1400,"vive":false,"photos":0,"poids":41981,"lignes":718},{"id":"LOGOS-201","f":"LOGOS","quand":"â¦quand l\'acheteur décide en comité ou en équipe, qu\'il achète pour son MÃTIER, et que la première chose qu\'il cherche est quelqu\'un qui lui ressemble. Le secteur écrit sous chaque nom est la raison d\'être de la pièce : sans lui, huit noms inconnus ne valent rien et il vaut mieux poser une bande de chiffres. â Ne se pose JAMAIS dans S1 : un particulier qui suit ses habitudes ne se reconnaît dans aucune entreprise, et un mur de clients lui dit « ce produit n\'est pas pour vous ». â Ne se pose pas non plus si les noms ne parlent à personne ET qu\'aucun secteur n\'est écrit.","h390":913,"w390":390,"h1440":626,"w1440":1400,"vive":false,"photos":8,"poids":44137,"lignes":993,"voie":"saas","squelettes":["S2","S3","S6"]}
2471,{"id":"MEDIA-51","f":"MEDIA","quand":"produit visuel dont la SECONDE prise de vue vend (vêtement porté, matière, intérieur d\'un objet","h390":717,"w390":390,"h1440":1063,"w1440":1400,"vive":true,"photos":7,"poids":39081,"lignes":678},{"id":"MEDIA-52","f":"MEDIA","quand":"section de récit ou de fabrication à trois images ; exige trois photos de même cadrage et de mê","h390":781,"w390":390,"h1440":589,"w1440":1400,"vive":false,"photos":3,"poids":36886,"lignes":654},{"id":"MEDIA-53","f":"MEDIA","quand":"fiche produit où trois REGISTRES photographiques différents existent vraiment ; avec trois phot","h390":850,"w390":390,"h1440":1175,"w1440":1400,"vive":true,"photos":3,"poids":37394,"lignes":651},{"id":"MEDIA-54","f":"MEDIA","quand":"produit polyvalent dont les usages sont des VERBES ; avec des noms de fonctionnalités la nuée n","h390":1019,"w390":390,"h1440":906,"w1440":1400,"vive":false,"photos":1,"poids":35035,"lignes":618},{"id":"MEDIA-55","f":"MEDIA","quand":"quatre faits de réassurance VRAIS à répéter en haut ou en bas de page ; avec moins de trois mes","h390":200,"w390":390,"h1440":194,"w1440":1400,"vive":true,"photos":0,"poids":43641,"lignes":737},{"id":"MEDIA-56","f":"MEDIA","quand":"cinq vues et plus d\'un même produit en situation ; en dessous de cinq, la barre de proportion n","h390":616,"w390":390,"h1440":718,"w1440":1400,"vive":true,"photos":6,"poids":39279,"lignes":680},{"id":"MEDIA-57","f":"MEDIA","quand":"deux questions récurrentes à renvoyer vers deux pages hors flux (guide, fiche matière, notice) ","h390":1023,"w390":390,"h1440":846,"w1440":1400,"vive":false,"photos":2,"poids":35948,"lignes":629},{"id":"MEDIA-58","f":"MEDIA","quand":"produit dont le RÃSULTAT se photographie (teint, cheveux, peau, surface traitée) ; sans photo d","h390":1003,"w390":390,"h1440":966,"w1440":1400,"vive":false,"photos":4,"poids":38440,"lignes":656},{"id":"MONTE-221","f":"MONTE","quand":"abonnement à paliers facturé au cycle, où la montée en gamme se fait EN COURS DE PÃRIODE et où le débit du jour n\'est donc pas le prix affiché du palier. La pièce se pose là où le palier est déjà choisi et où il ne reste qu\'une peur : être débité deux fois. â Ne se pose PAS sur un produit à paiement unique, à crédits prépayés, ou dont la montée en gamme ne prend effet qu\'au renouvellement : il n\'y a alors pas de prorata, et en fabriquer un pour faire joli invente une facture qui n\'existera jamais.","h390":2036,"w390":390,"h1440":862,"w1440":1400,"vive":true,"photos":0,"poids":47465,"lignes":1074,"voie":"saas","squelettes":["S2","S4"]},{"id":"MUR-221","f":"MUR","quand":"outil qui produit de la DONNÃE â rapport, tableau de comptes, relevé, export â et dont le palier payant ouvre du VOLUME plutôt qu\'une fonction. Le verrou se pose là où la donnée est déjà à l\'écran : on montre la forme, on compte ce qui manque, on nomme l\'échange. â Ne se pose PAS sur un produit dont le palier payant ouvre une FONCTION (un rôle, une intégration, un domaine) : il n\'y a alors rien à estomper, et un verrou posé sur une liste de fonctionnalités n\'est qu\'une grille tarifaire déguisée.","h390":1794,"w390":390,"h1440":1276,"w1440":1400,"vive":true,"photos":0,"poids":51657,"lignes":1098,"voie":"saas","squelettes":["S1","S5"]},{"id":"MUR-222","f":"MUR","quand":"produit en libre-service qui ouvre par un essai gratuit et dont la fin d\'essai est un MUR : l\'utilisateur revient, il a travaillé, et il ne sait pas si son travail existe encore. La pièce se pose sur l\'écran de reprise, ou en tête du volet tarifaire servi à un ancien essayeur. â Ne se pose PAS sur un produit dont l\'essai n\'a rien produit â un outil de lecture, un tableau de bord branché sur une source extérieure : il n\'y a alors aucun travail à conserver, et promettre d\'en garder un est un mensonge que le premier clic démonte.","h390":1275,"w390":390,"h1440":1100,"w1440":1400,"vive":true,"photos":0,"poids":37125,"lignes":882,"voie":"saas","squelettes":["S1","S5"]},{"id":"ORIGINE-01","f":"ORIGINE","quand":"la page dit tout du produit et rien du vendeur. à poser une seule fois, après la preuve et avan","h390":890,"w390":390,"h1440":643,"w1440":1400,"vive":false,"photos":1,"poids":37609,"lignes":691},{"id":"ORIGINE-02","f":"ORIGINE","quand":"boutique dont une PERSONNE RÃELLE est à l\'origine et accepte d\'être nommée et photographiée. Se","h390":803,"w390":390,"h1440":618,"w1440":1400,"vive":false,"photos":1,"poids":36561,"lignes":672},{"id":"ORIGINE-03","f":"ORIGINE","quand":"marque qui a au moins TROIS dates réelles à donner et un fait vérifiable derrière chacune. Se p","h390":1056,"w390":390,"h1440":725,"w1440":1400,"vive":false,"photos":0,"poids":38668,"lignes":723},{"id":"ORIGINE-04","f":"ORIGINE","quand":"le produit porte une mention d\'origine (fabriqué / assemblé / conditionné quelque part) et le m","h390":1389,"w390":390,"h1440":660,"w1440":1400,"vive":false,"photos":2,"poids":38296,"lignes":693},{"id":"PALIER-51","f":"PALIER","quand":"consommable dont l\'effet demande une durée, et dont le lot se photographie (1, 2, 3 unités visi","h390":842,"w390":390,"h1440":624,"w1440":1400,"vive":false,"photos":3,"poids":41997,"lignes":750},{"id":"PALIER-52","f":"PALIER","quand":"catalogue à plusieurs formats du même produit, où le lot doit se comparer à l\'unité ligne à lig","h390":914,"w390":390,"h1440":828,"w1440":1400,"vive":true,"photos":6,"poids":47985,"lignes":870},{"id":"PALIER-53","f":"PALIER","quand":"boutique dont les lots ont assez d\'avis pour se noter séparément ; INTERDIT sur une page qui a ","h390":1481,"w390":390,"h1440":947,"w1440":1400,"vive":false,"photos":0,"poids":46731,"lignes":799},{"id":"PALIER-54","f":"PALIER","quand":"une option payante existe vraiment (gravure, broderie, coffret) et allonge le délai ; sinon le ","h390":434,"w390":390,"h1440":434,"w1440":1400,"vive":true,"photos":2,"poids":41263,"lignes":743},{"id":"PALIER-56","f":"PALIER","quand":"la boutique a un abonnement livré à date connue ; le bloc se rend INVISIBLE hors abonné actif, ","h390":451,"w390":390,"h1440":394,"w1440":1400,"vive":true,"photos":0,"poids":40510,"lignes":728},{"id":"PALIER-57","f":"PALIER","quand":"l\'unité de vente de la fiche est un LOT ; sur une fiche à l\'unité la ligne n\'a aucun sens et ne","h390":220,"w390":390,"h1440":214,"w1440":1400,"vive":false,"photos":2,"poids":34742,"lignes":628},{"id":"PALIER-58","f":"PALIER","quand":"il existe deux compléments réels au produit, et un lot des deux moins cher que la somme","h390":632,"w390":390,"h1440":420,"w1440":1400,"vive":true,"photos":4,"poids":42013,"lignes":755},{"id":"PALIER-59","f":"PALIER","quand":"le barème porte sur le PANIER et les références sont mélangeables ; sur un mono-produit il n\'a ","h390":844,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":0,"poids":37976,"lignes":679},{"id":"PALIER-61","f":"PALIER","quand":"les objets offerts existent vraiment au catalogue avec un prix opposable ; sinon le bloc ne se ","h390":481,"w390":390,"h1440":541,"w1440":1400,"vive":true,"photos":2,"poids":37469,"lignes":673},{"id":"PALIER-62","f":"PALIER","quand":"l\'abonnement est vraiment moins cher ; si l\'économie est nulle la carte NE SE POSE PAS","h390":700,"w390":390,"h1440":789,"w1440":1400,"vive":false,"photos":1,"poids":40643,"lignes":730},{"id":"PALIER-63","f":"PALIER","quand":"le produit a une POSOLOGIE â une durée d\'usage par contenant â et l\'abonnement est réellement m","h390":636,"w390":390,"h1440":589,"w1440":1400,"vive":true,"photos":0,"poids":39843,"lignes":719},{"id":"PALIER-65","f":"PALIER","quand":"un produit qui se vend par lots de 1 / 3 / 6 (ou 2 / 4), ET une photographie DÃTOURÃE d\'une seu","h390":1187,"w390":390,"h1440":849,"w1440":1400,"vive":true,"photos":1,"poids":57359,"lignes":1109},{"id":"PANIER-01","f":"PANIER","quand":"toute boutique à plus d\'un article vendable, et OBLIGATOIRE dès qu\'un seuil de franco existe : ","h390":1167,"w390":390,"h1440":1205,"w1440":1400,"vive":true,"photos":5,"poids":51710,"lignes":871},{"id":"PANIER-02","f":"PANIER","quand":"l\'état par défaut du tiroir de PANIER-01, à servir tant qu\'aucune ligne n\'existe. Obligatoire d","h390":1690,"w390":390,"h1440":1132,"w1440":1400,"vive":true,"photos":4,"poids":49593,"lignes":838},{"id":"PANIER-03","f":"PANIER","quand":"un seuil de franco existe ET le panier moyen est en dessous. Si le seuil est déjà c
2471ouvert par u","h390":1364,"w390":390,"h1440":895,"w1440":1400,"vive":true,"photos":1,"poids":46321,"lignes":797},{"id":"PANIER-04","f":"PANIER","quand":"boutique avec un seuil de livraison offerte RÃEL, et un produit qui se compte en boîtes. Sans s","h390":1132,"w390":390,"h1440":908,"w1440":1400,"vive":true,"photos":2,"poids":55736,"lignes":1001},{"id":"PARRAIN-201","f":"PARRAIN","quand":"Posez-la dès qu\'un produit accepte que d\'autres le vendent à sa place : place de marché, outil grand public, produit à crédits. Elle ne s\'adresse PAS au client, elle s\'adresse à quelqu\'un qui compare votre programme à trois autres et qui ne regarde que deux choses â le taux et la date de versement. â Ne la posez pas si le programme n\'a ni seuil, ni jour de versement, ni durée de commission écrits : cette section les affiche, et une page d\'affiliation sans ces trois nombres se lit comme un piège.","h390":3400,"w390":390,"h1440":2192,"w1440":1400,"vive":true,"photos":0,"poids":68136,"lignes":1368,"voie":"saas","squelettes":["S1","S5","S6"]},{"id":"PARRAIN-202","f":"PARRAIN","quand":"Posez-la sur toute place de marché où quelqu\'un d\'autre publie ce qui est vendu : modèles, extensions, contenus, prestations. Elle ne recrute pas l\'acheteur, elle recrute celui qui remplit le catalogue â et il ne se décide que sur trois choses : ce qu\'il garde, ce qu\'il doit fournir, et ce qu\'il verra une fois publié. â Ne la posez pas sur un catalogue à côté unique : sans deuxième population à recruter, cette section parle à personne et allonge la page pour rien.","h390":3400,"w390":390,"h1440":2325,"w1440":1400,"vive":false,"photos":0,"poids":58963,"lignes":1193,"voie":"saas","squelettes":["S6"]},{"id":"PARRAIN-221","f":"PARRAIN","quand":"produit dont les clients se recrutent entre pairs â outil d\'équipe, produit de métier, abonnement à crédits â et où le parrainage est un vrai poste d\'acquisition, pas un badge. La pièce se pose quand la question n\'est plus « est-ce que je recommande » mais « est-ce que je serai payé, combien, et quand ». â Ne se pose PAS sur un produit vendu à des acheteurs concurrents entre eux, ni sur un logiciel dont le cycle de vente dure six mois : un relevé de gains qui n\'a rien à afficher avant deux trimestres se lit comme une promesse vide.","h390":2208,"w390":390,"h1440":1435,"w1440":1400,"vive":true,"photos":0,"poids":56228,"lignes":1198,"voie":"saas","squelettes":["S1","S6"]},{"id":"PIED-01","f":"PIED","quand":"pied par défaut d\'une boutique qui a une couleur de maison et une liste e-mail à nourrir. Le mo","h390":1236,"w390":390,"h1440":900,"w1440":1440,"vive":true,"photos":0,"poids":47310,"lignes":799},{"id":"PIED-02","f":"PIED","quand":"boutique qui vend un produit dont l\'origine compte, ou qui livre à l\'international. Le sélecteu","h390":1299,"w390":390,"h1440":814,"w1440":1400,"vive":true,"photos":0,"poids":44914,"lignes":782},{"id":"PIED-70","f":"PIED","quand":"boutique de mode dont le pied doit SIGNER : bloc sombre arrondi, nom de la maison coupé en bas","h390":658,"w390":390,"h1440":564,"w1440":1400,"vive":true,"photos":0,"poids":52097,"lignes":1050},{"id":"PLANS-201","f":"PLANS","quand":"au rang tarifs d\'une page qui vend en libre-service ou par essai : deux à quatre paliers, un prix affiché, une cadence mensuelle et une cadence annuelle. C\'est la pièce qui remplace la grille générique quand on veut que la bascule annuelle serve à quelque chose. â Ne se pose JAMAIS dans S3 : sur une page d\'entreprise, un prix affiché fait comparer sur une ligne de tableur au lieu d\'un appel â le squelette S3 interdit le prix, palier, « à partir de » et curseur compris. â Ne se pose pas non plus sur un produit à prix unique : trois colonnes dont deux sont inventées pour remplir la grille se voient.","h390":3400,"w390":390,"h1440":2000,"w1440":1400,"vive":true,"photos":0,"poids":58453,"lignes":1205,"voie":"saas","squelettes":["S1","S2","S4","S5"]},{"id":"PLANS-202","f":"PLANS","quand":"dès qu\'une page porte trois paliers ou plus et que la différence entre deux d\'entre eux ne tient pas dans quatre puces. C\'est la pièce de la SECONDE visite : celle qu\'on ouvre quand on a déjà choisi entre deux colonnes et qu\'on cherche la ligne qui tranche. Elle se pose sous la grille de prix, jamais à sa place. â Ne se pose PAS dans S3 : le comparatif porte des prix, et une page d\'entreprise n\'en porte aucun. â Ne se pose pas non plus au-dessus de la grille : un tableau à quarante lignes avant le premier prix fait fermer l\'onglet.","h390":3400,"w390":390,"h1440":1750,"w1440":1400,"vive":true,"photos":0,"poids":61610,"lignes":1252,"voie":"saas","squelettes":["S1","S2","S4","S5"]},{"id":"PONT-203","f":"PONT","quand":"à poser dès que l\'acheteur utilise DÃJà quelque chose et qu\'il ne cherche donc pas un outil mais une SORTIE : out
2471il métier, CRM, facturation, planning, stock, RH. C\'est aussi la page d\'atterrissage de « alternative à ⦠», le contenu le plus rentable du SaaS. â Ne se pose PAS quand le produit crée un usage qui n\'existait pas encore chez le client (aucun outil à quitter, aucune donnée à reprendre) : la section fabriquerait alors une peur que personne n\'avait, exactement comme un mur de conformité sur une page grand public.","h390":3400,"w390":390,"h1440":3306,"w1440":1400,"vive":false,"photos":0,"poids":69763,"lignes":1371,"voie":"saas","squelettes":["S2","S3"]},{"id":"PONT-204","f":"PONT","quand":"à poser à la place de PONT-203 quand les clients arrivent de plusieurs endroits différents â un tableur, un logiciel installé chez eux, un outil en ligne, ou rien du tout. Quitter un tableur n\'a rien à voir avec quitter un logiciel : l\'un se lit en dix minutes, l\'autre demande une sauvegarde et un accès. à poser aussi dès qu\'on assume un comparatif frontal, parce que celui-ci porte une ligne où l\'autre gagne. â Ne se pose PAS quand un seul concurrent capte tout le marché : un sélecteur à quatre entrées dont trois sont vides dit qu\'on ne connaît pas ses propres clients â dans ce cas c\'est PONT-203, sans variante.","h390":3400,"w390":390,"h1440":2269,"w1440":1400,"vive":true,"photos":0,"poids":68142,"lignes":1340,"voie":"saas","squelettes":["S2","S4"]},{"id":"PONT-221","f":"PONT","quand":"l\'acheteur utilise DÃJà quelque chose et ne cherche donc pas un outil mais une SORTIE â outil métier, facturation, planning, suivi de dossiers, RH. C\'est aussi la page d\'atterrissage de « alternative à ⦠», le contenu organique le plus rentable du secteur. â Ne se pose PAS quand le produit crée un usage qui n\'existait pas chez le client : il n\'y a alors rien à quitter, et la section fabrique une peur que personne n\'avait, exactement comme un mur de conformité sur une page grand public.","h390":2238,"w390":390,"h1440":1121,"w1440":1400,"vive":true,"photos":0,"poids":44935,"lignes":1024,"voie":"saas","squelettes":["S2"]},{"id":"PRESSE-01","f":"PRESSE","quand":"le marchand possède au moins UNE citation de presse ou UNE récompense VÃRIFIABLE, avec l\'URL de","h390":1201,"w390":390,"h1440":987,"w1440":1440,"vive":false,"photos":0,"poids":40451,"lignes":689},{"id":"PREUVE-01","f":"PREUVE","quand":"LA BOUTIQUE N\'A PAS ENCORE D\'AVIS â donc TOUTE boutique le jour un, et toute boutique dont les ","h390":1419,"w390":390,"h1440":725,"w1440":1400,"vive":false,"photos":1,"poids":43513,"lignes":771},{"id":"PREUVE-51","f":"PREUVE","quand":"produit qu\'il faut CROIRE (soin, complément, literie, matelas) et pour lequel une étude d\'usage","h390":905,"w390":390,"h1440":900,"w1440":1440,"vive":true,"photos":1,"poids":37016,"lignes":672},{"id":"PREUVE-52","f":"PREUVE","quand":"couture entre deux sections d\'une fiche ou d\'une page d\'accueil, quand la marque a des chiffres","h390":496,"w390":390,"h1440":399,"w1440":1400,"vive":false,"photos":0,"poids":35277,"lignes":637},{"id":"PREUVE-53","f":"PREUVE","quand":"le marchand a un volume d\'avis réel et accepte de publier la distribution ENTIÃRE, mauvaises no","h390":2405,"w390":390,"h1440":1203,"w1440":1400,"vive":true,"photos":6,"poids":67176,"lignes":857},{"id":"PREUVE-54","f":"PREUVE","quand":"au-dessus d\'une liste d\'avis volumineuse, quand le marchand dispose d\'assez d\'avis pour qu\'une ","h390":964,"w390":390,"h1440":606,"w1440":1400,"vive":false,"photos":0,"poids":37061,"lignes":672},{"id":"PREUVE-55","f":"PREUVE","quand":"produit d\'ajustement (chaussure, vêtement, literie, siège) où la note globale ne décide de rien","h390":1037,"w390":390,"h1440":965,"w1440":1400,"vive":true,"photos":0,"poids":44588,"lignes":752},{"id":"PREUVE-56","f":"PREUVE","quand":"produit simple à comprendre, marque à ton fort, et un verbatim court qui dit à la fois la preuv","h390":844,"w390":390,"h1440":900,"w1440":1440,"vive":false,"photos":0,"poids":36461,"lignes":642},{"id":"PREUVE-57","f":"PREUVE","quand":"le produit sert plusieurs usages ou plusieurs profils très différents, et le marchand sait ratt","h390":1093,"w390":390,"h1440":576,"w1440":1400,"vive":true,"photos":12,"poids":46964,"lignes":773},{"id":"PREUVE-60","f":"PREUVE","quand":"fiche d\'un produit à taille ou à format, quand le marchand mesure réellement l\'audience de la p","h390":986,"w390":390,"h1440":726,"w1440":1400,"vive":true,"photos":1,"poids":40047,"lignes":710},{"id":"QUOTA-221","f":"QUOTA","quand":"produit facturé à la consommation â cr
2471édits, appels, minutes, lignes traitées â où le client ne peut PAS deviner sa dépense à l\'avance et où la mauvaise surprise arrive en milieu de période. La pièce se pose partout où l\'objection est « et si j\'explose le forfait un 18 du mois ». â Ne se pose PAS sur un abonnement à siège fixe et illimité : une jauge sur un produit qu\'on ne peut pas épuiser invente une angoisse qui n\'existe pas, et fait croire à un compteur caché.","h390":1887,"w390":390,"h1440":1066,"w1440":1400,"vive":true,"photos":0,"poids":51932,"lignes":1157,"voie":"saas","squelettes":["S4","S5"]},{"id":"RETEN-221","f":"RETEN","quand":"abonnement récurrent qu\'on résilie en libre-service, où la peur de l\'engagement freine la souscription autant que le prix. La pièce montre l\'écran de sortie AVANT l\'achat : c\'est une preuve, pas un argumentaire. â Ne se pose PAS sur un achat unique, ni sur un contrat annuel signé par un acheteur : là où il n\'y a pas de bouton de résiliation, montrer un flux de rétention promet un geste qui n\'existe pas et se retourne contre la page.","h390":1801,"w390":390,"h1440":1082,"w1440":1400,"vive":true,"photos":0,"poids":46335,"lignes":1047,"voie":"saas","squelettes":["S1","S2"]},{"id":"ROUE-01","f":"ROUE","quand":"premier achat à récompenser par un jeu, huit codes de remise réellement créés et testés en cais","h390":1275,"w390":390,"h1440":919,"w1440":1400,"vive":true,"photos":0,"poids":62627,"lignes":1054},{"id":"ROUTE-221","f":"ROUTE","quand":"produit jeune ou en rattrapage, dont l\'acheteur se demande s\'il achète un logiciel vivant ou un logiciel abandonné, et où la réponse honnête est « voici ce qui est sorti, avec les dates ». La colonne expédiée fait tout le travail. â Ne se pose PAS si la colonne « expédié » est vide ou vieille de six mois : une feuille de route publique sans sorties datées prouve exactement le contraire de ce qu\'elle veut prouver, et elle se retourne en une seconde.","h390":2435,"w390":390,"h1440":1190,"w1440":1400,"vive":true,"photos":0,"poids":44993,"lignes":1054,"voie":"saas","squelettes":["S1","S6"]},{"id":"RUPTURE-01","f":"RUPTURE","quand":"la variante est indisponible ET la date de réassort est CONNUE. Sans date, on retire le bloc de","h390":1315,"w390":390,"h1440":908,"w1440":1400,"vive":true,"photos":2,"poids":42955,"lignes":748},{"id":"RUPTURE-02","f":"RUPTURE","quand":"un produit qui SE CONSOMME à une cadence que l\'acheteur choisit (sticks, gélules, sachets, caps","h390":1326,"w390":390,"h1440":900,"w1440":1440,"vive":true,"photos":2,"poids":52121,"lignes":988},{"id":"SITE-MAYOFFEND","f":"SITE","quand":"la boutique mayoffend.com entière (accueil) : marque de vêtement à UN prix, noir et blanc, sept blocs","h390":844,"w390":390,"h1440":875,"w1440":1400,"vive":true,"photos":22,"poids":65814,"lignes":1478},{"id":"SNIP-01","f":"SNIP","quand":"au moment de choisir la forme des boutons d\'une boutique â c\'est-à -dire une fois, au début, et ","h390":1579,"w390":390,"h1440":701,"w1440":1400,"vive":true,"photos":0,"poids":42040,"lignes":725},{"id":"SNIP-02","f":"SNIP","quand":"juste avant le tunnel : bas de fiche produit, page panier, ou en pied de page. Un seul exemplai","h390":1688,"w390":390,"h1440":746,"w1440":1400,"vive":false,"photos":0,"poids":40489,"lignes":673},{"id":"SORTIE-01","f":"SORTIE","quand":"le produit se vend d\'abord en lot ET l\'unité existe vraiment en vente. Sans unité achetable, la","h390":1254,"w390":390,"h1440":853,"w1440":1400,"vive":false,"photos":2,"poids":38679,"lignes":679},{"id":"SPECS-01","f":"SPECS","quand":"objet DURABLE dont l\'achat se décide sur des mesures : poids, dimensions, matière, autonomie, c","h390":2003,"w390":390,"h1440":911,"w1440":1400,"vive":true,"photos":1,"poids":43727,"lignes":763}]')},26337,(e,t,i)=>{t.exports=["ABO-01","ACHAT-51","ACHAT-52","ACHAT-53","ACHAT-54","ACHAT-55","ACHAT-56","ACHAT-57","ACHAT-58","ACHAT-59","ACHAT-60","ACHAT-61","ACHAT-62","ACHAT-70","ACTIV-221","ANAT-01","ANIM-01","ANIM-03","ANIM-04","ANIM-06","ANIM-08","ANIM-09","ANIM-10","ANIM-11","ANIM-12","ANIM-13","ANIM-14","ANIM-15","AN
2471IM-16","ANIM-17","ANIM-18","ANNUAIRE-201","ANNUAIRE-202","ANNUAIRE-221","APRES-01","APRES-02","AVIS-70","BOITE-01","CADRE-51","CADRE-52","CADRE-53","CADRE-54","CADRE-56","CADRE-59","CADRE-60","CALCUL-201","CALCUL-202","CALCUL-221","CAPTCHA-01","CHOIX-01","CHROME-201","CHRONO-01","CHRONO-02","CLAIM-01","COMPAR-51","COMPAR-52","COMPAR-53","COMPAR-54","COMPAR-55","COMPAR-56","COMPAR-57","COMPAR-70","COMPAR-VID-01","CONF-51","CONF-52","CONF-53","CONF-55","CONF-56","CONF-57","CONF-58","CONF-59","CONFIANCE-201","CONFIANCE-202","CONFIANCE-203","CONFIANCE-204","CONFORM-221","CREDIT-201","ECHANT-01","ENTETE-01","ENTETE-03","ENTETE-04","FAQ-01","FAQ-02","FAQ-03","FAQ-04","FAQ-05","FAQ-06","FAQS-201","FINAL-201","GARANTIE-01","GRATTE-02","GRILLE-51","GRILLE-52","GRILLE-53","GRILLE-54","GRILLE-55","GRILLE-56","GRILLE-57","GRILLE-58","GRILLE-59","GRILLE-60","GUIDE-51","GUIDE-52","GUIDE-55","GUIDE-56","GUIDE-57","GUIDE-58","HERO-01","HERO-02","HERO-03","HERO-04","HERO-05","HERO-06","HERO-07","HERO-08","HERO-09","HERO-10","HERO-12","HERO-13","HERO-14","HERO-15","HERO-16","HERO-51","HERO-53","HERO-54","HERO-55","HERO-56","HERO-57","HERO-58","HERO-59","HERO-60","HERO-62","HERO-63","HERO-64","HERO-65","HEROS-201","HEROS-202","KIT-01","KIT-02","LIVRAISON-01","LOGOS-201","MEDIA-51","MEDIA-52","MEDIA-53","MEDIA-54","MEDIA-55","MEDIA-56","MEDIA-57","MEDIA-58","MONTE-221","MUR-221","MUR-222","ORIGINE-01","ORIGINE-02","ORIGINE-03","ORIGINE-04","PALIER-51","PALIER-52","PALIER-53","PALIER-54","PALIER-56","PALIER-57","PALIER-58","PALIER-59","PALIER-61","PALIER-62","PALIER-63","PALIER-65","PANIER-01","PANIER-02","PANIER-03","PANIER-04","PARRAIN-201","PARRAIN-202","PARRAIN-221","PIED-01","PIED-02","PLANS-201","PLANS-202","PONT-203","PONT-204","PONT-221","PRESSE-01","PREUVE-01","PREUVE-51","PREUVE-52","PREUVE-53","PREUVE-54","PREUVE-55","PREUVE-56","PREUVE-57","PREUVE-60","QUOTA-221","RETEN-221","ROUE-01","ROUTE-221","RUPTURE-01","RUPTURE-02","SITE-MAYOFFEND","SNIP-01","SNIP-02","SORTIE-01","SPECS-01"]},47611,(e,t,i)=>{t.exports={"ANGE-06":{bureau:1.605,fond:"#fcfcfc"},"ANGE-11":{bureau:1.773,fond:"#fcfcfc"},"ANIM-03":{bureau:1.751,fond:"#1c0c04"},"KELVIN-01":{bureau:1.508,fond:"#fcfcfc"},"PANIER-01":{bureau:1.911,fond:"#f4f4f4"},"VITRINE-1140":{bureau:1.767,fond:"#fcfcfc"},"VITRINE-1142":{bureau:2.293,fond:"#fcfcfc"}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.