/* ==========================================================
   card-default.css — Trading card
   ========================================================== */

.tc-card-meta__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--app-spacer-md);
}

.tc-card-meta__footer:has(.tc-card-meta__share) {
    flex-direction: column;
    align-items: center;
}

.tc-card-logo-top {
    display: block;
    text-align: center;
    margin-bottom: var(--app-spacer-sm);
}

.tc-card-logo-top img {
    width: 80px;
    opacity: 0.9;
}

.tc-card-logo {
    display: block;
    width: 120px;
    height: auto;
}

.tc-card-logo--footer {
    width: 80px;
    flex-shrink: 0;
}

.tc-card {
    --card-accent: var(--app-gray-300);
    perspective: 800px;
    width: 340px;
    max-width: 100%;
    container-type: inline-size;
    container-name: card-link;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.tc-card img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.tc-card__flipper {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    will-change: transform;
    /* transition is set dynamically via JS (0.6s for flip, 150ms for tilt reset) */
}

.tc-card__face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tc-card__face--back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
}

/* Cadre du dos de carte */
.tc-card__back {
    border-radius: 4.7cqw;
    overflow: hidden;
    padding: 3.5cqw;
    background: linear-gradient(
        170deg,
        color-mix(in srgb, var(--card-back-border, var(--app-primary)) 90%, white) 0%,
        var(--card-back-border, var(--app-primary)) 50%,
        color-mix(in srgb, var(--card-back-border, var(--app-primary)) 90%, black) 100%
    );
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 0 0 1px color-mix(in srgb, var(--card-back-border, var(--app-primary)) 60%, black);
}

/* ── Dos de carte ──────────────────────────────────────────
   Fond : dégradé basé sur la couleur de classification, ou image via
   `--card-back-bg` si le sport définit une `back_image`. */
.tc-card__back-surface {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(
        170deg,
        color-mix(in srgb, var(--card-classification-color, #ffffff) 85%, white) 0%,
        var(--card-classification-color, #ffffff) 50%,
        color-mix(in srgb, var(--card-classification-color, #ffffff) 85%, black) 100%
    );
    border-radius: 4.1cqw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-card__back-surface--has-bg {
    background: var(--card-back-bg) center / cover no-repeat;
}

.tc-card__back-surface .tc-card__holo-overlay {
    opacity: 0.7;
}

/* Logo Album Sport au centre du dos, avec un léger glow blanc. */
.tc-card__back-app-logo {
    position: relative;
    z-index: 2;
    width: 55%;
    max-height: 60%;
    object-fit: contain;
    filter:
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
}

.tc-card__info-trigger {
    position: absolute;
    bottom: -12px;
    right: -12px;
    z-index: 20;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--card-text-scrim, rgba(255, 255, 255, 0.12));
    color: var(--card-text-color, var(--app-card-text-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-user-select: none;
    user-select: none;
}

.tc-card__info-trigger:hover {
    background: var(--card-text-scrim, rgba(255, 255, 255, 0.2));
    color: var(--card-text-color, var(--app-card-text-dark));
}

.tc-card__info-box {
    position: absolute;
    bottom: 22px;
    right: -12px;
    z-index: 19;
    background: #ffffff;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    color: var(--app-dark, #1a1a1a);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.tc-card__info-box.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.tc-card__info-box-corner {
    position: absolute;
    bottom: -6px;
    right: 8px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ffffff;
}

.tc-card__info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.tc-card__info-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-gray-500, #767676);
    white-space: nowrap;
}

.tc-card__info-value {
    font-size: 0.7rem;
    font-family: var(--app-font-mono);
    color: var(--app-dark, #1a1a1a);
    white-space: nowrap;
}

.tc-card__tilt {
    position: relative;
    width: 100%;
    border-radius: 4.7cqw;
    overflow: hidden;
    transform-style: preserve-3d;
    border: none;
    padding: 1.2cqw;
    background: linear-gradient(
        170deg,
        color-mix(in srgb, var(--card-classification-color, #ffffff) 85%, black) 0%,
        var(--card-classification-color, #ffffff) 50%,
        color-mix(in srgb, var(--card-classification-color, #ffffff) 85%, white) 100%
    );
    /* Ombre portée TRÈS douce, en couches (style « smooth shadow ») — la plus
       légère des trois (carte < booster < album). + ring 1px conservé. */
    box-shadow:
        0 0.7px 1.1px rgba(0, 0, 0, 0.03),
        0 1.9px 3px rgba(0, 0, 0, 0.045),
        0 4.5px 7.1px rgba(0, 0, 0, 0.055),
        0 15px 24px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(201, 168, 76, 0.3);
}

.tc-card__holo-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: none;
    mix-blend-mode: overlay;
    opacity: 0.5;
    transition: opacity 0.3s ease-out;
}

.tc-card:hover .tc-card__holo-overlay,
.tc-card.is-touching .tc-card__holo-overlay {
    opacity: 0.7;
}

.tc-card__holo-image {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background: none;
    mix-blend-mode: overlay;
    opacity: 0.5;
    transition: opacity 0.3s ease-out;
}

.tc-card:hover .tc-card__holo-image,
.tc-card.is-touching .tc-card__holo-image {
    opacity: 0.7;
}

.tc-card__tilt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Glare — spot lumineux radial ancré au pointeur (--pointer-x/y). */
.tc-card__glare {
    position: absolute;
    inset: 0;
    /* z-index 5 = entre les contenus de la surface (photo, gradient) et les
       éléments protégés (players-overlay, holo-badge, zone-bottom) au z-index 7+. */
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(
        farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        hsla(180, 100%, 95%, 0.25) 8%,
        hsla(0, 0%, 80%, 0.08) 50%,
        hsla(0, 0%, 0%, 0.05) 95%
    );
    mix-blend-mode: overlay;
    filter: brightness(1) contrast(1.2);
}

/* Shine — bande lumineuse orientée vers la souris (--shine-angle, --shine-pos). */
.tc-card__shine {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-image:
        linear-gradient(
            var(--shine-angle, 105deg),
            transparent calc(var(--shine-pos, 50%) - 16%),
            rgba(255, 255, 255, 0.12) calc(var(--shine-pos, 50%) - 8%),
            rgba(255, 255, 255, 0.32) var(--shine-pos, 50%),
            rgba(255, 255, 255, 0.12) calc(var(--shine-pos, 50%) + 8%),
            transparent calc(var(--shine-pos, 50%) + 16%)
        ),
        radial-gradient(
            farthest-corner circle at var(--background-x, 50%) var(--background-y, 50%),
            rgba(255, 255, 255, 0.18) 0%,
            transparent 60%
        );
    background-size: 100% 100%, 200% 200%;
    mix-blend-mode: screen;
    filter: brightness(1.05) contrast(1.05);
}

.tc-card:hover .tc-card__glare,
.tc-card:hover .tc-card__shine,
.tc-card.is-touching .tc-card__glare,
.tc-card.is-touching .tc-card__shine {
    opacity: 1;
}

.tc-card__surface {
    --_surface-bg: var(--card-front-bg, var(--card-classification-color, #ffffff));
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    /* Couche 1 = image de fond recto (event certifié) si définie, sinon `none`
       → le dégradé couleur dessous prend le relais. L'image est PRIORITAIRE. */
    background:
        var(--card-front-bg-image, none) center / cover no-repeat padding-box,
        linear-gradient(
            170deg,
            color-mix(in srgb, var(--_surface-bg) 85%, white) 0%,
            var(--_surface-bg) 50%,
            color-mix(in srgb, var(--_surface-bg) 85%, black) 100%
        ) padding-box,
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--card-accent) 80%, white),
            var(--card-accent) 50%,
            color-mix(in srgb, var(--card-accent) 60%, black)
        ) border-box;
    background-origin: border-box;
    border-radius: 4cqw;
    border: solid 1cqw transparent;
    display: flex;
    flex-direction: column;
    color: var(--card-text-color, var(--app-card-text-dark));
}

.tc-card__top-bar {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 6;
    font-size: 2.35cqw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--card-text-color, var(--app-card-text-dark));
    padding: 1.20cqw 5.8cqw;
}

.tc-card__flank {
    position: absolute;
    right: 1cqw;
    bottom: 4.5cqw;
    z-index: 6;
    font-size: 1.9cqw;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--card-text-color, var(--app-card-text-dark));
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Mini chip Shiny sur la tranche */
.tc-card__flank-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5cqw;
    padding: 1cqw 0.5cqw;
    margin-left: -10px;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        hsl(283, 80%, 73%) 0%,
        hsl(228, 80%, 74%) 25%,
        hsl(176, 80%, 76%) 50%,
        hsl(53, 90%, 69%) 75%,
        hsl(2, 85%, 73%) 100%
    );
    color: var(--app-card-text-dark);
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 0.1cqw 0.3cqw rgba(0, 0, 0, 0.2);
}

.tc-card__flank-badge i {
    font-size: 1.1em;
    line-height: 1;
}

.tc-card__flank-left {
    position: absolute;
    left: 0.6cqw;
    bottom: 4.5cqw;
    z-index: 6;
    font-size: 1.9cqw;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--card-text-color, var(--app-card-text-dark));
    white-space: nowrap;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 0.9cqw;
}

.tc-card__flank-left i {
    font-size: 2.35cqw;
}

.tc-card__sync-dot {
    width: 1.5cqw;
    height: 1.5cqw;
    border-radius: 50%;
    flex-shrink: 0;
}

.tc-card__sync-dot--ok {
    background: var(--app-success);
}

.tc-card__sync-dot--ko {
    background: var(--app-danger);
}

.tc-card__zone-image {
    position: relative;
    margin: 4.1cqw 4.1cqw 0 4.1cqw;
    overflow: visible;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5cqw;
}

/* Badge catégorie d'événement */
.tc-card__category-badge {
    position: absolute;
    top: -2.5cqw;
    right: 1cqw;
    width: 16cqw;
    height: 16cqw;
    object-fit: contain;
    z-index: 8;
    pointer-events: none;
}

.tc-card__zone-image-inner {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: calc(var(--app-radius) / 1.5);
}

.tc-card__image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 55cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Contenu (icône + libellé) CENTRÉ dans la zone image, en retrait discret. */
    justify-content: center;
    gap: 2.5cqw;
    background: linear-gradient(160deg, #4a4a4a 0%, #1e1e1e 100%);
    border-radius: calc(var(--app-radius) / 1.5);
}

/* Icône d'attente (calendrier = événement, appareil photo = photo) — volontairement
   peu visible, en filigrane par-dessus le fond sombre. */
.tc-card__image-placeholder__icon {
    font-size: 15cqw;
    line-height: 1;
    color: #ffffff;
    opacity: 0.3;
}

.tc-card__image-placeholder__label {
    font-size: 3.8cqw;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* Le libellé peut être long (« En attente d'association… ») : on le borne à
       la largeur de la carte et on centre les lignes, plutôt que de laisser le
       texte déborder / être rogné sur les bords. Discret comme l'icône. */
    max-width: 86%;
    text-align: center;
    line-height: 1.2;
    opacity: 0.55;
}

.tc-card__players-overlay:not(:has(.tc-card__overlay-name)) {
    display: none;
}

.tc-card__zone-image-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    pointer-events: none;
    z-index: 2;
}

.tc-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: calc(var(--app-radius) / 1.5);
}

.tc-card__guilloche {
    position: absolute;
    top: 0;
    right: 3.5cqw;
    bottom: 0;
    width: 8.8cqw;
    z-index: 2;
    background: url('../img/img-card-guilloch.svg') center / 8.8cqw 100% no-repeat;
    pointer-events: none;
    mix-blend-mode: overlay;
    transition: filter 0.15s ease-out, opacity 0.3s ease-out;
}

.tc-card__holo-badge {
    position: absolute;
    bottom: 1.5cqw;
    right: 1.5cqw;
    width: 13.2cqw;
    height: 13.2cqw;
    border-radius: var(--app-radius-sm);
    background: url('../img/img-card-holo-badge.webp') center / 150% no-repeat;
    z-index: 7;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-card__security-badge {
    width: 90%;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
}

.tc-card__players-overlay {
    position: relative;
    z-index: 7;
    flex-shrink: 0;
    padding: 1.5cqw;
    /* Scrim = ton opposé au texte → contraste garanti sur couleur OU image. */
    background: var(--card-text-scrim, rgba(255, 255, 255, 0.55));
    color: var(--card-text-color, var(--app-card-text-dark));
    border: 1px solid var(--card-border-color, rgba(0, 0, 0, 0.1));
    border-radius: 1.2cqw;
    display: flex;
    flex-direction: column;
}

.tc-card__overlay-player {
    display: flex;
    align-items: center;
    gap: 1.5cqw;
}

.tc-card__overlay-flag {
    line-height: 0;
    flex-shrink: 0;
}

.tc-card__overlay-flag .fi,
.tc-card__player-flag .fi,
.tc-card__player-inline-flag .fi {
    display: inline-block;
    width: 1em;
    line-height: 0.75em;
    border-radius: 1.5px;
}

.tc-card__overlay-name--primary {
    font-size: 4.2cqw;
    font-weight: 700;
    color: var(--card-text-color, var(--app-card-text-dark));
    line-height: 1.2;
    text-transform: uppercase;
}

.tc-card__overlay-name--secondary {
    font-size: 4.2cqw;
    font-weight: 700;
    color: var(--card-text-color, var(--app-card-text-dark));
    line-height: 1.2;
    text-transform: uppercase;
}

/* Position du joueur (en face du nom, plus discrète) */
.tc-card__overlay-position {
    margin-left: auto;
    font-size: 2.4cqw;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--card-text-color, var(--app-card-text-dark));
    white-space: nowrap;
}

.tc-card__overlay-name--solo {
    font-size: 6.1cqw;
    font-weight: 700;
    color: var(--card-text-color, var(--app-card-text-dark));
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 1.5cqw;
}

.tc-card__zone-bottom {
    position: relative;
    z-index: 7;
    margin: 1.5cqw 4.1cqw 4.1cqw 4.1cqw;
    border: 1px solid var(--card-border-color, rgba(0, 0, 0, 0.1));
    border-radius: var(--app-radius-sm);
    /* Scrim = ton opposé au texte → contraste garanti sur couleur OU image. */
    background: var(--card-text-scrim, rgba(255, 255, 255, 0.55));
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.tc-card__zone-bottom-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tc-card__zone-bottom-logo {
    width: 40%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--card-border-color, rgba(0, 0, 0, 0.1));
    padding: 2cqw;
}

.tc-card__zone-bottom-logo img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter:
        drop-shadow(1px 0 0 white)
        drop-shadow(-1px 0 0 white)
        drop-shadow(0 1px 0 white)
        drop-shadow(0 -1px 0 white)
        drop-shadow(1px 1px 0 white)
        drop-shadow(-1px -1px 0 white)
        drop-shadow(1px -1px 0 white)
        drop-shadow(-1px 1px 0 white);
}

.tc-card__zone-info {
    position: relative;
    padding: 2.35cqw 3.5cqw 1.8cqw;
}

.tc-card__gold-badge {
    position: absolute;
    top: -1.1cqw;
    right: 1.5cqw;
    width: 10.3cqw;
    height: 10.3cqw;
    border-radius: 50%;
    background: url('../img/img-card-gold-badge.webp') center / 150% no-repeat;
    z-index: 4;
    pointer-events: none;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-card__official-badge {
    width: 90%;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
}

.tc-card__zone-info-line {
    display: none;
}

.tc-card__sport-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.35cqw;
}

.tc-card__sport-row-left {
    display: flex;
    align-items: center;
    gap: 2.35cqw;
    min-width: 0;
}

.tc-card__sport-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-card__sport-icon {
    width: 5.9cqw;
    height: 5.9cqw;
    object-fit: contain;
}

.tc-card__sport-text {
    display: flex;
    flex-direction: column;
}

.tc-card__sport-name {
    font-size: 3.3cqw;
    font-weight: 600;
    color: var(--card-text-color, var(--app-card-text-dark));
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
}

.tc-card__date {
    font-size: 2.8cqw;
    color: var(--card-text-color, var(--app-card-text-dark));
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 1.5cqw;
}

.tc-card__official-tag {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0.5cqw 1cqw;
    border-radius: 1.5px;
    font-size: 2.35cqw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-card-text-dark);
    overflow: hidden;
    isolation: isolate;
}

.tc-card__official-tag-bg {
    position: absolute;
    inset: 0;
    background: url('../img/img-card-gold-badge.webp') center / 200% no-repeat;
    border-radius: inherit;
    z-index: -1;
}

.tc-card__ranking-image {
    position: absolute;
    bottom: 3cqw;
    left: 3.5cqw;
    z-index: 10;
    font-size: 7cqw;
    font-weight: 900;
    color: var(--app-card-text-dark);
    text-shadow:
        0.7cqw 0 0 #ffffff,
        -0.7cqw 0 0 #ffffff,
        0 0.7cqw 0 #ffffff,
        0 -0.7cqw 0 #ffffff,
        0.65cqw 0.27cqw 0 #ffffff,
        -0.65cqw 0.27cqw 0 #ffffff,
        0.65cqw -0.27cqw 0 #ffffff,
        -0.65cqw -0.27cqw 0 #ffffff,
        0.5cqw 0.5cqw 0 #ffffff,
        -0.5cqw 0.5cqw 0 #ffffff,
        0.5cqw -0.5cqw 0 #ffffff,
        -0.5cqw -0.5cqw 0 #ffffff,
        0.27cqw 0.65cqw 0 #ffffff,
        -0.27cqw 0.65cqw 0 #ffffff,
        0.27cqw -0.65cqw 0 #ffffff,
        -0.27cqw -0.65cqw 0 #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    pointer-events: none;
}

.tc-card__zone-meta {
    padding: 1.8cqw 3.5cqw;
    border-top: 1px solid var(--card-border-color, rgba(0, 0, 0, 0.1));
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.6cqw;
}

.tc-card__category-tag {
    font-size: 2.6cqw;
    font-weight: 600;
    color: var(--card-text-color, var(--app-card-text-dark));
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.2;
}

.tc-card__label {
    font-weight: 700;
    font-size: 4cqw;
    color: var(--card-text-color, var(--app-card-text-dark));
    line-height: 1.2;
    text-transform: uppercase;
}

/* La précision du tournoi (01/10), sous son nom : la voix de l'étiquette de
   catégorie, pour ne pas concurrencer le nom qu'elle complète. Deux lignes au
   plus (elle peut compter 80 caractères). */
.tc-card__distinction {
    font-size: 2.6cqw;
    font-weight: 600;
    color: var(--card-text-color, var(--app-card-text-dark));
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.2;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tc-card-meta {
    text-align: center;
    width: 100%;
    max-width: 380px;
    margin-top: var(--app-spacer-xs);
}

.tc-card-meta__hash {
    font-family: var(--app-font-mono);
    font-size: var(--app-font-size-sm);
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    padding: var(--app-spacer-xs) var(--app-spacer-sm);
    border-radius: var(--app-radius);
    display: inline-block;
    margin-bottom: var(--app-spacer);
}

.tc-card-meta__share {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.tc-card-meta__share-title {
    font-size: var(--app-font-size-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
    white-space: nowrap;
    text-align: center;
    width: 100%;
}

.tc-card-meta__share-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

.tc-card-meta__share-buttons .app-public-ball__share-btn {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
}

.tc-card-meta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--app-spacer-sm);
    align-items: center;
    margin-top: var(--app-spacer);
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.tc-card-meta__hint {
    font-size: var(--app-font-size-xs);
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin-top: var(--app-spacer-xs);
}

/* Animations d'entrée — uniquement sur la vue publique */
.app-public-ball .tc-card {
    animation: ballCardEntrance 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* Boîtier Ultra collector : l'entrée est portée par le boîtier entier
   (card-slab.css) — la carte interne reste solidaire. */
.app-public-ball .as-slab .tc-card {
    animation: none;
}

.app-public-ball .tc-card-meta {
    animation: ballCardFadeUp 0.5s ease-out 0.4s both;
}

/* ============================================================
   SHINY VARIANTS — architecture multi-effets
   ------------------------------------------------------------
   Toute carte avec un type d'effet a 2 classes :
     - `.tc-card--shiny`        (marker générique)
     - `.tc-card--shiny-{type}` (variant spécifique — cosmos, trainer-gallery...)
   ============================================================ */

.tc-card--shiny-cosmos .tc-card__holo-overlay {
    background-image: none;
}

.tc-card--shiny-cosmos .tc-card__players-overlay::after {
    background-image: none;
}

/* -- Shiny : holo border overlay sur la zone de bordure -- */
.tc-card--shiny-cosmos .tc-card__tilt::after {
    background: url('../img/img-card-holo-border.webp') center / 115% no-repeat;
}

/* ============================================================
   SHINY — Effet « V card » (poke-holo)
   ============================================================ */

.tc-card--shiny-cosmos {
    --sunpillar-clr-1: hsl(2, 85%, 73%);
    --sunpillar-clr-2: hsl(53, 90%, 69%);
    --sunpillar-clr-3: hsl(93, 75%, 69%);
    --sunpillar-clr-4: hsl(176, 80%, 76%);
    --sunpillar-clr-5: hsl(228, 80%, 74%);
    --sunpillar-clr-6: hsl(283, 80%, 73%);
    --holo-space: 5%;
    --holo-angle: 133deg;
}

.tc-card--shiny-cosmos .tc-card__shine {
    background-image:
        repeating-linear-gradient(0deg,
            var(--sunpillar-clr-1) calc(var(--holo-space) * 1),
            var(--sunpillar-clr-2) calc(var(--holo-space) * 2),
            var(--sunpillar-clr-3) calc(var(--holo-space) * 3),
            var(--sunpillar-clr-4) calc(var(--holo-space) * 4),
            var(--sunpillar-clr-5) calc(var(--holo-space) * 5),
            var(--sunpillar-clr-6) calc(var(--holo-space) * 6),
            var(--sunpillar-clr-1) calc(var(--holo-space) * 7)
        ),
        repeating-linear-gradient(var(--holo-angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
            hsla(0, 0%, 0%, 0.04) 12%,
            hsla(0, 0%, 0%, 0.06) 30%,
            hsla(0, 0%, 0%, 0.08) 120%
        );
    background-blend-mode: hue, hard-light;
    background-size: 200% 700%, 300% 100%, 200% 100%;
    background-position:
        0% var(--background-y, 50%),
        var(--background-x, 50%) var(--background-y, 50%),
        var(--background-x, 50%) var(--background-y, 50%);
    filter: brightness(0.85) contrast(2.5) saturate(0.7);
    mix-blend-mode: color-dodge;
    opacity: 0.55;
}

.tc-card--shiny-cosmos:hover .tc-card__shine,
.tc-card--shiny-cosmos.is-touching .tc-card__shine {
    opacity: 1;
}

.tc-card--shiny-cosmos .tc-card__shine::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(0deg,
            var(--sunpillar-clr-1) calc(var(--holo-space) * 1),
            var(--sunpillar-clr-2) calc(var(--holo-space) * 2),
            var(--sunpillar-clr-3) calc(var(--holo-space) * 3),
            var(--sunpillar-clr-4) calc(var(--holo-space) * 4),
            var(--sunpillar-clr-5) calc(var(--holo-space) * 5),
            var(--sunpillar-clr-6) calc(var(--holo-space) * 6),
            var(--sunpillar-clr-1) calc(var(--holo-space) * 7)
        ),
        repeating-linear-gradient(var(--holo-angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
            hsla(0, 0%, 0%, 0.10) 12%,
            hsla(0, 0%, 0%, 0.15) 20%,
            hsla(0, 0%, 0%, 0.25) 120%
        );
    background-blend-mode: hue, hard-light;
    /* 300% (et non 195%) + position dans [0..100%] : les BORDS de l'image-
       gradient ne traversent jamais la zone visible. L'ancien `calc(x * -1)`
       donnait une position négative qui plaçait le bord gauche du gradient
       au milieu de la carte → couture verticale (le repeating-linear ne se
       raccorde pas avec sa copie tuilée). `100% - x` garde le parallaxe
       inversé sans jamais exposer de bord. */
    background-size: 200% 400%, 300% 100%, 200% 100%;
    background-position:
        0% var(--background-y, 50%),
        calc(100% - var(--background-x, 50%)) calc(100% - var(--background-y, 50%)),
        var(--background-x, 50%) var(--background-y, 50%);
    filter: brightness(1) contrast(2.5) saturate(1.6);
    mix-blend-mode: soft-light;
}

.tc-card--shiny-cosmos .tc-card__glare {
    background: radial-gradient(
        farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        hsla(0, 0%, 100%, 0.45) 0%,
        hsla(210, 3%, 54%, 0.15) 45%,
        hsla(0, 0%, 50%, 0.2) 130%
    );
    mix-blend-mode: hard-light;
    filter: brightness(1) contrast(1.1);
}

/* ============================================================
   SHINY — Effet « Radiant » (croisillons prismatiques)
   Deux trames diagonales croisées (±55°) à parallaxe OPPOSÉE :
   une trame rainbow large + une trame métallique fine. Le
   croisement dessine le « grillage » des cartes Radiant.
   NB anti-couture : toutes les couches surdimensionnées font
   300% avec une position dans [0..100%] → aucun bord d'image-
   gradient ne traverse jamais la zone visible (cf. fix cosmos).
   ============================================================ */

.tc-card--shiny-radiant .tc-card__holo-overlay {
    background-image: none;
}

.tc-card--shiny-radiant .tc-card__players-overlay::after {
    background-image: none;
}

.tc-card--shiny-radiant .tc-card__tilt::after {
    background: url('../img/img-card-holo-border.webp') center / 115% no-repeat;
}

.tc-card--shiny-radiant {
    --radiant-clr-1: hsl(2, 85%, 73%);
    --radiant-clr-2: hsl(53, 90%, 69%);
    --radiant-clr-3: hsl(93, 75%, 69%);
    --radiant-clr-4: hsl(176, 80%, 76%);
    --radiant-clr-5: hsl(228, 80%, 74%);
    --radiant-clr-6: hsl(283, 80%, 73%);
    --radiant-space: 3.2%;
}

.tc-card--shiny-radiant .tc-card__shine {
    background-image:
        repeating-linear-gradient(55deg,
            var(--radiant-clr-1) calc(var(--radiant-space) * 1),
            var(--radiant-clr-2) calc(var(--radiant-space) * 2),
            var(--radiant-clr-3) calc(var(--radiant-space) * 3),
            var(--radiant-clr-4) calc(var(--radiant-space) * 4),
            var(--radiant-clr-5) calc(var(--radiant-space) * 5),
            var(--radiant-clr-6) calc(var(--radiant-space) * 6),
            var(--radiant-clr-1) calc(var(--radiant-space) * 7)
        ),
        repeating-linear-gradient(-55deg,
            #0e152e 0%,
            hsl(180, 10%, 60%) 2.2%,
            hsl(180, 29%, 66%) 3%,
            hsl(180, 10%, 60%) 3.8%,
            #0e152e 6.5%,
            #0e152e 8%
        ),
        radial-gradient(
            farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
            hsla(0, 0%, 0%, 0.04) 12%,
            hsla(0, 0%, 0%, 0.06) 30%,
            hsla(0, 0%, 0%, 0.08) 120%
        );
    background-blend-mode: hue, hard-light;
    background-size: 300% 300%, 300% 300%, 200% 100%;
    background-position:
        var(--background-x, 50%) var(--background-y, 50%),
        calc(100% - var(--background-x, 50%)) var(--background-y, 50%),
        var(--background-x, 50%) var(--background-y, 50%);
    filter: brightness(0.85) contrast(2.4) saturate(0.8);
    mix-blend-mode: color-dodge;
    opacity: 0.55;
}

.tc-card--shiny-radiant:hover .tc-card__shine,
.tc-card--shiny-radiant.is-touching .tc-card__shine {
    opacity: 1;
}

/* Strate de profondeur : mêmes trames en parallaxe inversée, fondues en
   soft-light → scintillement du croisillon au mouvement. */
.tc-card--shiny-radiant .tc-card__shine::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(-55deg,
            var(--radiant-clr-1) calc(var(--radiant-space) * 1),
            var(--radiant-clr-2) calc(var(--radiant-space) * 2),
            var(--radiant-clr-3) calc(var(--radiant-space) * 3),
            var(--radiant-clr-4) calc(var(--radiant-space) * 4),
            var(--radiant-clr-5) calc(var(--radiant-space) * 5),
            var(--radiant-clr-6) calc(var(--radiant-space) * 6),
            var(--radiant-clr-1) calc(var(--radiant-space) * 7)
        ),
        repeating-linear-gradient(55deg,
            #0e152e 0%,
            hsl(180, 10%, 60%) 2.2%,
            hsl(180, 29%, 66%) 3%,
            hsl(180, 10%, 60%) 3.8%,
            #0e152e 6.5%,
            #0e152e 8%
        ),
        radial-gradient(
            farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
            hsla(0, 0%, 0%, 0.10) 12%,
            hsla(0, 0%, 0%, 0.15) 20%,
            hsla(0, 0%, 0%, 0.25) 120%
        );
    background-blend-mode: hue, hard-light;
    background-size: 300% 300%, 300% 300%, 200% 100%;
    background-position:
        calc(100% - var(--background-x, 50%)) calc(100% - var(--background-y, 50%)),
        var(--background-x, 50%) calc(100% - var(--background-y, 50%)),
        var(--background-x, 50%) var(--background-y, 50%);
    filter: brightness(1) contrast(2.4) saturate(1.5);
    mix-blend-mode: soft-light;
}

.tc-card--shiny-radiant .tc-card__glare {
    background: radial-gradient(
        farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        hsla(0, 0%, 100%, 0.45) 0%,
        hsla(210, 3%, 54%, 0.15) 45%,
        hsla(0, 0%, 50%, 0.2) 130%
    );
    mix-blend-mode: hard-light;
    filter: brightness(1) contrast(1.1);
}

/* ============================================================
   SHINY — Effet « Galaxy » (nébuleuse étoilée)
   Nappe nébuleuse violet/bleu/rose en dérive lente + deux champs
   d'étoiles tuilés (tuiles minuscules → répétition sans couture
   par construction) à parallaxe opposée pour la profondeur.
   ============================================================ */

.tc-card--shiny-galaxy .tc-card__holo-overlay {
    background-image: none;
}

.tc-card--shiny-galaxy .tc-card__players-overlay::after {
    background-image: none;
}

.tc-card--shiny-galaxy .tc-card__tilt::after {
    background: url('../img/img-card-holo-border.webp') center / 115% no-repeat;
}

.tc-card--shiny-galaxy {
    /* Veines nébuleuses : couleurs vives mais MAJORITAIREMENT noyées dans
       du sombre (--galaxy-dark) — comme les diagonales #0e152e du cosmos,
       le color-dodge n'illumine que les veines et la photo reste lisible
       entre elles. */
    --galaxy-clr-1: hsl(262, 80%, 62%);
    --galaxy-clr-2: hsl(215, 88%, 58%);
    --galaxy-clr-3: hsl(186, 72%, 54%);
    --galaxy-clr-4: hsl(322, 75%, 62%);
    --galaxy-dark: #0a0f24;
}

.tc-card--shiny-galaxy .tc-card__shine {
    background-image:
        radial-gradient(circle at 35% 45%, hsla(0, 0%, 100%, 0.85) 0%, transparent 10%),
        radial-gradient(circle at 68% 28%, hsla(0, 0%, 100%, 0.55) 0%, transparent 7%),
        repeating-linear-gradient(115deg,
            var(--galaxy-dark) 0%,
            var(--galaxy-clr-1) 6%,
            var(--galaxy-dark) 13%,
            var(--galaxy-clr-2) 19%,
            var(--galaxy-dark) 26%,
            var(--galaxy-clr-3) 32%,
            var(--galaxy-dark) 39%,
            var(--galaxy-clr-4) 45%,
            var(--galaxy-dark) 52%
        ),
        radial-gradient(
            farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
            hsla(0, 0%, 0%, 0.04) 12%,
            hsla(0, 0%, 0%, 0.06) 30%,
            hsla(0, 0%, 0%, 0.08) 120%
        );
    background-blend-mode: screen, screen, hard-light;
    /* Tailles de tuiles premières entre elles (9.7/12.3 vs 14.1/11.3) :
       les deux grilles d'étoiles ne se réalignent jamais → semis pseudo-
       aléatoire au lieu d'un quadrillage visible. */
    background-size: 9.7% 12.3%, 14.1% 11.3%, 300% 300%, 200% 100%;
    background-position:
        calc(var(--background-x, 50%) / 10) calc(var(--background-y, 50%) / 10),
        calc((100% - var(--background-x, 50%)) / 14) calc((100% - var(--background-y, 50%)) / 14),
        var(--background-x, 50%) var(--background-y, 50%),
        var(--background-x, 50%) var(--background-y, 50%);
    filter: brightness(0.95) contrast(1.7) saturate(1.25);
    mix-blend-mode: color-dodge;
    opacity: 0.65;
}

.tc-card--shiny-galaxy:hover .tc-card__shine,
.tc-card--shiny-galaxy.is-touching .tc-card__shine {
    opacity: 1;
}

/* Strate de profondeur : troisième champ d'étoiles + nébuleuse en axe croisé,
   parallaxe inversée, fondu soft-light → scintillement au mouvement. */
.tc-card--shiny-galaxy .tc-card__shine::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 52% 60%, hsla(0, 0%, 100%, 0.6) 0%, transparent 8%),
        repeating-linear-gradient(65deg,
            var(--galaxy-dark) 0%,
            var(--galaxy-clr-4) 5%,
            var(--galaxy-dark) 11%,
            var(--galaxy-clr-1) 16%,
            var(--galaxy-dark) 22%,
            var(--galaxy-clr-2) 27%,
            var(--galaxy-dark) 33%,
            var(--galaxy-clr-3) 38%,
            var(--galaxy-dark) 44%
        ),
        radial-gradient(
            farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
            hsla(0, 0%, 0%, 0.10) 12%,
            hsla(0, 0%, 0%, 0.15) 20%,
            hsla(0, 0%, 0%, 0.25) 120%
        );
    background-blend-mode: screen, hard-light;
    background-size: 11.7% 9.1%, 300% 300%, 200% 100%;
    background-position:
        calc((100% - var(--background-x, 50%)) / 8) calc(var(--background-y, 50%) / 8),
        calc(100% - var(--background-x, 50%)) calc(100% - var(--background-y, 50%)),
        var(--background-x, 50%) var(--background-y, 50%);
    filter: brightness(1) contrast(2) saturate(1.4);
    mix-blend-mode: soft-light;
}

.tc-card--shiny-galaxy .tc-card__glare {
    background: radial-gradient(
        farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        hsla(0, 0%, 100%, 0.45) 0%,
        hsla(210, 3%, 54%, 0.15) 45%,
        hsla(0, 0%, 50%, 0.2) 130%
    );
    mix-blend-mode: hard-light;
    filter: brightness(1) contrast(1.1);
}

/* ============================================================
   SHINY — Effet « Reverse » (paillettes)
   Trois semis de paillettes colorées (tuiles minuscules, sans
   couture par construction) à dérives croisées sur une nappe
   pastel — le scintillement « glitter » des reverse holo.
   ============================================================ */

.tc-card--shiny-reverse .tc-card__holo-overlay {
    background-image: none;
}

.tc-card--shiny-reverse .tc-card__players-overlay::after {
    background-image: none;
}

.tc-card--shiny-reverse .tc-card__tilt::after {
    background: url('../img/img-card-holo-border.webp') center / 115% no-repeat;
}

.tc-card--shiny-reverse {
    /* Fond sombre + paillettes vives : en color-dodge, seuls les points
       s'illuminent (même principe que les veines du galaxy — une nappe
       claire blanchirait toute la photo). */
    --reverse-dark: #140f20;
    --reverse-vein-1: hsl(280, 40%, 24%);
    --reverse-vein-2: hsl(200, 45%, 22%);
}

.tc-card--shiny-reverse .tc-card__shine {
    background-image:
        radial-gradient(circle at 30% 38%, hsla(48, 100%, 65%, 0.8) 0%, transparent 14%),
        radial-gradient(circle at 72% 60%, hsla(192, 100%, 68%, 0.75) 0%, transparent 12%),
        radial-gradient(circle at 55% 25%, hsla(318, 95%, 70%, 0.7) 0%, transparent 11%),
        linear-gradient(133deg,
            var(--reverse-dark) 0%,
            var(--reverse-vein-1) 30%,
            var(--reverse-dark) 55%,
            var(--reverse-vein-2) 80%,
            var(--reverse-dark) 100%
        ),
        radial-gradient(
            farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
            hsla(0, 0%, 0%, 0.04) 12%,
            hsla(0, 0%, 0%, 0.06) 30%,
            hsla(0, 0%, 0%, 0.08) 120%
        );
    background-blend-mode: screen, screen, screen, hard-light;
    /* Tailles premières entre elles → semis pseudo-aléatoire, pas de grille. */
    background-size: 5.3% 6.1%, 6.7% 5.9%, 7.9% 7.1%, 300% 300%, 200% 100%;
    background-position:
        calc(var(--background-x, 50%) / 8) calc(var(--background-y, 50%) / 8),
        calc((100% - var(--background-x, 50%)) / 10) calc(var(--background-y, 50%) / 12),
        calc(var(--background-x, 50%) / 14) calc((100% - var(--background-y, 50%)) / 9),
        var(--background-x, 50%) var(--background-y, 50%),
        var(--background-x, 50%) var(--background-y, 50%);
    filter: brightness(0.95) contrast(1.8) saturate(1.3);
    mix-blend-mode: color-dodge;
    opacity: 0.6;
}

.tc-card--shiny-reverse:hover .tc-card__shine,
.tc-card--shiny-reverse.is-touching .tc-card__shine {
    opacity: 1;
}

/* Strate de profondeur : quatrième semis inversé + nappe pastel en axe
   croisé, fondu soft-light → twinkle des paillettes au mouvement. */
.tc-card--shiny-reverse .tc-card__shine::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 45% 55%, hsla(0, 0%, 100%, 0.55) 0%, transparent 9%),
        linear-gradient(313deg,
            var(--reverse-dark) 0%,
            var(--reverse-vein-2) 30%,
            var(--reverse-dark) 55%,
            var(--reverse-vein-1) 80%,
            var(--reverse-dark) 100%
        ),
        radial-gradient(
            farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
            hsla(0, 0%, 0%, 0.10) 12%,
            hsla(0, 0%, 0%, 0.15) 20%,
            hsla(0, 0%, 0%, 0.25) 120%
        );
    background-blend-mode: screen, hard-light;
    background-size: 6.1% 5.3%, 300% 300%, 200% 100%;
    background-position:
        calc((100% - var(--background-x, 50%)) / 7) calc((100% - var(--background-y, 50%)) / 11),
        calc(100% - var(--background-x, 50%)) calc(100% - var(--background-y, 50%)),
        var(--background-x, 50%) var(--background-y, 50%);
    filter: brightness(1) contrast(2.2) saturate(1.4);
    mix-blend-mode: soft-light;
}

.tc-card--shiny-reverse .tc-card__glare {
    background: radial-gradient(
        farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        hsla(0, 0%, 100%, 0.45) 0%,
        hsla(210, 3%, 54%, 0.15) 45%,
        hsla(0, 0%, 50%, 0.2) 130%
    );
    mix-blend-mode: hard-light;
    filter: brightness(1) contrast(1.1);
}

/* (Anciennes règles padel retirées de card-default.css : ce template a sa
   propre feuille — public-ball.css — et n'utilise plus aucune classe tc-card__.
   default.css est désormais 100% dédié au template default.) */

@media (prefers-reduced-motion: reduce) {
    .tc-card,
    .tc-card-meta {
        animation: none;
    }

}

/* ── Grain d'impression : texture pleine carte en blend overlay ──
   S'applique aux deux templates (default + padel). Au-dessus de tout le
   contenu de la surface (z8 > éléments protégés 7) : le grain unifie photo,
   foil et textes comme une vraie impression. */
.tc-card__grain,
.trading-card__grain {
    position: absolute;
    inset: 0;
    z-index: 8;
    /* Site vitrine (08/10) : une tuile de 300 px répétée 4 fois en largeur (67 Ko) au lieu de la texture
       1200 × 1900 (1,38 Mo) : même taille de grain sur chaque carte, rendu mesuré identique. */
    background: url('../img/img-card-grain-tuile.webp') 0 0 / 25% auto repeat;
    mix-blend-mode: overlay;
    pointer-events: none;
    border-radius: inherit;
}

/* ── RGPD : flou nom + photo tant que le détenteur n'a pas validé la carte ──
   Indicateur visuel interne + mesure douce avant consentement. S'applique aux
   deux templates (default + padel) via la classe .tc-unvalidated. */
.tc-unvalidated .tc-card__image,
.tc-unvalidated .trading-card__image {
    filter: blur(12px);
    -webkit-filter: blur(12px);
}
/* Le cutout depth (copie de la photo masquée à la silhouette) ne doit JAMAIS
   apparaître sur une carte non validée : il repasserait le visage net
   par-dessus le flou. Doublon volontaire du garde-fou côté templates. */
.tc-unvalidated .tc-card__image-cutout,
.tc-unvalidated .trading-card__image-cutout {
    display: none;
}
.tc-unvalidated .tc-card__overlay-name,
.tc-unvalidated .tc-padel__player-name--primary,
.tc-unvalidated .tc-padel__player-name--secondary {
    filter: blur(6px);
    -webkit-filter: blur(6px);
}

/* ── RGPD : carte REFUSÉE par le détenteur → bandeau rouge diagonal
   « NON PUBLIÉ PAR L'UTILISATEUR » (vues client/admin uniquement). ── */
.tc-card,
.trading-card {
    position: relative;
}
.tc-refused-ribbon {
    position: absolute;
    top: 50%;
    left: -16%;
    width: 132%;
    transform: translateY(-50%) rotate(-20deg);
    background: rgba(220, 38, 38, 0.94);
    color: #fff;
    text-align: center;
    /* cqw (carte 340px = base) : le ruban suit la taille de la carte
       partout — grilles, mobile, boîtier. */
    padding: 2.9cqw 0;
    z-index: 60;
    pointer-events: none;
    box-shadow: 0 1.2cqw 4.1cqw rgba(0, 0, 0, 0.4);
}
.tc-refused-ribbon span {
    font-weight: 800;
    font-size: 3.86cqw;
    letter-spacing: 0.44cqw;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   COSMOHOLO DEPTH-AWARE — architecture « cutout »
   ------------------------------------------------------------
   UN SEUL holo : le shine global couvre toute la carte (photo
   comprise), exactement comme une carte classique — même échelle,
   même timing partout. Le DÉCOUPAGE du joueur (une copie de la
   photo masquée à sa silhouette par la depth map IA) repasse
   PAR-DESSUS le shine : le sujet recouvre le foil, comme sur une
   vraie carte imprimée. Le glare (reflet de surface) reste
   au-dessus de tout.
   ============================================================ */

.tc-card__image-cutout {
    display: none;
}

.tc-card--depth .tc-card__image-cutout {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 6; /* au-dessus du shine (5), sous les éléments protégés (7+) */
    pointer-events: none;
    mask-image: var(--photo-depth);
    mask-size: cover;
    mask-position: center;
    -webkit-mask-image: var(--photo-depth);
    -webkit-mask-size: cover;
    -webkit-mask-position: center;
}

/* Le reflet de surface repasse au-dessus du découpage (même z, après
   dans le DOM) : le « plastique » de la carte couvre bien tout. */
.tc-card--depth .tc-card__glare {
    z-index: 6;
}