/* DataCard — la carte : raretés, niveaux, ascension, effet holographique 3D */
.card {
  --w: 210px; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --hue: 210; --st: 0; --hr: 0; --hl: 0;
  --rc: #aab8c8; --rc2: #5b6b7e;
  position: relative; width: var(--w); height: calc(var(--w) * 1.42); font-size: calc(var(--w) / 19);
  perspective: 900px; cursor: pointer; user-select: none; flex: none; text-align: left;
}
.card.sm { --w: 176px; }
.card .tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; }
.card.active .tilt { transition: none; }
.card .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2, .85, .25, 1); }
.card.up .inner { transform: rotateY(180deg); }
.card .face { position: absolute; inset: 0; border-radius: 1.2em; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card .front { transform: rotateY(180deg); padding: .5em; background: linear-gradient(140deg, var(--rc), var(--rc2)); box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5); }
.card.r3 .front { box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5), 0 0 1.6em rgba(255, 200, 70, .35); }
.card.r4 .front { box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5), 0 0 2em rgba(255, 110, 220, .45); }

/* Raretés */
.r0 { --rc: #b6c3d3; --rc2: #5b6b7e; --hr: 0; }
.r1 { --rc: #7cc0ff; --rc2: #2a63c9; --hr: .1; }
.r2 { --rc: #d09bff; --rc2: #6a2fd0; --hr: .28; }
.r3 { --rc: #ffe08a; --rc2: #c9801a; --hr: .42; }
.r4 { --rc: #ff8be6; --rc2: #6a5cff; --hr: .55; }
/* Niveaux : plus le niveau monte, plus l'effet holo se voit */
.lv1 { --hl: 0; } .lv2 { --hl: .06; } .lv3 { --hl: .22; } .lv4 { --hl: .36; } .lv5 { --hl: .5; }

.frame {
  height: 100%; border-radius: .85em; padding: .6em; display: flex; flex-direction: column; gap: .4em;
  background: linear-gradient(170deg, hsl(var(--hue) 38% 15%), hsl(calc(var(--hue) + 30) 42% 8%));
  box-shadow: inset 0 0 0 .08em rgba(255, 255, 255, .08);
}
.c-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; }
.c-name { font-weight: 800; font-size: 1.08em; line-height: 1.1; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.c-lv { font-size: .62em; font-weight: 700; color: var(--rc); white-space: nowrap; }
.c-art {
  position: relative; height: 10.6em; border-radius: .6em; overflow: hidden; flex: none; display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 20%, hsl(var(--hue) 90% 62% / .85), transparent 62%),
    radial-gradient(circle at 80% 90%, hsl(calc(var(--hue) + 60) 90% 55% / .55), transparent 55%),
    linear-gradient(160deg, hsl(var(--hue) 65% 28%), hsl(calc(var(--hue) + 40) 70% 12%));
  box-shadow: inset 0 0 0 .08em rgba(255, 255, 255, .18);
}
.c-pattern { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 1.2em 1.2em; -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 75%); mask-image: radial-gradient(circle, #000 20%, transparent 75%); }
/* Pastille qui porte le logo (fond clair pour les logos de marque, verre coloré pour les pictogrammes) */
.plate { position: relative; width: 6.7em; height: 6.7em; border-radius: 1.75em; display: grid; place-items: center; transform: translateZ(30px); box-shadow: 0 .55em 1.2em rgba(0, 0, 0, .5), inset 0 0 0 .1em rgba(255, 255, 255, .6); }
.plate img { width: 4.6em; height: 4.6em; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.plate.light { background: linear-gradient(145deg, #ffffff, #e4e9f8); }
.plate.dark { background: linear-gradient(145deg, #2c3152, #131629); box-shadow: 0 .55em 1.2em rgba(0, 0, 0, .5), inset 0 0 0 .1em rgba(255, 255, 255, .25); }
.plate.glass { background: linear-gradient(145deg, hsl(var(--hue) 85% 64% / .6), hsl(calc(var(--hue) + 40) 80% 38% / .45)); box-shadow: 0 .55em 1.2em rgba(0, 0, 0, .45), inset 0 0 0 .1em rgba(255, 255, 255, .4), inset 0 .3em .6em rgba(255, 255, 255, .22); }
.plate.glass img { width: 4.3em; height: 4.3em; filter: drop-shadow(0 .1em .2em rgba(0, 0, 0, .35)); }
.plate .ic { width: 3.4em; height: 3.4em; color: #5a638f; }
.card.sm .plate { width: 7.4em; height: 7.4em; } .card.sm .plate img { width: 5em; height: 5em; }
.c-chip .ic { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .2em; }
.c-chip { position: absolute; left: .5em; bottom: .45em; font-size: .56em; font-weight: 700; padding: .25em .6em; border-radius: 99em; background: rgba(0, 0, 0, .5); color: #e8ecff; backdrop-filter: blur(4px); }
.c-type { display: flex; justify-content: space-between; align-items: center; font-size: .66em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rc); }
.c-type em { font-style: normal; font-size: .9em; color: #fff; padding: .1em .6em; border-radius: 99em; background: linear-gradient(90deg, #ff5fd2, #6c8cff, #3ddc97); letter-spacing: .06em; }
.c-desc { flex: 1; font-size: .72em; line-height: 1.38; color: #d4dbf7; overflow: hidden; }
.c-stats { display: grid; gap: .3em; }
.c-stats div { display: grid; grid-template-columns: 6.4em 1fr; gap: .5em; align-items: center; font-size: .58em; color: #9aa6d6; font-weight: 600; }
.c-stats i { display: block; height: .7em; border-radius: 9em; background: rgba(255, 255, 255, .1); overflow: hidden; }
.c-stats i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rc2), var(--rc)); }
.c-foot { display: flex; justify-content: space-between; align-items: center; min-height: 1.3em; }
.pips { display: flex; gap: .3em; }
.pips i { width: .75em; height: .75em; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.pips i.on { background: var(--rc); box-shadow: 0 0 .5em var(--rc); }
.c-stars { font-size: .85em; font-weight: 800; color: var(--gold); text-shadow: 0 0 .6em rgba(255, 194, 61, .9); letter-spacing: .05em; }

/* Version vignette (collection) : on cache le texte, l'art prend la place */
.card.sm .c-desc, .card.sm .c-stats { display: none; }
.card.sm .c-art { flex: 1; height: auto; }
.card.sm .c-name { font-size: 1.15em; }

/* Dos de la carte : feuille holographique, rayons, anneaux et ornements */
.card .back {
  --bk-core: radial-gradient(circle at 50% 50%, #5b34d6 0, #231c7a 34%, #0b0d3c 70%, #04051a 100%);
  --bk-rim: linear-gradient(135deg, #ff3fd0, #ffd84a, #3ddc97, #4fd1ff, #7a6bff, #ff3fd0);
  display: grid; place-items: center; border: .5em solid transparent;
  background: var(--bk-core) padding-box, var(--bk-rim) border-box; background-size: auto, 300% 300%;
  box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5), inset 0 0 2.4em rgba(120, 90, 255, .45);
  animation: rimShift 5s linear infinite;
}
@keyframes rimShift { from { background-position: 0 0, 0% 0%; } to { background-position: 0 0, 100% 100%; } }
.card .back > i, .card .back > b { position: absolute; pointer-events: none; }
.bk-rays { left: 50%; top: 50%; width: 60em; height: 60em; margin: -30em 0 0 -30em; animation: spin 40s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(150, 170, 255, .42) 0 3deg, transparent 3deg 9deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 32%); mask-image: radial-gradient(circle, #000 0, transparent 32%); }
.bk-lattice { inset: 0; opacity: .8;
  background: repeating-linear-gradient(45deg, rgba(110, 200, 255, .2) 0 .09em, transparent .09em 1.7em), repeating-linear-gradient(-45deg, rgba(255, 110, 220, .2) 0 .09em, transparent .09em 1.7em);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 14%, #000 80%); mask-image: radial-gradient(circle at 50% 50%, transparent 14%, #000 80%); }
.bk-frame { inset: .6em; border-radius: .8em; border: .12em solid rgba(255, 255, 255, .55); box-shadow: inset 0 0 1em rgba(140, 160, 255, .5), 0 0 .8em rgba(140, 160, 255, .4); }
.bk-frame::after { content: ""; position: absolute; inset: .35em; border-radius: .5em; border: .08em dashed rgba(255, 255, 255, .3); }
.bk-ring { left: 50%; top: 50%; width: 11.4em; height: 11.4em; margin: -5.7em 0 0 -5.7em; border-radius: 50%; animation: spin 6s linear infinite;
  background: conic-gradient(from 0deg, #ff3fd0, #ffd84a, #3ddc97, #4fd1ff, #7a6bff, #ff3fd0);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - .5em), #000 calc(100% - .45em)); mask-image: radial-gradient(farthest-side, transparent calc(100% - .5em), #000 calc(100% - .45em)); }
.bk-orbit { left: 50%; top: 50%; width: 15em; height: 15em; margin: -7.5em 0 0 -7.5em; border-radius: 50%; border: .1em dashed rgba(255, 255, 255, .4); animation: spin 14s linear infinite reverse; }
.bk-orbit::before, .bk-orbit::after { content: ""; position: absolute; left: 50%; top: 0; width: .7em; height: .7em; margin: -.35em 0 0 -.35em; border-radius: 50%; background: #fff; box-shadow: 0 0 .8em .25em rgba(255, 255, 255, .9); }
.bk-orbit::after { top: auto; bottom: 0; margin: 0 0 -.35em -.35em; background: #ffd84a; box-shadow: 0 0 .8em .25em rgba(255, 216, 74, .9); }
.back-art { position: relative; display: grid; place-items: center; z-index: 1; }
.back-art::before { content: ""; position: absolute; width: 10.2em; height: 10.2em; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .4), rgba(18, 10, 64, .85) 58%, rgba(6, 4, 28, .95)); box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .45), 0 0 2em rgba(120, 90, 255, .8); }
.back-art img { position: relative; width: 6.4em; filter: drop-shadow(0 .2em .5em rgba(0, 0, 0, .55)); animation: markPulse 2.4s ease-in-out infinite; }
.bk-gems { top: 1.9em; left: 0; right: 0; display: flex; justify-content: center; gap: .9em; }
.bk-gems s { width: .8em; height: .8em; transform: rotate(45deg); border-radius: 18%; background: linear-gradient(135deg, #fff, var(--g) 55%); box-shadow: 0 0 .9em .1em var(--g), 0 0 0 .08em rgba(255, 255, 255, .55); animation: gemGlow 2s ease-in-out infinite; }
.bk-gems s:nth-child(2) { animation-delay: .2s; } .bk-gems s:nth-child(3) { animation-delay: .4s; } .bk-gems s:nth-child(4) { animation-delay: .6s; } .bk-gems s:nth-child(5) { animation-delay: .8s; }
.card .back > b.bk-name { left: 0; right: 0; bottom: 1.7em; text-align: center; font-size: 1.55em; font-weight: 900; letter-spacing: .3em; padding-left: .3em; color: transparent;
  background: linear-gradient(100deg, #fff 0%, #8fe8ff 30%, #ff9be8 55%, #fff 80%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; animation: sweep 4s linear infinite; text-shadow: none; }
.bk-c { width: 1em; height: 1em; transform: rotate(45deg); border-radius: 22%; background: linear-gradient(135deg, #fff, #ffd84a); box-shadow: 0 0 .7em rgba(255, 216, 74, .9); }
.bk-c.c1 { left: 1.15em; top: 1.15em; } .bk-c.c2 { right: 1.15em; top: 1.15em; } .bk-c.c3 { left: 1.15em; bottom: 1.15em; } .bk-c.c4 { right: 1.15em; bottom: 1.15em; }
.bk-foil { inset: 0; mix-blend-mode: color-dodge; opacity: .38;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 0, 150, .7) 32%, rgba(0, 255, 230, .7) 46%, rgba(255, 230, 0, .7) 60%, rgba(120, 90, 255, .65) 72%, transparent 86%); background-size: 260% 260%; background-position: var(--mx) var(--my); }
.card:not(.active) .bk-foil { animation: holoIdle 5.5s ease-in-out infinite alternate; }
.bk-shine { inset: 0; mix-blend-mode: overlay; background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .95) 48%, rgba(160, 255, 245, .6) 53%, transparent 66%); background-size: 300% 100%; animation: sweep 3.6s linear infinite; }
.deck .card:not(.top) .back * { animation-play-state: paused; }
/* indice de rareté : le dos s'embrase en or ou en rose */
.card.hint .back { --hc: 255, 194, 61; --bk-rim: linear-gradient(135deg, #fff, #ffc23d, #fff2b0, #ff9a3d, #fff, #ffc23d); animation: hintPulse 1.2s ease-in-out infinite, rimShift 2.5s linear infinite; }
.card.hint.hint4 .back { --hc: 255, 110, 220; --bk-rim: linear-gradient(135deg, #fff, #ff7de0, #ffd0f4, #b36bff, #fff, #ff7de0); }
.card.hint .bk-ring { background: conic-gradient(from 0deg, #ffc23d, #fff6c8, #ff9a3d, #ffc23d); }
.card.hint.hint4 .bk-ring { background: conic-gradient(from 0deg, #ff7de0, #fff, #b36bff, #ff7de0); }
.card.hint .bk-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 205, 90, .6) 0 3deg, transparent 3deg 9deg); }
.card.hint.hint4 .bk-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 125, 224, .6) 0 3deg, transparent 3deg 9deg); }
@keyframes hintPulse { 0%, 100% { box-shadow: 0 0 1.6em rgba(var(--hc), .55), 0 .6em 1.6em rgba(0, 0, 0, .5); } 50% { box-shadow: 0 0 3.2em rgba(var(--hc), .95), 0 .6em 1.6em rgba(0, 0, 0, .5); } }

/* Effets holographiques */
.holo, .glare, .sparkle { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.holo {
  opacity: calc((var(--hr) + var(--hl)) * .55); mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 0, 150, .6) 32%, rgba(0, 255, 230, .6) 46%, rgba(255, 230, 0, .6) 60%, rgba(120, 90, 255, .55) 72%, transparent 86%);
  background-size: 260% 260%; background-position: var(--mx) var(--my);
}
.card:not(.active) .holo { animation: holoIdle 5.5s ease-in-out infinite alternate; }
@keyframes holoIdle { from { background-position: 15% 20%; } to { background-position: 85% 80%; } }
.glare { opacity: 0; transition: opacity .2s; mix-blend-mode: overlay; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .85), transparent 48%); }
.card.active .glare { opacity: .8; }
.sparkle { display: none; opacity: .6; mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 2px), radial-gradient(circle, #fff 0 1px, transparent 2px), radial-gradient(circle, #fff 0 1px, transparent 2px);
  background-size: 5.5em 5.5em, 7.3em 7.3em, 3.9em 3.9em; background-position: 0 0, 2em 3em, 1em 5em; animation: twinkle 2.4s ease-in-out infinite; }
.card.r3 .sparkle, .card.r4 .sparkle, .card.lv4 .sparkle, .card.lv5 .sparkle, .card.starred .sparkle { display: block; }
@keyframes twinkle { 50% { opacity: .15; background-position: 1em 1em, 3em 2em, 2em 4em; } }

/* Légendaire : reflet doré qui balaie la carte */
.card.r3 .front::after, .card.r4 .front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%); background-size: 250% 100%; animation: sweep 3.6s linear infinite;
}
@keyframes sweep { from { background-position: 160% 0; } to { background-position: -60% 0; } }
/* Mythique : cadre irisé qui change de couleur */
.card.r4 .front { background: conic-gradient(from var(--ang, 0deg), #ff7de0, #7a8cff, #3ddcff, #6bffb0, #ffe36b, #ff7de0); animation: spinAng 5s linear infinite; }

/* Niveau 5 : cadre prismatique animé */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: true; }
@keyframes spinAng { to { --ang: 360deg; } }
.card.lv5 .front { background: conic-gradient(from var(--ang, 0deg), #ff5fd2, #ffd35f, #6bffb0, #5fd7ff, #8a6bff, #ff5fd2); animation: spinAng 4s linear infinite; }
.card.lv4:not(.lv5) .front { box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5), 0 0 1.4em var(--rc); }

/* Les cartes de niveau 2+ flottent doucement */
.card.lv2 .plate, .card.lv3 .plate, .card.lv4 .plate, .card.lv5 .plate { animation: float 3.6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateZ(30px) translateY(-.12em) scale(1.04); } }

/* Ascension : aura dorée qui grandit avec les étoiles */
.card.starred .front { box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5), 0 0 calc(var(--st) * .5em + .5em) calc(var(--st) * .08em) rgba(255, 200, 70, .85); }
.card.starred .frame { box-shadow: inset 0 0 0 .08em rgba(255, 220, 120, .55), inset 0 0 calc(var(--st) * .35em) rgba(255, 200, 70, .5); }

/* Carte inconnue */
.card.unknown .front { background: linear-gradient(140deg, #2a3150, #12162c); box-shadow: none; opacity: .85; }
.card.unknown .frame { background: linear-gradient(170deg, #141a33, #0c1022); }
.card.unknown .c-art { background: repeating-linear-gradient(45deg, #151b36 0 .5em, #10142a .5em 1em); box-shadow: none; }
.card.unknown .plate { background: linear-gradient(145deg, #232948, #151a33); box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .1); }
.card.unknown .c-name, .card.unknown .c-desc { color: #6c76a6; }
.card.unknown .c-type { color: color-mix(in srgb, var(--rc) 60%, #333); }
.card.unknown .holo, .card.unknown .sparkle, .card.unknown .glare { display: none; }
.card.unknown .front::after { display: none; }

/* Arrivée de la carte dans l'ouverture + montée de niveau */
.card.deal { animation: deal .65s cubic-bezier(.2, 1.1, .3, 1) both; }
@keyframes deal { from { opacity: 0; transform: translateY(-80px) scale(.5) rotate(-12deg); } }
.card.levelup { animation: levelup 1s ease-out; }
@keyframes levelup { 30% { transform: scale(1.12); filter: brightness(1.5) drop-shadow(0 0 1.5em #fff); } }

/* ───── Cartes : portraits, motifs par famille, grain holographique, lueur tournante ───── */
.c-art.photo { background: #0c0f1f; }
.c-art.photo .portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: contrast(1.06) saturate(.9); pointer-events: none; -webkit-user-drag: none; }
.c-art.photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: hsl(var(--hue) 75% 50% / .2); mix-blend-mode: color; pointer-events: none; }
.c-art.photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .6)); pointer-events: none; }
.c-art.photo .c-pattern { z-index: 1; opacity: .12; }
.c-art.photo .c-chip { z-index: 2; }
.card.has-photo .c-art { box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .35); }

.cat-lang .c-pattern { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 1.1em), repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 .6em, transparent .6em 1.2em); }
.cat-ai .c-pattern { background-image: radial-gradient(circle, rgba(255, 255, 255, .6) 1.4px, transparent 2.2px); background-size: 1.3em 1.3em; }
.cat-viz .c-pattern { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0 .5em, transparent .5em 1em); -webkit-mask-image: linear-gradient(0deg, #000, transparent 85%); mask-image: linear-gradient(0deg, #000, transparent 85%); }
.cat-db .c-pattern { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .25) 0 1px, transparent 1px .9em); }
.cat-history .c-pattern { background-image: repeating-radial-gradient(circle at 50% 120%, rgba(255, 255, 255, .25) 0 1px, transparent 1px 1.1em); }
.cat-jobs .c-pattern { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 1em); }
.cat-gov .c-pattern { background-image: radial-gradient(circle at 0 0, transparent 55%, rgba(255, 255, 255, .24) 56% 60%, transparent 61%), radial-gradient(circle at 100% 100%, transparent 55%, rgba(255, 255, 255, .24) 56% 60%, transparent 61%); background-size: 1.4em 1.4em; }
.cat-cloud .c-pattern { background-image: radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .32), transparent 35%), radial-gradient(ellipse at 70% 30%, rgba(255, 255, 255, .26), transparent 40%), radial-gradient(ellipse at 90% 85%, rgba(255, 255, 255, .2), transparent 30%); background-size: 100% 100%; }
.cat-math .c-pattern { background-image: linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px), linear-gradient(45deg, rgba(255, 255, 255, .1) 1px, transparent 1px); background-size: 1.2em 1.2em, 1.2em 1.2em, 1.7em 1.7em; }

.rar-gem { display: inline-block; width: .85em; height: .85em; margin-right: .5em; vertical-align: -.1em; background: var(--rc); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); filter: drop-shadow(0 0 .3em var(--rc)); }
.c-foot { position: relative; }
.c-no { position: absolute; left: 50%; transform: translateX(-50%); font-size: .55em; color: rgba(255, 255, 255, .42); letter-spacing: .14em; font-variant-numeric: tabular-nums; pointer-events: none; }
.card.sm .c-no { display: none; }

.foil { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .95 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.card.r1 .foil { opacity: .1; } .card.r2 .foil { opacity: .17; } .card.r3 .foil { opacity: .24; } .card.r4 .foil { opacity: .3; }
.card.unknown .foil { display: none; }

@property --ang2 { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes edgeRun { to { --ang2: 360deg; } }
.card.r2:not(.unknown) .front::before, .card.r3:not(.unknown) .front::before, .card.r4:not(.unknown) .front::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: .5em; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--ang2), transparent 0 62%, rgba(255, 255, 255, .95) 80%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: edgeRun 3.4s linear infinite;
}
.card.r4:not(.unknown):not(.has-photo) .c-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5; filter: blur(.5em);
  background: conic-gradient(from var(--ang, 0deg) at 50% 60%, rgba(255, 120, 220, .6), rgba(80, 200, 255, .5), rgba(120, 255, 180, .45), rgba(255, 230, 120, .5), rgba(255, 120, 220, .6)); animation: spinAng 7s linear infinite; }
.card.r3:not(.unknown) .c-name { background: linear-gradient(90deg, #fff, #ffe9a0, #fff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nameShine 3.5s linear infinite; }
.card.r4:not(.unknown) .c-name { background: linear-gradient(90deg, #ffd0f4, #b9e4ff, #c9ffd9, #fff0b0, #ffd0f4); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nameShine 4s linear infinite; }
@keyframes nameShine { to { background-position: -200% 0; } }
.g-item:hover .card.up:not(.unknown) .front { box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5), 0 0 1.6em var(--rc); }

/* ───── Style FIFA : note générale, poste, stats chiffrées, ruban de rareté ───── */
.card .front { padding: .55em; background: linear-gradient(145deg, var(--rc), var(--rc2) 55%, var(--rc)); background-size: 220% 220%; }
.card.r4 .front { background-image: linear-gradient(135deg, #ff8be6, #6a5cff, #4fd1ff, #7dffc4, #ffe58a, #ff8be6); background-size: 320% 320%; animation: rimShift 6s linear infinite; }
.card.r4 .front { animation-name: frontRim; } @keyframes frontRim { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.card .frame {
  position: relative; gap: .32em; padding: .5em .55em .55em; border-radius: 0;
  background: radial-gradient(circle at 72% 0%, color-mix(in srgb, var(--rc) 42%, transparent), transparent 58%), linear-gradient(170deg, color-mix(in srgb, var(--rc2) 60%, #0b0e22), color-mix(in srgb, var(--rc2) 26%, #04050d));
  clip-path: polygon(.8em 0, calc(100% - .8em) 0, 100% .8em, 100% calc(100% - 1.1em), calc(100% - 1.1em) 100%, 1.1em 100%, 0 calc(100% - 1.1em), 0 .8em);
}
.card .frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 .5em, transparent .5em 1em); }
.c-type { position: relative; z-index: 1; padding: .3em .7em; border-radius: .5em; color: #fff; text-shadow: 0 .08em .2em rgba(0, 0, 0, .55); font-size: .68em; letter-spacing: .18em;
  background: linear-gradient(90deg, var(--rc2), color-mix(in srgb, var(--rc) 85%, var(--rc2)) 50%, var(--rc2)); box-shadow: 0 .15em .5em rgba(0, 0, 0, .35), inset 0 0 0 .08em rgba(255, 255, 255, .35); }
.card.r3 .c-type { color: #2a1700; text-shadow: 0 .06em 0 rgba(255, 255, 255, .5); }
.card.r4 .c-type { background: linear-gradient(90deg, #ff6fd8, #6a5cff, #35c8ff, #ff6fd8); background-size: 250% 100%; animation: nameShine 4s linear infinite; }
.c-type .rar-gem { background: #fff; }
.card.r3 .c-type .rar-gem { background: #2a1700; filter: none; }
.f-gems { display: inline-flex; gap: .22em; align-items: center; }
.f-gems i { width: .62em; height: .62em; background: rgba(0, 0, 0, .3); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.f-gems i.on { background: #fff; box-shadow: 0 0 .4em #fff; }
.card.r3 .f-gems i.on { background: #2a1700; box-shadow: none; }
.card.r3 .f-gems i:not(.on) { background: rgba(42, 23, 0, .25); }
.c-type em { margin-left: .4em; }
.f-main { position: relative; z-index: 1; display: flex; gap: .5em; align-items: stretch; flex: none; }
.f-left { flex: none; width: 3.5em; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .12em; padding-top: .1em; }
.f-ovr { font-size: 2.55em; font-weight: 900; line-height: .95; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 .05em 0 var(--rc2), 0 0 .45em color-mix(in srgb, var(--rc) 90%, transparent), 0 .12em .3em rgba(0, 0, 0, .5); }
.card.r3 .f-ovr { color: #fff2b8; } .card.r4 .f-ovr { background: linear-gradient(135deg, #fff, #ffd0f4, #b9e4ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; text-shadow: none; }
.f-pos { font-size: .74em; font-weight: 800; letter-spacing: .1em; color: var(--rc); }
.f-sep { width: 80%; height: .1em; border-radius: 1em; background: linear-gradient(90deg, transparent, var(--rc), transparent); margin: .1em 0; }
.f-cat { display: grid; place-items: center; width: 2em; height: 2em; border-radius: .6em; background: rgba(0, 0, 0, .28); color: var(--rc); box-shadow: inset 0 0 0 .08em color-mix(in srgb, var(--rc) 55%, transparent); }
.f-cat .ic { width: 1.25em; height: 1.25em; }
.f-left .c-lv { margin-top: .3em; font-size: .62em; font-weight: 800; letter-spacing: .06em; }
.f-main .c-art { flex: 1; min-width: 0; height: 10.4em; }
.f-main .c-chip { display: none; }
.card .c-head { position: relative; z-index: 1; justify-content: center; text-align: center; padding-bottom: .22em; border-bottom: .09em solid color-mix(in srgb, var(--rc) 55%, transparent); }
.card .c-name { font-size: 1.18em; text-transform: uppercase; letter-spacing: .05em; text-align: center; -webkit-line-clamp: 1; }
.card .c-desc { position: relative; z-index: 1; font-size: .68em; line-height: 1.36; }
.card .c-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em; padding: .3em 0 .1em; border-top: .09em solid color-mix(in srgb, var(--rc) 40%, transparent); }
.card .c-stats div { display: flex; flex-direction: column; align-items: center; gap: 0; grid-template-columns: none; font-size: 1em; color: var(--rc); }
.card .c-stats b { font-size: 1.55em; font-weight: 900; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 .06em .2em rgba(0, 0, 0, .5); }
.card .c-stats span { font-size: .6em; font-weight: 800; letter-spacing: .14em; }
.card .c-foot { position: relative; z-index: 1; padding: 0 .9em; }
.card.sm .f-main { flex: 1; min-height: 0; }
.card.sm .f-main .c-art { height: auto; }
.card.sm .c-name { font-size: 1.05em; }
.card.unknown .f-ovr { color: #5a6392; text-shadow: none; } .card.unknown .f-pos, .card.unknown .f-cat { color: #5a6392; }
.card.unknown .c-type { background: #1b2140; color: #6c76a6; box-shadow: none; text-shadow: none; }
.card.unknown .f-gems i.on { background: #6c76a6; box-shadow: none; }
.r-rar { display: inline-flex; align-items: center; gap: .9em; font-size: .95rem; }
.r-rar .f-gems i { width: .75em; height: .75em; background: rgba(255, 255, 255, .18); }
.r-rar .f-gems i.on { background: var(--rc); box-shadow: 0 0 10px var(--rc); }
@media (max-width: 760px) { .f-left { width: 3.2em; } }

/* ───── Variantes : Brillante et Prismatique ───── */
.v-badge { position: absolute; right: .35em; bottom: .35em; z-index: 4; display: inline-flex; align-items: center; gap: .3em; font-style: normal; font-size: .58em; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: .28em .7em; border-radius: 99em; color: #101433; background: linear-gradient(90deg, #8fe9ff, #fff, #ffd0f4); box-shadow: 0 0 .9em rgba(160, 230, 255, .9); }
.v-badge .ic { width: 1.1em; height: 1.1em; }
.card.v2 .v-badge { background: linear-gradient(90deg, #ff6fd8, #ffe58a, #4fd1ff, #ff6fd8); background-size: 250% 100%; animation: nameShine 3s linear infinite; }
.card.v1:not(.unknown) .holo { opacity: .9; }
.card.v1:not(.unknown) .frame::after, .card.v2:not(.unknown) .frame::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(112deg, transparent 22%, rgba(255, 255, 255, .85) 42%, rgba(120, 255, 240, .55) 50%, rgba(255, 120, 220, .55) 58%, transparent 78%); background-size: 280% 100%; animation: sweep 2.6s linear infinite; }
.card.v1:not(.unknown) .c-art { box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .6), 0 0 1em rgba(120, 220, 255, .55); }
.card.v1:not(.unknown) .front { box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5), 0 0 1.8em rgba(120, 220, 255, .65); }
.card.v2:not(.unknown) .front { background-image: linear-gradient(135deg, #ff6fd8, #ffe58a, #4fd1ff, #7dffc4, #b36bff, #ff6fd8); background-size: 320% 320%; animation: frontRim 3.2s linear infinite; box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5), 0 0 2.6em rgba(255, 120, 220, .8); }
.card.v2:not(.unknown) .holo { opacity: 1; }
.card.v2:not(.unknown) .frame::before { opacity: .9; background: conic-gradient(from var(--ang, 0deg) at 50% 40%, rgba(255, 110, 220, .35), rgba(80, 200, 255, .3), rgba(120, 255, 180, .3), rgba(255, 230, 120, .35), rgba(255, 110, 220, .35)); animation: spinAng 6s linear infinite; }
.card.v2:not(.unknown) .c-art { box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .85), 0 0 1.2em rgba(255, 120, 220, .8); }
.stamp.shiny { color: #101433; background: linear-gradient(90deg, #8fe9ff, #fff, #ffd0f4, #8fe9ff); background-size: 250% 100%; box-shadow: 0 6px 28px rgba(160, 230, 255, .8); animation: slam .5s cubic-bezier(.2, 1.5, .4, 1) both, nameShine 2.5s linear infinite; }
.rc-tag.shiny { color: #101433; background: linear-gradient(90deg, #8fe9ff, #fff, #ffd0f4); }
.stamp.xp { background: rgba(111, 141, 255, .22); color: #cfd9ff; }

/* ───── Parcours de saison ───── */
.panel.pass { margin-bottom: 18px; display: grid; gap: 14px; }
.pass-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.pass-head small { display: flex; align-items: center; gap: 8px; letter-spacing: .18em; font-weight: 800; font-size: .72rem; color: var(--gold); }
.pass-head small .ic { width: 1.2em; height: 1.2em; }
.pass-head h3 { font-size: 1.7rem; font-weight: 900; line-height: 1.1; } .pass-head h3 span { color: var(--mut); font-size: 1.1rem; font-weight: 700; }
.pass-xp { flex: 1; min-width: 200px; display: grid; gap: 6px; } .pass-xp span { font-size: .82rem; color: var(--mut); font-weight: 600; }
.pass-xp .bar { height: 14px; } .pass-xp .bar i { background: linear-gradient(90deg, #4fd1ff, #8a7bff, #ff5fd2); box-shadow: 0 0 14px rgba(138, 123, 255, .8); }
.pass-track { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px 12px; scroll-snap-type: x proximity; }
.pt { flex: none; width: 74px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px 10px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); scroll-snap-align: start; }
.pt small { font-size: .68rem; font-weight: 800; color: var(--mut); letter-spacing: .08em; }
.pt span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #9fb0ee; }
.pt b { font-size: .78rem; }
.pt.k-pack span { background: rgba(25, 200, 179, .25); color: #7ff0de; }
.pt.k-gold { border-color: rgba(255, 200, 61, .6); } .pt.k-gold span { background: linear-gradient(135deg, #ffe48a, #ff9f1c); color: #3a2000; }
.pt.done { opacity: .6; } .pt.done span { background: rgba(61, 220, 151, .25); color: var(--good); }
.pt.ready { border-color: var(--good); box-shadow: 0 0 20px rgba(61, 220, 151, .5); animation: pulseBadge 1.6s ease-in-out infinite; }
.pt.locked { opacity: .85; } .pt[data-next] { border-color: rgba(138, 123, 255, .9); }
.pass-note { font-size: .82rem; line-height: 1.45; }
.panel.pass { align-content: start; }
.pass-track { align-items: flex-start; align-self: start; }
.pt { height: max-content; }