/* Les cartes : tout est en em, la même carte existe à toutes les tailles grâce à --carte (taille du em). */
.carte {
  --c1: #7c8a9c; --c2: #b9c4d1; --carte: 12px; --fond: #fff9ec; --texte-carte: #10242b;
  font-size: var(--carte); width: 19em; height: 27em; position: relative; border-radius: 1.5em; flex: none; color: var(--texte-carte);
  background: linear-gradient(160deg, var(--c2), var(--c1)); padding: .55em; box-shadow: 0 .22em 0 #10242b, 0 .7em 1.4em rgba(4, 30, 32, .28); isolation: isolate;
  border: .2em solid #10242b; transform-style: preserve-3d; transition: transform .14s; text-align: left; cursor: pointer; font-family: var(--texte); font-weight: 700; overflow: visible;
}
.carte.fixe { cursor: default; }
button.carte { display: block; }
.carte-int { position: relative; width: 100%; height: 100%; border-radius: 1.05em; background: var(--fond); overflow: hidden; display: flex; flex-direction: column; border: .14em solid rgba(16, 36, 43, .85); z-index: 1; }
.carte-tete { display: flex; justify-content: space-between; align-items: center; gap: .4em; padding: .4em .6em .24em; font-size: .92em; background: linear-gradient(90deg, var(--c1), var(--c2)); color: #fff; text-shadow: 0 .08em 0 rgba(0, 0, 0, .4); }
.carte-rarete { font: 400 1.04em/1 var(--titre); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-num { font-size: .88em; opacity: .95; white-space: nowrap; }
.carte-photo { position: relative; flex: none; height: 10.6em; background: #16333a; overflow: hidden; container-type: size; }
.carte-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Un image décalée ou dézoomée laisse des vides : son double flouté les remplit. */
.carte-photo .carte-img { position: absolute; left: 50%; top: 50%; z-index: 1; max-width: none; width: max(100cqw, calc(100cqh * var(--r, 1.63))); height: max(100cqh, calc(100cqw / var(--r, 1.63))); object-fit: fill; }
.carte-photo .fond-flou { position: absolute; inset: 0; filter: blur(.7em) saturate(1.2); transform: scale(1.25); }
.carte-titre { font: 400 1.5em/1 var(--titre); padding: .34em .42em .12em; color: var(--texte-carte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.42em; }
.carte-desc { font-size: .98em; line-height: 1.18; padding: 0 .68em; flex: 1; overflow: hidden; color: #33464d; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.carte-pied { display: flex; justify-content: space-between; align-items: center; gap: .4em; padding: .3em .6em .36em; font-size: .86em; border-top: .13em dashed rgba(16, 36, 43, .2); color: #33464d; }
.carte-pied span { white-space: nowrap; }
.carte-pied .ico { width: 1.15em; height: 1.15em; }
.carte-affiche { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(circle at 50% 30%, var(--c2), var(--c1) 70%); overflow: hidden; }
.carte-affiche img { position: absolute; bottom: -10%; height: 86%; width: auto; left: 50%; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 .4em .5em rgba(0, 0, 0, .4)); }
.carte-affiche .mot { position: absolute; top: .4em; left: .4em; right: .4em; font: 400 1.25em/1.02 var(--titre); color: #fff; opacity: .9; text-shadow: 0 .1em 0 rgba(0, 0, 0, .35); text-align: center; z-index: 1; }
.carte-tag { position: absolute; z-index: 5; }
.carte-qte { top: -.6em; right: -.6em; background: var(--soleil); color: var(--encre); border: .16em solid var(--encre); border-radius: 999px; padding: .1em .5em 0; font: 400 1.25em/1.3 var(--titre); }
.carte-nouveau { top: 2.1em; left: -.7em; background: var(--rose); color: #fff; border: .16em solid var(--encre); border-radius: .5em; padding: .15em .5em 0; font: 400 1.14em/1.25 var(--titre); transform: rotate(-8deg); }
.carte-vente { bottom: 1.4em; left: 50%; transform: translateX(-50%) rotate(-3deg); background: var(--encre); color: #fff; border-radius: .5em; padding: .1em .6em; font-size: 1em; white-space: nowrap; }
.carte-badges { position: absolute; top: 2.1em; right: .35em; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: .25em; }
.carte-finition { font: 400 .92em/1 var(--titre); padding: .26em .5em .1em; border-radius: .5em; background: rgba(16, 36, 43, .85); color: #fff; }
.carte-serie { font-size: .88em; line-height: 1; padding: .3em .5em .2em; border-radius: .5em; background: #fff; color: var(--encre); border: .1em solid var(--encre); }
.carte-holo { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 1.05em; }
/* Les reflets passent sur l'image et le fond, jamais sur le texte : il reste lisible. */
.carte-tete, .carte-titre, .carte-desc, .carte-pied { position: relative; z-index: 4; }

/* ─── Raretés ─── */
.r-commune { --fond: #fffdf6; }
.r-rare { --fond: #f2faff; border-color: #0a4f86; }
.r-rare .carte-int { border-color: #1f9bff; border-width: .22em; }

.r-epique { --fond: #f8f2ff; }
.r-epique .carte-int { border-color: #7a2fe0; }
.r-epique::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 1.4em; pointer-events: none; background-image: radial-gradient(circle, #e5c8ff 0 1.5px, transparent 2px), radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-size: 4.2em 5em, 3.1em 3.7em; opacity: .55; animation: particules 7s linear infinite; mix-blend-mode: screen; }
@keyframes particules { to { background-position: 0 -5em, 0 -7.4em; } }

.r-legendaire { --fond: #fff7e4; box-shadow: 0 .22em 0 #10242b, 0 0 1.2em rgba(255, 180, 40, .6); }
.r-legendaire .carte-int { border-color: #c97800; }
.r-legendaire .carte-tete { background: linear-gradient(90deg, #ff9f1c, #ffd166, #ff9f1c); }
.r-legendaire .carte-holo { background: linear-gradient(115deg, transparent 38%, rgba(255, 236, 170, .75) 50%, transparent 62%); background-size: 260% 100%; animation: balayage 4.5s ease-in-out infinite; }
@keyframes balayage { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }

.r-mythique { --fond: #fff0f6; animation: aura-mythique 4s ease-in-out infinite; }
.r-mythique .carte-int { border-color: #d61f63; border-width: .2em; }
.r-mythique .carte-tete { background: linear-gradient(90deg, #d61f63, #ff3d7f, #ff9ec0); }
@keyframes aura-mythique { 0%, 100% { box-shadow: 0 .22em 0 #10242b, 0 0 .9em rgba(255, 61, 127, .5); } 50% { box-shadow: 0 .22em 0 #10242b, 0 0 2.3em rgba(255, 61, 127, .95); } }

.r-iconique { --fond: #eefffb; background: repeating-linear-gradient(45deg, #00c2a8 0 .6em, #7ff0dd .6em 1.2em); box-shadow: 0 .22em 0 #10242b, 0 0 1.6em rgba(0, 194, 168, .7); }
.r-iconique .carte-int { border: .24em double #007e6e; }
.r-iconique .carte-rarete::before, .r-iconique .carte-rarete::after { content: '★'; margin: 0 .2em; font-size: .8em; color: #fff3b0; }
.r-iconique .carte-holo { background: linear-gradient(115deg, transparent 40%, rgba(180, 255, 240, .7) 50%, transparent 60%); background-size: 260% 100%; animation: balayage 5s ease-in-out infinite; }

.r-ultime { --fond: #fff2ec; background: #10242b; padding: .62em; box-shadow: 0 .22em 0 #10242b, 0 0 1.8em rgba(228, 50, 43, .75); overflow: hidden; }
.r-ultime::before { content: ''; position: absolute; left: -40%; top: -25%; width: 180%; height: 150%; z-index: 0; background: conic-gradient(#e4322b, #ffb347, #fff3b0, #ff8a65, #e4322b, #ffb347, #e4322b); animation: tourne 4s linear infinite; }
.r-ultime .carte-int { border-color: #7a0f0a; }
.r-ultime .carte-tete { background: linear-gradient(90deg, #7a0f0a, #e4322b, #ff8a65); }
@keyframes tourne { to { transform: rotate(360deg); } }

.r-cosmique { --fond: #15123f; --texte-carte: #fff; background: linear-gradient(160deg, #8f7bff, #231a8f); box-shadow: 0 .22em 0 #10242b, 0 0 2em rgba(90, 70, 255, .8); }
.r-cosmique .carte-int { background-color: #120f3a; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, #cdbfff 0 1.2px, transparent 1.8px); background-size: 3.4em 3.4em, 5.3em 5.3em; animation: etoiles 26s linear infinite; border-color: #8f7bff; }
.r-cosmique .carte-tete { background: linear-gradient(90deg, #3a2bd8, #8f7bff, #21b8e8); }
.r-cosmique .carte-desc, .r-cosmique .carte-pied { color: #dcd7ff; }
.r-cosmique .carte-pied { border-color: rgba(255, 255, 255, .25); }
@keyframes etoiles { to { background-position: 3.4em -6.8em, -5.3em 5.3em; } }

.r-divine { --fond: #fffdf0; background: linear-gradient(160deg, #fffbd6, #f7c948 60%, #cf8f12); box-shadow: 0 .22em 0 #10242b, 0 0 2.6em rgba(255, 220, 110, .95); }
/* Le halo tourne par son dégradé, pas par l'élément : sa place ne change jamais, donc aucune barre de défilement ne bouge. */
.r-divine::before { content: ''; position: absolute; z-index: -1; inset: -3.5em; pointer-events: none; background: repeating-conic-gradient(from var(--angle-halo), rgba(255, 240, 170, .6) 0 12deg, transparent 12deg 30deg); border-radius: 50%; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); animation: halo-divin 16s linear infinite; }
.r-divine .carte-int { border-color: #b57a0a; }
.r-divine .carte-tete { background: linear-gradient(90deg, #cf8f12, #f7c948, #fffbd6, #f7c948, #cf8f12); color: #5a3a00; text-shadow: 0 .06em 0 #fff8; }
.r-divine .carte-holo { background: radial-gradient(circle at 50% 22%, rgba(255, 255, 230, .6), transparent 55%); }
@property --angle-halo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes halo-divin { to { --angle-halo: 360deg; } }
@keyframes rayons { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.r-secret { --fond: #06150f; --texte-carte: #c8ffb4; background: #06150f; border-color: #7dff5a; box-shadow: 0 .22em 0 #10242b, 0 0 2.8em rgba(125, 255, 90, .75); overflow: hidden; }
.r-secret::before { content: ''; position: absolute; inset: -30%; z-index: 0; background: conic-gradient(#7dff5a, #06150f, #b7f34a, #06150f, #7dff5a); animation: tourne 6s linear infinite; }
.r-secret .carte-int { background-color: #06150f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34'%3E%3Cpath d='M0 0c10 0 10 17 20 17S30 0 40 0M0 17c10 0 10 17 20 17s10-17 20-17' fill='none' stroke='%237dff5a' stroke-opacity='.2' stroke-width='2'/%3E%3C/svg%3E"); border-color: #7dff5a; }
.r-secret .carte-tete { background: #7dff5a; color: #06150f; text-shadow: none; clip-path: polygon(0 0, 100% 0, 100% 75%, 96% 100%, 92% 75%, 88% 100%, 84% 75%, 80% 100%, 76% 75%, 72% 100%, 68% 75%, 64% 100%, 60% 75%, 56% 100%, 52% 75%, 48% 100%, 44% 75%, 40% 100%, 36% 75%, 32% 100%, 28% 75%, 24% 100%, 20% 75%, 16% 100%, 12% 75%, 8% 100%, 4% 75%, 0 100%); padding-bottom: .55em; }
.r-secret .carte-titre { text-shadow: 0 0 .5em #7dff5a; }
.r-secret .carte-desc, .r-secret .carte-pied { color: #b6e7a6; }
.r-secret .carte-pied { border-color: rgba(125, 255, 90, .35); }

/* ─── Finitions (s'ajoutent à la rareté) ─── */
.f-full_art .carte-photo { position: absolute; inset: 0; height: 100%; z-index: 0; }
.f-full_art .carte-titre { margin-top: auto; color: #fff; background: linear-gradient(0deg, rgba(0, 0, 0, .78) 40%, transparent); padding-top: 1.1em; text-shadow: 0 .08em 0 #000; min-height: 0; }
.f-full_art .carte-desc { flex: none; color: #fff; background: rgba(0, 0, 0, .78); padding-bottom: .4em; -webkit-line-clamp: 3; }
.f-full_art .carte-pied { background: rgba(0, 0, 0, .78); color: #fff; border-color: rgba(255, 255, 255, .25); }
.f-full_art .carte-holo { background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, .22) 46%, transparent 60%); }

.f-shiny .carte-holo { background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, .85) 42%, rgba(195, 215, 235, .6) 50%, rgba(255, 255, 255, .85) 58%, transparent 78%); background-size: 280% 100%; mix-blend-mode: overlay; animation: reflet-metal 3.6s linear infinite; }
.f-shiny { border-color: #44525a; }
.f-shiny .carte-photo { filter: saturate(1.15) contrast(1.05); }
@keyframes reflet-metal { from { background-position: 130% 0; } to { background-position: -40% 0; } }

.f-ultra_shiny .carte-holo { background: radial-gradient(circle, #fff 0 .08em, transparent .13em) 0 0 / 3.6em 3.6em, radial-gradient(circle, #fff 0 .06em, transparent .1em) 1.4em 1.8em / 2.8em 2.8em, linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, .95) 40%, rgba(255, 225, 160, .85) 50%, rgba(255, 255, 255, .95) 60%, transparent 85%); background-size: 3.6em 3.6em, 2.8em 2.8em, 300% 100%; mix-blend-mode: overlay; animation: reflet-ultra 2.8s linear infinite; }
.f-ultra_shiny { box-shadow: 0 .22em 0 #10242b, 0 0 1.8em rgba(255, 255, 255, .85); }
@keyframes reflet-ultra { from { background-position: 0 0, 1.4em 1.8em, 130% 0; } to { background-position: 3.6em -3.6em, -1.4em 4.6em, -50% 0; } }

.f-hyper_shiny .carte-holo { background: linear-gradient(115deg, rgba(255, 79, 154, .65), rgba(255, 210, 63, .65), rgba(19, 194, 123, .65), rgba(56, 182, 255, .65), rgba(139, 92, 246, .65), rgba(255, 79, 154, .65)); background-size: 300% 300%; mix-blend-mode: color-dodge; opacity: .7; animation: multi 7s linear infinite; }
.f-hyper_shiny { box-shadow: 0 .22em 0 #10242b, 0 0 1.5em #ff4f9a, 0 0 2.6em #38b6ff; }
@keyframes multi { to { background-position: 300% 300%; } }

.f-prismatique .carte-holo { background: conic-gradient(from 0deg at var(--mx, 50%) var(--my, 40%), #ff4f9a, #ffd23f, #13c27b, #38b6ff, #8b5cf6, #ff4f9a); mix-blend-mode: color-dodge; opacity: .65; }
.f-prismatique { background: conic-gradient(#ff4f9a, #ffd23f, #13c27b, #38b6ff, #8b5cf6, #ff4f9a); box-shadow: 0 .22em 0 #10242b, 0 0 1.6em #8b5cf6, 0 0 3em #ffd23f; animation: prisme 9s linear infinite; }
@keyframes prisme { 0%, 100% { box-shadow: 0 .22em 0 #10242b, 0 0 1.6em #8b5cf6, 0 0 3em #ffd23f; } 50% { box-shadow: 0 .22em 0 #10242b, 0 0 1.6em #13c27b, 0 0 3em #ff4f9a; } }

/* ─── Carte manquante : l'emplacement d'album ─── */
.carte.absente { background: repeating-linear-gradient(45deg, #2b4750 0 .6em, #213a42 .6em 1.2em); box-shadow: inset 0 0 0 .2em rgba(255, 255, 255, .08), 0 .22em 0 #10242b; animation: none; border-color: #10242b; }
.carte.absente::before, .carte.absente::after { display: none; }
.carte-vide { position: absolute; inset: .4em; border: .18em dashed rgba(255, 255, 255, .3); border-radius: 1em; color: #dcefe7; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .3em; padding: .8em; }
.carte-vide b { font: 400 3.3em/1 var(--titre); color: rgba(255, 255, 255, .5); }
.carte-vide strong { font: 400 1.3em/1.05 var(--titre); }
.carte-vide i { font-style: normal; font-size: .95em; color: var(--c2); }

/* ─── Dos de carte ─── */
.dos { font-size: var(--carte, 12px); width: 19em; height: 27em; border-radius: 1.5em; border: .2em solid #10242b; flex: none; position: relative; overflow: hidden; background: linear-gradient(150deg, #13c27b, #066a45); box-shadow: 0 .22em 0 #10242b; display: grid; place-items: center; }
.dos::before { content: ''; position: absolute; inset: .6em; border-radius: 1em; border: .2em solid #fff9ec; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath d='M0 0c14 0 14 24 28 24S42 0 56 0M0 24c14 0 14 24 28 24s14-24 28-24' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='3'/%3E%3C/svg%3E"); }
.dos span { position: relative; font: 400 2.6em/.95 var(--titre); color: #fff; text-align: center; text-shadow: 0 .1em 0 #063; transform: rotate(-6deg); }
.dos span small { display: block; background: var(--soleil); color: var(--encre); border-radius: .3em; font-size: .62em; padding: .2em .4em 0; margin-top: .2em; text-shadow: none; }

/* ─── Grilles de cartes ─── */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(19 * var(--tc, 11px) + 12px), 1fr)); gap: 18px 12px; justify-items: center; }
.grille-cartes .carte { --carte: var(--tc, 11px); }
.grille-cartes .carte:hover { transform: translateY(-.4em) rotate(-1deg); z-index: 2; }
.carte.petite { --carte: 8px; }
.carte.moyenne { --carte: 11px; }
.carte.grande { --carte: 20px; }
@media (max-width: 560px) {
  .grille-cartes { --tc: 8.6px; gap: 14px 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte.grande { --carte: 15.4px; }
}

/* ─── Fiche d'une carte ─── */
.fiche { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.fiche-carte { display: flex; justify-content: center; perspective: 900px; }
@media (max-width: 800px) { .fiche { grid-template-columns: minmax(0, 1fr); } }

/* ─── Ouverture ─── */
.scene { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, #174a4a, #06171c 75%); overflow: hidden; color: #fff; padding: 12px; }
.scene.t-coupe { background: radial-gradient(circle at 50% 42%, #2c3e66, #0a0f1f 75%); }
.scene.t-twitch { background: radial-gradient(circle at 50% 42%, #432184, #120726 75%); }
.scene.t-or { background: radial-gradient(circle at 50% 42%, #6d4a00, #120b00 75%); }
.scene.t-vhs { background: radial-gradient(circle at 50% 42%, #40304f, #0d0815 75%); }
.scene.t-tiktok { background: radial-gradient(circle at 50% 42%, #15323a, #000 75%); }
.scene-haut { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; z-index: 5; }
.scene-bas { min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; position: relative; z-index: 5; }
.scene-info { font: 400 25px/1 var(--titre); min-height: 30px; text-align: center; margin-bottom: 12px; position: relative; z-index: 5; }
.scene-zone { position: relative; display: grid; place-items: center; min-height: min(62vh, 560px); width: 100%; perspective: 1100px; }
.scene .booster { --ec: clamp(17px, 3.4vh, 26px); cursor: pointer; }
.scene .booster.tremble { animation: tremble .75s ease-in-out both; }
@keyframes tremble { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-4deg) translateX(-.3em); } 30% { transform: rotate(4deg) translateX(.3em); } 45% { transform: rotate(-6deg) translateX(-.4em) scale(1.02); } 60% { transform: rotate(6deg) translateX(.4em) scale(1.03); } 80% { transform: rotate(-3deg) scale(1.05); } }
.booster.dechire { animation: booster-descend .55s ease-in forwards; }
@keyframes booster-descend { 40% { transform: translateY(0) scale(1.05); opacity: 1; } 100% { transform: translateY(70vh) rotate(6deg); opacity: 0; } }
.bande-dechiree { position: absolute; left: 0; right: 0; top: 0; height: 10%; overflow: hidden; }
.ciseaux-passe { position: absolute; top: 12%; left: -30%; width: 90px; z-index: 5; color: #fff; animation: ciseaux-coupe .7s ease-in-out forwards; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .5)); }
@keyframes ciseaux-coupe { to { left: 120%; } }
.bande-live { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font: 400 22px var(--titre); background: var(--danger); padding: 8px 14px 2px; border-radius: 10px; z-index: 5; }
.bande-vhs { position: absolute; inset: 0; z-index: 4; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px 7px); animation: vhs .7s linear; pointer-events: none; }
@keyframes vhs { from { transform: translateY(-40px); } to { transform: translateY(0); } }

.carte-rev { --carte: clamp(13px, 2.3vh, 21px); position: relative; width: calc(19 * var(--carte)); height: calc(27 * var(--carte)); transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.5, .5, 1); cursor: pointer; }
.carte-rev.entree { animation: carte-monte .42s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.carte-rev.part { animation: carte-part .28s ease-in forwards; }
@keyframes carte-part { to { transform: rotateY(180deg) translate(-70vw, -6vh) rotate(-14deg) scale(.6); opacity: 0; } }
.jaillit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; --carte: clamp(11px, 2vh, 18px); }
.jaillit-carte { grid-area: 1 / 1; animation: jaillir 1.15s cubic-bezier(.2, 1.1, .4, 1) var(--d) both; }
.jaillit-carte .dos { font-size: var(--carte); }
@keyframes jaillir { 0% { transform: translateY(26vh) scale(.45); opacity: 0; } 22% { opacity: 1; } 50%, 66% { transform: translate(calc(var(--i) * 11vmin), -5vh) rotate(calc(var(--i) * 13deg)); opacity: 1; } 100% { transform: translateY(0) rotate(0); opacity: 1; } }
.revele-petit { animation: revele-petit .38s ease-out; }
@keyframes revele-petit { 40% { transform: scale(1.06); } }
.revele-grand { animation: revele-grand .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes revele-grand { 0% { transform: scale(.82); } 45% { transform: scale(1.16) rotate(-3deg); } 70% { transform: scale(1.03) rotate(2deg); } }
.revele-ultime { animation: revele-ultime 1.1s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes revele-ultime { 0% { transform: scale(.6) rotate(-10deg); } 40% { transform: scale(1.24) rotate(5deg); } 65% { transform: scale(1.06) rotate(-3deg); } 85% { transform: scale(1.12) rotate(1deg); } }
@keyframes carte-monte { from { transform: translateY(50vh) scale(.6) rotate(-8deg); opacity: 0; } }
.carte-rev.retournee { transform: rotateY(180deg); }
.carte-rev .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.carte-rev .face.recto { transform: rotateY(180deg); }
.carte-rev .face .carte, .carte-rev .face .dos { --carte: inherit; font-size: var(--carte); cursor: inherit; }
.indice-rarete { position: absolute; inset: -14%; border-radius: 30%; z-index: -1; filter: blur(30px); background: var(--c1); opacity: .9; animation: halo-doux 2.4s ease-in-out infinite; }
@keyframes halo-doux { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.banniere-rarete { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%) rotate(-3deg); font: 400 clamp(25px, 5vw, 42px)/1 var(--titre); padding: 10px 20px 3px; border: 4px solid var(--encre); border-radius: 14px; background: linear-gradient(90deg, var(--c1), var(--c2)); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); white-space: nowrap; z-index: 6; animation: tampon .34s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes tampon { from { transform: translateX(-50%) rotate(-12deg) scale(2.2); opacity: 0; } }
.pluie { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.pluie i { position: absolute; top: -30px; width: 13px; height: 13px; background: var(--c, #ffd23f); border: 2px solid var(--encre); border-radius: 3px; animation: tombe linear forwards; }
@keyframes tombe { to { transform: translateY(110vh) rotate(720deg); } }
.anneau { position: absolute; left: 50%; top: 50%; width: 30vmin; height: 30vmin; border-radius: 50%; border: 10px solid var(--c1); transform: translate(-50%, -50%) scale(.3); opacity: .8; animation: anneau 1.3s ease-out forwards; pointer-events: none; z-index: 1; }
@keyframes anneau { to { transform: translate(-50%, -50%) scale(3); opacity: 0; } }
.rayons { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(var(--c1) 0 9deg, transparent 9deg 24deg); opacity: .24; animation: rayons 18s linear infinite; pointer-events: none; z-index: 0; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000, transparent 62%); mask-image: radial-gradient(circle, #000, transparent 62%); }
.oeil-secret { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: #020806; }
.oeil-secret .oeil { width: min(56vw, 320px); color: #7dff5a; animation: oeil-ouvre 2s ease-in-out forwards; }
.oeil-secret p { position: absolute; bottom: 18%; font: 400 clamp(24px, 6vw, 44px) var(--titre); color: #7dff5a; left: 0; right: 0; text-align: center; animation: apparait 1.4s .5s both; }
@keyframes oeil-ouvre { 0% { transform: scaleY(.04); } 70% { transform: scaleY(.04); } 100% { transform: scaleY(1); } }
@keyframes apparait { from { opacity: 0; } }
.recap { overflow-x: hidden; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-height: 66vh; overflow-y: auto; padding: 34px 28px; --carte: clamp(8px, 1.45vh, 12.5px); }
.recap .carte { --carte: inherit; font-size: var(--carte); }
@media (max-width: 560px) { .recap { --carte: 8.6px; } }

/* Gel pour vérifier les visuels sans animation. */
body.gel *, body.gel *::before, body.gel *::after { animation-play-state: paused !important; }