/* ============================================================
   Cartes v2 « hologramme » — composant extrait du prototype validé
   client (appli_refonte/prototype/cartes_v2.html, 2026-08-02).
   Le fond de carte vierge (frame.webp, variante bleue) est recoloré
   par carte via --hue/--sat/--bri ; --c = couleur d'accent du groupe.
   ============================================================ */
.cartes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}

.fut{position:relative;aspect-ratio:1080/1350;border-radius:18px;perspective:900px}
.fut-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .18s ease-out;border-radius:18px}
.frame{position:absolute;inset:0;border-radius:18px;background:url("../img/cartes/frame.0c0050e94c53.webp") center/cover no-repeat;
  filter:hue-rotate(var(--hue,0deg)) saturate(var(--sat,1)) brightness(var(--bri,1))}
.patch{position:absolute;top:4.5%;right:7%;width:42%;height:6.5%;background:#050607;border-radius:4px}
.low::before{content:"";position:absolute;inset:-9% -5% -18% -5%;z-index:-1;
  background:linear-gradient(180deg, transparent 0%, rgba(5,6,7,.92) 22%, rgba(5,6,7,.97) 100%);
  border-radius:10px;filter:blur(2px)}
.art{position:absolute;top:11%;left:15%;right:15%;bottom:34%;overflow:hidden;
  -webkit-mask-image:radial-gradient(85% 85% at 50% 42%, #000 55%, transparent 98%);
          mask-image:radial-gradient(85% 85% at 50% 42%, #000 55%, transparent 98%);}
.art img{width:100%;height:100%;object-fit:cover;object-position:center 12%;
  filter:grayscale(.35) contrast(1.12) brightness(.85)}
.staff-art img{transform:scale(1.55);transform-origin:50% 16%;
  filter:grayscale(.55) contrast(1.15) brightness(.8)}
.art::after{content:"";position:absolute;inset:0;mix-blend-mode:color;background:var(--c)33}
.staff-art::after{background:var(--c)66}
.art::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg, rgba(5,6,7,.55) 0%, transparent 22%, transparent 50%, #050607 82%)}
.glow-art{position:absolute;inset:0;display:grid;place-items:center}
.glow-art .num{font-size:120px;color:var(--c);opacity:.13;font-family:Anton,Impact,sans-serif;font-style:italic}

.role-tr{position:absolute;top:5%;right:8%;max-width:58%;text-align:right;z-index:3}
.role-tr .r1{font-family:Anton,Impact,sans-serif;font-style:italic;text-transform:uppercase;
  font-size:clamp(9.5px,.95vw,12.5px);letter-spacing:.05em;color:var(--c);line-height:1.05}
.role-tr .r2{font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--txt,#F4F7F2);text-transform:uppercase;margin-top:3px}
.star-tr{position:absolute;top:4.5%;right:8%;z-index:3;width:24px;opacity:.95}
.ovr-block{position:absolute;top:15.5%;left:9%;z-index:3;text-align:center}
.ovr{font-family:Anton,Impact,sans-serif;font-style:italic;font-size:clamp(28px,3vw,40px);color:var(--txt,#F4F7F2);line-height:.9}
.pos{font-family:Anton,Impact,sans-serif;font-style:italic;font-size:clamp(13px,1.4vw,17px);color:var(--c);margin-top:2px}

.low{position:absolute;left:10%;right:10%;bottom:9%;z-index:3;isolation:isolate}
.nm{font-family:Anton,Impact,sans-serif;font-style:italic;text-transform:uppercase;line-height:1;white-space:nowrap}
.nm .n1{font-size:clamp(14px,1.65vw,21px);color:var(--txt,#F4F7F2)}
.nm .n2{font-size:clamp(14px,1.65vw,21px);color:var(--c);margin-left:6px}
.sep{height:1px;background:linear-gradient(90deg,var(--c),transparent);margin:7px 0 6px;opacity:.6}
.cat{font-family:Anton,Impact,sans-serif;font-style:italic;font-size:12px;color:var(--c);letter-spacing:.08em}
.devise{font-size:clamp(8.5px,.9vw,11px);color:var(--muted,#9AA39C);font-style:italic;line-height:1.4;margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:2%;margin-top:8px}
.st{text-align:center}
.st .k{font-size:8.5px;font-weight:800;letter-spacing:.12em;color:var(--c)}
.st .v{font-family:Anton,Impact,sans-serif;font-style:italic;font-size:clamp(15px,1.7vw,21px);color:var(--txt,#F4F7F2)}
.prog{margin-top:7px;text-align:center;font-family:Anton,Impact,sans-serif;font-style:italic;
  font-size:11px;letter-spacing:.14em;color:var(--c);text-transform:uppercase}
.facs{display:grid;grid-template-columns:repeat(5,1fr);gap:2%;margin-top:7px}
.fc{text-align:center}
.fc .k{font-size:7.5px;font-weight:800;letter-spacing:.09em;color:var(--muted,#9AA39C)}
.fc .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.14);margin-top:3px;overflow:hidden}
.fc .bar i{display:block;height:100%;background:var(--c);box-shadow:0 0 6px var(--c)}
.ref{position:absolute;bottom:3.2%;left:0;right:0;text-align:center;z-index:3;
  font-size:8px;letter-spacing:.22em;color:var(--muted,#9AA39C);font-weight:700}

.shine{position:absolute;inset:0;border-radius:18px;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 47%, rgba(255,255,255,.02) 54%, transparent 70%);
  transition:opacity .2s}
.fut:hover .shine{opacity:1}
.fut:hover .fut-in{box-shadow:0 18px 60px color-mix(in srgb, var(--c) 30%, transparent)}