/* Page publique d'une carte partagée (wikicard.fr/c/…) : la carte au centre, un bouton pour jouer */
:root { --bg:#14131a; --surface:#1d1b26; --ink:#ecebf3; --muted:#a4a1b5; --accent:#8b7cff; --t:#8b87a0 }
body.t-common { --t:#8b87a0 } body.t-uncommon { --t:#3fb27f } body.t-rare { --t:#4a8df0 }
body.t-epic { --t:#a660f0 } body.t-legendary { --t:#e3b041 }
body.t-mythic { --t:#e5384f }
* { box-sizing:border-box }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse 70% 50% at 50% 35%, color-mix(in srgb, var(--t) 22%, transparent), transparent 70%), var(--bg);
  color:var(--ink); font:15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif }
main { max-width:420px; margin:0 auto; padding:22px 18px 40px; display:grid; gap:16px; justify-items:center; text-align:center }
.brand { font-weight:800; font-size:22px; color:var(--ink); text-decoration:none; letter-spacing:-.01em }
.brand b { color:var(--accent) }
.by { margin:0; color:var(--muted) }
.card { width:100%; max-width:340px; border-radius:20px; padding:9px; text-align:left;
  background:linear-gradient(160deg, color-mix(in srgb, var(--t) 85%, #fff), var(--t) 50%, color-mix(in srgb, var(--t) 55%, #000));
  box-shadow:0 0 30px color-mix(in srgb, var(--t) 45%, transparent), 0 18px 40px rgba(0,0,0,.45) }
.art { position:relative; aspect-ratio:4 / 3; border-radius:13px 13px 0 0; overflow:hidden; background:#26242f }
.art img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block }
.art .noimg { display:grid; place-items:center; height:100%; font:700 96px/1 Georgia, serif; color:#8b7cff; background:repeating-linear-gradient(45deg, #ffffff10 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, #ffffff0a 0 1px, transparent 1px 7px), #26242f }
.tier { position:absolute; top:10px; left:10px; background:var(--t); color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 8px; border-radius:7px }
.body { background:var(--surface); border-radius:0 0 13px 13px; padding:12px 14px 14px }
.body h1 { font-size:20px; margin:0 0 6px; line-height:1.2 }
.body p { margin:0 0 10px; font-size:14px; color:#d6d4e2 }
.src { font-size:12px; color:var(--muted) }
.play { display:block; width:100%; max-width:340px; padding:14px; border-radius:14px; background:var(--accent); color:#16122e;
  font-weight:800; font-size:16px; text-decoration:none }
.pitch { margin:0; font-size:13.5px; color:var(--muted); max-width:340px }

/* profil public (wikicard.fr/u/…) : fond flouté de la plus belle carte, identité, badges brodés, vitrine */
body.profile main { max-width:720px; position:relative; z-index:1 }
body.profile { position:relative; overflow-x:hidden }
.pbg { position:absolute; top:-60px; left:-60px; right:-60px; height:620px; background-size:cover; background-position:center 30%;
  filter:blur(40px) saturate(1.3); opacity:.3; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 40%, transparent); mask-image:linear-gradient(180deg, #000 40%, transparent) }
.phero { display:grid; justify-items:center; gap:6px; margin-top:4px }
.pav { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; font-size:36px; font-weight:800; color:#fff;
  background:linear-gradient(145deg, color-mix(in srgb, var(--t) 80%, #fff), var(--t) 55%, color-mix(in srgb, var(--t) 60%, #000));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--t) 45%, #fff), 0 10px 30px rgba(0,0,0,.45) }
.phero h1 { margin:6px 0 0; font-size:30px; line-height:1.1; overflow-wrap:anywhere }
.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:6px 0 0 }
.chips span { padding:4px 11px; border-radius:999px; font-size:13.5px; color:var(--muted); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1) }
.chips b { color:var(--ink) }
section { width:100% }
section h2 { font-size:17px; margin:10px 0 12px; text-align:left }
.pbadges { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:16px 10px }
.pbadge { margin:0; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0 }
.pbadge img { width:100%; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)) }
.pbadge figcaption { font-size:13px; font-weight:700; text-align:center; line-height:1.25; overflow-wrap:anywhere }
@media (min-width:560px) { .pbadges { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)) } }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; text-align:left }
.pcard { position:relative; aspect-ratio:5 / 7; border-radius:14px; overflow:hidden; background:#26242f;
  box-shadow:0 0 0 3px var(--t), 0 10px 24px rgba(0,0,0,.4) }
.pcard.t-common { --t:#8b87a0 } .pcard.t-uncommon { --t:#3fb27f } .pcard.t-rare { --t:#4a8df0 }
.pcard.t-epic { --t:#a660f0 } .pcard.t-legendary { --t:#e3b041 }
.pcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30% }
.pn { position:absolute; left:0; right:0; bottom:0; padding:28px 10px 10px; display:grid; gap:1px;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--t) 45%, rgba(8,7,14,.85)) 45%, color-mix(in srgb, var(--t) 40%, #07060c)) }
.pn b { font-size:14px; line-height:1.2; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5) }
.pn span { font-size:11.5px; color:color-mix(in srgb, var(--t) 50%, #fff) }
.trophies { list-style:none; margin:0; padding:0; display:grid; gap:8px; text-align:left }
.trophies li { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:var(--surface);
  border-left:4px solid var(--t) }
.trophies li.t-common { --t:#8b87a0 } .trophies li.t-uncommon { --t:#3fb27f } .trophies li.t-rare { --t:#4a8df0 }
.trophies li.t-epic { --t:#a660f0 } .trophies li.t-legendary { --t:#e3b041 }
.trophies li span { color:var(--muted); font-size:13px; white-space:nowrap }

/* badge partagé (wikicard.fr/b/…) */
body.badgepage { background:radial-gradient(ellipse 70% 45% at 50% 30%, rgba(227,176,65,.22), transparent 70%), var(--bg) }
.bpimg { width:min(340px, 82vw); aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 16px 30px rgba(0,0,0,.55)) }
.bplevel { margin:0; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#e3b041 }
.bpname { margin:0; font-size:26px; line-height:1.2 }
.bpsub { margin:0; color:var(--muted) }

/* page publique d'une version (wikicard.fr/v/…) */
.vblocks { list-style:none; margin:0; padding:0; display:grid; gap:10px; text-align:left; width:100% }
.vblocks li { display:grid; gap:2px; padding:10px 14px; border-radius:12px; background:var(--surface) }
.vblocks span { color:var(--muted); font-size:14px }

/* pages publiques (public.py) : découvrir, collections, dynasties ; liens sous une carte */
body.pub { --t:#8b7cff; background:radial-gradient(ellipse 80% 40% at 50% 0%, rgba(139,124,255,.18), transparent 70%), var(--bg) }
body.pub main { max-width:820px; justify-items:stretch; text-align:left; gap:22px }
.pubnav { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px } .pubnav a { color:var(--muted); text-decoration:none; font-weight:600 }
.pubnav .brand { margin-right:auto; color:var(--ink) } .pubnav .go { color:#16122e; background:var(--accent); padding:7px 14px; border-radius:10px }
.phead { display:grid; gap:8px; justify-items:start }
.phead h1 { margin:0; font-size:30px; line-height:1.15 }
.pkind { margin:0; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#e3b041 }
.crumbs { margin:0; color:var(--muted); font-size:14px } .crumbs a, .plist a, .pubfoot a { color:var(--accent) }
.plead { margin:0; color:#d6d4e2; max-width:680px }
.pbadgeimg { width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 12px 24px rgba(0,0,0,.5)) }
.phead .chips { justify-content:flex-start; margin:0 }
/* (3 nov. 2026) un lien de plus dans la barre : elle passe à la ligne sur téléphone, rien ne déborde */
.pubnav a { white-space:nowrap } body.pub main > * { min-width:0 } .phead h1 { overflow-wrap:break-word }
@media (max-width:480px) { .pubnav { gap:6px 12px; font-size:14px } .phead h1 { font-size:25px } }
/* (3 nov. 2026) les chances de chaque rareté (/jeu-de-cartes-wikipedia) */
.ptable { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; margin:4px 0 }
.ptable th, .ptable td { padding:7px 10px; border-bottom:1px solid rgba(127,127,127,.25); text-align:left }
.ptable th { font-size:13px; opacity:.75 } .ptable td + td, .ptable th + th { text-align:right }
body.pub section h2, body.pubcard section h2 { font-size:18px; margin:0 0 12px }
.pchips { display:flex; flex-wrap:wrap; gap:8px }
.pchip { display:inline-flex; align-items:baseline; gap:6px; padding:6px 12px; border-radius:999px; background:var(--surface);
  border:1px solid rgba(255,255,255,.1); color:var(--ink); text-decoration:none; font-size:14px }
.pchip small { color:var(--muted); font-size:12px } .pchip:hover { border-color:var(--accent) }
.pdom { margin:0 0 16px } .pdom h3 { margin:0 0 8px; font-size:15px } .pdom h3 a { color:var(--ink) }
.pcards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px }
.pc a { display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:start; padding:8px; border-radius:12px; background:var(--surface);
  border-left:3px solid var(--t); color:var(--ink); text-decoration:none }
.pc.t-common { --t:#8b87a0 } .pc.t-uncommon { --t:#3fb27f } .pc.t-rare { --t:#4a8df0 } .pc.t-epic { --t:#a660f0 }
.pc.t-legendary, .pc.t-mythic { --t:#e3b041 }
.pc img { width:64px; height:64px; border-radius:8px; object-fit:cover; background:#26242f }
.pc span { display:grid; gap:2px; min-width:0 } .pc b { font-size:14px; line-height:1.25 } .pc em { font-style:normal; font-size:11.5px; color:var(--t) }
.pc small { font-size:12.5px; color:var(--muted); line-height:1.35 }
.plist { columns:2 220px; margin:0; padding-left:18px } .plist li { margin:0 0 4px; break-inside:avoid } .plist small { color:var(--muted) }
.pubcta { display:grid; justify-items:center; gap:10px; text-align:center }
.pubfoot { margin:10px 0 0; font-size:12.5px; color:var(--muted); text-align:center }
body.pubcard section { width:100%; text-align:left }

/* pastille avec avatar et cadre (page publique d'un profil) */
.pav.haslook { position:relative; overflow:visible; background:none; box-shadow:none }
.pav .lkav { position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box; border-radius:50%; object-fit:cover }   /* (pas plus haute que la pastille) */
.pav .lkfr { position:absolute; left:50%; top:50%; width:194%; height:194%; transform:translate(-50%, -50%); pointer-events:none }
.pav .lkav.lkbadge { object-fit:contain; background:radial-gradient(circle, #2a2440, #14131a); padding:6% }
/* contour : la photo prend la forme de son trou (frame_holes.py), et le contour garde sa place (il dépasse d'un tiers) */
.pav[style*="--hole"] .lkav { border-radius:0; -webkit-mask:var(--hole) center / 194% 194% no-repeat; mask:var(--hole) center / 194% 194% no-repeat }
.pav.haslook:has(.lkfr) { margin:28px }

/* lien partagé qui ne mène plus à rien (public.missing_page) : une page qui explique et propose de jouer */
.pubmiss { text-align:center; display:grid; gap:10px; justify-items:center; margin:40px auto; max-width:520px }
.pubmiss h1 { margin:0; font-size:26px } .pubmiss p { margin:0; color:var(--muted) } .pubmiss .play { margin:8px 0 }
/* (19 oct. 2026) les pages écrites pour Wikicard (editorial.py) : guide, nouveautés, saison, à propos */
body.pub main section a, .pnews a { color:var(--accent) }
.pnews { display:grid; gap:8px } .pnews h2 { margin:0 } .pnews h3 { margin:6px 0 0; font-size:16px }
.pnews ul { margin:0; padding-left:20px; display:grid; gap:4px } .pnews p { margin:0 }
.ppaint { width:100%; border-radius:14px; display:block }

/* (26 oct. 2026 : « une carte partagée : la version du propriétaire ») son effet, son cadre, son mode, son numéro */
.card { position:relative }
.card .cframe { position:absolute; inset:-14px; z-index:2; pointer-events:none; background:var(--fimg) center / 100% 100% no-repeat }
.card.framed { margin:14px 0 }
.pills { position:absolute; left:10px; right:10px; bottom:10px; display:flex; flex-wrap:wrap; gap:6px }
.pill { padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:800; color:#fff; background:rgba(10,8,20,.72); backdrop-filter:blur(4px) }
.pill.fx { background:linear-gradient(90deg, #ff7ab6, #8b7cff 55%, #7cc4ff) } .pill.num { font-variant-numeric:tabular-nums }
.card.m-hardcore { box-shadow:0 0 0 3px #ff6b3d, 0 0 30px rgba(255,107,61,.45), 0 18px 40px rgba(0,0,0,.45) }
.card.m-puriste { box-shadow:0 0 0 3px #6fc3ff, 0 0 30px rgba(111,195,255,.45), 0 18px 40px rgba(0,0,0,.45) }
/* les effets : une lueur qui passe sur l'illustration */
.card[class*=" v-"] .art::after { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, rgba(140,120,255,.3) 52%, transparent 65%) 0 0 / 250% 100%;
  animation:pfx 3.2s ease-in-out infinite }
.card.v-bw .art img { filter:grayscale(1) contrast(1.1) } .card.v-vintage .art img { filter:sepia(.55) contrast(.95) }
.card.v-gold { background:linear-gradient(160deg, #fff1b8, #e3b041 50%, #8a6413) } .card.v-galaxy { background:linear-gradient(160deg, #6a5cff, #1b1450 60%, #ff7ab6) }
.card.v-obsidian { background:linear-gradient(160deg, #4b4b5a, #0c0c12 60%, #2a2a38) } .card.v-neon { background:linear-gradient(160deg, #39ffe0, #8b7cff 55%, #ff3dd4) }
@keyframes pfx { 0% { background-position:100% 0 } 100% { background-position:-150% 0 } }
@media (prefers-reduced-motion: reduce) { .card[class*=" v-"] .art::after { animation:none } }
.body .archived { margin:0 0 8px; padding:6px 9px; border-radius:8px; font-size:12.5px; color:#ffd59a; background:rgba(240,160,25,.12) }   /* (26 oct. 2026) carte sortie du catalogue */