/* ── Rendu d'une carte (partagé : overlay, éditeur, page publique) ── */
.tc-card {
  --w: 340px; --r: 22px;
  width: var(--w); aspect-ratio: 5 / 7.4; position: relative;
  perspective: 1600px; font-size: calc(var(--s, 1) * 16px); /* --s = largeur / 340, sans unité */
}
.tc-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform var(--flip, 900ms) cubic-bezier(.3, .1, .2, 1);
}
.tc-card.flipped .tc-inner { transform: rotateY(180deg); }
.tc-face {
  position: absolute; inset: 0; border-radius: var(--r); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1.4em 3em rgba(0, 0, 0, .45), 0 .2em .6em rgba(0, 0, 0, .3);
}
.tc-front { transform: rotateY(180deg); }
.tc-card.flip-x .tc-front { transform: rotateX(180deg); }
.tc-card.flip-x.flipped .tc-inner { transform: rotateX(180deg); }

/* Dos */
.tc-back { display: grid; place-items: center; }
.tc-back .tc-frame {
  position: absolute; inset: .7em; border: .18em solid var(--border); border-radius: calc(var(--r) * .7);
  box-shadow: inset 0 0 0 .35em rgba(0,0,0,.15), inset 0 0 0 .45em var(--border);
}
.tc-back .tc-symbol {
  position: relative; font-size: 6.5em; line-height: 1; color: var(--symbol);
  text-shadow: 0 0 .25em var(--symbol), 0 0 .6em rgba(0,0,0,.4);
  animation: tc-pulse 2.6s ease-in-out infinite;
}
.tc-back .tc-backtext {
  position: absolute; bottom: 1.6em; left: 0; right: 0; text-align: center; color: var(--symbol);
  font-family: var(--font); letter-spacing: .12em; font-size: 1em; text-transform: uppercase;
}
.tc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes tc-pulse { 50% { transform: scale(1.07); filter: brightness(1.25); } }

/* Motifs du dos */
.tc-pattern { position: absolute; inset: 0; opacity: .5; }
.p-stars { background-image: radial-gradient(circle at 20% 30%, var(--border) 0 1.5px, transparent 2px), radial-gradient(circle at 70% 60%, var(--border) 0 1px, transparent 1.5px), radial-gradient(circle at 40% 80%, #fff 0 1px, transparent 1.5px); background-size: 3.2em 3.2em, 2.3em 2.3em, 4.1em 4.1em; }
.p-grid { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 1.6em 1.6em; opacity: .18; }
.p-diamonds { background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%), linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%); background-size: 2em 2em; background-position: 0 0, 1em 1em; opacity: .14; }
.p-rays { background: repeating-conic-gradient(from 0deg at 50% 50%, var(--border) 0 6deg, transparent 6deg 18deg); opacity: .16; }
.p-waves { background: repeating-radial-gradient(circle at 50% 50%, transparent 0 .9em, var(--border) .9em 1em); opacity: .2; }
.p-none { display: none; }

/* Face */
.tc-front { display: flex; flex-direction: column; color: var(--text); font-family: var(--font); }
.tc-front .tc-frame { position: absolute; inset: .55em; border: .14em solid var(--border); border-radius: calc(var(--r) * .7); pointer-events: none; z-index: 3; }
.tc-front .tc-top { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: .4em; padding: 1.25em 1.3em 0; }
.tc-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: system-ui, sans-serif; font-weight: 700; font-size: .62em; letter-spacing: .08em; text-transform: uppercase; padding: .35em .7em; border-radius: 99em; background: var(--accent); color: #fff; white-space: nowrap; }
.tc-badge.tc-rar { background: var(--rar); color: #160d00; }
.tc-art { position: relative; z-index: 1; margin: .9em 1.3em 0; flex: 1 1 0; min-height: 2.6em; max-height: 34%; border-radius: .8em; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.55), transparent 60%), var(--accent); display: grid; place-items: center; box-shadow: inset 0 0 0 .14em var(--border); }
.tc-art .tc-emoji { font-size: 4.3em; color: #fff; text-shadow: 0 .05em .2em rgba(0,0,0,.35); }
.tc-title { position: relative; z-index: 2; margin: .7em 1.1em .3em; text-align: center; font-size: 1.45em; line-height: 1.1; font-weight: 700; color: var(--accent); overflow-wrap: break-word; hyphens: auto; }
.tc-sep { position: relative; z-index: 2; height: .12em; margin: 0 3em .6em; background: linear-gradient(90deg, transparent, var(--border), transparent); }
.tc-desc { position: relative; z-index: 2; flex: 0 1 auto; margin: 0 1.4em; text-align: center; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: .98em; line-height: 1.38; overflow: hidden; overflow-wrap: anywhere; }
.tc-viewer { position: relative; z-index: 2; margin: auto 1.4em 1.35em; padding-top: .4em; text-align: center; font-family: system-ui, sans-serif; font-size: .78em; opacity: .8; }
.tc-viewer b { color: var(--accent); }
.tc-input { display: block; font-style: italic; margin-top: .2em; opacity: .9; }
.tc-front.has-img .tc-art { display: none; }
.tc-front.has-img .tc-img { opacity: .22; }

/* Brillance selon la rareté */
.tc-card.r-epic .tc-front, .tc-card.r-legendary .tc-front { box-shadow: 0 0 2em var(--rar), 0 1.4em 3em rgba(0,0,0,.45); }
.tc-card.r-legendary .tc-front::after {
  content: ''; position: absolute; inset: -50%; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  animation: tc-shine 2.8s ease-in-out infinite;
}
@keyframes tc-shine { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }

/* Illustration (image, GIF, vidéo) */
.tc-art .tc-artimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-badge.tc-time { background: #1e1e2a; color: #fff; }
/* Badge « Nouvelle ! » (collection) */
.tc-new { position: absolute; z-index: 5; top: 36%; left: 50%; transform: translate(-50%, -50%) rotate(-5deg); background: linear-gradient(90deg, #ffd34d, #ff9f1a); color: #3a2000;
  font: 800 .78em system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: .4em 1.1em; border-radius: 99em; white-space: nowrap;
  box-shadow: 0 .2em .8em rgba(0,0,0,.4); animation: tc-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes tc-pop { from { transform: translate(-50%, -50%) rotate(-5deg) scale(0); } }