/* PROTOTYPE — rendu partagé de la Carte, design A « Topo » retenu (cf. NOTES.md). */
:root {
  --r-commun: #8d8a84; --r-peu: #3f9a5b; --r-rare: #2f6fd6; --r-epique: #8a46d4; --r-legend: #d49a1c; --r-myth: #e0457b;
  --d-bloc: #d9822b; --d-sport: #1f8a9e; --d-trad: #4b7a3a; --d-grimpeur: #4b4fa8;
}

a.card { display: block; text-decoration: none; color: inherit; }
.card[data-r="Commun"] { --r: var(--r-commun); } .card[data-r="Peu commun"] { --r: var(--r-peu); }
.card[data-r="Rare"] { --r: var(--r-rare); } .card[data-r="Épique"] { --r: var(--r-epique); }
.card[data-r="Légendaire"] { --r: var(--r-legend); } .card[data-r="Mythique"] { --r: var(--r-myth); }
.card[data-d="bloc"] { --d: var(--d-bloc); } .card[data-d="sport"] { --d: var(--d-sport); }
.card[data-d="trad"] { --d: var(--d-trad); } .card[data-d="grimpeur"] { --d: var(--d-grimpeur); }
@keyframes holo { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
/* Carte physique en 3D : inclinaison pilotée par carte-a.js (--rx, --ry, --mx, --my, --glare). */
@property --rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.A { width: 250px; height: 350px; border-radius: 14px; padding: 7px; background: var(--r); position: relative; box-shadow: 0 6px 18px rgb(0 0 0 / .4);
     transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s, 1)); transform-origin: 50% 50%;
     transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; will-change: transform; }
.A.tilting { transition: transform .06s linear, box-shadow .3s; box-shadow: 0 18px 36px rgb(0 0 0 / .5); }
.A::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; z-index: 2;
            background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgb(255 255 255 / .55), rgb(255 255 255 / 0) 55%);
            mix-blend-mode: soft-light; opacity: var(--glare, 0); transition: opacity .3s; }
.A .in { position: relative; }
.A[data-r="Épique"] .in::after, .A[data-r="Légendaire"] .in::after, .A[data-r="Mythique"] .in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 25%, rgb(255 111 165 / .35), rgb(255 211 110 / .3), rgb(126 240 195 / .35), rgb(111 183 255 / .35), transparent 75%);
  background-size: 260% 260%; background-position: var(--mx, 50%) var(--my, 50%); opacity: calc(var(--glare, 0) * .9); transition: opacity .3s; }
/* Carte mise en avant : elle oscille doucement, même sans souris (mobile). */
@keyframes cardfloat { 0%, 100% { --ry: -10deg; --rx: 3deg; } 50% { --ry: 10deg; --rx: -3deg; } }
.A.float { animation: cardfloat 5s ease-in-out infinite; }
.A.float[data-r="Mythique"], .A.float[data-r="Légendaire"] { animation: cardfloat 5s ease-in-out infinite, holo 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .A.float { animation: none; } .A { transition: none; } }
.A[data-r="Mythique"] { background: linear-gradient(115deg, #ff6fa5, #ffd36e, #7ef0c3, #6fb7ff, #c58cff, #ff6fa5); background-size: 200% 100%; animation: holo 6s linear infinite; }
.A[data-r="Légendaire"] { background: linear-gradient(115deg, #b8860b, #ffe08a, #c9971f, #fff3c4, #b8860b); background-size: 200% 100%; animation: holo 6s linear infinite; }
.A .in { background: #fbf8f1; color: #1d1c1a; border-radius: 9px; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
/* Recto « Bandeau » (proposition 1 retenue) : nom, image réduite, Stats sur une ligne, accroche + histoire. */
.A p { margin: 0; }
.A .in { text-align: left; }
.A .top { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 9px 4px; gap: 6px; }
.A .nm { font: 400 14px/1.1 "Archivo Black"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.A .gr { font: 400 15px "Archivo Black"; color: var(--d); flex: none; }
.A .art { height: 112px; margin: 0 7px; border-radius: 6px; overflow: hidden; position: relative; background: #e9e2d3; flex: none; }
.A .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.A .art svg { width: 100%; height: 100%; display: block; }
.A .credit { position: absolute; right: 4px; bottom: 2px; font-size: 6.5px; color: #fff; text-shadow: 0 0 3px #000; }
.A .sline { margin: 6px 7px 0; background: #efe8da; border-radius: 6px; padding: 4px 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.A .sline div { text-align: center; }
.A .sline div + div { border-left: 1px solid #ddd3c0; }
.A .sline b { display: block; font: 700 13px/1.1 "JetBrains Mono"; }
.A .sline span { display: block; font: 700 7px Inter; text-transform: uppercase; letter-spacing: .05em; color: #8a8478; }
.A .body { padding: 7px 10px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.A .acc { font: 700 9.5px/1.35 Inter; }
.A .txt { font: 9px/1.4 Georgia, serif; color: #3a342b; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
.A .txt.none { color: #9b917f; font-style: italic; }
.A .meta { padding: 4px 10px 6px; font: 600 8px Inter; text-transform: uppercase; letter-spacing: .06em; color: #7b7468; display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.A .meta span { overflow: hidden; text-overflow: ellipsis; }
.A .meta b { color: var(--r); flex: none; }