/* Teaser « Pixel Factory » (shortcode [pxb_pf_teaser]) — uniquement les jetons de tokens.css.
   Radius 0, aucune ombre. Animations : apparition des tuiles (pop), reflet unique, préfixe pxb-pf-. */
.pxb-pf{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);width:100%;box-sizing:border-box;padding:var(--space-5);background:var(--color-surface);border-radius:var(--radius)}
.pxb-pf-grille{position:relative;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:2px;width:min(100%,416px);box-sizing:border-box;padding:2px;background:var(--color-bg);overflow:hidden}
.pxb-pf-case{position:relative;display:block;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:var(--radius);background:var(--color-glass-2);cursor:pointer;overflow:hidden}
.pxb-pf-tuile{position:absolute;inset:0;background:var(--pxb-pf-teinte);transform:scale(0);pointer-events:none}
.pxb-pf-case.est-posee .pxb-pf-tuile{transform:scale(1)}
.pxb-pf-case.est-posee.is-on .pxb-pf-tuile{animation:pxb-pf-pop 260ms cubic-bezier(.34,1.56,.64,1) forwards}
.pxb-pf-case.is-off .pxb-pf-tuile{transform:scale(1);animation:pxb-pf-out 180ms ease-in forwards}
@keyframes pxb-pf-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes pxb-pf-out{0%{transform:scale(1)}100%{transform:scale(0)}}
/* Scintillement des cases marquées par le motif (cœur pétillant), une fois le motif composé */
.pxb-pf-case.est-posee.is-twinkle .pxb-pf-tuile{animation:pxb-pf-twinkle 1200ms ease-in-out infinite;animation-delay:var(--pxb-pf-delai,0ms)}
@keyframes pxb-pf-twinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.5}}
/* Reflet : une seule bande lumineuse traverse le verre une fois le motif posé */
.pxb-pf-reflet{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--color-bg) 55%,transparent) 50%,transparent 60%);background-size:300% 100%;background-position:150% 0}
.pxb-pf-reflet.is-sweep{animation:pxb-pf-sweep 1100ms ease-in-out forwards}
@keyframes pxb-pf-sweep{0%{opacity:1;background-position:150% 0}100%{opacity:1;background-position:-50% 0}}
.pxb-pf-case:focus-visible,.pxb-pf-pastille:focus-visible{outline:2px solid var(--color-ink);outline-offset:1px;position:relative;z-index:1}
.pxb-pf-pastilles{display:flex;justify-content:center;gap:var(--space-1);margin:0}
.pxb-pf-pastille{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:8px;border:0;border-radius:var(--radius);background:transparent;cursor:pointer}
.pxb-pf-pastille-carre{display:block;width:28px;height:28px;background:var(--pxb-pf-teinte);border:1px solid var(--color-rule);border-radius:var(--radius);outline:2px solid transparent;outline-offset:2px;transition:outline-color 120ms linear}
.pxb-pf-pastille[aria-pressed="true"] .pxb-pf-pastille-carre{outline-color:var(--color-ink)}
.pxb-pf.est-en-pause *{animation-play-state:paused!important}
/* Sous le point de rupture tablette de Divi : texte d'abord, grille ensuite (la colonne porte la classe pxb-pf-colonne). */
@media (max-width:980px){.pxb-pf-colonne{order:2}.pxb-pf{padding:var(--space-3)}}