/* Carte de profil holographique (d'après ProfileCard de React Bits, réécrite en CSS/JS natifs).
   Le reflet arc-en-ciel ne passe qu'à travers le motif de petits « M » ; il s'allume là où le doigt ou la souris l'attrape. */
.profile-card {
  --pc-light-x: 50%; --pc-light-y: 50%; --pc-pointer-x: 50%; --pc-pointer-y: 50%;
  --pc-band-x: 50%; --pc-band-y: 50%; --pc-reach: 0; --pc-rotate-x: 0deg; --pc-rotate-y: 0deg;
  --pc-shift-x: 0px; --pc-shift-y: 0px; --pc-tilt: 0; --pc-active: 0;
  --pc-radius: 16px; --pc-holo: 0.8; --pc-glare: 0.5; --pc-parallax: 8px; --pc-status: #36C08A;
  --pc-frame: rgba(26, 29, 34, 0.72); --pc-frame-edge: rgba(255, 255, 255, 0.08); --pc-frame-highlight: rgba(255, 255, 255, 0.07);
  --pc-frame-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.8), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  --pc-backdrop: linear-gradient(180deg, #24272E 0%, #131519 100%);
  --pc-tile-edge: rgba(255, 255, 255, 0.07); --pc-tile-highlight: rgba(255, 255, 255, 0.12); --pc-tile-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.7);
  --pc-ink: #F2F2EE; --pc-muted: #8D929B; --pc-shade: rgba(0, 0, 0, 0.4);
  --pc-blend: color-dodge; --pc-holo-filter: hue-rotate(0deg); --pc-sheen: rgba(255, 255, 255, 0.16);
  --pc-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M10 40V16l18 16 18-16v24' fill='none' stroke='%23000' stroke-width='4.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --pc-pattern-size: 56px 56px; --pc-holo-gain: 1.25; --pc-holo-detail: 1;
  --pc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.55 0 0 0 -0.24 0.55 0 0 0 -0.24 0.55 0 0 0 -0.24 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  position: relative; width: 300px; max-width: 100%; perspective: 1000px; touch-action: pan-y; -webkit-tap-highlight-color: transparent; text-align: left;
}
.profile-card__body {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px;
  border-radius: calc(var(--pc-radius) + 10px); background: var(--pc-frame); box-shadow: var(--pc-frame-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  transform: rotateX(var(--pc-rotate-x)) rotateY(var(--pc-rotate-y)); will-change: transform;
}
.profile-card__tile { position: relative; aspect-ratio: 4 / 5; border-radius: var(--pc-radius); background: var(--pc-backdrop); box-shadow: var(--pc-tile-shadow); overflow: hidden; isolation: isolate }
.profile-card__sheen, .profile-card__holo, .profile-card__scrim, .profile-card__tile-rim, .profile-card__glare, .profile-card__shade, .profile-card__rim {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.profile-card__sheen { background: radial-gradient(farthest-corner circle at calc(var(--pc-light-x) - 10px) calc(var(--pc-light-y) - 10px), var(--pc-sheen) 0%, transparent 55%); opacity: calc(var(--pc-holo) * var(--pc-active)) }
.profile-card__holo {
  --pc-spectrum: repeating-linear-gradient(0deg, hsl(2,100%,73%) 5%, hsl(53,100%,69%) 10%, hsl(93,100%,69%) 15%, hsl(176,100%,76%) 20%, hsl(228,100%,74%) 25%, hsl(260,100%,76%) 30%, hsl(2,100%,73%) 35%);
  --pc-bars: repeating-linear-gradient(-45deg, #0e152e 0%, hsl(180,10%,60%) 3.8%, hsl(180,29%,66%) 4.5%, hsl(180,10%,60%) 5.2%, #0e152e 10%, #0e152e 12%);
  --pc-falloff: radial-gradient(farthest-corner circle at var(--pc-pointer-x) var(--pc-pointer-y), hsla(0,0%,0%,0.1) 12%, hsla(0,0%,0%,0.15) 20%, hsla(0,0%,0%,0.25) 120%);
  background-image: var(--pc-spectrum), var(--pc-bars), var(--pc-falloff);
  background-position: 0 var(--pc-band-y), var(--pc-band-x) var(--pc-band-y), center;
  background-size: 500% 500%, 300% 300%, 200% 200%; background-blend-mode: color, hard-light; mix-blend-mode: var(--pc-blend);
  filter: brightness(calc(0.66 + 0.19 * var(--pc-active))) contrast(calc(1.33 + 0.17 * var(--pc-active))) saturate(calc(0.33 + 0.17 * var(--pc-active))) var(--pc-holo-filter);
  opacity: calc(var(--pc-holo) * var(--pc-holo-gain) * (0.5 + 0.5 * var(--pc-active)));
  -webkit-mask-image: var(--pc-pattern); -webkit-mask-size: var(--pc-pattern-size); -webkit-mask-repeat: repeat;
  -webkit-mask-position: calc(50% - var(--pc-shift-x) * 1.5) calc(65% - var(--pc-shift-y) * 1.5);
  mask-image: var(--pc-pattern); mask-size: var(--pc-pattern-size); mask-repeat: repeat;
  mask-position: calc(50% - var(--pc-shift-x) * 1.5) calc(65% - var(--pc-shift-y) * 1.5);
  z-index: 2;
}
.profile-card__holo-glow, .profile-card__holo-shift { position: absolute; inset: 0; opacity: calc(var(--pc-active) * var(--pc-holo-detail)) }
.profile-card__holo-glow {
  background-image: linear-gradient(45deg, hsl(176,100%,76%), hsl(228,100%,74%), hsl(260,100%,76%), hsl(2,100%,73%), hsl(53,100%,69%), hsl(93,100%,69%)),
    radial-gradient(circle at var(--pc-pointer-x) var(--pc-pointer-y), hsl(0,0%,70%) 0%, hsla(0,0%,30%,0.2) 90%), var(--pc-grain);
  background-size: 250% 250%, 100% 100%, 220px 220px; background-position: var(--pc-pointer-x) var(--pc-pointer-y), center, 0 0;
  background-blend-mode: color-dodge; filter: brightness(calc(2 - var(--pc-reach))) contrast(calc(var(--pc-reach) + 2)) saturate(calc(0.5 + var(--pc-reach))); mix-blend-mode: luminosity;
}
.profile-card__holo-shift {
  background-image: var(--pc-spectrum), var(--pc-bars), var(--pc-falloff);
  background-position: 0 var(--pc-band-y), calc(var(--pc-band-x) * 0.4) calc(var(--pc-band-y) * 0.5), center;
  background-size: 200% 300%, 700% 700%, 100% 100%; background-blend-mode: color, hard-light; mix-blend-mode: difference; filter: brightness(0.8) contrast(1.5);
}
/* Photo (ou grande initiale si pas de photo), légèrement décalée quand la carte penche */
.profile-card__photo {
  position: absolute; inset: calc(var(--pc-parallax) * -1); z-index: 1;
  display: grid; place-items: center; transform: translate3d(var(--pc-shift-x), var(--pc-shift-y), 0);
  font-size: 120px; font-weight: 600; letter-spacing: -0.04em; color: var(--c, var(--pc-muted)); pointer-events: none; user-select: none; -webkit-user-select: none;
}
.profile-card__photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block }
.profile-card__scrim { z-index: 3; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 12%, rgba(0,0,0,0.28) 26%, rgba(0,0,0,0.07) 40%, rgba(0,0,0,0) 52%) }
.profile-card__info { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 4; color: #fff }
.profile-card__name { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: inherit; overflow-wrap: anywhere }
.profile-card__title { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.78) }
.profile-card__tile-rim { z-index: 5; box-shadow: inset 0 0 0 1px var(--pc-tile-edge), inset 0 1px 0 var(--pc-tile-highlight) }
.profile-card__footer { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 12px 6px }
.profile-card__meta { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0 }
.profile-card__handle { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--pc-ink); white-space: nowrap; text-overflow: ellipsis }
.profile-card__status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.25; color: var(--pc-muted); white-space: nowrap }
.profile-card__status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-status) }
.profile-card__badge { flex: none; font-size: 13px; font-weight: 600; color: var(--pc-ink); font-variant-numeric: tabular-nums }
.profile-card__glare { z-index: 6; background: radial-gradient(farthest-corner circle at var(--pc-light-x) var(--pc-light-y), rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.36) 20%, rgba(255,255,255,0) 60%); mix-blend-mode: overlay; opacity: calc(var(--pc-glare) * var(--pc-active)) }
.profile-card__shade { z-index: 6; background: radial-gradient(farthest-corner circle at var(--pc-light-x) var(--pc-light-y), transparent 30%, var(--pc-shade) 100%); opacity: calc(var(--pc-glare) * var(--pc-tilt)) }
.profile-card__rim { box-shadow: inset 0 0 0 1px var(--pc-frame-edge), inset 0 1px 0 var(--pc-frame-highlight) }
/* Avec une vraie photo, le reflet reste un peu plus discret pour garder le visage lisible */
.profile-card__tile:has(.profile-card__photo.ph) .profile-card__holo { --pc-holo-gain: 0.75 }