/* ─────────────────────────────────────────────────────────────
   EFFETS DES CARTES — finitions normale, holo, reverse holo, full art et or
   Chargé après styles/app.css, par l’app et par le labo d’effets.
   Toutes les règles sont préfixées par .fx (classe sur <html>).
   Chaque carte reçoit ses réglages (js/carte.js, data/reglages-cartes.js)
   en variables (--ho-*, --r-*, --f-*, --o-*…) et en attributs (data-bg, data-anim, data-r-tex, data-ho-tex, data-dot…).
   Inclinaison (posée par setTilt sur .card) : --mx --my (%), --pd (0 au centre → 1 au bord)
   ───────────────────────────────────────────────────────────── */

/* Variables animables : les reflets reviennent en douceur quand on lâche la carte */
@property --mx{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --my{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --pd{syntax:"<number>";inherits:true;initial-value:0}
/* Horloge de l’animation douce du holo (et du métal de l’or) : va et vient de 0 à 1 ; la carte, elle, ne bouge qu’au doigt */
@property --t{syntax:"<number>";inherits:true;initial-value:.5}
@keyframes fx-t{from{--t:0}to{--t:1}}

:root{
  --fx-cycle:8s; --idle:.5;
  --n-depth:1;
  --ho-opacity:.55; --ho-angle:115deg; --ho-band:18; --ho-gap:.12; --ho-sat:1.3; --ho-follow:1; --ho-anim:.3; --ho-tsc:1; --ho-glare:0; --ho-depth:1;
  --r-opacity:.6; --r-anim:.3; --r-tsc:1; --r-angle:120deg; --r-band:24; --r-gap:.12; --r-glare:.2; --r-depth:1;
  --f-foil:.45; --f-tsc:1; --f-angle:120deg; --f-band:24; --f-gap:.12; --f-blend:color-dodge; --f-depth:1; --f-pdepth:1; --f-halo:.55; --f-glare:.18;
  --o-light:.5; --o-depth:1; --o-pdepth:1; --o-halo:.55; --gold-shine:.85; --gold-angle:125deg; --gold-sparkle:.9; --gold-glare:.1;
  --bg-op:.6; --tile-op:.55; --tile-blur:10;
}

/* Calques du full art et de l’or : cachés tant qu’une finition ne les réclame pas */
.fa-bg,.fa-portrait,.gild,.glints{display:none}

.fx .card{--pd:0;transition:--mx .5s cubic-bezier(.2,.8,.2,1),--my .5s cubic-bezier(.2,.8,.2,1),--pd .5s cubic-bezier(.2,.8,.2,1)}
.fx .card.live{transition-duration:.08s}
.fx .card:is(.r-holo,.r-reverse,.r-full,.r-gold){animation:fx-t var(--fx-cycle) ease-in-out infinite alternate}
/* Figé (image partagée, services/partage.js) */
.fx-still .card,.fx-still .card *,.fx-still .card *::before,.fx-still .card *::after{animation-play-state:paused!important}

/* ───── Parallaxe du portrait (normale et reverse) : il glisse un peu dans sa fenêtre ───── */
.fx .card:not(.r-holo,.r-reverse,.r-full,.r-gold){--p-depth:var(--n-depth)}
.fx .card.r-holo{--p-depth:var(--ho-depth)}
.fx .card.r-reverse{--p-depth:var(--r-depth)}
.fx .card:not(.r-full,.r-gold) .c-pic .clip img{
  translate:calc((50% - var(--mx)) * .05 * var(--p-depth)) calc((50% - var(--my)) * .02 * var(--p-depth));
  scale:calc(1 + .025 * var(--p-depth))}

/* ───── Holo : réglages propres à chaque finition ───── */
.fx .card.r-holo{--h-gap:var(--ho-gap)}
.fx .card.r-reverse{--h-angle:var(--r-angle);--h-band:var(--r-band);--h-gap:var(--r-gap);--h-blend:color-dodge;--h-anim:var(--r-anim);--h-amp:100%;--h-hue:160deg}   /* ampleur agrandie le 14/11/2026 : à 40 % on ne voyait rien bouger */
/* Holo du fond (full art et or) : motif et bandes propres à chaque carte, intensité commune au type de carte */
.fx .card.r-full{--h-angle:var(--f-angle);--h-band:var(--f-band);--h-gap:var(--f-gap);--h-blend:var(--f-blend);--foil:var(--f-foil);--h-anim:var(--idle)}
.fx .card.r-gold{--h-angle:var(--o-angle);--h-band:var(--o-band);--h-gap:var(--o-gap);--h-blend:var(--o-blend);--foil:var(--o-foil)}

/* Textures (masques) : le holo n’apparaît qu’à travers ce motif.
   --tu = 1 px Figma × échelle du motif (--tex-sc, réglée carte par carte dans le labo) : les tuiles se répètent à l’infini.
   Bruits (feTurbulence) : la zone du filtre = la tuile (x, y, width, height), sinon le raccord se voit (trait vertical du métal brossé, 14/11/2026) */
.fx .card.r-holo{--tex-sc:var(--ho-tsc,1)}
.fx .card.r-reverse{--tex-sc:var(--r-tsc,1)}
.fx .card.r-full{--tex-sc:var(--f-tsc,1)}
.fx .face{
  --tu:calc(var(--u) * var(--tex-sc,1));
  --tex-losanges:repeating-linear-gradient(60deg,#000 0 calc(0.6 * var(--tu)),rgb(0 0 0/var(--h-gap)) calc(0.6 * var(--tu)) calc(5 * var(--tu))),
                 repeating-linear-gradient(-60deg,#000 0 calc(0.6 * var(--tu)),rgb(0 0 0/var(--h-gap)) calc(0.6 * var(--tu)) calc(5 * var(--tu)));
  --tex-lignes:repeating-linear-gradient(-45deg,#000 0 calc(0.8 * var(--tu)),rgb(0 0 0/var(--h-gap)) calc(0.8 * var(--tu)) calc(2.6 * var(--tu)));
  --tex-anneaux:repeating-radial-gradient(circle at 50% 33%,#000 0 calc(0.8 * var(--tu)),rgb(0 0 0/var(--h-gap)) calc(0.8 * var(--tu)) calc(3.2 * var(--tu)));
  --tex-paillettes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 -8.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url%28%23f%29'/%3E%3C/svg%3E") 0 0/calc(160 * var(--tu)) calc(160 * var(--tu)),
                   linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-aucune:linear-gradient(#000 0 0);
  --tex-cosmos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 -6.6'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url%28%23f%29'/%3E%3C/svg%3E") 0 0/calc(200 * var(--tu)) calc(200 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-etoiles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M6 1l1.1 3.9L11 6 7.1 7.1 6 11 4.9 7.1 1 6l3.9-1.1z'/%3E%3Cpath d='M19 13l.8 2.7 2.7.8-2.7.8-.8 2.7-.8-2.7-2.7-.8 2.7-.8z'/%3E%3Ccircle cx='18' cy='4' r='.9'/%3E%3Ccircle cx='5' cy='19' r='.9'/%3E%3C/svg%3E") 0 0/calc(14 * var(--tu)) calc(14 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-points:radial-gradient(circle,#000 0 calc(0.8 * var(--tu)),transparent calc(1.05 * var(--tu))) 0 0/calc(3.6 * var(--tu)) calc(3.6 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-damier:conic-gradient(#000 25%,transparent 0 50%,#000 0 75%,transparent 0) 0 0/calc(6 * var(--tu)) calc(6 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-quadrillage:linear-gradient(#000 0 calc(0.5 * var(--tu)),transparent 0) 0 0/calc(4 * var(--tu)) calc(4 * var(--tu)),linear-gradient(90deg,#000 0 calc(0.5 * var(--tu)),transparent 0) 0 0/calc(4 * var(--tu)) calc(4 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-brosse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .55' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -4.6'/%3E%3C/filter%3E%3Crect width='600' height='200' filter='url%28%23f%29'/%3E%3C/svg%3E") 0 0/calc(600 * var(--tu)) calc(200 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-vagues:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M0 4q5-4 10 0t10 0' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") 0 0/calc(8 * var(--tu)) calc(3.2 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-chevrons:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9'%3E%3Cpath d='M0 7l6-5 6 5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/calc(5 * var(--tu)) calc(3.75 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-ecailles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 10a10 10 0 0 1 20 0M-10 20a10 10 0 0 1 20 0M10 20a10 10 0 0 1 20 0' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0/calc(7 * var(--tu)) calc(7 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-hexagones:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v34M28 0v34L0 50v34l28 16 28-16V50L28 34' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 0 0/calc(9 * var(--tu)) calc(16 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-rayons:repeating-conic-gradient(from 0deg at 50% 38%,#000 0 calc(1.2deg * var(--tex-sc,1)),transparent 0 calc(4deg * var(--tex-sc,1))),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-marbre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0133' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 1 0 0 0 1 0 0 0 1 0 0 0 1 0 0 0 1 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url%28%23f%29'/%3E%3C/svg%3E") 0 0/calc(300 * var(--tu)) calc(300 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-triangles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='17.32'%3E%3Cpath d='M0 17.32L10 0l10 17.32zM10 0h20M-10 17.32h40' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 0 0/calc(7 * var(--tu)) calc(6.06 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-zigzag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 5l3-4 3 4 3-4 3 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/calc(6 * var(--tu)) calc(3 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-croisillons:repeating-linear-gradient(45deg,#000 0 calc(0.5 * var(--tu)),transparent calc(0.5 * var(--tu)) calc(3 * var(--tu))),repeating-linear-gradient(-45deg,#000 0 calc(0.5 * var(--tu)),transparent calc(0.5 * var(--tu)) calc(3 * var(--tu))),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-pixels:conic-gradient(#000 25%,transparent 0) 0 0/calc(2.4 * var(--tu)) calc(2.4 * var(--tu)),conic-gradient(from 180deg,#000 25%,transparent 0) calc(1.2 * var(--tu)) calc(1.2 * var(--tu))/calc(7.2 * var(--tu)) calc(7.2 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-bulles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg fill='none' stroke='%23000' stroke-width='.8'%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3Ccircle cx='24' cy='6' r='2.5'/%3E%3Ccircle cx='22' cy='22' r='6.5'/%3E%3Ccircle cx='6' cy='25' r='3'/%3E%3Ccircle cx='15' cy='15' r='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/calc(14 * var(--tu)) calc(14 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-etincelles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M8 2l1 5 5 1-5 1-1 5-1-5-5-1 5-1zM30 20l.7 3.3 3.3.7-3.3.7-.7 3.3-.7-3.3-3.3-.7 3.3-.7zM18 33l.5 2.5 2.5.5-2.5.5-.5 2.5-.5-2.5-2.5-.5 2.5-.5z'/%3E%3Ccircle cx='32' cy='6' r='.8'/%3E%3Ccircle cx='6' cy='30' r='.6'/%3E%3Ccircle cx='22' cy='12' r='.5'/%3E%3C/svg%3E") 0 0/calc(18 * var(--tu)) calc(18 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-prisme:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0h30L12 22z'/%3E%3Cpath d='M30 0h30v26z' fill-opacity='.55'/%3E%3Cpath d='M12 22L30 0l30 26-22 12z' fill-opacity='.25'/%3E%3Cpath d='M0 0l12 22-12 18z' fill-opacity='.7'/%3E%3Cpath d='M0 40l12-18 26 16-8 22H0z' fill-opacity='.4'/%3E%3Cpath d='M38 38l22-12v34H30z' fill-opacity='.8'/%3E%3C/svg%3E") 0 0/calc(26 * var(--tu)) calc(26 * var(--tu)),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  --tex-moire:repeating-radial-gradient(circle at 30% 30%,#000 0 calc(0.5 * var(--tu)),transparent calc(0.5 * var(--tu)) calc(2.2 * var(--tu))),repeating-radial-gradient(circle at 70% 60%,#000 0 calc(0.5 * var(--tu)),transparent calc(0.5 * var(--tu)) calc(2.3 * var(--tu))),linear-gradient(rgb(0 0 0/var(--h-gap)) 0 0);
  /* Or métallique : sombre → clair → sombre, glisse avec l’inclinaison */
  --gold-metal:linear-gradient(var(--gold-angle),#6E500C 0%,#B8901F 12%,#F2D375 24%,#FFF8DA 31%,#E6C15E 38%,#9C7716 50%,#D4A72C 62%,#FFF4C2 72%,#E2BC55 80%,#8F6B12 100%);
  /* Variante claire pour le texte (lisible sur fond sombre) */
  --gold-text:linear-gradient(var(--gold-angle),#D9B04A 0%,#F2D375 18%,#FFF8DA 30%,#F2D375 42%,#C99A2E 55%,#F2D375 70%,#FFF4C2 82%,#E2BC55 100%);
}
/* Un motif = la même règle pour la holo (fenêtre du portrait), la reverse (toute la carte) et le holo du fond du full art */
.fx .card.r-holo[data-ho-tex="losanges"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="losanges"] .rfoil,.fx .card[data-h-tex="losanges"] .fa-bg::after{-webkit-mask:var(--tex-losanges);mask:var(--tex-losanges)}
.fx .card.r-holo[data-ho-tex="lignes"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="lignes"] .rfoil,.fx .card[data-h-tex="lignes"] .fa-bg::after{-webkit-mask:var(--tex-lignes);mask:var(--tex-lignes)}
.fx .card.r-holo[data-ho-tex="anneaux"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="anneaux"] .rfoil,.fx .card[data-h-tex="anneaux"] .fa-bg::after{-webkit-mask:var(--tex-anneaux);mask:var(--tex-anneaux)}
.fx .card.r-holo[data-ho-tex="paillettes"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="paillettes"] .rfoil,.fx .card[data-h-tex="paillettes"] .fa-bg::after{-webkit-mask:var(--tex-paillettes);mask:var(--tex-paillettes)}
.fx .card.r-holo[data-ho-tex="cosmos"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="cosmos"] .rfoil,.fx .card[data-h-tex="cosmos"] .fa-bg::after{-webkit-mask:var(--tex-cosmos);mask:var(--tex-cosmos)}
.fx .card.r-holo[data-ho-tex="etoiles"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="etoiles"] .rfoil,.fx .card[data-h-tex="etoiles"] .fa-bg::after{-webkit-mask:var(--tex-etoiles);mask:var(--tex-etoiles)}
.fx .card.r-holo[data-ho-tex="points"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="points"] .rfoil,.fx .card[data-h-tex="points"] .fa-bg::after{-webkit-mask:var(--tex-points);mask:var(--tex-points)}
.fx .card.r-holo[data-ho-tex="damier"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="damier"] .rfoil,.fx .card[data-h-tex="damier"] .fa-bg::after{-webkit-mask:var(--tex-damier);mask:var(--tex-damier)}
.fx .card.r-holo[data-ho-tex="quadrillage"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="quadrillage"] .rfoil,.fx .card[data-h-tex="quadrillage"] .fa-bg::after{-webkit-mask:var(--tex-quadrillage);mask:var(--tex-quadrillage)}
.fx .card.r-holo[data-ho-tex="brosse"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="brosse"] .rfoil,.fx .card[data-h-tex="brosse"] .fa-bg::after{-webkit-mask:var(--tex-brosse);mask:var(--tex-brosse)}
.fx .card.r-holo[data-ho-tex="vagues"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="vagues"] .rfoil,.fx .card[data-h-tex="vagues"] .fa-bg::after{-webkit-mask:var(--tex-vagues);mask:var(--tex-vagues)}
.fx .card.r-holo[data-ho-tex="chevrons"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="chevrons"] .rfoil,.fx .card[data-h-tex="chevrons"] .fa-bg::after{-webkit-mask:var(--tex-chevrons);mask:var(--tex-chevrons)}
.fx .card.r-holo[data-ho-tex="ecailles"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="ecailles"] .rfoil,.fx .card[data-h-tex="ecailles"] .fa-bg::after{-webkit-mask:var(--tex-ecailles);mask:var(--tex-ecailles)}
.fx .card.r-holo[data-ho-tex="hexagones"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="hexagones"] .rfoil,.fx .card[data-h-tex="hexagones"] .fa-bg::after{-webkit-mask:var(--tex-hexagones);mask:var(--tex-hexagones)}
.fx .card.r-holo[data-ho-tex="rayons"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="rayons"] .rfoil,.fx .card[data-h-tex="rayons"] .fa-bg::after{-webkit-mask:var(--tex-rayons);mask:var(--tex-rayons)}
.fx .card.r-holo[data-ho-tex="marbre"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="marbre"] .rfoil,.fx .card[data-h-tex="marbre"] .fa-bg::after{-webkit-mask:var(--tex-marbre);mask:var(--tex-marbre)}
.fx .card.r-holo[data-ho-tex="triangles"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="triangles"] .rfoil,.fx .card[data-h-tex="triangles"] .fa-bg::after{-webkit-mask:var(--tex-triangles);mask:var(--tex-triangles)}
.fx .card.r-holo[data-ho-tex="zigzag"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="zigzag"] .rfoil,.fx .card[data-h-tex="zigzag"] .fa-bg::after{-webkit-mask:var(--tex-zigzag);mask:var(--tex-zigzag)}
.fx .card.r-holo[data-ho-tex="croisillons"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="croisillons"] .rfoil,.fx .card[data-h-tex="croisillons"] .fa-bg::after{-webkit-mask:var(--tex-croisillons);mask:var(--tex-croisillons)}
.fx .card.r-holo[data-ho-tex="pixels"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="pixels"] .rfoil,.fx .card[data-h-tex="pixels"] .fa-bg::after{-webkit-mask:var(--tex-pixels);mask:var(--tex-pixels)}
.fx .card.r-holo[data-ho-tex="bulles"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="bulles"] .rfoil,.fx .card[data-h-tex="bulles"] .fa-bg::after{-webkit-mask:var(--tex-bulles);mask:var(--tex-bulles)}
.fx .card.r-holo[data-ho-tex="etincelles"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="etincelles"] .rfoil,.fx .card[data-h-tex="etincelles"] .fa-bg::after{-webkit-mask:var(--tex-etincelles);mask:var(--tex-etincelles)}
.fx .card.r-holo[data-ho-tex="prisme"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="prisme"] .rfoil,.fx .card[data-h-tex="prisme"] .fa-bg::after{-webkit-mask:var(--tex-prisme);mask:var(--tex-prisme)}
.fx .card.r-holo[data-ho-tex="moire"] .c-pic .bkg .foil,.fx .card.r-reverse[data-r-tex="moire"] .rfoil,.fx .card[data-h-tex="moire"] .fa-bg::after{-webkit-mask:var(--tex-moire);mask:var(--tex-moire)}

/* Holo commun : bandes pastel fines, qui glissent avec l’inclinaison (et un peu au repos) */
.fx .r-reverse .rfoil,.fx :is(.r-full,.r-gold) .fa-bg::after{
  background:repeating-linear-gradient(var(--h-angle),
    hsl(350 90% 74%) 0,hsl(38 95% 68%) calc(var(--h-band) * .2%),hsl(140 75% 66%) calc(var(--h-band) * .4%),
    hsl(190 95% 68%) calc(var(--h-band) * .6%),hsl(262 90% 78%) calc(var(--h-band) * .8%),hsl(350 90% 74%) calc(var(--h-band) * 1%));
  background-size:200% 200%;background-repeat:no-repeat;
  /* bornée à 0–100 % : la tuile du dégradé couvre toujours la carte, aucun raccord visible (ruptures avec des bandes larges, 14/11/2026) */
  /* animation douce : les bandes glissent (--h-amp) et les couleurs tournent un peu (--h-hue), au rythme de --t */
  background-position:clamp(0%,var(--mx) + (var(--t) - .5) * var(--h-anim) * var(--h-amp,40%),100%) clamp(0%,var(--my) + (var(--t) - .5) * var(--h-anim) * var(--h-amp,40%) / 2,100%);
  filter:hue-rotate(calc((var(--t) - .5) * var(--h-anim) * var(--h-hue,0deg)))}

/* ───── Holo : la fenêtre du portrait brille (reflet arc-en-ciel à bandes, réglé dans le labo) ───── */
.fx .r-holo .c-pic .bkg .foil{opacity:var(--ho-opacity);mix-blend-mode:color-dodge;filter:saturate(var(--ho-sat)) contrast(1.15) hue-rotate(calc((var(--t) - .5) * var(--ho-anim) * 160deg));
  background:repeating-linear-gradient(var(--ho-angle),transparent 0,hsl(350 100% 70%) calc(var(--ho-band) * 1% / 6),hsl(50 100% 65%) calc(var(--ho-band) * 2% / 6),
    hsl(140 90% 65%) calc(var(--ho-band) * 3% / 6),hsl(195 100% 65%) calc(var(--ho-band) * 4% / 6),hsl(270 100% 75%) calc(var(--ho-band) * 5% / 6),transparent calc(var(--ho-band) * 1%));
  background-size:220% 220%;background-repeat:no-repeat;
  background-position:clamp(0%,50% + (var(--mx) - 50%) * var(--ho-follow) + (var(--t) - .5) * var(--ho-anim) * 100%,100%) clamp(0%,50% + (var(--my) - 50%) * var(--ho-follow) + (var(--t) - .5) * var(--ho-anim) * 50%,100%)}
/* Reflet : la même bande large et douce que la reverse */
.fx .r-holo .sheen{display:block;opacity:var(--ho-glare);mix-blend-mode:overlay;filter:none;
  background:linear-gradient(calc(var(--ho-angle) - 15deg),transparent 38%,rgb(255 255 255/.85) 50%,transparent 62%) no-repeat;
  background-size:250% 250%;background-position:var(--mx) var(--my)}

/* ───── Reverse holo : tout brille sauf la fenêtre du portrait ───── */
.fx .r-reverse .rfoil{opacity:calc(var(--r-opacity) * (.6 + .4 * var(--pd)));mix-blend-mode:var(--h-blend)}
.fx .r-reverse .c-body .foil{display:none}
/* Reflet : une bande large et douce qui traverse la carte (pas de tache qui suit le doigt) */
.fx .r-reverse .sheen{display:block;opacity:var(--r-glare);mix-blend-mode:overlay;filter:none;
  background:linear-gradient(calc(var(--h-angle) - 15deg),transparent 38%,rgb(255 255 255/.85) 50%,transparent 62%) no-repeat;
  background-size:250% 250%;background-position:var(--mx) var(--my)}

/* ───── Full art et or : fond + portrait détouré séparés ───── */
.fx .card:is(.r-full,.r-gold) :is(.fa-bg,.fa-portrait){display:block}
.fx .card.r-full{--f-pat:255 255 255;--star:#fff;--depth:var(--f-depth);--pdepth:var(--f-pdepth);--halo:var(--f-halo)}
.fx .card.r-gold{--f-pat:242 211 117;--star:#FFF4C2;--depth:var(--o-depth);--pdepth:var(--o-pdepth);--halo:var(--o-halo)}
/* Fond : dégradé de la couleur du parti ; il déborde pour la parallaxe */
.fx .fa-bg{inset:calc(-14 * var(--u));overflow:hidden;
  background:radial-gradient(85% 55% at 50% 40%,color-mix(in srgb,var(--c) 72%,#fff) 0%,var(--c) 42%,color-mix(in srgb,var(--c) 50%,var(--ink)) 78%,var(--ink) 100%);
  translate:calc((var(--mx) - 50%) * .05 * var(--depth)) calc((var(--my) - 50%) * .05 * var(--depth))}
.fx :is(.r-full,.r-gold) .fa-bg::after{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:var(--h-blend);opacity:calc(var(--foil) * (.55 + .45 * var(--pd)))}

/* Vignette (bords du fond assombris) et grain de papier (par-dessus fond et portrait) */
.fx .card.r-full{--vig:var(--f-vig);--grain:var(--f-grain)}
.fx .card.r-gold{--vig:var(--o-vig);--grain:var(--o-grain)}
.fx .fa-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(closest-side at 50% 44%,transparent 45%,rgb(0 0 0/var(--vig)) 100%)}
.fa-grain{display:none}
/* Bas de carte assombri au-dessus du portrait, pour lire l’édition et la jauge (Figma : bottom-shade, black/alpha-30 → 55) */
.fa-fade{display:none}
.fx .card:is(.r-full,.r-gold) .fa-fade{display:block;left:0;right:0;bottom:0;height:calc(120 * var(--u));z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgb(0 0 0/0),rgb(0 0 0/.3) 55%,rgb(0 0 0/.55))}
/* Full art et or : prénom, nom et poste passent derrière le portrait (effet de profondeur, comme la fenêtre des autres finitions) */
.fx .card:is(.r-full,.r-gold) .fa-portrait{z-index:2}
.fx .card:is(.r-full,.r-gold) :is(.c-name,.c-pic){z-index:1}
.fx .card:is(.r-full,.r-gold) .fa-grain{display:block;inset:0;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0/calc(160 * var(--u)) calc(160 * var(--u))}

/* Motifs du fond, au choix : deux calques .fa-layer cumulables (data-bg, data-anim et --lop posés sur chaque calque) */
.fx .fa-layer{position:absolute;inset:0;opacity:var(--lop,.8);transform:scale(var(--lsc,1));transform-origin:50% 42%}   /* --lsc : échelle du calque (labo, 13/11/2026) */
.fx .fa-pat{position:absolute;inset:-30%;transform-origin:50% 42%}
.fx .fa-stars{position:absolute;inset:0;display:none}
.fx [data-bg="rayons"] .fa-pat{background:repeating-conic-gradient(from 0deg at 50% 42%,rgb(var(--f-pat)/.11) 0 5deg,transparent 5deg 15deg)}
.fx [data-bg="ondes"] .fa-pat{background:repeating-radial-gradient(circle at 50% 42%,rgb(var(--f-pat)/.32) 0 calc(.9 * var(--u)),transparent calc(.9 * var(--u)) calc(13 * var(--u)));
  -webkit-mask:radial-gradient(circle at 50% 42%,#000 20%,transparent 62%);mask:radial-gradient(circle at 50% 42%,#000 20%,transparent 62%)}
/* Hémicycle : rangées de sièges en arc, centrées sous le portrait */
.fx [data-bg="hemicycle"] .fa-pat{background:repeating-radial-gradient(circle at 50% 66%,transparent 0 calc(9 * var(--u)),rgb(var(--f-pat)/.24) calc(9 * var(--u)) calc(13 * var(--u)));
  -webkit-mask:repeating-conic-gradient(from -90deg at 50% 66%,#000 0 3.2deg,transparent 3.2deg 4.5deg),linear-gradient(transparent 22%,#000 40% 62%,transparent 66%);-webkit-mask-composite:source-in;
  mask:repeating-conic-gradient(from -90deg at 50% 66%,#000 0 3.2deg,transparent 3.2deg 4.5deg) intersect,linear-gradient(transparent 22%,#000 40% 62%,transparent 66%)}
.fx [data-bg="trame"] .fa-pat{background:radial-gradient(circle,rgb(var(--f-pat)/.45) 0 calc(.9 * var(--u)),transparent calc(1.2 * var(--u))) 0 0/calc(7 * var(--u)) calc(7 * var(--u));
  -webkit-mask:radial-gradient(60% 45% at 50% 42%,transparent 25%,#000 85%);mask:radial-gradient(60% 45% at 50% 42%,transparent 25%,#000 85%)}
.fx [data-bg="lignes"] .fa-pat{background:repeating-linear-gradient(-32deg,rgb(var(--f-pat)/.26) 0 calc(.7 * var(--u)),transparent calc(.7 * var(--u)) calc(8 * var(--u)))}
.fx [data-bg="aurore"] .fa-pat{filter:blur(calc(5 * var(--u)));
  background:linear-gradient(168deg,transparent 30%,rgb(var(--f-pat)/.55) 38%,transparent 45%,rgb(var(--f-pat)/.42) 52%,transparent 60%),linear-gradient(200deg,transparent 40%,color-mix(in srgb,var(--c) 45%,transparent) 48%,transparent 56%)}
.fx [data-bg="projecteurs"] .fa-pat{filter:blur(calc(2.5 * var(--u)));background:
  conic-gradient(from 135deg at 22% 18%,transparent 0 6deg,rgb(var(--f-pat)/.42) 10deg 20deg,transparent 26deg),
  conic-gradient(from 199deg at 78% 18%,transparent 0 6deg,rgb(var(--f-pat)/.42) 10deg 20deg,transparent 26deg),
  conic-gradient(from 168deg at 50% 16%,transparent 0 8deg,rgb(var(--f-pat)/.24) 10deg 14deg,transparent 18deg)}
.fx [data-bg="grille"] .fa-pat{background:repeating-linear-gradient(0deg,rgb(var(--f-pat)/.26) 0 calc(.7 * var(--u)),transparent calc(.7 * var(--u)) calc(11 * var(--u))),repeating-linear-gradient(90deg,rgb(var(--f-pat)/.26) 0 calc(.7 * var(--u)),transparent calc(.7 * var(--u)) calc(11 * var(--u)));
  -webkit-mask:radial-gradient(closest-side at 50% 42%,transparent 25%,#000 85%);mask:radial-gradient(closest-side at 50% 42%,transparent 25%,#000 85%)}
.fx [data-bg="particules"] .fa-stars{display:block}
.fx [data-bg="particules"] .fa-stars i{border-radius:50%;scale:1.5;clip-path:none;background:radial-gradient(circle,var(--star) 0 30%,transparent 72%);
  animation:fx-rise calc(var(--fx-cycle) * var(--k) * 1.6) linear infinite;animation-delay:calc(var(--d) * var(--fx-cycle) * -1.6)}
@keyframes fx-rise{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(calc(-70 * var(--u)))}}
/* Lignes de vitesse (manga), version légère : deux trames de rayons de pas différents, seulement vers les bords */
.fx [data-bg="vitesse"] .fa-pat{background:
  repeating-conic-gradient(from 0deg at 50% 42%,rgb(var(--f-pat)/.4) 0 .75deg,transparent .75deg 9deg),
  repeating-conic-gradient(from 4.1deg at 50% 42%,rgb(var(--f-pat)/.28) 0 1.2deg,transparent 1.2deg 17deg);
  -webkit-mask:radial-gradient(ellipse calc(150 * var(--u)) calc(190 * var(--u)) at 50% 42%,transparent 64%,#000 100%);mask:radial-gradient(ellipse calc(150 * var(--u)) calc(190 * var(--u)) at 50% 42%,transparent 64%,#000 100%)}
.fx [data-bg="constellation"] .fa-stars{display:block}
.fx [data-bg="constellation"] .fa-pat{background:rgb(var(--f-pat)/.5);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolyline points='24%2C22 30%2C27 27%2C33 34%2C36 31%2C42' fill='none' stroke='%23000' stroke-width='.18'/%3E%3Cpolyline points='70%2C21 76%2C25 73%2C31 79%2C35' fill='none' stroke='%23000' stroke-width='.18'/%3E%3Cpolyline points='22%2C52 27%2C58 23%2C64' fill='none' stroke='%23000' stroke-width='.18'/%3E%3Cpolyline points='76%2C50 72%2C57 78%2C62 74%2C68' fill='none' stroke='%23000' stroke-width='.18'/%3E%3Ccircle cx='24' cy='22' r='.45'/%3E%3Ccircle cx='30' cy='27' r='.45'/%3E%3Ccircle cx='27' cy='33' r='.45'/%3E%3Ccircle cx='34' cy='36' r='.45'/%3E%3Ccircle cx='31' cy='42' r='.45'/%3E%3Ccircle cx='70' cy='21' r='.45'/%3E%3Ccircle cx='76' cy='25' r='.45'/%3E%3Ccircle cx='73' cy='31' r='.45'/%3E%3Ccircle cx='79' cy='35' r='.45'/%3E%3Ccircle cx='22' cy='52' r='.45'/%3E%3Ccircle cx='27' cy='58' r='.45'/%3E%3Ccircle cx='23' cy='64' r='.45'/%3E%3Ccircle cx='76' cy='50' r='.45'/%3E%3Ccircle cx='72' cy='57' r='.45'/%3E%3Ccircle cx='78' cy='62' r='.45'/%3E%3Ccircle cx='74' cy='68' r='.45'/%3E%3C/svg%3E") 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolyline points='24%2C22 30%2C27 27%2C33 34%2C36 31%2C42' fill='none' stroke='%23000' stroke-width='.18'/%3E%3Cpolyline points='70%2C21 76%2C25 73%2C31 79%2C35' fill='none' stroke='%23000' stroke-width='.18'/%3E%3Cpolyline points='22%2C52 27%2C58 23%2C64' fill='none' stroke='%23000' stroke-width='.18'/%3E%3Cpolyline points='76%2C50 72%2C57 78%2C62 74%2C68' fill='none' stroke='%23000' stroke-width='.18'/%3E%3Ccircle cx='24' cy='22' r='.45'/%3E%3Ccircle cx='30' cy='27' r='.45'/%3E%3Ccircle cx='27' cy='33' r='.45'/%3E%3Ccircle cx='34' cy='36' r='.45'/%3E%3Ccircle cx='31' cy='42' r='.45'/%3E%3Ccircle cx='70' cy='21' r='.45'/%3E%3Ccircle cx='76' cy='25' r='.45'/%3E%3Ccircle cx='73' cy='31' r='.45'/%3E%3Ccircle cx='79' cy='35' r='.45'/%3E%3Ccircle cx='22' cy='52' r='.45'/%3E%3Ccircle cx='27' cy='58' r='.45'/%3E%3Ccircle cx='23' cy='64' r='.45'/%3E%3Ccircle cx='76' cy='50' r='.45'/%3E%3Ccircle cx='72' cy='57' r='.45'/%3E%3Ccircle cx='78' cy='62' r='.45'/%3E%3Ccircle cx='74' cy='68' r='.45'/%3E%3C/svg%3E") 0 0/100% 100%}
/* Art déco : éventails en écailles */
.fx [data-bg="art-deco"] .fa-pat{background:rgb(var(--f-pat)/.3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M0 10a10 10 0 0 1 20 0M3 10a7 7 0 0 1 14 0M6 10a4 4 0 0 1 8 0'/%3E%3Cpath d='M-10 20a10 10 0 0 1 20 0M-7 20a7 7 0 0 1 14 0M-4 20a4 4 0 0 1 8 0M10 20a10 10 0 0 1 20 0M13 20a7 7 0 0 1 14 0M16 20a4 4 0 0 1 8 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/calc(14 * var(--u)) calc(14 * var(--u));mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M0 10a10 10 0 0 1 20 0M3 10a7 7 0 0 1 14 0M6 10a4 4 0 0 1 8 0'/%3E%3Cpath d='M-10 20a10 10 0 0 1 20 0M-7 20a7 7 0 0 1 14 0M-4 20a4 4 0 0 1 8 0M10 20a10 10 0 0 1 20 0M13 20a7 7 0 0 1 14 0M16 20a4 4 0 0 1 8 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/calc(14 * var(--u)) calc(14 * var(--u))}
.fx [data-bg="vagues"] .fa-pat{background:rgb(var(--f-pat)/.3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cpath d='M0 6q10-6 20 0t20 0' fill='none' stroke='%23000' stroke-width='.6'/%3E%3C/svg%3E") 0 0/calc(22 * var(--u)) calc(6.6 * var(--u));mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cpath d='M0 6q10-6 20 0t20 0' fill='none' stroke='%23000' stroke-width='.6'/%3E%3C/svg%3E") 0 0/calc(22 * var(--u)) calc(6.6 * var(--u))}
/* Losanges écossais (argyle) : grand treillis fin */
.fx [data-bg="argyle"] .fa-pat{background:repeating-linear-gradient(60deg,rgb(var(--f-pat)/.24) 0 calc(.6 * var(--u)),transparent calc(.6 * var(--u)) calc(20 * var(--u))),repeating-linear-gradient(-60deg,rgb(var(--f-pat)/.24) 0 calc(.6 * var(--u)),transparent calc(.6 * var(--u)) calc(20 * var(--u)))}
/* Lignes de balayage d’écran, très fines */
.fx [data-bg="scanlines"] .fa-pat{background:repeating-linear-gradient(0deg,rgb(var(--f-pat)/.16) 0 calc(.5 * var(--u)),transparent calc(.5 * var(--u)) calc(2.4 * var(--u)))}
/* Confettis : tricolores sur le full art, or et blanc sur l’or ; ils tombent en tournant */
.fx [data-bg="confettis"] .fa-stars{display:block}
.fx [data-bg="confettis"] .fa-stars i{border-radius:1px;clip-path:none;aspect-ratio:.45;width:calc(var(--s) * .9 * var(--u));background:var(--bleu-600);
  animation:fx-fall calc(var(--fx-cycle) * var(--k) * 1.4) linear infinite;animation-delay:calc(var(--d) * var(--fx-cycle) * -1.4)}
.fx [data-bg="confettis"] .fa-stars i:nth-child(3n+1){background:#fff}
.fx [data-bg="confettis"] .fa-stars i:nth-child(3n+2){background:var(--rouge-600)}
.fx .r-gold [data-bg="confettis"] .fa-stars i{background:var(--gold-300)}
.fx .r-gold [data-bg="confettis"] .fa-stars i:nth-child(odd){background:var(--gold-100)}
@keyframes fx-fall{0%{opacity:0;transform:translateY(calc(-40 * var(--u))) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translateY(calc(70 * var(--u))) rotate(540deg)}}
/* Trame manga : points serrés, plus présents vers les bords */
.fx [data-bg="trame-manga"] .fa-pat{background:radial-gradient(circle,rgb(var(--f-pat)/.5) 0 calc(1 * var(--u)),transparent calc(1.25 * var(--u))) 0 0/calc(4.4 * var(--u)) calc(4.4 * var(--u));
  -webkit-mask:radial-gradient(ellipse calc(150 * var(--u)) calc(190 * var(--u)) at 50% 42%,transparent 45%,#000 100%);mask:radial-gradient(ellipse calc(150 * var(--u)) calc(190 * var(--u)) at 50% 42%,transparent 45%,#000 100%)}
/* Étoiles filantes : quelques traits qui traversent le haut de la carte */
.fx [data-bg="filantes"] .fa-stars{display:block}
.fx [data-bg="filantes"] .fa-stars i{width:calc(46 * var(--u));height:calc(1 * var(--u));aspect-ratio:auto;border-radius:calc(1 * var(--u));clip-path:none;scale:1;background:linear-gradient(90deg,transparent,var(--star));
  rotate:-28deg;opacity:0;animation:fx-shoot calc(var(--fx-cycle) * var(--k) * 1.8) ease-in infinite;animation-delay:calc(var(--d) * var(--fx-cycle) * -1.8)}
.fx [data-bg="filantes"] .fa-stars i:nth-child(n+9){display:none}
@keyframes fx-shoot{0%{opacity:0;transform:translateX(calc(-60 * var(--u)))}4%{opacity:1}14%{opacity:0;transform:translateX(calc(90 * var(--u)))}100%{opacity:0;transform:translateX(calc(90 * var(--u)))}}
/* Pluie de lumière : traits verticaux fins qui descendent */
.fx [data-bg="pluie"] .fa-stars{display:block}
.fx [data-bg="pluie"] .fa-stars i{width:calc(.8 * var(--u));height:calc(22 * var(--u));aspect-ratio:auto;border-radius:calc(1 * var(--u));clip-path:none;scale:1;background:linear-gradient(transparent,var(--star));
  animation:fx-rain calc(var(--fx-cycle) * var(--k) * .8) linear infinite;animation-delay:calc(var(--d) * var(--fx-cycle) * -.8)}
.fx [data-bg="pluie"] .fa-stars i:nth-child(n+30){display:none}
@keyframes fx-rain{0%{opacity:0;transform:translateY(calc(-50 * var(--u)))}20%{opacity:.8}100%{opacity:0;transform:translateY(calc(80 * var(--u)))}}
.fx [data-bg="etoiles"] .fa-pat{background:radial-gradient(50% 36% at 50% 40%,rgb(var(--f-pat)/.18),transparent 70%)}
.fx [data-bg="etoiles"] .fa-stars{display:block}
/* Étoiles : petits points qui scintillent doucement, quelques ✦ plus grandes */
.fa-stars i{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--s) * var(--u));aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,var(--star) 0 32%,transparent 72%);opacity:.3;
  animation:fx-star calc(var(--fx-cycle) * var(--k)) ease-in-out infinite;animation-delay:calc(var(--d) * var(--fx-cycle) * -1)}
.fa-stars i.big{border-radius:0;background:radial-gradient(circle,#fff 0 14%,var(--star) 34%,transparent 72%);
  clip-path:polygon(50% 0,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0 50%,44% 44%)}
@keyframes fx-star{0%,100%{opacity:.25;scale:.6}50%{opacity:1;scale:1}}

/* Motifs subtils (13/11/2026, à la place de l’éclat de BD, du soleil levant, de la topographie, du rideau et du ruban tricolore) */
/* Poussière d’or : particules fines qui montent lentement et s’éteignent */
.fx [data-bg="poussiere"] .fa-stars{display:block}
.fx [data-bg="poussiere"] .fa-stars i{clip-path:none;border-radius:50%;width:calc(var(--s) * .32 * var(--u));background:radial-gradient(circle,var(--star) 0 40%,transparent 75%);
  animation:fx-poussiere calc(var(--fx-cycle) * var(--k) * 1.8) linear infinite;animation-delay:calc(var(--d) * var(--fx-cycle) * -1.8)}
@keyframes fx-poussiere{0%{opacity:0;transform:translateY(0)}25%{opacity:.75}100%{opacity:0;transform:translateY(calc(-36 * var(--u)))}}
/* Guilloché : deux réseaux d’anneaux fins décalés, comme une gravure de billet */
.fx [data-bg="guilloche"] .fa-pat{background:
  repeating-radial-gradient(circle at 42% 40%,rgb(var(--f-pat)/.16) 0 calc(.35 * var(--u)),transparent calc(.35 * var(--u)) calc(3 * var(--u))),
  repeating-radial-gradient(circle at 58% 46%,rgb(var(--f-pat)/.12) 0 calc(.35 * var(--u)),transparent calc(.35 * var(--u)) calc(3 * var(--u)))}
/* Bokeh : quelques lumières rondes et floues */
.fx [data-bg="bokeh"] .fa-pat{filter:blur(calc(1.5 * var(--u)));background:
  radial-gradient(circle at 32% 34%,rgb(var(--f-pat)/.2) 0 calc(9 * var(--u)),transparent calc(13 * var(--u))),
  radial-gradient(circle at 70% 30%,rgb(var(--f-pat)/.14) 0 calc(14 * var(--u)),transparent calc(19 * var(--u))),
  radial-gradient(circle at 60% 58%,rgb(var(--f-pat)/.12) 0 calc(7 * var(--u)),transparent calc(11 * var(--u))),
  radial-gradient(circle at 36% 62%,rgb(var(--f-pat)/.16) 0 calc(11 * var(--u)),transparent calc(16 * var(--u))),
  radial-gradient(circle at 50% 46%,rgb(var(--f-pat)/.1) 0 calc(20 * var(--u)),transparent calc(26 * var(--u)))}
/* Tissage : croisillons très fins */
.fx [data-bg="tissage"] .fa-pat{background:
  repeating-linear-gradient(45deg,rgb(var(--f-pat)/.12) 0 calc(.45 * var(--u)),transparent calc(.45 * var(--u)) calc(4 * var(--u))),
  repeating-linear-gradient(-45deg,rgb(var(--f-pat)/.12) 0 calc(.45 * var(--u)),transparent calc(.45 * var(--u)) calc(4 * var(--u)))}
/* Micro-pois : semis clairsemé de points minuscules */
.fx [data-bg="micro-pois"] .fa-pat{background:
  radial-gradient(circle,rgb(var(--f-pat)/.3) 0 calc(.45 * var(--u)),transparent calc(.7 * var(--u))) 0 0/calc(10 * var(--u)) calc(10 * var(--u)),
  radial-gradient(circle,rgb(var(--f-pat)/.18) 0 calc(.4 * var(--u)),transparent calc(.65 * var(--u))) calc(5 * var(--u)) calc(5 * var(--u))/calc(10 * var(--u)) calc(10 * var(--u))}
/* Animation du fond, au choix (data-anim) ; --fx-cycle est posé sur chaque calque (vitesse propre, labo du 13/11/2026) */
/* Dérive lente : mouvement dans le temps (et non plus selon l’inclinaison), pour suivre la vitesse réglée sur le calque (13/11/2026) */
.fx [data-anim="derive"] :is(.fa-pat,.fa-stars){animation:fx-derive calc(var(--fx-cycle) * 2) ease-in-out infinite alternate}
@keyframes fx-derive{from{rotate:-6deg;translate:0 calc(-5 * var(--u))}to{rotate:6deg;translate:0 calc(5 * var(--u))}}
.fx [data-anim="respiration"] :is(.fa-pat,.fa-stars){animation:fx-breathe calc(var(--fx-cycle) / 2) ease-in-out infinite alternate}
.fx [data-anim="rotation"] :is(.fa-pat,.fa-stars){animation:fx-spin calc(var(--fx-cycle) * 6) linear infinite}
@keyframes fx-spin{to{rotate:360deg}}
.fx [data-anim="flottement"] :is(.fa-pat,.fa-stars){animation:fx-float var(--fx-cycle) ease-in-out infinite alternate}
@keyframes fx-float{from{translate:0 calc(-7 * var(--u))}to{translate:0 calc(7 * var(--u))}}
@keyframes fx-breathe{from{opacity:.35;scale:.97}to{opacity:1;scale:1.04}}
.fx .fa-layer[data-anim="balayage"]{
  -webkit-mask:linear-gradient(105deg,rgb(0 0 0/.25) 35%,#000 50%,rgb(0 0 0/.25) 65%) 100% 0/300% 100% no-repeat;
  mask:linear-gradient(105deg,rgb(0 0 0/.25) 35%,#000 50%,rgb(0 0 0/.25) 65%) 100% 0/300% 100% no-repeat;
  animation:fx-mask-sweep var(--fx-cycle) ease-in-out infinite}
@keyframes fx-mask-sweep{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}

/* Haut de carte plus sombre pour que le nom reste lisible sur les couleurs claires */
.fx .card:is(.r-full,.r-gold) .shade{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 75%,transparent) 0%,color-mix(in srgb,var(--ink) 30%,transparent) 16%,transparent 28%,transparent 44%,color-mix(in srgb,var(--ink) 80%,transparent) 64%,color-mix(in srgb,var(--ink) 95%,transparent) 100%)}
/* Portrait : mat, détaché du fond par une ombre portée, légèrement en avant (parallaxe inverse, réglée par --pdepth) */
.fx .fa-portrait{left:50%;top:calc(30 * var(--u));width:calc(320 * var(--u));max-width:none;height:auto;
  translate:calc(-50% - (var(--mx) - 50%) * .02 * var(--pdepth)) calc((50% - var(--my)) * .02 * var(--pdepth));
  filter:drop-shadow(0 calc(4 * var(--u)) calc(18 * var(--u)) color-mix(in srgb,var(--ink) calc(var(--halo) * 100%),transparent));
  -webkit-mask:linear-gradient(180deg,#000 72%,transparent 97%);mask:linear-gradient(180deg,#000 72%,transparent 97%)}
/* Fond fourni (data/photos.js) : plein cadre ; portrait au format de la carte (5:8) : posé plein cadre */
.fx .card .fa-bg.has-img{background-position:center;background-size:cover;background-repeat:no-repeat}
.fx .fa-portrait.plein{left:calc(-6 * var(--u));top:calc(-6 * var(--u));width:calc(312 * var(--u));height:calc(492 * var(--u));object-fit:cover;-webkit-mask:none;mask:none;
  translate:calc((50% - var(--mx)) * .02 * var(--pdepth)) calc((50% - var(--my)) * .02 * var(--pdepth))}
.fx .r-full .sheen{opacity:var(--f-glare);mix-blend-mode:soft-light;filter:none;
  background:linear-gradient(115deg,transparent 36%,#fff 50%,transparent 64%) no-repeat;background-size:250% 250%;background-position:var(--mx) var(--my)}
/* ───── Bandeau (naissance · logo · candidatures) en full art et or ───── */
.fx .card:is(.r-full,.r-gold){--tile-ring:rgb(255 255 255/.22)}
.fx .card.r-gold{--tile-ring:transparent}
/* Verre sombre : noir transparent + flou d’arrière-plan (Figma : black/alpha + Background blur) */
/* Les 3 mesures aussi : verre sombre, lisible sur la photo (Figma : card/cell/key-proposal glass=dark) */
.fx .card:is(.r-full,.r-gold) :is(.c-data,.c-body li){background:rgb(0 0 0/var(--tile-op));
  box-shadow:inset 0 0 0 1px var(--tile-ring),0 calc(4 * var(--u)) calc(14 * var(--u)) rgb(0 0 0/.3);
  -webkit-backdrop-filter:blur(calc(var(--tile-blur) * var(--u)));backdrop-filter:blur(calc(var(--tile-blur) * var(--u)))}
/* Mesures phares sur verre sombre : le liseré est la bordure, comptée dans la hauteur (Figma : key-proposal glass=dark, white/alpha-22) */
.fx .card:is(.r-full,.r-gold) .c-body li{border-color:var(--tile-ring);box-shadow:none}

/* ───── Point « candidature » : lisible même sur un fond rouge ou vert ───── */
.fx .card[data-dot="cercle"] .c-data .dots i:last-child{box-shadow:0 0 0 calc(.5 * var(--u)) #fff}
.fx .card[data-dot="blanc"] .c-data .dots i{background:rgb(255 255 255/.45)}
.fx .card[data-dot="blanc"] .c-data .dots i:last-child{background:#fff}
.fx .card[data-dot="or"] .c-data .dots i:last-child{background:var(--gold-300);box-shadow:0 0 0 calc(.8 * var(--u)) rgb(0 0 0/.35)}

/* ───── Or : la photo reste naturelle ; cadre, liserés et chiffres en or métallique ───── */
/* Pas de contour en plus autour de la carte : le cadre or suffit */
.fx .card.r-gold::before{box-shadow:0 calc(8 * 100cqw / 300) calc(24 * 100cqw / 300) calc(-2 * 100cqw / 300) rgb(0 0 0/.45)}
/* Teinte sombre neutre (bleu nuit) : la couleur du parti ne salit pas l’or */
.fx .r-gold .face{--ink:color-mix(in srgb,var(--c) 10%,#060914)}
/* Fond nuit, éclairci par --o-light (la lueur dorée derrière le portrait est retirée le 13/11/2026 : fond allégé) */
.fx .r-gold .fa-bg{background:
  radial-gradient(90% 60% at 50% 38%,color-mix(in srgb,var(--c) 12%,hsl(228 42% calc(13% + var(--o-light) * 20%))) 0%,color-mix(in srgb,var(--c) 8%,hsl(230 48% calc(7% + var(--o-light) * 8%))) 58%,#070913 100%)}
/* Cadre : calque masqué par le SVG du cadre, l’or glisse avec l’inclinaison + un éclat qui passe à chaque cycle */
.fx .r-gold .gild{display:block;inset:0;z-index:6;pointer-events:none;opacity:var(--gold-shine);
  background:var(--gold-metal);background-size:250% 250%;
  background-position:calc(var(--mx) + (var(--t) - .5) * var(--idle) * 30%) calc(var(--my) + (var(--t) - .5) * var(--idle) * 30%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fx .r-gold .gild::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 44%,rgb(255 255 255/.9) 50%,transparent 56%) no-repeat;
  background-size:300% 100%;background-position:150% 0;animation:fx-sweep var(--fx-cycle) ease-in-out infinite}
@keyframes fx-sweep{0%{background-position:150% 0}40%,100%{background-position:-50% 0}}
/* Paillettes ✦ sur les ornements du cadre */
.fx .r-gold .glints{display:block;inset:0;z-index:7;pointer-events:none;opacity:var(--gold-sparkle)}
.glints i{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--s) * var(--u));aspect-ratio:1;translate:-50% -50%;
  /* éclat doré (14/11/2026 : il était blanc) */
  background:radial-gradient(circle,var(--gold-100) 0 12%,var(--gold-300) 30%,var(--gold-500) 52%,transparent 74%);
  clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);
  opacity:0;animation:fx-twinkle calc(var(--fx-cycle) * var(--k, 1)) ease-in-out infinite;animation-delay:calc(var(--d) * var(--fx-cycle) * -1)}
@keyframes fx-twinkle{0%,55%,100%{opacity:0;scale:.2;rotate:0deg}70%{opacity:1;scale:1;rotate:45deg}85%{opacity:0;scale:.4;rotate:90deg}}
/* Chiffres et nom en or */
.fx .r-gold :is(.c-name b,.c-data .born b,.c-body li i){color:var(--gold-300);background:var(--gold-text);background-size:250% 250%;background-position:var(--mx) var(--my);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fx .r-gold .c-name b{padding-right:calc(4 * var(--u))}
.fx .r-gold .c-body li i{padding-inline:calc(2 * var(--u));margin-inline:calc(-2 * var(--u))}
/* Liserés : bordure en dégradé or (anneau masqué) */
.fx .r-gold .c-body li{position:relative;box-shadow:none}
.fx .r-gold :is(.c-body li,.c-data)::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:calc(1 * var(--u));pointer-events:none;
  background:var(--gold-metal);background-size:300% 300%;background-position:var(--mx) var(--my);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx .r-gold .c-body h4::before,.fx .r-gold .c-body h4::after{background:var(--gold-300)}
.fx .r-gold .c-foot{color:var(--gold-100)}
.fx .r-gold .c-foot .gauge i{background:var(--gold-300)}
/* Reflet sur la photo : blanc et discret, aucune teinte dorée */
.fx .r-gold .sheen{opacity:var(--gold-glare);mix-blend-mode:soft-light;filter:none;
  background:linear-gradient(115deg,transparent 36%,#fff 50%,transparent 64%) no-repeat;background-size:250% 250%;background-position:var(--mx) var(--my)}

/* ───── Allègements (téléphones) ───── */
/* Calques vides : jamais dessinés (second fond « Aucun » ; holo du fond, grain ou reflet réglés à 0 → data-off, posé par js/carte.js) */
.fx .fa-layer[data-bg="aucun"],
.fx .card[data-off~="foil"] .fa-bg::after,
.fx .card[data-off~="grain"] .fa-grain,
.fx .card[data-off~="glare"] .sheen{display:none!important}
/* Vignettes figées (.fige : grille de la collection, carrousel de la page programme, onboarding) : la carte au repos, sans animation ni flou d’arrière-plan ;
   seule la carte ouverte en grand s’anime */
.fx .fige .card,.fx .fige .card *,.fx .fige .card *::before,.fx .fige .card *::after{animation:none!important;transition:none!important}
.fx .fige .card :is(.c-data,.c-body li){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.fx .fige .card:is(.r-full,.r-gold) :is(.c-data,.c-body li){background:rgb(0 0 0/calc(var(--tile-op) + .15))}
/* Carte sortie de l’écran (.hors, posé par js/carte.js) : animations en pause */
.fx .card.hors,.fx .card.hors *,.fx .card.hors *::before,.fx .card.hors *::after{animation-play-state:paused!important}
/* Cartes du dessous de la pile, après l’ouverture d’un booster (.dessous, posé par js/ecrans/agora.js) : en pause aussi */
.fx .card.dessous,.fx .card.dessous *,.fx .card.dessous *::before,.fx .card.dessous *::after{animation-play-state:paused!important}

/* ───── Dos de carte : reflet holographique sur les traits (Figma : card/component/card-back, traits en gradient/holo) ─────
   Calque masqué par les traits seuls (assets/cartes/dos-traits.svg, posé par dosCarteHTML dans data/boosters.js) :
   le dégradé --holo glisse avec l’inclinaison (--mx, --my) et un éclat blanc parcourt les traits à chaque cycle */
.cback-holo{position:absolute;inset:0;pointer-events:none;display:none}
.fx .cback-holo{display:block;opacity:.95;mix-blend-mode:screen;
  background:var(--holo);background-size:260% 260%;
  background-position:calc(100% - var(--mx)) calc(100% - var(--my));
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fx .cback-holo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 42%,rgb(255 255 255/.95) 50%,transparent 58%) no-repeat;
  background-size:300% 100%;background-position:150% 0;animation:fx-sweep var(--fx-cycle) ease-in-out infinite}