/* PRONO 27 — couche ergonomie : lisibilité, survols, clics, chargements animés, adaptation mobile / tablette / ordinateur.
   Aucune couleur nouvelle : tout vient de la charte « Pop néon » (theme-e-pop-neon.css). Respecte prefers-reduced-motion. */

/* ---------- Lisibilité ---------- */
:root { --encre-douce: #4a3f78; --ease: cubic-bezier(.2,.8,.2,1); }
html { scroll-behavior: smooth; }
body { font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -.01em; text-wrap: balance; }
p, .lead { text-wrap: pretty; }
button, .btn, nav.tabs button, .menubtn { min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ultra); outline-offset: 3px; border-radius: 8px; }
::selection { background: #d9c2ff; color: var(--encre); }

/* ---------- Écran de chargement (logo + 3 cartes qui pivotent) ---------- */
.boot { display: grid; place-items: center; align-content: center; gap: 22px; min-height: 100vh; padding: 0; }
.ld { display: flex; gap: 10px; perspective: 500px; }
.ld i { width: 34px; height: 48px; border-radius: 8px; background: var(--degrade); box-shadow: 0 6px 18px rgba(138,43,226,.35); animation: ldflip 1.2s var(--ease) infinite; }
.ld i:nth-child(2) { animation-delay: .15s; filter: hue-rotate(40deg); }
.ld i:nth-child(3) { animation-delay: .3s; filter: hue-rotate(80deg); }
@keyframes ldflip { 0%, 100% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(180deg) translateY(-8px); } }
.ld-logo { font: 800 1.2rem var(--sans); letter-spacing: .06em; color: var(--encre); }
.ld-logo span { color: var(--tampon); }

/* Barre fine en haut pendant les échanges avec le serveur */
#busybar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none; transform-origin: left; transform: scaleX(0); opacity: 0; background: var(--degrade); }
#busybar.on { opacity: 1; animation: busy 2.2s var(--ease) forwards; }
#busybar.done { opacity: 0; transform: scaleX(1); transition: transform .2s, opacity .3s .15s; }
@keyframes busy { from { transform: scaleX(.05); } to { transform: scaleX(.92); } }

/* Squelettes pendant le chargement d'un onglet */
.skel { display: grid; gap: 14px; padding: 24px 0; }
.skel i { display: block; border-radius: 14px; background: linear-gradient(90deg, #e8e0ff 25%, #f7f3ff 45%, #e8e0ff 65%); background-size: 220% 100%; animation: shimmer 1.2s linear infinite; }
.skel-h { height: 34px; width: 55%; } .skel-b { height: 110px; } .skel-b.short { width: 70%; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------- Entrées de page et d'éléments ---------- */
main.enter > :not(.top):not(.skel) { animation: rise .45s var(--ease) backwards; }
main.enter > :not(.top):nth-child(3) { animation-delay: .05s; }
main.enter > :not(.top):nth-child(4) { animation-delay: .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.toast { animation: toastin .35s var(--ease); box-shadow: 0 8px 24px rgba(21,10,51,.3); }
@keyframes toastin { from { opacity: 0; transform: translateY(16px) scale(.96); } }
dialog { animation: sheetin .3s var(--ease); }
dialog::backdrop { background: rgba(21,10,51,.55); backdrop-filter: blur(4px); animation: fadein .3s; }
@keyframes sheetin { from { opacity: 0; transform: translateY(24px); } }
@keyframes fadein { from { opacity: 0; } }
.grid > * { animation: rise .5s var(--ease) backwards; }
.grid > *:nth-child(2) { animation-delay: .04s; } .grid > *:nth-child(3) { animation-delay: .08s; } .grid > *:nth-child(4) { animation-delay: .12s; } .grid > *:nth-child(n+5) { animation-delay: .16s; }

/* ---------- Clics : effet d'onde ---------- */
.has-ripple { overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
.btn.alt .ripple, .c3d-btn:not(.main) .ripple, .menubtn .ripple, .arow .ripple { background: rgba(138,43,226,.22); }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Survols (souris uniquement) et appui (tous) ---------- */
.btn, .c3d-btn, nav.tabs button, .menubtn, .panel, .rank, .arow, .linklike, .eye { transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, color .18s, border-color .18s, filter .18s; }
.btn:not(:disabled):active, .c3d-btn:active { transform: scale(.97); }
@media (hover: hover) {
  .btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(138,43,226,.45); filter: saturate(1.15) brightness(1.04); }
  .btn.alt:not(:disabled):hover { background: rgba(138,43,226,.08); box-shadow: 0 6px 16px rgba(138,43,226,.18); }
  .btn.danger:not(:disabled):hover { box-shadow: 0 8px 22px rgba(255,47,185,.45); }
  .c3d-btn:hover { border-color: var(--ultra); transform: translateY(-1px); }
  .panel:hover, .rank:hover, .arow:hover { box-shadow: 0 8px 26px rgba(80,40,160,.14); transform: translateY(-2px); }
  .card:not(.c3d-face):hover { box-shadow: 0 10px 28px rgba(80,40,160,.18); }
  nav.tabs button:hover { color: #fff; background: rgba(255,255,255,.08); }
  .menubtn:hover, .linklike:hover { color: var(--tampon); }
  .eye:hover { opacity: 1; transform: translateY(-50%) scale(1.12); }
}
nav.tabs button { position: relative; border-radius: 10px; }
nav.tabs button::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 4px; height: 3px; border-radius: 3px; background: var(--degrade); transform: scaleX(0); transition: transform .3s var(--ease); }
nav.tabs button[aria-current="page"]::after { transform: scaleX(1); }
nav.tabs button[aria-current="page"] { border-top-color: transparent; border-image: none; }
.dots i { transition: background .3s, transform .3s var(--ease); } .dots i.on { transform: scale(1.15); }

/* ---------- Adaptation : tablette ---------- */
@media (min-width: 640px) {
  .shell { max-width: 780px; padding-left: 24px; padding-right: 24px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid:has(> .c3d) { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
  nav.tabs div { max-width: 640px; }
  nav.tabs button { font-size: .9rem; }
}

/* ---------- Adaptation : ordinateur (menu latéral, contenu large) ---------- */
@media (min-width: 960px) {
  body { font-size: 1.125rem; }
  .shell { max-width: 1120px; margin-left: 220px; margin-right: auto; padding: 0 40px 48px; }
  .top { border-radius: 0 0 16px 16px; }
  nav.tabs { left: 0; right: auto; top: 0; bottom: 0; width: 220px; flex-direction: column; justify-content: flex-start; padding: 88px 14px 24px; border-top: 0; border-right: 1px solid #2d1a6b; }
  nav.tabs div { flex-direction: column; gap: 6px; max-width: none; }
  nav.tabs button { flex: none; text-align: left; padding: 12px 16px; font-size: 1rem; border-radius: 12px; }
  nav.tabs button::after { left: 0; right: auto; top: 20%; bottom: 20%; width: 4px; height: auto; transform: scaleY(0); }
  nav.tabs button[aria-current="page"] { background: rgba(255,255,255,.1); }
  nav.tabs button[aria-current="page"]::after { transform: scaleY(1); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .grid:has(> .c3d) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #toasts { bottom: 24px; left: 220px; }
  .panel { padding: 24px; }
}
@media (min-width: 1400px) { .grid, .grid:has(> .c3d) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Petit écran en hauteur réduite : barre du bas plus compacte */
@media (max-width: 639px) and (max-height: 640px) { nav.tabs button { min-height: 40px; padding-top: 8px; padding-bottom: 8px; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ld i, .skel i, #busybar.on, main.enter > *, .grid > *, .toast, dialog, dialog::backdrop, .ripple { animation: none !important; }
  .btn, .c3d-btn, nav.tabs button, .panel, .rank, .arow { transition: none !important; }
  .btn:hover, .panel:hover, .rank:hover, .arow:hover { transform: none !important; }
}
@media (min-width: 960px) { nav.tabs::before { content: "PRONO 27"; position: absolute; top: 28px; left: 30px; font: 800 1.2rem var(--sans); letter-spacing: .04em; color: #fff; } }

/* ---------- Bandeau du haut : pleine largeur, sobre (logo + crédits) ---------- */
:root { --gut: 16px; }
.shell { padding-left: var(--gut); padding-right: var(--gut); }
.top { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); border-bottom: 0; border-radius: 0; box-shadow: 0 6px 22px rgba(21,10,51,.28); min-height: 56px; }
.top .credits { font-size: .9rem; padding: 6px 14px; }
@media (min-width: 640px) { :root { --gut: 24px; } }
@media (min-width: 960px) { :root { --gut: 40px; } .shell { padding-left: var(--gut); padding-right: var(--gut); } .top { border-radius: 0; } }
.auth-logo { display: block; }
nav.tabs button { font-size: .7rem; letter-spacing: -.01em; }
@media (min-width: 640px) { nav.tabs button { font-size: .9rem; } }

/* ---------- Barre de navigation : icônes rondes dans une pastille flottante (inspiration Uiverse « akshat-patel28 », réécrite aux couleurs de la charte) ---------- */
nav.tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
nav.tabs button .ico { width: 22px; height: 22px; flex: none; }
@media (max-width: 959px) {
  nav.tabs { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 6px; border: 0; border-radius: 24px; background: var(--degrade); box-shadow: rgba(0,0,0,.35) 0 5px 15px, rgba(138,43,226,.5) 5px 10px 15px; }
  nav.tabs div { max-width: 560px; justify-content: space-between; gap: 2px; }
  nav.tabs button { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 6px 0; margin: 0; border-radius: 16px; color: #fff; background: transparent; overflow: visible; }
  nav.tabs button span { font-size: .58rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; opacity: .92; }
  nav.tabs button::after { display: none; }
  nav.tabs button[aria-current="page"] { background: #fff; color: var(--ultra); box-shadow: 0 4px 12px rgba(21,10,51,.3); }
  nav.tabs button[aria-current="page"] span { opacity: 1; }
  .shell { padding-bottom: 120px; }
  #toasts { bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@media (hover: hover) and (max-width: 959px) { nav.tabs button:hover { transform: translateY(-3px); background: rgba(255,255,255,.18); color: #fff; } nav.tabs button[aria-current="page"]:hover { background: #fff; color: var(--ultra); } }
@media (min-width: 960px) {
  nav.tabs button { flex-direction: row; justify-content: flex-start; gap: 12px; }
  nav.tabs button span { font-size: 1rem; }
}
@media (min-width: 640px) and (max-width: 959px) { nav.tabs { left: 50%; right: auto; transform: translateX(-50%); width: min(640px, calc(100% - 24px)); } nav.tabs button span { font-size: .75rem; } }

/* Boutons : le dégradé ne déborde plus sur les bords (liserés de couleur parasites) */
.btn { background-origin: border-box; background-clip: border-box; background-repeat: no-repeat; background-size: 100% 100%; }
.btn:not(.alt) { border-color: transparent; }
.btn.danger { border-color: transparent; }
/* Paquet présenté même quand il n'y a plus de pack à ouvrir : légèrement atténué, sans animation */
.pk-wrap.rest { opacity: .7; filter: saturate(.75); pointer-events: none; }
.pk-wrap.rest * { animation: none !important; }

.eye { display: grid; place-items: center; color: var(--encre-douce); opacity: 1; }
.eye svg { display: block; }
.eye[aria-pressed="true"] { color: var(--ultra); }

/* ---------- Finitions : panneaux et champs plus nets ---------- */
:root { --accent: #8a2be2; --ink-bg: #170a3a; --line: #e2dbf7; --surface: #ffffff; --wash: #f4f1ff; }
h1 { font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -.02em; }
.btn { min-height: 50px; letter-spacing: .005em; }
.panel { border-radius: 16px; box-shadow: 0 1px 2px rgba(20,10,51,.04), 0 12px 32px rgba(20,10,51,.06); }
@media (hover: hover) { .panel:hover, .rank:hover, .arow:hover { transform: none; box-shadow: 0 1px 2px rgba(20,10,51,.05), 0 16px 40px rgba(20,10,51,.1); } }
.auth input[type=text], .auth input[type=email], .auth input[type=password], .field input[type=text], .panel input[type=text], select { border: 1px solid #d3caf0; border-radius: 10px; background: #fff; min-height: 50px; }
.auth input:focus-visible, .field input:focus-visible, .panel input:focus-visible { border-color: var(--ultra); box-shadow: 0 0 0 4px rgba(138,43,226,.16); outline: none; }
.field label { font-weight: 600; font-size: .95rem; }

/* ---------- Mises en page : écran de connexion / inscription ---------- */
.auth { padding-top: calc(40px + env(safe-area-inset-top)); max-width: 460px; margin-left: auto; margin-right: auto; margin-bottom: 0; }
.auth-logo { font-size: 1.45rem; margin-bottom: 28px; }
@media (min-width: 640px) {
  body:has(main.auth) { background: radial-gradient(900px 500px at 50% -10%, #e3d6ff, transparent 70%), var(--wash); }
  main.auth { margin-top: 7vh; padding: 36px 40px 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 60px rgba(20,10,51,.12); min-height: 0; }
}

/* ---------- Mises en page : ordinateur (contenu centré dans la zone à droite du menu) ---------- */
@media (min-width: 960px) {
  :root { --pad: max(40px, calc((100vw - 220px - 1080px) / 2)); }
  .shell { max-width: none; margin-left: 220px; margin-right: 0; padding-left: var(--pad); padding-right: var(--pad); }
  main.auth.shell { margin-left: auto; margin-right: auto; max-width: 460px; padding-left: 40px; padding-right: 40px; }
  .top { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); }
  .panel { max-width: 760px; margin-left: 0; margin-right: auto; }
  .panel.pack { margin-left: auto; }
  .panel:has(.grid), .panel.wide { max-width: none; }
  nav.tabs { background: var(--ink-bg); border-radius: 0; backdrop-filter: none; box-shadow: none; }
  nav.tabs button[aria-current="page"] { background: rgba(255,255,255,.1); }
  #toasts { left: 220px; }
}

/* ---------- Mises en page : téléphone ---------- */
@media (max-width: 639px) {
  .shell { padding-bottom: 124px; }
  main.auth.shell { padding-bottom: 40px; }
  h1 { margin-top: 18px; }
  .panel { padding: 18px 16px; border-radius: 16px; }
}

.legal a, .lead a, .switch a { color: var(--accent); text-underline-offset: 3px; }
.legal { color: #6b6290; }

/* ---------- Ouverture de pack : pioche empilée, carte qui glisse au fond, éventail final ---------- */
.deck { --dw: min(320px, 84vw); --dh: calc(var(--dw) * 1.484); position: relative; width: var(--dw); height: calc(var(--dh) + 44px); margin: 6px auto 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.dk-card { position: absolute; left: 0; right: 0; top: 0; height: var(--dh); perspective: 1100px; transform-origin: 50% 100%;
  transform: translateY(calc(var(--pos, 0) * 12px)) scale(calc(1 - var(--pos, 0) * .045)); transition: transform .5s cubic-bezier(.2,.9,.3,1); will-change: transform; cursor: pointer; }
.dk-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2,.8,.2,1); }
.dk-card.flipped .dk-in { transform: rotateY(180deg); }
.dk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; }
.dk-front { transform: rotateY(180deg); background: #241657; }
.dk-front .c3d { height: 100%; max-width: none; min-height: 0; }
.dk-back { display: grid; place-content: center; justify-items: center; gap: 10px; color: #fff; overflow: hidden;
  background: linear-gradient(155deg, #0c9ad8, #7420c8 52%, #d4199a); box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.28); }
.dk-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); animation: dkshine 3.2s ease-in-out infinite; }
@keyframes dkshine { 55%, 100% { transform: translateX(120%); } }
.dk-back small { font-weight: 700; opacity: .85; }
.dk-card[data-r="rare"] .dk-back { box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.28), 0 0 30px 6px rgba(77,141,255,.55); }
.dk-card[data-r="ultra_rare"] .dk-back { box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.28), 0 0 38px 10px rgba(196,92,255,.65); }
.dk-card[data-r="or"] .dk-back { box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.4), 0 0 48px 14px rgba(255,214,60,.75); }
/* Seule la carte du dessus brille / réagit */
.deck.in .dk-card { animation: dkin .7s cubic-bezier(.2,.9,.3,1) backwards; animation-delay: calc((var(--n) - var(--pos, 0)) * 70ms); }
@keyframes dkin { from { transform: translateY(140px) scale(.7) rotate(-5deg); opacity: 0; } }
.dk-burst { position: absolute; left: 50%; top: 45%; width: 140%; aspect-ratio: 1; margin: -70% 0 0 -70%; border-radius: 50%; pointer-events: none; opacity: 0; z-index: -1; }
.dk-card.hit.rv-rare .dk-burst { background: radial-gradient(circle, rgba(77,141,255,.8), transparent 65%); animation: burst .9s ease-out; }
.dk-card.hit.rv-ultra_rare .dk-burst { background: radial-gradient(circle, rgba(196,92,255,.9), transparent 65%); animation: burst 1.1s ease-out; }
.dk-card.hit.rv-or .dk-burst { background: radial-gradient(circle, rgba(255,230,120,1), rgba(255,160,40,.5) 40%, transparent 68%); animation: burst 1.4s ease-out; }
.dk-card .confetti { z-index: 8; }
/* Éventail final */
.deck.fan { height: 350px; margin-top: -30px; touch-action: auto; }
.deck.fan .dk-card { --lift: 0px; transform-origin: 50% 100%; cursor: default;
  transform: translate(calc((var(--fi) - var(--mid)) * var(--dw) * .125), calc(-100px - var(--lift))) rotate(calc((var(--fi) - var(--mid)) * 8deg)) scale(.54);
  transition: transform .9s cubic-bezier(.2,.9,.3,1) calc(var(--fi) * 80ms); }
.deck.fan .dk-front { pointer-events: none; }
@media (hover: hover) { .deck.fan .dk-card:hover { --lift: 26px; transition-delay: 0s; transition-duration: .25s; } }
@media (prefers-reduced-motion: reduce) { .dk-card, .dk-in, .deck.fan .dk-card { transition: none !important; } .deck.in .dk-card, .dk-back::after, .dk-burst { animation: none !important; } }
@media (max-height: 700px) { .deck { height: 432px; } .dk-card { height: 384px; } }

/* ---------- Page Packs : mise en page épurée, centrée (inspirée d'une page « ouvrir un paquet » claire et directe) ---------- */
.packs-page { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 0 8px; }
.packs-page h1 { margin: 8px 0 0; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); letter-spacing: -.02em; }
.packs-page .sub { margin: 0; color: var(--encre-douce); font-size: 1.05rem; }
.packs-page .linklike { font-size: .95rem; margin-top: 2px; }
.packs-page .lead { margin: 6px 0 0; font-size: 1.1rem; max-width: 30ch; }
.packs-page .count { margin: 0; }
.pk-wrap.hero { padding: 26px 0 18px; position: relative; }
.pk-wrap.hero::before { content: ""; position: absolute; inset: 8% 14% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(138,43,226,.30), rgba(212,25,154,.14) 55%, transparent 75%); filter: blur(18px); z-index: -1; }
.pk-wrap.hero .pk { transform: scale(1.12); }
.packs-page .pk-cta { width: min(100%, 340px); font-size: 1.1rem; min-height: 54px; }
.count-pill { display: grid; justify-items: center; gap: 2px; margin-top: 14px; padding: 12px 36px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px rgba(20,10,51,.04), 0 10px 26px rgba(20,10,51,.06); }
.count-pill b { font-size: 1.9rem; line-height: 1; color: var(--ultra); font-variant-numeric: tabular-nums; }
.count-pill .of { color: var(--encre-douce); font-size: 1.2rem; }
.count-pill small { color: var(--encre-douce); font-size: .9rem; }
.how { padding-left: 20px; display: grid; gap: 10px; margin: 8px 0 14px; }

/* ---------- Collection : tuiles verticales façon « cartes à collectionner » ---------- */
.col-search, .col-filters select { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #d3caf0; border-radius: 12px; background: #fff; color: var(--encre); font-size: 1rem; }
.col-search { margin: 8px 0 10px; }
.col-search:focus-visible, .col-filters select:focus-visible { border-color: var(--ultra); box-shadow: 0 0 0 4px rgba(138,43,226,.16); outline: none; }
.col-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 960px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  background: linear-gradient(160deg, var(--a), var(--b)); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 24px rgba(20,10,51,.22), 0 0 22px var(--glow); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; animation: rise .5s cubic-bezier(.2,.8,.2,1) backwards; }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 20px 0 8px; }
.pager .btn { min-height: 44px; padding: 0 16px; }
.pager .pg { color: var(--encre-douce); font-weight: 600; }

/* ---- Barre du bas à 5 onglets : Packs du jour au centre ---- */
nav.tabs button[data-t="packs"] .ico { width: 26px; height: 26px; }
@media (max-width: 959px) {
  nav.tabs button[data-t="packs"] { flex-grow: 1.3; }
  nav.tabs button span { font-size: .6rem; }
}
/* Pages « Plus » et « Mon profil » */
.more-list { display: flex; flex-direction: column; gap: 10px; }
.more-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; text-align: left; font: inherit; color: inherit; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); border-radius: 16px; cursor: pointer; }
.more-row .ico { width: 24px; height: 24px; flex: none; color: var(--ultra); }
.more-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.more-t b { font-size: 1rem; }
.more-t small { color: var(--encre-douce); font-size: .8rem; line-height: 1.3; }
.more-go { font-size: 1.6rem; color: var(--encre-douce); line-height: 1; }
@media (hover: hover) { .more-row:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(80,40,160,.14); } }
.more-page .legal { margin-top: 16px; text-align: center; font-size: .82rem; color: var(--encre-douce); }
.more-page .legal a { color: inherit; }
nav.tabs button[data-t="plus"] .ico { stroke-width: 4.2; }
.more-row .ico { stroke-width: 2; }

/* ---- Mon profil : bandeau, sous-onglets, pronos, succès ---- */
.pf-head { margin: 0 calc(var(--gut, 16px) * -1); padding: 18px var(--gut, 16px) 16px; text-align: center; color: #fff; background: var(--degrade); border-radius: 0 0 28px 28px; }
.pf-av { width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font: 800 1.9rem var(--sans); background: rgba(255,255,255,.18); border: 3px solid rgba(255,255,255,.7); }
.pf-head h1 { margin: 0; color: #fff; font-size: 1.6rem; }
.pf-head p { margin: 4px 0 0; color: rgba(255,255,255,.88); font-weight: 600; }
.pf-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 14px 0 6px; padding: 4px 0; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tabs button { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line, var(--filet)); background: var(--surface, var(--carte)); color: inherit; font: 700 .9rem var(--sans); cursor: pointer; white-space: nowrap; }
.pf-tabs button[aria-selected="true"] { background: var(--degrade); color: #fff; border-color: transparent; }
.pf-body { padding-top: 6px; }
.pf-empty { text-align: center; padding: 28px 12px; }
.pf-empty-ico { width: 72px; height: 72px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: rgba(138,43,226,.12); color: var(--ultra); }
.pf-empty-ico .ico { width: 34px; height: 34px; }
.pf-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pf-big > div { text-align: center; padding: 16px 8px; border-radius: 16px; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); }
.pf-big b { display: block; font-size: 2rem; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-big small { color: var(--encre-douce); }
.pf-line { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; font: inherit; color: inherit; text-align: left; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); border-radius: 12px; cursor: pointer; }
.pr-list { display: flex; flex-direction: column; gap: 8px; }
.pr-row { padding: 12px 14px; border-radius: 14px; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); border-left: 6px solid var(--c, var(--basique)); }
.pr-row[data-r="rare"] { --c: var(--rare); } .pr-row[data-r="ultra_rare"] { --c: var(--ultra); } .pr-row[data-r="or"] { --c: var(--or); }
.pr-top { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 700; color: var(--encre-douce); }
.pr-row h3 { margin: 4px 0 2px; font-size: 1rem; }
.pr-row p { margin: 0; font-size: .88rem; color: var(--encre-douce); }
.pr-row[data-l="gagnee"] .pr-st { color: var(--gagne, #1c9c5a); } .pr-row[data-l="perdue"] .pr-st { color: var(--perdu, #d33); }
.ach { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .ach { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .ach { grid-template-columns: repeat(4, 1fr); } }
.ach-i { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 14px 8px; border-radius: 16px; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); opacity: .62; }
.ach-i.done { opacity: 1; border-color: rgba(138,43,226,.45); }
.ach-c { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(120,120,150,.22); color: var(--encre-douce); margin-bottom: 4px; }
.ach-i.done .ach-c { background: var(--degrade); color: #fff; box-shadow: 0 6px 16px rgba(138,43,226,.35); }
.ach-c .ico { width: 26px; height: 26px; }
.ach-i small { color: var(--encre-douce); font-size: .75rem; line-height: 1.25; }
.ach-p { font-weight: 700; }

/* ---- Collection : petites cartes = la grande carte en réduction (mêmes proportions 5/7,42, mêmes zones), sans le détail du texte ---- */
.tile.card.glass { container-type: inline-size; display: flex; flex-direction: column; gap: 0; padding: 3.1%; width: 100%; max-width: none; margin: 0; aspect-ratio: 5 / 7.42; min-height: 0; border-radius: 6.9% / 4.65%; text-align: left; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; transition: transform .2s var(--ease), box-shadow .2s; }
.tile .c3d-art { flex: 0 0 34%; height: auto; border-radius: 5cqw; }
.tile .c3d-art.ph span { font-size: 15cqw; }
.tile .credit { display: none; }
.tile .c3d-panel { flex: 1; min-height: 0; margin: 2.6cqw 12% 0 0; padding: 4.4cqw; gap: 1.6cqw; border-radius: 5cqw; align-content: start; grid-template-rows: none; overflow: hidden; }
.tile .meta { font-size: 4.6cqw; text-transform: none; letter-spacing: .01em; }
.tile h3 { margin: 0; font-size: 5.6cqw; line-height: 1.18; text-transform: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-pill { align-self: end; margin-top: auto; height: 8.5cqw; border-radius: 99px; border: .6cqw solid rgba(255,255,255,.45); }
.tile-state { position: absolute; top: 5.6cqw; right: 5.6cqw; z-index: 2; padding: .8cqw 2.8cqw; border-radius: 999px; background: rgba(255,255,255,.92); color: #1a1040; font-size: 4cqw; font-weight: 800; text-shadow: none; }
.tile[data-s="disponible"] .tile-state { color: #7420c8; }
.tile[data-s="gagnee"] .tile-state { background: #1fae6b; color: #fff; } .tile[data-s="perdue"] .tile-state { background: #d4294a; color: #fff; }
.tile.dim { filter: grayscale(.9) brightness(.85); }
@media (hover: hover) { .tile:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 16px 34px rgba(20,10,51,.35); } }
.tile:active { transform: scale(.98); }
/* La photo se fond dans la carte : voile aux couleurs de la rareté en bas, liseré clair autour. */
.c3d-art:not(.ph)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--g2, #2b3254) 62%, transparent), transparent 52%), linear-gradient(160deg, rgba(255,255,255,.16), transparent 40%); }
.c3d-art .credit { z-index: 1; }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 20px 0 8px; }
.pager .btn { min-height: 44px; padding: 0 16px; }
.pager .pg { color: var(--encre-douce); font-weight: 600; }

/* ---- Barre du bas à 5 onglets : Packs du jour au centre ---- */
nav.tabs button[data-t="packs"] .ico { width: 26px; height: 26px; }
@media (max-width: 959px) {
  nav.tabs button[data-t="packs"] { flex-grow: 1.3; }
  nav.tabs button span { font-size: .6rem; }
}
/* Pages « Plus » et « Mon profil » */
.more-list { display: flex; flex-direction: column; gap: 10px; }
.more-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; text-align: left; font: inherit; color: inherit; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); border-radius: 16px; cursor: pointer; }
.more-row .ico { width: 24px; height: 24px; flex: none; color: var(--ultra); }
.more-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.more-t b { font-size: 1rem; }
.more-t small { color: var(--encre-douce); font-size: .8rem; line-height: 1.3; }
.more-go { font-size: 1.6rem; color: var(--encre-douce); line-height: 1; }
@media (hover: hover) { .more-row:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(80,40,160,.14); } }
.more-page .legal { margin-top: 16px; text-align: center; font-size: .82rem; color: var(--encre-douce); }
.more-page .legal a { color: inherit; }
nav.tabs button[data-t="plus"] .ico { stroke-width: 4.2; }
.more-row .ico { stroke-width: 2; }

/* ---- Mon profil : bandeau, sous-onglets, pronos, succès ---- */
.pf-head { margin: 0 calc(var(--gut, 16px) * -1); padding: 18px var(--gut, 16px) 16px; text-align: center; color: #fff; background: var(--degrade); border-radius: 0 0 28px 28px; }
.pf-av { width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font: 800 1.9rem var(--sans); background: rgba(255,255,255,.18); border: 3px solid rgba(255,255,255,.7); }
.pf-head h1 { margin: 0; color: #fff; font-size: 1.6rem; }
.pf-head p { margin: 4px 0 0; color: rgba(255,255,255,.88); font-weight: 600; }
.pf-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 14px 0 6px; padding: 4px 0; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tabs button { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line, var(--filet)); background: var(--surface, var(--carte)); color: inherit; font: 700 .9rem var(--sans); cursor: pointer; white-space: nowrap; }
.pf-tabs button[aria-selected="true"] { background: var(--degrade); color: #fff; border-color: transparent; }
.pf-body { padding-top: 6px; }
.pf-empty { text-align: center; padding: 28px 12px; }
.pf-empty-ico { width: 72px; height: 72px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: rgba(138,43,226,.12); color: var(--ultra); }
.pf-empty-ico .ico { width: 34px; height: 34px; }
.pf-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pf-big > div { text-align: center; padding: 16px 8px; border-radius: 16px; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); }
.pf-big b { display: block; font-size: 2rem; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-big small { color: var(--encre-douce); }
.pf-line { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; font: inherit; color: inherit; text-align: left; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); border-radius: 12px; cursor: pointer; }
.pr-list { display: flex; flex-direction: column; gap: 8px; }
.pr-row { padding: 12px 14px; border-radius: 14px; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); border-left: 6px solid var(--c, var(--basique)); }
.pr-row[data-r="rare"] { --c: var(--rare); } .pr-row[data-r="ultra_rare"] { --c: var(--ultra); } .pr-row[data-r="or"] { --c: var(--or); }
.pr-top { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 700; color: var(--encre-douce); }
.pr-row h3 { margin: 4px 0 2px; font-size: 1rem; }
.pr-row p { margin: 0; font-size: .88rem; color: var(--encre-douce); }
.pr-row[data-l="gagnee"] .pr-st { color: var(--gagne, #1c9c5a); } .pr-row[data-l="perdue"] .pr-st { color: var(--perdu, #d33); }
.ach { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .ach { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .ach { grid-template-columns: repeat(4, 1fr); } }
.ach-i { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 14px 8px; border-radius: 16px; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); opacity: .62; }
.ach-i.done { opacity: 1; border-color: rgba(138,43,226,.45); }
.ach-c { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(120,120,150,.22); color: var(--encre-douce); margin-bottom: 4px; }
.ach-i.done .ach-c { background: var(--degrade); color: #fff; box-shadow: 0 6px 16px rgba(138,43,226,.35); }
.ach-c .ico { width: 26px; height: 26px; }
.ach-i small { color: var(--encre-douce); font-size: .75rem; line-height: 1.25; }
.ach-p { font-weight: 700; }

.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 20px 0 8px; }
.pager .btn { min-height: 44px; padding: 0 16px; }
.pager .pg { color: var(--encre-douce); font-weight: 600; }

/* ---- Carte en grand ---- */
dialog.zoom { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 0; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #3a1d82, #150a33 70%); }
dialog.zoom[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; animation: zmIn .28s var(--ease, ease-out); }
@keyframes zmIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
dialog.zoom::backdrop { background: #150a33; }
.zm-x { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; z-index: 3; }
.zm-stage { perspective: 1100px; touch-action: none; user-select: none; -webkit-user-select: none; }
.zm-tilt { transform-style: preserve-3d; transform: rotateX(var(--zrx, 0deg)) rotateY(var(--zry, 0deg)); transition: transform .45s cubic-bezier(.2,.9,.25,1.2); }
.zm-tilt.drag { transition: none; }
dialog.zoom .c3d, dialog.zoom .card.glass { --zw: min(84vw, 360px, 50vh); width: var(--zw); max-width: none; margin: 0; min-height: calc(var(--zw) * 1.484); }
dialog.zoom .c3d-art, dialog.zoom .c3d-art.ph { height: calc(var(--zw) * .476); }
dialog.zoom .credit { font-size: .66rem; }
.zm-hint { margin: 0; max-width: 340px; text-align: center; font-size: .8rem; color: rgba(255,255,255,.7); }
.zm-actions { display: flex; gap: 10px; width: min(84vw, 360px, 50vh); min-width: 280px; }
.zm-actions .btn { flex: 1; }
.zm-actions .btn.alt { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
@media (max-height: 640px) { .zm-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .zm-tilt { transition: none; } dialog.zoom[open] { animation: none; } .tile { transition: none; } }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 960px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tiles .empty { grid-column: 1 / -1; text-align: center; padding: 30px 0; }
.zm-actions .btn { white-space: nowrap; padding: 0 10px; font-size: .95rem; }

/* Photothèque */
.pf-none{width:36px;height:36px;border-radius:50%;background:#8883;flex:0 0 36px}
.pf-line{display:flex;justify-content:space-between;gap:10px;width:100%;min-height:48px;align-items:center;padding:8px 12px;border:2px solid var(--filet);border-radius:10px;background:var(--carte);color:inherit;font:inherit;margin:6px 0;text-align:left}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0}
.ph-card{border:2px solid var(--filet);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:4px;background:var(--carte)}
.ph-card.ok{border-color:#2fa86a}
.ph-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:#0003}
.ph-card small{font-size:.72rem;opacity:.8;overflow-wrap:anywhere}
.ph-card .row .btn{min-height:44px;flex:1;padding:0 6px}
.illus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.illus-grid figure{margin:0}.illus-grid img{width:100%;border-radius:8px;aspect-ratio:2/1;object-fit:cover}
.illus-grid figcaption{font-size:.7rem;opacity:.8}
.strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.strip-it{flex:0 0 120px;border:2px solid var(--filet);border-radius:10px;background:var(--carte);color:inherit;padding:4px;display:flex;flex-direction:column;gap:2px;min-height:44px}
.strip-it img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.strip-it small{font-size:.65rem}
#sheet .row[style*="flex-wrap"] .btn{flex:1 1 150px;min-height:48px}
/* Verso : la photo est inversée (effet miroir) en même temps que la carte se retourne ; le crédit reste lisible. */
.c3d-face.back .c3d-art img{transform:scaleX(-1)}

/* Équilibre des cartes par candidat */
.bal{display:grid;gap:6px;margin:10px 0}
.bal-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 2ch 8ch;gap:8px;align-items:center;font-size:.9rem}
.bal-bar{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--accent,#7a3cff) var(--w),rgba(128,128,128,.25) var(--w))}
.bal-row[data-s=low] .bal-s,.bal-row[data-s=high] .bal-s{font-weight:800;color:#c0392b}
.bal-s{text-align:right}

/* ---- Cartes grand format : TOUTES de la même taille (5/7,42), quel que soit le texte. Texte réduit et tronqué proprement ; les tailles suivent la largeur de la carte. ---- */
.card.glass:not(.tile) { container-type: inline-size; display: flex; flex-direction: column; gap: 0; padding: 3.1%; aspect-ratio: 5 / 7.42; min-height: 0; height: auto; border-radius: 6.9% / 4.65%; overflow: hidden; }
.card.glass:not(.tile) .c3d-art, .card.glass:not(.tile) .c3d-art.ph { flex: 0 0 34%; height: auto; border-radius: 5cqw; }
.card.glass:not(.tile) .c3d-art.ph span { font-size: 15cqw; }
.card.glass:not(.tile) .credit { font-size: 2.6cqw; padding: .6cqw 2cqw; }
.card.glass:not(.tile) .c3d-panel { flex: 1; min-height: 0; margin: 2.6cqw 12% 0 0; padding: 4cqw 4.4cqw 3.4cqw; gap: 1.6cqw; border-radius: 5cqw; grid-template-rows: none; align-content: start; overflow: hidden; }
.card.glass:not(.tile) .meta { font-size: 3.6cqw; }
.card.glass:not(.tile) h3 { margin: 0; font-size: 4.9cqw; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card.glass:not(.tile) .say { font-size: 4.2cqw; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.card.glass:not(.tile) .foot { font-size: 3.4cqw; margin-top: auto; }
.card.glass:not(.tile) .badge { font-size: 3.2cqw; padding: .4cqw 2cqw; }
.card.glass:not(.tile) .c3d-actions { gap: 2cqw; margin-top: 1cqw; }
.card.glass:not(.tile) .c3d-btn { min-height: 9.5cqw; font-size: 3.9cqw; }
.card.glass:not(.tile) .stamp { font-size: 5cqw; }
dialog.zoom .card.glass:not(.tile) .c3d-art, dialog.zoom .card.glass:not(.tile) .c3d-art.ph { height: auto; }

/* Packs du jour : 3 points qui se remplissent */
.day-dots { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.day-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ultra, #8a2be2); background: transparent; transition: background .3s, transform .3s; }
.day-dots i.full { background: linear-gradient(135deg, #17c3ff, #8a2be2 55%, #ff2fb9); border-color: transparent; transform: scale(1.1); }
.count-pill b { font-size: 1.15rem; color: var(--ultra); }

/* Cloche de notifications */
.top-r { display: flex; align-items: center; gap: 10px; }
.bell { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; padding: 0; }
.bell .ico { width: 22px; height: 22px; }
.bell-badge { position: absolute; top: 0; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff2fb9; color: #fff; font: 800 .72rem/20px var(--sans, system-ui); text-align: center; box-shadow: 0 0 0 2px #14093a; }
.bell-badge[hidden] { display: none; }
.notifs { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.notif { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface, var(--carte)); border: 1px solid var(--line, var(--filet)); }
.notif.new { border-color: #8a2be2; box-shadow: 0 0 0 2px rgba(138,43,226,.18); }
.notif-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(138,43,226,.14); color: #8a2be2; }
.notif[data-k=won] .notif-ic { background: rgba(31,174,107,.16); color: #1fae6b; } .notif[data-k=lost] .notif-ic { background: rgba(212,41,74,.14); color: #d4294a; }
.notif-t { display: flex; flex-direction: column; min-width: 0; } .notif-t small { color: var(--encre-douce); } .notif-d { font-size: .72rem; opacity: .8; }

/* Barème */
.bareme { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 4px 0; }
.bareme th { text-align: left; font-size: .8rem; color: var(--encre-douce); font-weight: 700; padding: 4px 8px; }
.bareme td { padding: 8px; border-top: 1px solid var(--line, var(--filet)); }
.bareme td:last-child, .bareme th:last-child { text-align: right; font-weight: 800; }
.bareme tr[data-r=rare] td:first-child { color: var(--rare, #2e7bff); } .bareme tr[data-r=ultra_rare] td:first-child { color: var(--ultra, #8a2be2); } .bareme tr[data-r=or] td:first-child { color: #b07a00; }

/* Écran Packs du jour : tout tient sans défiler sur téléphone (pack dimensionné selon la hauteur de l'écran) */
.packs-page { padding: 6px 0 4px; gap: 4px; }
.packs-page h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin: 2px 0 0; }
.packs-page .sub { font-size: 1rem; }
.pk-wrap.hero { padding: 8px 0 6px; }
.pk-wrap.hero .pk { --ph: clamp(168px, 24dvh, 260px); --pw: calc(var(--ph) * .652); transform: none; }
.pk-wrap.hero .pk-logo { font-size: calc(var(--pw) * .21); }
.packs-page .pk-cta { min-height: 50px; }
.count-pill { margin-top: 8px; padding: 8px 20px; }
.count-pill b { font-size: 1rem; text-align: center; }
/* Les trois points : rond plein sans artefact (couleur unie + liseré) */
.day-dots i { box-sizing: border-box; background-clip: border-box; }
.day-dots i.full { background: #8a2be2; border-color: #8a2be2; transform: none; box-shadow: 0 0 0 3px rgba(138,43,226,.22); }
/* Deck de pronos (Mes pronos) */
.pdeck h2 { margin: 16px 0 8px; font-size: 1.05rem; }
.deck-zone { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 18px; background: var(--surface, var(--carte)); border: 2px dashed var(--filet); transition: border-color .15s, background .15s, box-shadow .15s; }
.deck-zone.hot { border-color: #7a2de0; background: #7a2de01a; box-shadow: 0 0 0 4px #7a2de022; }
.deck-slot { position: relative; aspect-ratio: 5 / 7.42; border-radius: 10px; border: 2px solid var(--filet); background: #8881; display: grid; place-items: center; color: var(--filet); font: 800 1.4rem var(--sans); padding: 0; overflow: hidden; }
.deck-slot.on { border-color: #7a2de0; cursor: pointer; background: var(--carte); }
.deck-slot[data-r="rare"] { border-color: #2e8ae6; } .deck-slot[data-r="ultra_rare"] { border-color: #9b3ee0; } .deck-slot[data-r="or"] { border-color: #e6b422; }
.deck-slot > .art, .deck-slot > .c-art, .deck-slot > div:first-child { width: 100%; height: 100%; }
.deck-slot img { width: 100%; height: 100%; object-fit: cover; }
.deck-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; text-align: center; font: 800 .6rem var(--sans); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #1a0d3acc; }
.hand-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 14px; margin: 0 -2px; scrollbar-width: none; }
.hand-strip::-webkit-scrollbar { display: none; }
.hand-strip .tile { flex: 0 0 132px; touch-action: pan-x; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.tile.ghost { position: fixed; z-index: 9999; transform: translate(-50%, -60%) rotate(4deg) scale(1.06); pointer-events: none; opacity: .92; box-shadow: 0 14px 30px #0006; }
body.dragging { user-select: none; -webkit-user-select: none; }

/* Design des cartes : holographie par rareté, numéro de série, courbes illustratives */
.c3d-art { position: relative; overflow: hidden; }

.c3d-art .holo { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; mix-blend-mode: soft-light; }
.card[data-r="rare"] .c3d-art .holo, .c3d-face[data-r="rare"] .c3d-art .holo { opacity: .9; background: linear-gradient(115deg, transparent 38%, #ffffff55 50%, transparent 62%); }
.card[data-r="ultra_rare"] .c3d-art .holo, .c3d-face[data-r="ultra_rare"] .c3d-art .holo { opacity: 1; mix-blend-mode: overlay; background: linear-gradient(115deg, transparent 30%, #e9d5ffcc 46%, #c4b5fd88 54%, transparent 70%); background-size: 260% 100%; animation: holo-sweep 5.5s ease-in-out infinite; }
.card[data-r="or"] .c3d-art .holo, .c3d-face[data-r="or"] .c3d-art .holo { opacity: .75; mix-blend-mode: color-dodge; background: linear-gradient(115deg, #ff6ec7, #ffd36e, #7dffb2, #6ec9ff, #c58bff, #ff6ec7); background-size: 320% 320%; animation: holo-rainbow 7s linear infinite; }
.card[data-r="or"] .c3d-art, .c3d-face[data-r="or"] .c3d-art { box-shadow: inset 0 0 0 1.5px #ffe08a99; }
@keyframes holo-sweep { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }
@keyframes holo-rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 320% 50%; } }
@media (prefers-reduced-motion: reduce) { .c3d-art .holo { animation: none !important; } }
.serial { font: 700 .66rem var(--sans); letter-spacing: .06em; opacity: .85; font-variant-numeric: tabular-nums; }
.tile-serial { position: absolute; top: 4%; left: 6%; z-index: 3; font: 800 3.4cqw var(--sans); letter-spacing: .05em; padding: .6cqw 2cqw; border-radius: 99px; background: #0009; color: #fff; font-variant-numeric: tabular-nums; }
.c3d-art.curve { background: linear-gradient(165deg, #0f1726, #1a2438 70%, #202c42); color: #ece6d6; }
.curve-svg { position: absolute; inset: 16% 0 22%; width: 100%; height: 62%; }
.cv-grid { stroke: #ece6d62e; stroke-width: .4; } .cv-thr { stroke: #ece6d6; stroke-width: .5; stroke-dasharray: 1.6 1.6; opacity: .75; }
.cv-line { fill: none; stroke: #d4a24a; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cv-area { fill: #ece6d614; stroke: none; } .cv-dot { fill: #d4a24a; }
.cv-fig { position: absolute; bottom: 4%; right: 7%; z-index: 1; font: 800 6.5cqw var(--sans); color: #fff; text-shadow: 0 1px 4px #0008; }
.cv-note { position: absolute; left: 7%; bottom: 5%; z-index: 1; font: 600 3cqw var(--sans); color: #ffffffb0; letter-spacing: .04em; }
.tile .cv-fig { font-size: 11cqw; } .tile .cv-note { font-size: 4.6cqw; }

/* Badges à récupérer */
.ach-i.claim { cursor: pointer; font: inherit; color: inherit; border-color: #e6b422; box-shadow: 0 0 0 3px #e6b42233; animation: ach-pulse 2.2s ease-in-out infinite; }
.ach-get { margin-top: 4px; padding: 5px 10px; border-radius: 99px; background: var(--degrade); color: #fff; font: 800 .74rem var(--sans); }
.ach-ok { color: #1f9d5c; font-weight: 700; } .ach-p { font-weight: 700; }
.tab-dot { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px; border-radius: 99px; background: #ff2d87; color: #fff; font: 800 .72rem var(--sans); }
.notif[type="button"] { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
@keyframes ach-pulse { 50% { box-shadow: 0 0 0 6px #e6b42222; } }
@media (prefers-reduced-motion: reduce) { .ach-i.claim { animation: none; } }

/* Visuel principal dessiné d'après la question : graphisme de presse (encre, filets fins, un accent) */
.concept { background: linear-gradient(165deg, #0f1726, #1a2438 70%, #202c42); color: #ece6d6; --ac: #d4a24a; }
.concept[data-th="assemblee"] { --ac: #c9573f; } .concept[data-th="election"] { --ac: #d4a24a; } .concept[data-th="tv"] { --ac: #e0534a; } .concept[data-th="radio"] { --ac: #6fa8d6; }
.concept[data-th="foule"] { --ac: #c9573f; } .concept[data-th="meeting"] { --ac: #d4a24a; } .concept[data-th="international"] { --ac: #6fa8d6; } .concept[data-th="economie"] { --ac: #7fb08f; }
.concept[data-th="ecologie"] { --ac: #8dba6a; } .concept[data-th="justice"] { --ac: #d4a24a; } .concept[data-th="demission"] { --ac: #c9573f; } .concept[data-th="candidature"] { --ac: #d4a24a; }
.concept[data-th="alliance"] { --ac: #b46a9c; } .concept[data-th="generique"] { --ac: #6fa8d6; }
.cp-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-l { fill: none; stroke: #ece6d6; stroke-width: .5; opacity: .9; } .cp-f { fill: none; stroke: #ece6d6; stroke-width: .3; opacity: .28; }
.cp-b { fill: none; stroke: #ece6d6; stroke-width: .6; opacity: .75; } .cp-dot-l { stroke: #ece6d6; stroke-width: .5; opacity: .5; }
.cp-dot { fill: #ece6d6; } .cp-fill { fill: #ece6d6; } .cp-dash { stroke: #ece6d6; stroke-width: .35; stroke-dasharray: 1.2 1.2; opacity: .7; fill: none; }
.cp-ac { fill: var(--ac); } .cp-ac-fill { fill: var(--ac); stroke: none; } .cp-ac-b { fill: none; stroke: var(--ac); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.cp-ac-o { fill: none; stroke: var(--ac); stroke-width: .6; } .cp-area { fill: #ece6d614; stroke: none; } .cp-scan { stroke: #ece6d612; stroke-width: .3; }
.cp-t { font: 600 2.6px var(--sans); fill: #ece6d6; letter-spacing: .15px; opacity: .85; } .cp-lab { font: 700 2.5px var(--sans); fill: #ece6d6; letter-spacing: .5px; opacity: .55; }
.c3d-panel { position: relative; }
.portrait { position: absolute; top: 6cqw; right: 6cqw; width: 17cqw; height: 17cqw; border-radius: 50%; object-fit: cover; border: .8cqw solid #fff; box-shadow: 0 2px 8px #0005; background: #fff3; z-index: 2; }
.tile .portrait { width: 22cqw; height: 22cqw; top: 4cqw; right: 4cqw; }
.c3d-panel:has(.portrait) h3 { padding-right: 19cqw; }
.credit-f { font: 600 .62rem var(--sans); opacity: .85; text-decoration: underline; overflow-wrap: anywhere; }

/* Sachet en relief : bombé, haut et bas pliés et crantés (forme découpée en JS), ombre portée au lieu de box-shadow */
.pk { filter: drop-shadow(0 16px 18px rgba(60,10,130,.42)); }
.pk-body, .pk-top { box-shadow: none !important; -webkit-mask: none !important; mask: none !important; }
.pk-body { border-radius: 0; }
.pk-top { border-radius: 0; height: 17%; }
.pk-body::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 62% 55% at 40% 42%, rgba(255,255,255,.34), transparent 70%),
    linear-gradient(90deg, rgba(10,0,50,.42), transparent 20%, rgba(255,255,255,.14) 38%, transparent 62%, rgba(10,0,50,.5)); }
.pk-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10%; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 1px, rgba(20,0,70,.28) 1px 3px), linear-gradient(0deg, rgba(20,0,70,.3), transparent);
  border-top: 1px solid rgba(20,0,70,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.pk-body > * { position: relative; z-index: 2; }
.pk-body .pk-sheen { position: absolute; z-index: 1; }
.pk-top::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 1px, rgba(20,0,70,.28) 1px 3px), linear-gradient(180deg, rgba(20,0,70,.28), transparent 80%), linear-gradient(90deg, rgba(10,0,50,.4), transparent 20%, transparent 80%, rgba(10,0,50,.45)); }
.pk-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(20,0,70,.5); box-shadow: 0 1px 0 rgba(255,255,255,.4); }
.pk.shake { filter: drop-shadow(0 0 22px rgba(255,233,154,.9)) brightness(1.15); }
.pk.shake .pk-body { animation: none; }

/* Page Packs du jour : bloc centré en hauteur, pack plus grand, boutons plus discrets */
.packs-page { min-height: calc(100dvh - 235px); align-content: center; gap: 8px; }
.pk-wrap.hero { padding: 14px 0 12px; }
.pk-wrap.hero .pk { --ph: clamp(210px, 31dvh, 320px); --pw: calc(var(--ph) * .66); }
.packs-page .pk-cta { width: 210px; min-height: 44px; font-size: .98rem; margin-top: 6px; }
.count-pill { margin-top: 10px; padding: 6px 14px; }
.count-pill b { font-size: .85rem; font-weight: 700; }

/* Carte agrandie : textes plus lisibles, portrait plus gros placé à côté du titre (rien n'est masqué) */
dialog.zoom .c3d, dialog.zoom .card.glass { --zw: min(94vw, 420px, 52vh); }
dialog.zoom .zm-x { background: transparent; border: 0; box-shadow: none; outline-offset: 2px; font-size: 2.2rem; }
.card.glass:not(.tile) .meta { font-size: 4.2cqw; }
.card.glass:not(.tile) h3 { font-size: 5.8cqw; }
.card.glass:not(.tile) .say { font-size: 4.9cqw; -webkit-line-clamp: 6; }
.card.glass:not(.tile) .foot { font-size: 3.9cqw; }
.card.glass:not(.tile) .credit { font-size: 3.2cqw; }
.card.glass:not(.tile) .credit-f { font-size: 3.5cqw; }
.card.glass:not(.tile) .badge { font-size: 3.7cqw; }
.card.glass:not(.tile) .c3d-btn { min-height: 11cqw; font-size: 4.5cqw; }
.card.glass:not(.tile) .stamp { font-size: 6cqw; }
.cp-t { font-size: 3.4px; } .cp-lab { font-size: 3.2px; }
.card.glass:not(.tile) .c3d-panel:has(.portrait) { grid-template-columns: minmax(0, 1fr) 27cqw; column-gap: 3cqw; }
.card.glass:not(.tile) .c3d-panel:has(.portrait) > * { grid-column: 1 / -1; }
.card.glass:not(.tile) .c3d-panel:has(.portrait) > .portrait { position: static; grid-column: 2; grid-row: 1 / span 2; width: 27cqw; height: 27cqw; align-self: start; justify-self: end; }
.card.glass:not(.tile) .c3d-panel:has(.portrait) > .meta { grid-column: 1; grid-row: 1; }
.card.glass:not(.tile) .c3d-panel:has(.portrait) > h3 { grid-column: 1; grid-row: 2; padding-right: 0; }
.tile .portrait { width: 28cqw; height: 28cqw; top: 3cqw; right: 3cqw; }
.tile .c3d-panel:has(.portrait) h3 { padding-right: 29cqw; }
.card.glass:not(.tile) h3 { -webkit-line-clamp: 4; }

.concept[data-th="social"] { --ac: #d4a24a; }

/* Sachet flow-pack : bandes de soudure nettes, corps lumineux */
.pk-body::before { background: radial-gradient(ellipse 55% 60% at 42% 45%, rgba(255,255,255,.42), transparent 72%), linear-gradient(90deg, rgba(10,0,50,.34), transparent 16%, rgba(255,255,255,.12) 40%, transparent 64%, rgba(10,0,50,.42)); }
.pk-body::after { height: 9%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, rgba(20,0,70,.12) 1px 3px), linear-gradient(0deg, rgba(20,0,70,.22), rgba(255,255,255,.06)); border-top: 1px solid rgba(20,0,70,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.pk-top::before { bottom: auto; height: 53%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, rgba(20,0,70,.12) 1px 3px), linear-gradient(180deg, rgba(255,255,255,.06), rgba(20,0,70,.22)); border-bottom: 1px solid rgba(20,0,70,.5); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); }
.pk-top::after { display: none; }

/* Texte adaptatif : --fit (0.55 à 1) calculé en JS ; plus de coupure par nombre de lignes */
.card.glass:not(.tile) .say { font-size: calc(4.9cqw * var(--fit, 1)); -webkit-line-clamp: unset; display: block; overflow: visible; }
.card.glass:not(.tile) h3 { font-size: calc(5.8cqw * var(--fit, 1)); -webkit-line-clamp: unset; display: block; overflow: visible; }
.credit-f, .credit-f:visited { color: inherit; }

/* Sachet : forme « flow-pack » droite, penché en mouvement ; plus de trait d'ombre ; page mieux espacée */
.pk { filter: none; }
.pk-wrap.hero::before { content: ""; position: absolute; inset: auto 24% 6px 24%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60,10,130,.32), transparent); filter: none; z-index: 0; }
.pk-wrap.hero .pk { position: relative; z-index: 1; --ph: clamp(190px, 28dvh, 300px); --pw: calc(var(--ph) * .6); }
.pk.idle { animation: pkfloat 3.4s ease-in-out infinite; }
@keyframes pkfloat { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.pk-wrap.rest { opacity: 1; filter: none; }
.pk-wrap.rest .pk { opacity: .8; }
.pk-wrap.rest .pk, .pk-wrap.rest .pk * { animation: revert; }
.pk-wrap.rest .pk.idle { animation: pkfloat 3.4s ease-in-out infinite; }
.pk-wrap.rest .pk-sheen { animation: none !important; }
.pk-body::after { height: 8%; } .pk-top::before { height: 47%; }
.packs-page { padding-top: 30px; gap: 12px; min-height: calc(100dvh - 215px); }
.packs-page .lead { margin: 8px 0 4px; }
.pk-wrap.hero { padding: 22px 0 22px; }

/* Carte en jeu : exactement la même carte (même design) en miniature */
.deck-slot.on { background: none; border: 0; padding: 0; overflow: visible; display: block; }
.deck-slot.on .tile { width: 100%; height: 100%; margin: 0; cursor: pointer; touch-action: manipulation; }
.deck-slot.on .tile * { pointer-events: none; }
.deck-slot.on .deck-tag { position: absolute; left: 6%; right: 6%; bottom: 4%; border-radius: 6px; z-index: 5; pointer-events: none; }
.deck-slot.on .tile-state { display: none; }

/* Onglets du profil : grille propre, rien ne déborde */
.pf-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 8px; padding: 4px 0; max-width: 100%; }
.pf-tabs button { width: 100%; min-width: 0; padding: 0 8px; font-size: .88rem; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
.pf-tabs button:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px); }
.pf-tabs button:focus-visible { outline: 2px solid #7a2de0; outline-offset: 2px; }

/* Amis et fiche de partage */
.fr-invite .row .btn { flex: 1 1 140px; }
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fr-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fr-btns { display: flex; gap: 8px; } .fr-btns .btn, .fr-list .btn { min-height: 38px; padding: 0 14px; font-size: .9rem; }
.fr-tag { color: var(--encre-douce); font-size: .75rem; margin-left: 8px; }
.fr-x { border: 0; background: transparent; color: var(--encre-douce); font-size: 1.5rem; line-height: 1; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.share-cv { width: 100%; height: auto; border-radius: 18px; display: block; margin: 8px 0 4px; box-shadow: 0 10px 28px rgba(60,10,130,.3); }
.fr-invite .row .btn { flex: 1 1 100%; white-space: nowrap; }
.ranks .rank:has(.fr-x), .ranks .rank:has(.fr-tag) { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto 2.4rem; align-items: center; gap: 6px; }
.ranks .rank .fr-tag { margin: 0; text-align: right; }
h3 { text-transform: none; }
.fr-invite .row { flex-wrap: wrap; }

/* ===== Ouverture fluide : préparation douce, déchirure qui pèle, glissement vers le bas ===== */
.pk.shake { animation: pkprep 1s cubic-bezier(.45, 0, .25, 1) forwards; filter: none; }
@keyframes pkprep {
  0%   { transform: scale(1) rotate(0); filter: drop-shadow(0 0 0 rgba(255,233,154,0)); }
  35%  { transform: scale(1.06) rotate(-2.5deg); }
  70%  { transform: scale(1.11) rotate(2deg); filter: drop-shadow(0 0 16px rgba(255,233,154,.55)); }
  100% { transform: scale(1.16) rotate(0); filter: drop-shadow(0 0 30px rgba(255,233,154,.95)); }
}
.pk.tear { transform: scale(1.16); filter: drop-shadow(0 0 30px rgba(255,233,154,.95)); }
.pk.tear .pk-top { animation: pktear .85s cubic-bezier(.3, .7, .3, 1) forwards; transform-origin: 0 100%; }
@keyframes pktear { 0% { transform: none; opacity: 1; } 28% { transform: translate(-3px, -8px) rotate(-8deg); opacity: 1; } 100% { transform: translate(80px, -170px) rotate(40deg); opacity: 0; } }
.pk.tear .pk-light { animation: pkbeam .9s ease-out forwards; }
@keyframes pkbeam { 0% { opacity: 0; transform: scaleY(.2); } 35% { opacity: 1; } 100% { opacity: .85; transform: scaleY(1.6) translateY(-36px); } }
.pk.gone { animation: pkgone .6s cubic-bezier(.5, 0, .75, .4) forwards; }
@keyframes pkgone { from { transform: scale(1.16); opacity: 1; } to { transform: translateY(130px) scale(.9); opacity: 0; } }

/* Forme « flow-pack » de la référence : bandes de soudure un peu plus larges que le corps, petits crans réguliers */
.pk-body::before { background: radial-gradient(ellipse 60% 52% at 42% 44%, rgba(255,255,255,.34), transparent 72%), linear-gradient(90deg, rgba(10,0,50,.34), transparent 16%, transparent 84%, rgba(10,0,50,.42)); }
/* Bandes lisses (pas de peigne) : léger pli vertical très discret + liseré de soudure */
.pk-body::after { background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.14) 11px 12px), linear-gradient(0deg, rgba(10,0,50,.28), rgba(255,255,255,.10) 70%); border-top: 1px solid rgba(10,0,50,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 -6px 10px rgba(10,0,50,.18); }
.pk-top::before { background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.14) 11px 12px), linear-gradient(180deg, rgba(10,0,50,.28), rgba(255,255,255,.10) 70%); border-bottom: 1px solid rgba(10,0,50,.35); box-shadow: inset 0 -1px 0 rgba(255,255,255,.35); }
.pk-wrap.hero .pk { --pw: calc(var(--ph) * .64); }

/* Boutons dégradés : le dégradé couvre aussi la bordure (sinon bleu/rouge qui dépasse aux coins arrondis) */
.btn, .pf-tabs button, .chip, .c3d-btn.main, .day-dots i.full, .tab-dot { background-origin: border-box; background-clip: border-box; }
.pf-tabs button[aria-selected="true"], .btn:not(.alt):not(.danger) { border-color: transparent; box-shadow: none; background-repeat: no-repeat; }
.btn:not(.alt):not(.danger) { box-shadow: 0 4px 14px rgba(138,43,226,.30); }
.pf-tabs button { -webkit-appearance: none; appearance: none; }

/* ===== Accueil animé (visiteurs non connectés) ===== */
.landing { position: relative; background: radial-gradient(120% 60% at 20% 0%, #3a1c8f 0%, #170c3d 55%, #0e0728 100%); color: #fff; min-height: 100dvh; overflow-x: clip; padding-bottom: 90px; font-family: var(--sans); }
.landing .logo, .landing .auth-logo { color: #fff; }
.ln-hero { padding: 18px 20px 28px; text-align: center; max-width: 720px; margin: 0 auto; }
.ln-top { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.ln-link { background: none; border: 0; color: #cdbdff; font: 700 .95rem var(--sans); text-decoration: underline; text-underline-offset: 3px; padding: 10px 4px; cursor: pointer; }
.ln-marq { position: relative; height: 250px; margin: 14px -20px 44px; overflow: hidden; transform: rotate(-7deg) scale(1.1); display: grid; align-content: center; gap: 10px; pointer-events: none; contain: layout paint; }
.ln-marq::before, .ln-marq::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 2; pointer-events: none; }
.ln-marq::before { left: 0; background: linear-gradient(90deg, #170c3d, transparent); } .ln-marq::after { right: 0; background: linear-gradient(270deg, #170c3d, transparent); }
.ln-mrow { display: flex; gap: 12px; width: max-content; animation: lnslide 38s linear infinite; will-change: transform; backface-visibility: hidden; }
.ln-hero.off .ln-mrow { animation-play-state: paused; }
.ln-marq .card.glass, .ln-marq .card.glass *, .ln-pop .card.glass, .ln-pop .card.glass * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.ln-marq .card.glass { box-shadow: none !important; transition: none !important; }
.ln-mrow.r1 { animation-direction: reverse; animation-duration: 46s; } .ln-mrow.r2 { animation-duration: 54s; }
@keyframes lnslide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.ln-tile { width: 104px; flex: none; contain: layout paint; }
.ln-tile .tile { width: 100%; pointer-events: none; }
.ln-hero h1 { font-size: clamp(2rem, 8.4vw, 3.1rem); line-height: 1.04; margin: 6px 0 10px; letter-spacing: -.02em; color: #fff; }
.ln-sub { color: #d9ccff; font-size: 1.05rem; max-width: 34ch; margin: 0 auto 18px; }
.ln-cta { display: grid; gap: 10px; max-width: 320px; margin: 0 auto; }
.ln-cta .btn.alt, .landing .btn.alt { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.ln-scroll { margin-top: 18px; color: #bfa9ff; font-weight: 700; font-size: .9rem; animation: lnbob 1.8s ease-in-out infinite; }
@keyframes lnbob { 50% { transform: translateY(6px); } }
.ln-step { display: grid; gap: 18px; max-width: 720px; margin: 0 auto; padding: 38px 22px; border-top: 1px solid rgba(255,255,255,.1); opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.ln-step.in { opacity: 1; transform: none; }
.ln-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #17c3ff, #8a2be2 55%, #ff2fb9); font-weight: 800; }
.ln-txt h2 { margin: 10px 0 6px; font-size: 1.7rem; letter-spacing: -.01em; color: #fff; }
.ln-txt p { margin: 0; color: #d9ccff; font-size: 1.05rem; max-width: 40ch; }
.ln-v { position: relative; min-height: 270px; display: grid; place-items: center; }
@media (min-width: 760px) { .ln-step { grid-template-columns: 1fr 1fr; align-items: center; } .ln-step.alt .ln-txt { order: 2; } }
.ln-end { text-align: center; padding: 54px 22px 36px; max-width: 520px; margin: 0 auto; display: grid; gap: 12px; justify-items: center; }
.ln-end h2 { margin: 0; font-size: 2rem; color: #fff; } .ln-end p { color: #d9ccff; margin: 0; }
.ln-legal { font-size: .85rem; } .ln-legal a { color: #bfa9ff; }
.ln-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, #0e0728 60%, transparent); transform: translateY(110%); transition: transform .35s ease; display: grid; justify-items: center; }
.ln-bar.show { transform: none; } .ln-bar .btn { width: min(100%, 340px); }
/* 1 · packs : 4 cartes (une par rareté) sortent du pack et se rangent au-dessus, sans toucher au texte */
.ln-v1 { min-height: 340px; display: block; width: 100%; max-width: 340px; margin: 0 auto; }
.ln-packbox { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: end center; z-index: 2; }
.ln-v1 .pk { --ph: 196px; --pw: calc(var(--ph) * .64); }
.ln-pop { position: absolute; width: 80px; left: 50%; top: 4px; margin-left: -40px; opacity: 0; z-index: 1; will-change: transform, opacity; }
.ln-pop .ln-tile { width: 100%; }
.ln-step.in .ln-pop { animation: lnpop 5.2s cubic-bezier(.2,.8,.2,1) infinite; }
.ln-pop.p0 { --dx: -128px; --dy: 22px; --r: -13deg; } .ln-pop.p1 { --dx: -43px; --dy: 4px; --r: -4deg; animation-delay: .2s !important; } .ln-pop.p2 { --dx: 43px; --dy: 4px; --r: 4deg; animation-delay: .4s !important; } .ln-pop.p3 { --dx: 128px; --dy: 22px; --r: 13deg; animation-delay: .6s !important; }
.ln-pop.p0 { animation-delay: 0s !important; }
@keyframes lnpop { 0%, 14% { opacity: 0; transform: translate3d(0, 230px, 0) scale(.55); } 30% { opacity: 1; } 42%, 84% { opacity: 1; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--r)) scale(1); } 96%, 100% { opacity: 0; transform: translate3d(var(--dx), calc(var(--dy) - 14px), 0) rotate(var(--r)) scale(1); } }
/* 2 · retournement */
.ln-flipwrap { width: 210px; } .ln-flipwrap .c3d { max-width: none; width: 100%; }
.ln-cap { margin: 10px 0 0; text-align: center; color: #e9defe; font-weight: 700; min-height: 1.5em; }
.ln-v2 { align-content: center; gap: 0; }
/* 3 · deck */
.ln-v3 { gap: 14px; } .ln-v3 .deck-zone { width: 100%; max-width: 340px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
.ln-v3 .deck-slot { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.25); }
.ln-v3 .deck-slot.on { border: 0; background: none; }
.ln-v3 .ln-tile, .ln-v3 .ln-tile .tile { width: 100%; height: 100%; }
.ln-live .ln-tile { animation: none; opacity: 0; } .ln-live .deck-tag { opacity: 0; }
.ln-step.in .ln-live .ln-tile { animation: lndrop 4.4s cubic-bezier(.2,.8,.2,1) infinite; } .ln-step.in .ln-live .deck-tag { animation: lntag 4.4s ease infinite; }
@keyframes lndrop { 0% { opacity: 0; transform: translateY(170px) scale(2.2) rotate(6deg); } 15% { opacity: 1; } 40%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes lntag { 0%, 42% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }
.ln-chip { padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.14); font-weight: 700; font-size: .92rem; }
/* 4 · points */
.ln-v4 { gap: 14px; align-content: center; }
.ln-score { display: grid; justify-items: center; line-height: 1; } .ln-num { font: 900 4.6rem var(--sans); font-variant-numeric: tabular-nums; background: linear-gradient(135deg, #ffe99a, #ff7ad9); -webkit-background-clip: text; background-clip: text; color: transparent; } .ln-score span { color: #d9ccff; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; }
.ln-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .ln-mult { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 800; font-size: .85rem; }
.ln-step.in .ln-mult { animation: lnmult 4.5s ease-in-out infinite; } .ln-mult.m1 { animation-delay: 1.4s !important; } .ln-mult.m2 { animation-delay: 2.8s !important; }
@keyframes lnmult { 0%, 30% { background: rgba(255,255,255,.12); color: #fff; transform: none; } 40%, 60% { background: #ffe99a; color: #1a1040; transform: scale(1.1); } 70%, 100% { background: rgba(255,255,255,.12); color: #fff; transform: none; } }
/* 5 · marché */
.ln-v5 { grid-template-columns: 1fr 1fr; gap: 0; width: 300px; max-width: 100%; margin: 0 auto; }
.ln-swap { width: 110px; } .ln-swap.a { justify-self: start; } .ln-swap.b { justify-self: end; }
.ln-step.in .ln-swap.a { animation: lnA 4.6s cubic-bezier(.6,0,.3,1) infinite; } .ln-step.in .ln-swap.b { animation: lnB 4.6s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes lnA { 0%, 20% { transform: translateX(0) rotate(-5deg); } 50%, 80% { transform: translateX(190px) rotate(5deg); } 100% { transform: translateX(0) rotate(-5deg); } }
@keyframes lnB { 0%, 20% { transform: translateX(0) rotate(5deg); } 50%, 80% { transform: translateX(-190px) rotate(-5deg); } 100% { transform: translateX(0) rotate(5deg); } }
.ln-coin { position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -38px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(135deg, #ffe99a, #f5b83c); color: #3a2400; font-weight: 900; z-index: 5; opacity: 0; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.ln-step.in .ln-coin { animation: lncoin 4.6s ease infinite; }
@keyframes lncoin { 0%, 28% { opacity: 0; transform: translateY(12px) scale(.7); } 45%, 62% { opacity: 1; transform: translateY(-4px) scale(1); } 80%, 100% { opacity: 0; transform: translateY(-14px) scale(1); } }
/* 6 · ligue */
.ln-board { position: relative; width: 100%; max-width: 330px; height: 224px; }
.ln-rowb { position: absolute; left: 0; right: 0; height: 48px; display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 8px; padding: 0 16px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); top: 0; }
.ln-rowb .n { font-weight: 900; opacity: .8; } .ln-rowb .pts { font-weight: 800; color: #ffe99a; font-variant-numeric: tabular-nums; }
/* places pilotées par le script (transform en ligne) */
.ln-rowb { transition: transform .75s cubic-bezier(.3,.9,.3,1); will-change: transform; } .ln-rowb.me { background: linear-gradient(135deg, rgba(23,195,255,.5), rgba(138,43,226,.6)); border-color: rgba(255,255,255,.5); z-index: 2; }
@media (prefers-reduced-motion: reduce) { .ln-rowb { transition: none; } .ln-mrow, .ln-scroll, .ln-step.in * { animation: none !important; } .ln-step { opacity: 1; transform: none; } .ln-pop { opacity: 1; } .ln-live .ln-tile, .ln-live .deck-tag { opacity: 1 !important; } }

.ln-hero h1, .ln-sub, .ln-cta, .ln-top { position: relative; z-index: 3; }
.ln-hero { overflow: hidden; }

.ln-credits { font-size: .8rem; color: #bfa9ff; max-width: 440px; text-align: left; } .ln-credits summary { cursor: pointer; text-align: center; padding: 6px; } .ln-credits a { color: #cdbdff; } .ln-credits ul { margin: 6px 0 0; padding-left: 18px; } .ln-credits p { margin: 4px 0; color: #bfa9ff; }