); } // ── icônes (stroke, hérite de currentColor) ─────────────────── const I = { search:(p)=>(), play:(p)=>(), pause:(p)=>(), check:(p)=>(), close:(p)=>(), bolt:(p)=>(), up:(p)=>(), trophy:(p)=>(), google:(p)=>(), apple:(p)=>(), clock:(p)=>(), bell:(p)=>(), chevron:(p)=>(), logout:(p)=>(), plus:(p)=>(), }; // ── FlipList : glissement animé des éléments quand leur ordre change ───────── // Technique FLIP (First-Last-Invert-Play) : on mémorise la position de chaque enfant // (attribut data-flip) et, quand elle change, on rejoue le glissement de l'ancienne vers // la nouvelle position. // // Deux choix critiques pour le DISPLAY (qui a des particularités que le mobile n'a pas) : // 1. Mesure via `offsetTop` (PAS getBoundingClientRect) : offsetTop renvoie la position // de LAYOUT, insensible (a) à la mise à l'échelle CSS du display (scale-wrap 2560×1080 // → getBoundingClientRect renverrait des px scalés, incohérents avec le translateY qui // s'applique avant le scale) et (b) à un transform/animation en cours sur l'élément // (le display se re-rend chaque seconde : barre de progression + timer ; une mesure // en plein glissement recalculerait un translateY parasite → mouvements erratiques). // 2. Animation via la Web Animations API (`el.animate`) plutôt que `style.transition` : // indépendante de `el.style.transition`, donc AUCUN conflit avec la transition // box-shadow du flash de vote (les deux s'écrasaient mutuellement avant). fill par // défaut 'none' → aucun transform résiduel ni couche GPU persistante après la fin. // `mode` : technique d'animation du glissement. // 'transform' (défaut, MOBILE) : translateY via Web Animations API — fluide (compositor), // offsetTop immunisé contre la mesure en cours. // 'position' (DISPLAY) : anime la propriété `top` (position:relative) au lieu de `transform`. // OBLIGATOIRE sur le display : les cartes vivent dans un conteneur mis à l'échelle // (scale-wrap 2560×1080) et animer un `transform` à l'intérieur d'un scale() crée une // couche composite que le moteur de rendu (BrightSign en prod, Chrome desktop en test) // ne repeint pas correctement → tuiles fantômes (anciennes cartes, timer 00:00 résiduel). // `top` est une propriété de layout/paint (pas de couche composite) → repeinte propre. // `flipKey` : signature de l'ORDRE courant (ex: ids triés joints). Le FLIP n'est mesuré que // quand cette clé change → un re-rendu à la seconde (barre de progression / timer) ne // déclenche plus de fausse animation. function FlipList({children,style={},mode='transform',flipKey=''}){ const ref=React.useRef(null); const prevRef=React.useRef(new Map()); React.useLayoutEffect(()=>{ const cont=ref.current;if(!cont)return; // Sonde perf passive (diagnostic gel display) : coût réel de la passe FLIP // (mesures offsetTop + démarrage des animations). Rapportée au hook optionnel // window.cmPerfFlip — posé par le display uniquement (no-op partout ailleurs). const _t0=(typeof performance!=='undefined')?performance.now():0; let _moved=0; const next=new Map(); for(const el of Array.from(cont.children)){ const k=el.getAttribute('data-flip');if(!k)continue; const top=el.offsetTop; // position de layout next.set(k,top); const old=prevRef.current.get(k); if(old!=null){ const dy=old-top; if(Math.abs(dy)>4&&typeof el.animate==='function'){ _moved++; if(el._flipAnim)el._flipAnim.cancel(); // remplace une anim en cours (re-tri rapide) if(mode==='position'){ // DISPLAY : glissement COMPOSITÉ via translate3d (GPU), pas via `top` (paint coûteux // → saccades sur BrightSign). Les fantômes d'antan venaient du CHURN de couche // (couche créée pour l'anim puis détruite à la fin) : ici les cartes du display ont // une couche GPU PERMANENTE (ds.row : will-change:transform + backface-visibility) // → la couche ne se détruit jamais → repeinte propre, aucun résidu. fill:none. el._flipAnim=el.animate( [{transform:`translate3d(0,${dy}px,0)`},{transform:'translate3d(0,0,0)'}], {duration:480,easing:'cubic-bezier(.33,1,.68,1)'} // ease-out pur, sans rebond ); }else{ el._flipAnim=el.animate( [{transform:`translateY(${dy}px)`},{transform:'translateY(0)'}], {duration:480,easing:'cubic-bezier(.33,1,.68,1)'} ); } } } } prevRef.current=next; if(_moved>0&&typeof window.cmPerfFlip==='function'){ try{window.cmPerfFlip(performance.now()-_t0,_moved);}catch(_){} } },[flipKey]); return

{children}

; } // ── useVoteFlash : flash bref quand le compteur de votes d'une carte augmente ─────── // Retourne un booléen `flash` qui passe à true ~650ms à chaque incrément de `votes`. // À utiliser pour piloter un box-shadow inline avec transition (PAS une animation CSS // keyframes ajoutée à chaud — règle anti-fantôme iOS v2.6.6) : // flash ? {boxShadow:'…gold…',transition:'box-shadow 0s'} : {transition:'box-shadow .65s ease'} // → le halo apparaît instantanément puis s'estompe en douceur, pas de promotion de couche. function useVoteFlash(votes){ const prev=React.useRef(votes); const [flash,setFlash]=React.useState(false); React.useEffect(()=>{ if(votes>prev.current){ prev.current=votes; setFlash(true); const t=setTimeout(()=>setFlash(false),950); return ()=>clearTimeout(t); } prev.current=votes; },[votes]); return flash; } // ── Preview Deezer JSONP ───────────────────────────────────── // Contourne le CORS de api.deezer.com via un