/* ---------- feuille (détail, confirmations) */
.sheet-bg { position:fixed; inset:0; z-index:60; background:rgba(10,8,20,.55); display:flex; align-items:flex-end;
  justify-content:center; animation:fade .15s }
@keyframes fade { from { opacity:0 } }
.sheet { width:100%; max-width:560px; max-height:min(92vh, calc(100dvh - 56px)); overflow:auto; background:var(--bg); border-radius:20px 20px 0 0;
  padding:0 16px calc(20px + var(--safe-b)); animation:up .22s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -10px 40px rgba(0,0,0,.45); overscroll-behavior:contain }
@keyframes up { from { transform:translateY(40px) } }
@media (min-width:560px) { .sheet-bg { align-items:center } .sheet { border-radius:20px } }
/* haut de fenêtre, toujours visible : poignée (glisser pour fermer) et bouton × */
.sheet-top { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:center; height:40px;
  margin:0 -16px 6px; background:linear-gradient(var(--bg) 70%, transparent) }
.grab { width:40px; height:5px; border-radius:3px; background:var(--line) }
.sheet-x { position:absolute; right:10px; top:6px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer }
.sheet-x:hover { background:var(--surface2) }
.sheet-x .ico-svg { margin:0 }
/* fiche : la carte en grand, comme une vraie carte à jouer */
.detail { display:grid; gap:16px }
.bigcard { width:100%; max-width:340px; margin:0 auto; border-radius:20px; padding:10px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--t) 85%, #fff), var(--t) 45%, color-mix(in srgb, var(--t) 70%, #000));
  box-shadow:0 14px 40px color-mix(in srgb, var(--t) 35%, rgba(0,0,0,.35)); position:relative }
.bigcard .face { background:var(--surface); border-radius:13px; overflow:hidden; display:flex; flex-direction:column }
.bigcard .head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px 8px }
.bigcard .ttl { font-weight:800; font-size:17px; line-height:1.2; letter-spacing:-.01em }
.bigcard .num { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap }
.bigcard .art { aspect-ratio:4/3; background:var(--surface2); position:relative; overflow:hidden;
  border-top:2px solid var(--t); border-bottom:2px solid var(--t) }
.bigcard .art img.art-main { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block }
.bigcard .band { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 12px;
  background:color-mix(in srgb, var(--t) 14%, var(--surface)); font-size:12px; font-weight:700 }
.bigcard .band .tr { color:var(--t); text-transform:uppercase; letter-spacing:.06em; filter:brightness(1.15) }
/* description : défile seule (components.js), jamais sous le doigt : le geste fait défiler la fiche */
.bigcard .text { padding:10px 12px 12px; font-size:13.5px; line-height:1.5; max-height:9.5em; overflow:hidden;
  scrollbar-width:none; transition:opacity .35s }
.bigcard .text.rewind { opacity:0 }
.bigcard .text.full { max-height:none }
.bigcard .text::-webkit-scrollbar { display:none }
.bigcard .text.more { -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent);
  mask-image:linear-gradient(to bottom, #000 72%, transparent) }
.bigcard .foot { display:flex; justify-content:space-between; padding:0 12px 10px; font-size:11px; color:var(--muted) }
/* version réduite (formulaire de vente sur téléphone) : pas de texte, carte plus petite */
.bigcard.compact { max-width:230px }
.bigcard.compact .text, .bigcard.compact .foot { display:none }
@media (min-width:1024px) { .bigcard.compact { max-width:360px } .bigcard.compact .text { display:block } }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:10px }
/* sous la grande carte : coup de cœur et partage */
.cardbar { display:flex; gap:10px; margin-bottom:10px }
.cardbar:empty { display:none }
.share-btn { display:flex; align-items:center; justify-content:center; gap:8px; flex:1 }
.likebtn { display:flex; align-items:center; justify-content:center; gap:6px; min-width:52px; font-variant-numeric:tabular-nums }
.likebtn .ico-svg { margin:0; transition:transform .15s }
.likebtn.on { color:#e5484d; border-color:color-mix(in srgb, #e5484d 45%, var(--line)) }
.likebtn.on .ico-svg path { fill:currentColor }
.likebtn:active .ico-svg { transform:scale(1.2) }
.share-btn .ico-svg { margin:0 }
/* fiche : colonne carte (carte + boutons dessous) et colonne informations */
.cardcol { display:grid; gap:12px; width:100%; max-width:340px; margin:0 auto; align-content:start }
.infocol { display:grid; gap:22px; align-content:start; min-width:0 }
.sec-t { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:8px }
.cls { font-size:14px; line-height:1.7; color:var(--muted) }
.cls a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line) }
.cls a:hover { border-color:var(--accent) }
.crows { display:grid }
.crow { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:baseline; padding:9px 0;
  border-top:1px solid var(--line); color:inherit; text-decoration:none }
.crow:first-child { border-top:0; padding-top:2px }
.crow .cn { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.crow .cn small { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; margin-right:6px }
.crow .cc { font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums }
.crow .prog { grid-column:1 / -1; height:3px }
.crow:hover .cn { color:var(--accent) }
.linkbtn { background:none; border:0; padding:0; color:var(--accent); cursor:pointer; font-size:13.5px; justify-self:start }
.owned { text-align:center; font-size:13.5px; color:var(--muted) }

.pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; background:var(--surface2);
  font-size:12.5px; font-weight:600 }
.pill.tier { background:var(--t); color:#fff; text-transform:uppercase; letter-spacing:.04em; font-size:11px }
.stepper { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:12px; overflow:hidden }
.stepper button { border:0; background:var(--surface); width:44px; height:44px; font-size:20px; cursor:pointer }
.stepper span { min-width:40px; text-align:center; font-weight:700 }

.license { font-size:12px; color:var(--muted); margin-top:14px; line-height:1.5 }
/* fenêtres de célébration (niveau, série complétée) et de code promo */
.celebrate .ico { color:var(--accent); display:flex; justify-content:center }
.ticket .ic { color:var(--accent); display:flex; justify-content:center }
/* fenêtre « ticket » du code promo */
.ticket { position:relative; margin:4px 0 16px; padding:22px 18px 18px; border-radius:16px; text-align:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, #ffcf5c 16%, var(--surface)));
  border:2px dashed color-mix(in srgb, var(--accent) 45%, var(--line)) }
.ticket::before, .ticket::after { content:""; position:absolute; top:50%; width:22px; height:22px; border-radius:50%;
  background:var(--bg); transform:translateY(-50%) }
.ticket::before { left:-12px } .ticket::after { right:-12px }
.ticket .ic { font-size:34px; line-height:1 }
.ticket input { margin-top:14px; text-align:center; font:700 20px ui-monospace, Consolas, monospace; letter-spacing:.14em;
  text-transform:uppercase }
.celebrate { text-align:center; padding:6px 4px 4px }
.celebrate .big { font-size:54px; font-weight:900; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(135deg, var(--accent), #ff9ad5, #ffd86b); -webkit-background-clip:text; background-clip:text; color:transparent }
.celebrate .ico { font-size:46px; line-height:1; margin-bottom:6px }
.celebrate ul { list-style:none; padding:0; margin:14px 0 18px; display:grid; gap:6px }
.celebrate li { padding:8px 12px; border-radius:10px; background:var(--surface2); font-weight:600 }