/* ============ Thèmes ============ */
:root {
  --bg: #efefec;
  --bg-2: #ffffff;
  --bg-3: #e3e3df;
  --line: #d2d2cc;
  --ink: #121212;
  --ink-2: #5c5c55;
  --gold: #7d5a00;
  --rt-commune: #5c5c55; --rt-peu-commune: #2f7046; --rt-rare: #2a5fc0; --rt-epique: #7a3fc9; --rt-legendaire: #7d5a00; --rt-mythique: #c0283a;
  --gold-hi: #e2b33c;
  --danger: #c8102e;
  /* Fond des boutons rouges (texte blanc, contraste ≥ 4,5:1 dans les deux thèmes) */
  --danger-btn: #c8102e;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0d0e11;
  --bg-2: #16181d;
  --bg-3: #1e2128;
  --line: #2b2e36;
  --ink: #f1eee6;
  --ink-2: #94949c;
  --gold: #e2b33c;
  --gold-hi: #f6d478;
  --rt-commune: #b8b8b0; --rt-peu-commune: #6fcf8f; --rt-rare: #5b93f0; --rt-epique: #a982f0; --rt-legendaire: #e2b33c; --rt-mythique: #ff5a6e;
  --danger: #ff5a6e;
  --danger-btn: #d01c3a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0e11;
    --bg-2: #16181d;
    --bg-3: #1e2128;
    --line: #2b2e36;
    --ink: #f1eee6;
    --ink-2: #94949c;
    --gold: #e2b33c;
    --gold-hi: #f6d478;
    --rt-commune: #b8b8b0; --rt-peu-commune: #6fcf8f; --rt-rare: #5b93f0; --rt-epique: #a982f0; --rt-legendaire: #e2b33c; --rt-mythique: #ff5a6e;
    --danger: #ff5a6e;
    --danger-btn: #d01c3a;
    color-scheme: dark;
  }
}

:root {
  /* Raretés */
  --r-commune: #9a9a94;
  --r-peu-commune: #3fa266;
  --r-rare: #3a78e0;
  --r-epique: #9257e0;
  --r-legendaire: #e2a91f;
  --r-mythique: #e8364a;

  /* Partis */
  --p-rouge: #d6252f;
  --p-bleu: #1f5bb8;
  --p-jaune: #f2bd00;
  --p-orange: #ec7a1c;
  --p-turquoise: #00a3a6;
  --p-vert: #3b9b2a;
  --p-pourpre: #8e1022;
  --p-noir: #2a2a2a;
  --p-magenta: #c3177a;
  --p-gris: #6f7077;

  /* Régions */
  --p-flandre: #f2c400;
  --p-wallonie: #c8102e;
  --p-bruxelles: #1d4f9e;
  --p-evenement: #121212;

  /* Monarchie, culture & sport */
  --p-royal: #5b1a2c;
  --p-bd: #e0531f;
  --p-musique: #6a35c9;
  --p-cinema: #1d1d22;
  --p-sport: #0d8a5b;
  --p-medias: #0a6fb8;
  --p-arts: #9a6a2c;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 15px;
}
main { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: 36px 32px 72px; }
h1 { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.muted { color: var(--ink-2); margin: 6px 0 0; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
a { color: inherit; }

/* ============ Barre du haut ============ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: stretch; gap: 32px;
  height: 60px; padding: 0 32px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* La case de tête d'un bulletin de vote belge */
.logo { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.brand:hover .logo { transform: rotate(-6deg) scale(1.06); }
.card-back .back-logo { position: absolute; left: 50%; top: 50%; width: 34cqw; translate: -50% -50%; filter: drop-shadow(0 0 3cqw rgba(226, 179, 60, .25)); }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
.tabs { display: flex; gap: 4px; }
.tab {
  border: 0; background: none; padding: 0 14px; position: relative;
  font-family: var(--display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-2);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); }
.tab.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--ink); }
.tab-count { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.wallet { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 600; font-size: 15px; }
.coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b33c 45%, #9c7112); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18); }
.icon-btn { width: 36px; height: 36px; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; border-radius: 4px; }
.icon-btn:hover { border-color: var(--ink-2); }
.icon-btn svg { width: 18px; height: 18px; }

.view { display: none; }
.view.is-active { display: block; }

/* ============ Boutons ============ */
.btn {
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: 4px;
  font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .05em;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-line:hover:not(:disabled) { border-color: var(--ink); filter: none; }
.btn-gold { background: linear-gradient(180deg, #f6d478, #d29c1c); border-color: #b9870f; color: #1a1300; }
.btn-light { color: #f1eee6; border-color: rgba(255, 255, 255, .25); }
.btn-light:hover:not(:disabled) { border-color: #fff; }
.linkish { border: 0; background: none; padding: 0; text-decoration: underline; color: var(--ink-2); font-size: inherit; }

/* ============ Boutique ============ */
.shop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.free-box { display: flex; align-items: center; gap: 14px; }
.free-box .pips { display: flex; gap: 5px; }
.free-box .pip { width: 12px; height: 12px; border: 1.5px solid var(--ink-2); transform: rotate(45deg); }
.free-box .pip.on { background: var(--gold); border-color: var(--gold); }
.free-box .label { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.pack-card { display: flex; flex-direction: column; gap: 18px; }
.pack-card .pack-visual { cursor: pointer; transition: transform .25s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .28)); }
.pack-card .pack-visual:hover { transform: translateY(-6px) rotate(-1.2deg); }
.pack-card.is-locked .pack-visual { opacity: .5; cursor: not-allowed; }
.pack-card.is-locked .pack-visual:hover { transform: none; }
.pack-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pack-info h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; }
.pack-info p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.price { font-family: var(--mono); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

.pack-visual { position: relative; width: 100%; aspect-ratio: 300 / 430; }
.pack-visual > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pack-visual .sheen { position: absolute; inset: 4% 0; pointer-events: none; mix-blend-mode: overlay; opacity: .55;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .9) 48%, transparent 60%);
  background-size: 260% 100%; background-position: var(--sx, 120%) 0; transition: background-position .4s ease; }
.pack-card .pack-visual:hover .sheen { --sx: -20%; }


/* ============ Scène d'ouverture ============ */
.stage {
  position: fixed; inset: 0; z-index: 100; overflow: auto;
  background: radial-gradient(ellipse at 50% 40%, #1d2029 0%, #0a0b0e 70%);
  color: #f1eee6;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  padding: 40px 20px 140px;
  animation: fade-in .3s ease;
}
.stage:focus { outline: none; } /* focus posé par le script à l'ouverture */
@keyframes fade-in { from { opacity: 0; } }
.stage-rays {
  position: fixed; left: 50%; top: 45%; width: 160vmax; height: 160vmax; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .06) 0deg 6deg, transparent 6deg 18deg);
  mask: radial-gradient(circle, #000 0%, transparent 55%);
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
  animation: spin 40s linear infinite; will-change: rotate;
}
.stage.is-hot .stage-rays { opacity: 1; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--hot) 35%, transparent) 0deg 6deg, transparent 6deg 18deg); }
@keyframes spin { to { rotate: 360deg; } }
.stage-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.stage-flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .75; } 100% { opacity: 0; } }

.stage-pack { position: relative; width: min(300px, 70vw); cursor: pointer; animation: bob 3s ease-in-out infinite; }
.stage-pack .tilt { transition: transform .15s ease-out; transform-style: preserve-3d; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.stage-pack .half { position: absolute; inset: 0; }
.stage-pack .half.top { clip-path: inset(0 0 calc(100% - var(--cut)) 0); }
.stage-pack .half.bottom { position: relative; clip-path: inset(var(--cut) 0 0 0); }
.stage-pack .seam { position: absolute; left: 4%; right: 4%; top: var(--cut); height: 2px; translate: 0 -1px;
  background: var(--hot, #fff); box-shadow: 0 0 18px 6px var(--hot, #fff); opacity: 0; }
@keyframes bob { 50% { translate: 0 -10px; } }
.stage-pack.is-charging { animation: charge .9s cubic-bezier(.4, 0, .6, 1) forwards; }
.stage-pack.is-charging .seam { animation: seam .9s ease-in forwards; }
@keyframes charge {
  0% { transform: none; } 10% { transform: rotate(-2deg); } 20% { transform: rotate(2deg); }
  30% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 50% { transform: rotate(-4deg) scale(1.02); }
  60% { transform: rotate(4deg) scale(1.03); } 70% { transform: rotate(-5deg) scale(1.04); } 80% { transform: rotate(5deg) scale(1.05); }
  100% { transform: scale(1.06); }
}
@keyframes seam { 0% { opacity: 0; } 100% { opacity: 1; } }
.stage-pack.is-torn { animation: none; }
.stage-pack.is-torn .half.top { animation: tear-top .7s cubic-bezier(.3, .6, .3, 1) forwards; }
.stage-pack.is-torn .half.bottom { animation: tear-bottom .7s cubic-bezier(.5, 0, .7, .4) .15s forwards; }
.stage-pack.is-torn .seam { opacity: 0; transition: opacity .2s; }
@keyframes tear-top { to { transform: translate(140px, -260px) rotate(28deg); opacity: 0; } }
@keyframes tear-bottom { to { transform: translateY(70vh) rotate(-4deg); opacity: 0; } }
.stage-hint { margin: 28px 0 0; font-family: var(--display); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .14em; opacity: .55; }

.reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; perspective: 1600px; max-width: 1400px; }
.slot {
  --w: clamp(150px, 17vw, 250px);
  width: var(--w); position: relative; cursor: pointer;
  animation: deal .6s cubic-bezier(.2, .9, .25, 1.05) backwards;
}
@keyframes deal { from { opacity: 0; transform: translate(var(--dx, 0), 40px) scale(.7) rotate(var(--dr, 0)); } }
.slot .inner { position: relative; aspect-ratio: 63 / 88; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .75, .2, 1); }
.slot .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.slot .front { transform: rotateY(180deg); }
.slot.is-flipped .inner { transform: rotateY(180deg); }
.slot:not(.is-flipped):hover .inner { transform: translateY(-8px); }
.slot.is-flipped { cursor: zoom-in; }
/* Anticipation : le dos d'une carte épique ou mieux luit avant d'être retourné */
/* Lueur des dos prometteurs : l'ombre est fixe, seule son opacité varie (animée par la carte graphique, sans repeindre) */
.slot.tease .back::after { content: ""; position: absolute; inset: 0; border-radius: 4.5%/3.2%; pointer-events: none;
  box-shadow: 0 0 0 2px var(--hit), 0 0 34px 6px var(--hit); opacity: 0; will-change: opacity; animation: tease 1.2s ease-in-out infinite; }
@keyframes tease { 50% { opacity: 1; } }
/* Face cachée : ses reflets animés ne tournent pas pour rien */
.slot:not(.is-flipped) .front *, .slot:not(.is-flipped) .front *::before, .slot:not(.is-flipped) .front *::after { animation-play-state: paused; }
.slot.big-hit.is-flipped .inner { animation: pop .8s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes pop { 0% { transform: rotateY(180deg) scale(1); } 40% { transform: rotateY(180deg) scale(1.12); } 100% { transform: rotateY(180deg) scale(1); } }
.slot .tag {
  position: absolute; top: -12px; left: 50%; translate: -50% 0; z-index: 3;
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 2px; background: var(--gold-hi); color: #1a1300;
  opacity: 0; transition: opacity .2s ease .55s;
}
.slot .tag.dup { background: #2b2e36; color: #b9b9c0; }
.slot.is-flipped .tag { opacity: 1; }

.stage-bar {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 18px 24px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7) 40%);
}
.stage-summary { margin: 0; font-family: var(--mono); font-size: 14px; color: #c9c7c0; min-height: 1.2em; }
.stage-summary b { color: var(--gold-hi, #f6d478); font-weight: 600; }
.stage-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ============ Dos de carte ============ */
.card-back {
  position: relative; height: 100%; overflow: hidden; border-radius: 4.5%/3.2%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(226, 179, 60, .10) 0 1px, transparent 1px 7px),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(226, 179, 60, .07) 0deg 1.5deg, transparent 1.5deg 6deg),
    radial-gradient(circle at 50% 45%, #1b2440, #0c1020 75%);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8);
  container-type: inline-size;
}
.card-back::before { content: ""; position: absolute; inset: 4cqw; border: 1px solid rgba(226, 179, 60, .55); border-radius: 2cqw; }
.card-back::after { content: ""; position: absolute; inset: 6cqw; border: 1px solid rgba(226, 179, 60, .22); border-radius: 1.4cqw; }
.card-back svg { position: absolute; left: 50%; top: 50%; width: 64cqw; translate: -50% -50%; }
.card-back .back-foot { position: absolute; left: 0; right: 0; bottom: 9cqw; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: 4.6cqw; letter-spacing: .3em; color: rgba(226, 179, 60, .7); text-transform: uppercase; }

/* ============ Carte ============ */
.card {
  --rc: var(--r-commune);
  --frame: linear-gradient(160deg, #e2e2de, #a8a8a2 55%, #d6d6d1);
  --band: var(--p-gris);
  --band-ink: #fff;
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 63 / 88;
  padding: 2.6%; border-radius: 4.5% / 3.2%;
  background: var(--frame);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .12);
  text-align: left; color: #fff; font-family: var(--text);
}
.card.r-peu-commune { --rc: var(--r-peu-commune); --frame: linear-gradient(160deg, #bfe6cb, #3f8a5a 50%, #a9dbb9); }
.card.r-rare        { --rc: var(--r-rare);        --frame: linear-gradient(160deg, #c3d8ff, #2e5fc0 45%, #9dbcff 70%, #23479a); }
.card.r-epique      { --rc: var(--r-epique);      --frame: linear-gradient(160deg, #e2cbff, #6b3db8 45%, #c9a6ff 70%, #4a2a8a); }
.card.r-legendaire  { --rc: var(--r-legendaire);  --frame: linear-gradient(135deg, #7a5a12, #f7dc84 22%, #a87b1e 45%, #fff1b8 65%, #8a6516); }
/* Mythique « Rubis » : cadre taillé en facettes rouges, lueur rouge, éclats qui scintillent et reflet rosé (::after plus bas) */
.card.r-mythique    { --rc: var(--r-mythique); }
/* Lueur rouge sur toutes les mythiques ; cadre et bandeau rubis sur la version standard (les autres versions gardent les leurs) */
.card.r-mythique:not(.cat-edition) { box-shadow: 0 0 0 1px #7a0018, 0 0 22px -4px rgba(255, 40, 80, .7), 0 14px 30px -12px rgba(0, 0, 0, .6); }
.card.r-mythique.fin-normal:not(.cat-edition):not(.cat-histoire):not(.cat-bd):not(.cat-balade):not(.cat-voiture):not(.cat-moulin):not(.cat-arme):not(.cat-industrie):not(.cat-marine):not(.cat-presse):not(.cat-chocolat):not(.cat-geant):not(.cat-invention):not(.cat-abbaye) {
  --frame: conic-gradient(from 20deg at 50% 50%, #5a0012, #ff2d55, #9a0020, #ff6b81, #6a0016, #ff2d55, #4a000e, #ff8fa0, #5a0012); }
.card.r-mythique.fin-normal:not(.cat-edition):not(.cat-histoire):not(.cat-bd):not(.cat-balade):not(.cat-voiture):not(.cat-moulin):not(.cat-arme):not(.cat-industrie):not(.cat-marine):not(.cat-presse):not(.cat-chocolat):not(.cat-geant):not(.cat-invention):not(.cat-abbaye) .card-band { background: linear-gradient(180deg, #8a0020, #4a000e); color: #fff; }
.card.r-mythique.fin-normal:not(.cat-edition):not(.cat-histoire):not(.cat-bd):not(.cat-balade):not(.cat-voiture):not(.cat-moulin):not(.cat-arme):not(.cat-industrie):not(.cat-marine):not(.cat-presse):not(.cat-chocolat):not(.cat-geant):not(.cat-invention):not(.cat-abbaye) .card-stats { background: #22000a; }
.card.r-mythique.fin-normal:not(.cat-edition):not(.cat-histoire):not(.cat-bd):not(.cat-balade):not(.cat-voiture):not(.cat-moulin):not(.cat-arme):not(.cat-industrie):not(.cat-marine):not(.cat-presse):not(.cat-chocolat):not(.cat-geant):not(.cat-invention):not(.cat-abbaye) .card-stats dd { color: #ffb3c0; }

/* Édition limitée : cadre aux métaux de son paquet (--ed-frame, --band et --band-ink posés par app.js), double filet, sceau du paquet */
.card.cat-edition { --frame: var(--ed-frame); background-size: 200% 200%; animation: gold 6s ease-in-out infinite alternate; }
.card.cat-edition .card-photo::after { content: ""; position: absolute; inset: 2.4cqw 2.4cqw 6cqw; border: .5cqw solid var(--band-ink); border-radius: 1.4cqw; opacity: .5; pointer-events: none; }
.ed-seal { margin-left: auto; font-family: var(--display); font-weight: 800; font-size: 4.6cqw; letter-spacing: .04em; line-height: 1;
  padding: .9cqw 2.4cqw; border-radius: 99px; background: rgba(10, 10, 12, .75); border: .4cqw solid currentColor; }

.card-in { position: relative; height: 100%; border-radius: 2.4cqw; overflow: hidden; background: #15161a; }
.card-photo { position: absolute; inset: 0 0 18cqw 0; background: #2a2c33; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.card-photo.is-emblem { background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, color-mix(in srgb, var(--band) 55%, #111), #16171b); }
.card-photo.is-emblem img { object-fit: contain; padding: 12cqw 14cqw 26cqw; filter: drop-shadow(0 2cqw 3cqw rgba(0, 0, 0, .4)); }
/* Logo : fond papier clair, liseré à la couleur de la carte, sans ombre portée */
.card-photo.is-logo { background:
    radial-gradient(ellipse at 50% 38%, #fff 0%, #f1efe8 70%),
    #f1efe8;
  box-shadow: inset 0 -1.2cqw 0 color-mix(in srgb, var(--band) 70%, transparent); }
.card-photo.is-logo img { padding: 16cqw 12cqw 30cqw; filter: none; }

/* Portrait absent : silhouette tramée aux couleurs du parti */
.portrait {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle, rgba(0, 0, 0, .28) 1.1px, transparent 1.4px) 0 0 / 2.6cqw 2.6cqw,
    linear-gradient(170deg, color-mix(in srgb, var(--band) 85%, #fff), color-mix(in srgb, var(--band) 60%, #000));
}
.portrait svg { position: absolute; left: 50%; bottom: 14cqw; width: 78%; translate: -50% 0; fill: rgba(0, 0, 0, .32); }
.portrait span { position: absolute; top: 14cqw; left: 0; right: 0; text-align: center;
  font-family: var(--display); font-weight: 800; font-size: 20cqw; line-height: 1; color: rgba(255, 255, 255, .22); letter-spacing: .02em; }

/* Événement : grand chiffre typographique */
.card.cat-evenement .card-photo { background:
    repeating-linear-gradient(-45deg, rgba(226, 179, 60, .08) 0 1px, transparent 1px 8px), #121318; }
.event-big { position: absolute; inset: 0 0 20cqw; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 34cqw; line-height: 1; letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff1b8, #d6a12a); -webkit-background-clip: text; background-clip: text; color: transparent; }

.card-top { position: absolute; top: 3cqw; left: 3cqw; right: 3cqw; display: flex; align-items: center; gap: 2cqw; z-index: 2; }
.card-top .no { font-family: var(--mono); font-size: 4cqw; font-weight: 600; padding: .8cqw 2cqw; background: rgba(10, 10, 12, .62); border-radius: 1cqw; color: #f1eee6; }
.card-top .live { margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 4.2cqw; letter-spacing: .08em; text-transform: uppercase;
  padding: .8cqw 2.2cqw; background: #f1eee6; color: #111; border-radius: 1cqw; display: flex; align-items: center; gap: 1.4cqw; }
.card-top .live::before { content: ""; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #22b35e; }

.gem { width: 5cqw; height: 5cqw; transform: rotate(45deg); background: var(--rc); box-shadow: 0 0 0 .7cqw rgba(10, 10, 12, .62); flex: none; }
.r-legendaire .gem, .r-mythique .gem { background: var(--frame); background-size: 200% 200%; }
.chip .gem, .detail-info .gem { width: 9px; height: 9px; box-shadow: none; }

.card-band {
  position: absolute; left: 0; right: 0; bottom: 18cqw;
  padding: 7cqw 5cqw 3.4cqw;
  background: var(--band); color: var(--band-ink);
  clip-path: polygon(0 4.5cqw, 100% 0, 100% 100%, 0 100%);
}
.card-band .party { position: absolute; top: 2.6cqw; right: 4cqw; font-family: var(--display); font-weight: 700; font-size: 4.2cqw; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
/* « .card » en tête : les titres des fenêtres (.side-dlg h3, échanges…) ne doivent pas déborder sur le nom de la carte */
.card .card-band h3 {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: 10cqw; line-height: 1; padding-bottom: .12em; margin-bottom: -.12em; text-transform: uppercase; letter-spacing: .005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-band .sub { margin: 1.4cqw 0 0; font-size: 4.3cqw; font-weight: 500; line-height: 1.2; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-band .meta { margin: .8cqw 0 0; font-family: var(--mono); font-size: 3.6cqw; line-height: 1.2; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card-stats { position: absolute; left: 0; right: 0; bottom: 0; height: 18cqw; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); background: #111216; padding: 2.6cqw 4cqw; }
.card-stats div { min-width: 0; padding: 0 2cqw; }
.card-stats div:first-child { padding-left: 0; }
.card-stats div + div { border-left: 1px solid rgba(255, 255, 255, .12); }
.card-stats dt { font-family: var(--display); font-weight: 600; font-size: 3.6cqw; letter-spacing: .08em; text-transform: uppercase; color: #8d8d95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-stats dd { margin: .8cqw 0 0; font-family: var(--mono); font-weight: 600; font-size: 4.8cqw; color: #f1eee6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bandeaux clairs : texte foncé */
.card.fam-jaune, .card.fam-flandre { --band-ink: #141414; }
.card.cat-evenement { --band: #0f1014; --band-ink: #f6d478; }
.card.fam-royal, .card.fam-cinema { --band-ink: #f6d478; }

/* Reflet holographique */
.card.r-epique .card-in::after, .card.r-legendaire .card-in::after, .card.r-mythique .card-in::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: overlay;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .55), transparent 42%),
    linear-gradient(115deg, transparent 25%, rgba(255, 230, 150, .45) 42%, rgba(120, 210, 255, .4) 52%, rgba(220, 150, 255, .35) 60%, transparent 75%);
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, var(--gx, 30%) 0;
  opacity: .5;
}
.card.r-epique .card-in::after { opacity: .28; }
/* Rubis : trois éclats qui scintillent et un reflet rosé qui balaie la carte */
.card.r-mythique:not(.cat-edition) .card-in::after {
  mix-blend-mode: screen; opacity: 1;
  background:
    radial-gradient(circle, #fff 0 .6cqw, rgba(255, 190, 210, .8) 1.2cqw, transparent 4.5cqw) 12% 10% / 11cqw 11cqw no-repeat,
    radial-gradient(circle, #fff 0 .5cqw, rgba(255, 190, 210, .8) 1cqw, transparent 3.6cqw) 84% 30% / 9cqw 9cqw no-repeat,
    radial-gradient(circle, #fff 0 .4cqw, rgba(255, 190, 210, .8) .8cqw, transparent 3cqw) 30% 58% / 7cqw 7cqw no-repeat,
    linear-gradient(115deg, transparent 35%, rgba(255, 180, 200, .55) 48%, transparent 60%) 0 0 / 300% 100%;
  animation: ruby-glint 2.4s ease-in-out infinite, ruby-sweep 3.6s ease-in-out infinite;
}
@keyframes ruby-glint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ruby-sweep { 0% { background-position: 12% 10%, 84% 30%, 30% 58%, 120% 0; } 100% { background-position: 12% 10%, 84% 30%, 30% 58%, -60% 0; } }
@media (prefers-reduced-motion: reduce) { .card.r-mythique .card-in::after { animation: none; opacity: .8; } }

.count-badge { position: absolute; top: -8px; right: -8px; z-index: 5;
  font-family: var(--mono); font-weight: 600; font-size: 12px; padding: 3px 7px; border-radius: 3px;
  background: var(--ink); color: var(--bg); }

/* ============ Album ============ */
.binder-head { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters input[type=search], .filters select {
  font: inherit; font-size: 14px; height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--bg-2); color: var(--ink);
}
.filters input[type=search]:focus, .filters select:focus { outline: none; border-color: var(--ink); }
.filters input[type=search] { width: 220px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check span { width: 18px; height: 18px; border: 1.5px solid var(--ink-2); display: grid; place-items: center; }
.check input:checked + span { background: var(--ink); border-color: var(--ink); }
.check input:checked + span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.chip {
  border: 0; background: none; padding: 10px 14px; position: relative;
  font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2);
}
.chip:hover { color: var(--ink); }
.chip.is-active { color: var(--ink); }
.chip.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--ink); }
.chip small { font-family: var(--mono); font-weight: 500; font-size: 11px; margin-left: 5px; letter-spacing: 0; }
.chip.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22b35e; margin-right: 6px; vertical-align: 2px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 22px; }
.grid .card { cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.grid .card:hover { transform: translateY(-5px) rotate(-.6deg); }
.cell { position: relative; container-type: inline-size; }
/* Album : les cases hors de l'écran ne sont ni mises en page ni dessinées (content-visibility), un album de 2 500 cartes
   reste fluide. Ce confinement coupe ce qui dépasse de la case (carte soulevée au survol, badge ×2, ombre, contour du
   focus) : une marge intérieure l'englobe, compensée par une marge négative (même place dans la grille, même largeur
   de contenu), et laisse passer les clics vers les cases voisines (pointer-events). Sur les côtés, pas plus que la
   marge de la page (sinon la page déborde et le téléphone la dézoome). Hauteur d'une case jamais affichée : estimée
   (auto : sa vraie hauteur une fois vue) ; largeur 0, pour ne jamais élargir les colonnes. */
#grid > .cell { --cv-x: 26px; --cv-top: 16px; --cv-bottom: 30px; padding: var(--cv-top) var(--cv-x) var(--cv-bottom);
  margin: calc(-1 * var(--cv-top)) calc(-1 * var(--cv-x)) calc(-1 * var(--cv-bottom)); pointer-events: none;
  content-visibility: auto; contain-intrinsic-width: 0px; contain-intrinsic-height: auto 322px; }
#grid > .cell > * { pointer-events: auto; }
#grid > .cell > .imp-tag { pointer-events: none; top: calc(var(--cv-top) + (100% - var(--cv-top) - var(--cv-bottom)) * .44); }
#grid > .cell.is-wide { contain-intrinsic-height: auto 345px; }
@media (max-width: 760px) {
  #grid > .cell { --cv-x: 12px; contain-intrinsic-height: auto 243px; }
  #grid > .cell.is-wide { contain-intrinsic-height: auto 256px; }
}

/* Emplacement vide, comme dans un album Panini */
.empty-slot {
  container-type: inline-size;
  aspect-ratio: 63 / 88; border: 1.5px dashed var(--line); border-radius: 4.5% / 3.2%; background: var(--bg-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; padding: 8cqw; text-align: center;
  color: var(--ink-2);
}
.empty-slot .no { font-family: var(--display); font-weight: 800; font-size: 22cqw; line-height: 1; opacity: .45; }
.empty-slot .name { font-family: var(--display); font-weight: 600; font-size: 6.4cqw; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; opacity: .7; }
.empty-slot .gem { width: 4cqw; height: 4cqw; box-shadow: none; opacity: .7; margin-bottom: 2cqw; }
.grid-more { grid-column: 1 / -1; justify-self: center; margin-top: 8px; }
.empty { grid-column: 1 / -1; color: var(--ink-2); padding: 48px 0; text-align: center; }

/* ============ Détail ============ */
dialog { border: 0; padding: 0; background: transparent; max-width: min(940px, calc(100vw - 32px)); width: 100%; color: var(--ink); }
dialog::backdrop { background: rgba(8, 9, 12, .78); }
.detail-inner { display: grid; grid-template-columns: 340px 1fr; gap: 36px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 32px; }
.detail-info { position: relative; min-width: 0; }
.detail-info .kicker { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; }
.detail-info h2 { margin: 8px 0 0; font-family: var(--display); font-weight: 800; font-size: 46px; line-height: 1.02; text-transform: uppercase; padding-right: 32px; }
.detail-info .sub { color: var(--ink-2); margin: 10px 0 22px; line-height: 1.4; }
.detail-info dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 24px; margin: 0 0 24px; font-size: 14px; }
.detail-info dt { color: var(--ink-2); font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.detail-info dd { margin: 0; font-family: var(--mono); font-weight: 500; }
.detail-info h4 { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.detail-info .card-odds { margin: -8px 0 24px; border: 1.5px solid var(--line); border-radius: 4px; }
.detail-info .card-odds[open] { border-color: var(--ink-2); }
.detail-info .card-odds summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-family: var(--display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.detail-info .card-odds summary::-webkit-details-marker { display: none; }
.detail-info .card-odds summary:hover { color: var(--ink); }
.detail-info .card-odds .co-h { flex: none; }
.detail-info .card-odds .co-best { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.detail-info .card-odds .co-best .fin-dot { width: 9px; height: 9px; margin-right: 6px; vertical-align: 0; }
.detail-info .card-odds .co-chev { flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.detail-info .card-odds[open] .co-chev { transform: translateY(2px) rotate(-135deg); }
.detail-info .card-odds .co-body { padding: 0 12px 12px; }
.detail-info .card-odds .best { margin: 0 0 4px; font-size: 14px; line-height: 1.4; }
.detail-info .card-odds .best b { font-family: var(--mono); color: var(--ink); }
.detail-info .card-odds .is-cur { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--ink); }
.empty-slot[data-id] { cursor: pointer; }
.empty-slot[data-id]:hover, .empty-slot[data-id]:focus-visible { border-color: var(--ink-2); color: var(--ink); }
.detail-info .card-odds .hint { margin: 6px 0 8px; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.detail-info .card-odds table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--bg-2); border-radius: 4px; }
.detail-info .card-odds th { font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); text-align: right; padding: 5px 6px 3px; vertical-align: bottom; line-height: 1.15; }
.detail-info .card-odds th:first-child, .detail-info .card-odds td:first-child { text-align: left; }
.detail-info .card-odds th .fin-dot { display: block; margin: 0 0 3px auto; }
.detail-info .card-odds td { padding: 4px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.detail-info .card-odds td + td { font-family: var(--mono); text-align: right; white-space: nowrap; }
.detail-info .card-odds td small { color: var(--ink-2); font-size: 11px; }
.detail-info .card-odds td small .fin-dot { width: 8px; height: 8px; vertical-align: -1px; }
@media (max-width: 560px) {
  .detail-info .card-odds table { font-size: 11px; }
  .detail-info .card-odds th { font-size: 9.5px; padding: 4px 3px 3px; letter-spacing: 0; }
  .detail-info .card-odds td { padding: 4px 3px; }
}
.detail-info ul { margin: 0 0 24px; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; border-top: 1px solid var(--line); }
.detail-info li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.detail-info .text { line-height: 1.55; margin: 0 0 22px; font-size: 16px; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 4px; }
.detail-actions .btn { justify-content: center; text-align: center; width: 100%; min-height: 48px; padding: 10px; font-size: 15px; line-height: 1.15; }
.detail-actions .btn[hidden] { display: none; }
.detail-actions #sell-one { grid-column: 1 / -1; order: 1; }
.detail-info .links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; margin-bottom: 22px; }
.detail-info .links a, .detail-info .links .credit { color: var(--ink-2); }
.close { position: absolute; top: -10px; right: -10px; width: 38px; height: 38px; border: 0; background: transparent; font-size: 28px; color: var(--ink-2); border-radius: 4px; }
.close:hover { color: var(--ink); background: var(--bg-3); }

/* ============ Divers ============ */
.toast {
  position: fixed; left: 50%; bottom: 28px; translate: -50% 20px; opacity: 0; z-index: 200;
  background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 4px;
  font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .05em;
  transition: opacity .2s ease, translate .2s ease; pointer-events: none;
}
.toast.is-on { opacity: 1; translate: -50% 0; }
/* Pied de page : deux groupes de boutons (partie, appli), puis crédits et version */
.foot { border-top: 1px solid var(--line); padding: 22px 32px 18px; font-size: 13px; color: var(--ink-2); display: grid; gap: 18px; }
.foot-groups { display: flex; flex-wrap: wrap; gap: 18px 48px; }
.foot-group h4 { margin: 0 0 8px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.foot-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-btn { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.foot-btn:hover { border-color: var(--ink-2); }
.foot-btn.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: transparent; }
.foot-btn.is-danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.foot-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.foot-meta p { margin: 0; flex: 1 1 320px; }
.foot .version { font-family: var(--mono); font-size: 12px; color: var(--ink-2); text-decoration: none; }

/* ============ Nouvelles familles ============ */
:root {
  --p-sport: #0d8a5b;
  --p-art: #2a2118;
  --p-gastro: #9c4a1a;
  --p-univ: #0f5c63;
  --p-hautecole: #33449a;
  --p-artschool: #8a1f5c;
}
.card.fam-art { --band-ink: #f2d9a2; }

/* Œuvres d'art : tableau entier, sur fond de musée */
.card-photo.is-artwork { background: radial-gradient(ellipse at 50% 35%, #3a3128, #15110d 80%); }
.card-photo.is-artwork img { object-fit: contain; padding: 14cqw 7cqw 24cqw; filter: drop-shadow(0 2cqw 3cqw rgba(0, 0, 0, .6)); }

/* ============ Versions spéciales ============ */
.fin-tag {
  font-family: var(--display); font-weight: 800; font-size: 4.2cqw; letter-spacing: .08em; text-transform: uppercase;
  padding: .8cqw 2.2cqw; border-radius: 1cqw; color: #111;
  background: linear-gradient(110deg, #ffd1f1, #b8f3ff 35%, #fff6b0 65%, #c9b8ff);
}
.fin-or .fin-tag { background: linear-gradient(180deg, #fff1b8, #d6a12a); }
.fin-plein .fin-tag { background: #f1eee6; }

/* Holo « Chrome » : cadre miroir et barre de lumière qui balaie la carte, comme sous une lampe */
.card.fin-holo { --frame: linear-gradient(160deg, #5d6470, #e9edf3 18%, #8a92a0 36%, #ffffff 52%, #6f7783 70%, #dfe4ec 88%, #4f5560); }
.card.fin-holo .card-in::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .95) 46%, rgba(170, 230, 255, .7) 50%, rgba(255, 190, 240, .6) 53%, transparent 62%) 0 0 / 260% 100%;
  animation: chrome-bar 2.8s ease-in-out infinite;
}
@keyframes chrome-bar { 0% { background-position: 130% 0; } 70%, 100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .card.fin-holo .card-in::before { animation: none; background-position: 40% 0; } }

/* Plein cadre : la photo occupe toute la carte, texte sur dégradé */
.card.fin-plein { --frame: linear-gradient(160deg, #2b2b30, #0c0c0e 50%, #3a3a42); }
.card.fin-plein .card-photo { inset: 0; }
.card.fin-plein .card-band {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, .85));
  color: #fff; clip-path: none; padding-top: 16cqw;
}
.card.fin-plein .card-band h3 { font-size: 11.5cqw; }
/* Parti en pastille pleine : lisible quelle que soit la couleur du parti (noir, bordeaux, jaune…) */
.card.fin-plein .card-band .party {
  top: 9cqw; right: auto; left: 5cqw; opacity: 1;
  padding: .7cqw 2.2cqw; border-radius: 1cqw;
  background: var(--band); color: var(--band-ink);
  box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .28);
}
.card.fin-plein .card-band::before { content: ""; position: absolute; left: 5cqw; top: 11cqw; width: 12cqw; height: 1.2cqw; background: var(--band); box-shadow: 0 0 0 .4cqw rgba(255, 255, 255, .28); }
.card.fin-plein .card-band:has(.party)::before { display: none; }
.card.fin-plein .card-stats { background: rgba(8, 8, 10, .82); }
.card.fin-plein.fam-jaune .card-band, .card.fin-plein.fam-flandre .card-band { color: #fff; }

/* Dorée : cadre or massif, photo virée sépia, bandeau noir et or */
.card.fin-or { --frame: linear-gradient(135deg, #6e4f0c, #f9e08a 18%, #b8891f 36%, #fff3c2 52%, #a87b1e 70%, #f3d47a 86%, #7a5a12);
  background-size: 200% 200%; animation: gold 5s ease-in-out infinite alternate; }
@keyframes gold { to { background-position: 100% 100%; } }
.card.fin-or .card-photo img { filter: sepia(.65) saturate(1.3) contrast(1.05) brightness(.95); }
.card.fin-or .card-band { background: #0d0b06; color: #f6d478; }
.card.fin-or .card-stats { background: #0d0b06; border-top: 1px solid rgba(246, 212, 120, .35); }
.card.fin-or .card-stats dd { color: #f6d478; }
.card.fin-or .card-in::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 236, 170, .7) 45%, transparent 60%);
  background-size: 250% 100%; background-position: var(--gx, 30%) 0;
}

/* ============ Versions d'événement (paquets spéciaux uniquement) ============ */
.card.fin-ev .card-in::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.card.fin-ev .fin-tag { color: #111; }

/* Rouge (Saint-Nicolas) : velours rouge et or, pluie d'étoiles */
.card.fin-rouge { --frame: linear-gradient(135deg, #4a0510, #c8162c 20%, #ffd98a 38%, #9c0f22 55%, #ffe8b0 72%, #5a0812);
  background-size: 200% 200%; animation: gold 5s ease-in-out infinite alternate; }
.card.fin-rouge .card-in { background: #2a0308; }
.card.fin-rouge .card-photo img { filter: saturate(1.2) contrast(1.05) sepia(.15); }
.card.fin-rouge .card-band { background: linear-gradient(180deg, #b3122a, #6d0715); color: #ffe2a0; }
.card.fin-rouge .card-stats { background: #2a0308; border-top: 1px solid rgba(255, 217, 138, .35); }
.card.fin-rouge .card-stats dd { color: #ffd98a; }
.card.fin-rouge .card-in::before { mix-blend-mode: screen; opacity: .7;
  background:
    radial-gradient(circle, rgba(255, 226, 150, .95) 0 .45cqw, transparent .7cqw) 0 0 / 9cqw 11cqw,
    radial-gradient(circle, rgba(255, 255, 255, .8) 0 .3cqw, transparent .5cqw) 4cqw 5cqw / 13cqw 9cqw,
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 120, 120, .35), transparent 50%);
  animation: snow 9s linear infinite; }
@keyframes snow { to { background-position: 0 44cqw, 4cqw 41cqw, 0 0; } }
.card.fin-rouge .fin-tag { background: linear-gradient(180deg, #ff5a6c, #b3122a); color: #ffe8b0; }

/* Confettis (Carnaval) : losanges d'arlequin et confettis */
.card.fin-confetti { --frame: repeating-linear-gradient(45deg, #ff5fa8 0 4cqw, #ffd23f 4cqw 8cqw, #2fc7e8 8cqw 12cqw, #8a3fd6 12cqw 16cqw);
  background-size: 100% 100%; animation: none; }
.card.fin-confetti .card-in { background: #1e0830; }
.card.fin-confetti .card-band { background: linear-gradient(135deg, #5a1680, #2b0a40); color: #ffe6ff; }
.card.fin-confetti .card-stats { background: #1e0830; }
.card.fin-confetti .card-stats dd { color: #f0a3ff; }
.card.fin-confetti .card-in::before { inset: 0 0 auto; height: 42%; opacity: .95;
  background:
    radial-gradient(circle, #ffd23f 0 .9cqw, transparent 1.1cqw) 2cqw 3cqw / 17cqw 13cqw,
    radial-gradient(circle, #2fc7e8 0 .8cqw, transparent 1cqw) 10cqw 8cqw / 21cqw 15cqw,
    radial-gradient(circle, #ff5fa8 0 1cqw, transparent 1.2cqw) 6cqw 1cqw / 19cqw 17cqw,
    radial-gradient(circle, #fff 0 .5cqw, transparent .7cqw) 14cqw 5cqw / 13cqw 11cqw;
  -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent);
  animation: confetti 6s linear infinite; }
@keyframes confetti { to { background-position: 2cqw 29cqw, 10cqw 38cqw, 6cqw 35cqw, 14cqw 27cqw; } }
.card.fin-confetti .fin-tag { background: linear-gradient(110deg, #ff5fa8, #ffd23f 50%, #2fc7e8); }

/* Pavé (Tour des Flandres) : photo noir et blanc, pavés, bande jaune */
.card.fin-pave { --frame: linear-gradient(160deg, #4a4a48, #121212 45%, #f6d43a 46% 54%, #121212 55%, #3a3a38);
  background-size: 100% 100%; animation: none; }
.card.fin-pave .card-photo img { filter: grayscale(.9) contrast(1.2); }
.card.fin-pave .card-band { background: #f6d43a; color: #111; }
.card.fin-pave .card-stats { background: #121212; border-top: .8cqw solid #111; }
.card.fin-pave .card-stats dd { color: #f6d43a; }
.card.fin-pave .card-in::before { opacity: .35; mix-blend-mode: overlay;
  background:
    radial-gradient(ellipse 45% 35% at 50% 50%, rgba(255, 255, 255, .55), transparent 72%) 0 0 / 9cqw 5.5cqw,
    radial-gradient(ellipse 45% 35% at 50% 50%, rgba(255, 255, 255, .55), transparent 72%) 4.5cqw 2.75cqw / 9cqw 5.5cqw; }
.card.fin-pave .fin-tag { background: #f6d43a; }

/* Iris (Bruxelles) : bleu et or, lueur jaune */
.card.fin-iris { --frame: linear-gradient(135deg, #0c2350, #3b74d8 25%, #f2c400 45%, #1d4f9e 60%, #9cc0ff 80%, #0c2350);
  background-size: 200% 200%; animation: gold 6s ease-in-out infinite alternate; }
.card.fin-iris .card-photo img { filter: saturate(1.1) hue-rotate(-6deg); }
.card.fin-iris .card-band { background: linear-gradient(180deg, #1d4f9e, #0c2350); color: #f2c400; }
.card.fin-iris .card-stats { background: #08183a; }
.card.fin-iris .card-stats dd { color: #f2c400; }
.card.fin-iris .card-in::before { mix-blend-mode: screen; opacity: .6;
  background: radial-gradient(circle at 85% 12%, rgba(242, 196, 0, .65), transparent 32%), radial-gradient(circle at var(--mx, 20%) var(--my, 80%), rgba(120, 170, 255, .45), transparent 45%); }
.card.fin-iris .fin-tag { background: linear-gradient(180deg, #ffe066, #f2c400); }

/* Lion (11 juillet) : losanges noir et jaune */
.card.fin-lion { --frame: repeating-linear-gradient(45deg, #f2c400 0 3cqw, #111 3cqw 6cqw); background-size: 100% 100%; animation: none; }
.card.fin-lion .card-band { background: #f2c400; color: #111; }
.card.fin-lion .card-stats { background: #111; }
.card.fin-lion .card-stats dd { color: #f2c400; }
.card.fin-lion .card-in::before { mix-blend-mode: overlay; background: linear-gradient(115deg, transparent 30%, rgba(255, 230, 120, .7) 45%, transparent 60%); background-size: 250% 100%; background-position: var(--gx, 30%) 0; }
.card.fin-lion .fin-tag { background: #f2c400; }

/* Tricolore (21 juillet) : noir, jaune, rouge */
.card.fin-tricolore { --frame: linear-gradient(90deg, #111 0 33.4%, #f2c400 33.4% 66.6%, #e1001e 66.6%); background-size: 100% 100%; animation: none; }
.card.fin-tricolore .card-band { background: linear-gradient(90deg, #111 0 33.4%, #f2c400 33.4% 66.6%, #e1001e 66.6%) 0 4.5cqw / 100% 1.4cqw no-repeat, #121212; color: #fff; padding-top: 9cqw; }
.card.fin-tricolore .card-stats { background: #121212; }
.card.fin-tricolore .card-in::before { inset: 0 0 auto; height: 2.2cqw; background: linear-gradient(90deg, #111 0 33.4%, #f2c400 33.4% 66.6%, #e1001e 66.6%); }
.card.fin-tricolore .fin-tag { background: linear-gradient(90deg, #f2c400 0 50%, #ff3b4f 50%); }

/* Coq (Fêtes de Wallonie) : rayons rouges et jaunes */
.card.fin-coq { --frame: repeating-conic-gradient(from 0deg at 50% 38%, #c8102e 0 10deg, #f2c400 10deg 20deg); background-size: 100% 100%; animation: none; }
.card.fin-coq .card-band { background: linear-gradient(180deg, #d01431, #8a0a1f); color: #f2c400; }
.card.fin-coq .card-stats { background: #3a0710; }
.card.fin-coq .card-stats dd { color: #f2c400; }
.card.fin-coq .card-in::before { mix-blend-mode: overlay; opacity: .35; background: repeating-conic-gradient(from 0deg at 50% 38%, #f2c400 0 10deg, transparent 10deg 20deg); }
.card.fin-coq .fin-tag { background: #f2c400; }

/* Coquelicot (11 novembre) : photo sépia, bandeau noir, pétales rouges */
.card.fin-coquelicot { --frame: radial-gradient(circle at 50% 38%, #e0302a 0 30%, #7a1410 55%, #14140f 80%); background-size: 100% 100%; animation: none; }
.card.fin-coquelicot .card-photo img { filter: sepia(.55) contrast(1.05); }
.card.fin-coquelicot .card-band { background: linear-gradient(180deg, #1c1c16, #0d0d0a); color: #ff5a4f; }
.card.fin-coquelicot .card-stats { background: #0d0d0a; border-top: 1px solid rgba(224, 48, 42, .55); }
.card.fin-coquelicot .card-stats dd { color: #ff7a6f; }
.card.fin-coquelicot .card-in::before { mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(circle at 86% 12%, rgba(224, 48, 42, .8) 0 7%, transparent 16%), radial-gradient(circle at var(--mx, 20%) var(--my, 80%), rgba(255, 90, 79, .3), transparent 45%); }
.card.fin-coquelicot .fin-tag { background: #e0302a; color: #fff; }

/* Noir et or (Prestige) : laque noire, filet d'or, photo noir et blanc */
.card.fin-noir { --frame: linear-gradient(135deg, #8a6410, #f6d478 14%, #0b0b0b 15% 85%, #f6d478 86%, #8a6410);
  background-size: 100% 100%; animation: none; }
.card.fin-noir .card-in { background: #050505; }
.card.fin-noir .card-photo img { filter: grayscale(1) contrast(1.15) brightness(.95); }
.card.fin-noir .card-band { background: #050505; color: #f6d478; }
.card.fin-noir .card-stats { background: #050505; border-top: 1px solid rgba(246, 212, 120, .45); }
.card.fin-noir .card-stats dd { color: #f6d478; }
.card.fin-noir .card-in::before { inset: 1.8cqw; border: .45cqw solid rgba(246, 212, 120, .85); border-radius: 1.6cqw;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 236, 170, .35) 45%, transparent 58%) var(--gx, 30%) 0 / 250% 100%; }
.card.fin-noir .fin-tag { background: linear-gradient(180deg, #fff1b8, #d6a12a); }

/* Pastilles des versions */
.fin-dot, .var-dots i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.d-normal { background: #8d8d95; }
.d-holo { background: linear-gradient(135deg, #5d6470, #ffffff 45%, #8a92a0 60%, #e9edf3); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.d-plein { background: #111; box-shadow: inset 0 0 0 2px #f1eee6; }
.d-or { background: linear-gradient(135deg, #fff1b8, #d6a12a); }
.d-noir { background: #0b0b0b; box-shadow: inset 0 0 0 2px #e2b33c; }
.d-rouge { background: radial-gradient(circle at 35% 35%, #ffd98a 0 18%, #c8162c 22%); }
.d-confetti { background: conic-gradient(#ff5fa8 0 25%, #ffd23f 0 50%, #2fc7e8 0 75%, #8a3fd6 0); }
.d-pave { background: linear-gradient(135deg, #3a3a38 0 45%, #f6d43a 45% 60%, #3a3a38 60%); }
.d-iris { background: radial-gradient(circle at 50% 40%, #f2c400 0 28%, #1d4f9e 32%); }
.d-lion { background: repeating-linear-gradient(45deg, #f2c400 0 3px, #111 3px 6px); }
.d-tricolore { background: linear-gradient(90deg, #111 0 33%, #f2c400 33% 66%, #e1001e 66%); }
.d-coq { background: repeating-conic-gradient(#c8102e 0 30deg, #f2c400 30deg 60deg); }
.d-coquelicot { background: radial-gradient(circle at 50% 50%, #111 0 22%, #e0302a 26%); }
.var-dots { position: absolute; right: 3cqw; bottom: 20cqw; z-index: 5; display: flex; gap: 1.4cqw; padding: 1.2cqw; background: rgba(10, 10, 12, .62); border-radius: 99px; }
.var-dots i { width: 3.4cqw; height: 3.4cqw; }
.fin-word[class*="d-"] { background: none; box-shadow: none; }
.fin-word.d-noir { color: var(--gold); }
.fin-word.d-rouge { color: #d6253a; }
.fin-word.d-confetti { color: #b04fd6; }
.fin-word.d-pave, .fin-word.d-lion, .fin-word.d-coq { color: var(--gold); }
.fin-word.d-iris { color: #3b74d8; }
.fin-word.d-tricolore { color: #e1001e; }
.fin-word.d-coquelicot { color: #e0302a; }
.fin-word.d-holo { color: #8a92a0; }
.fin-word.d-or { color: var(--gold); }
.fin-word.d-plein { color: var(--ink); }

.slot .tag.special { background: linear-gradient(110deg, #ffd1f1, #b8f3ff 35%, #fff6b0 65%, #c9b8ff); color: #111; }

.versions { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 20px; }
.ver { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--line); background: transparent; padding: 6px 10px; border-radius: 4px;
  font-family: var(--display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.ver small { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0; }
.ver.is-active { border-color: var(--ink); color: var(--ink); }

button, .slot, .pack-visual, .card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ============ Mobile ============ */
@media (max-width: 760px) {
  main { padding: 20px 14px calc(56px + env(safe-area-inset-bottom)); }
  h1 { font-size: 34px; }
  .topbar { padding: 0 14px; gap: 10px; height: 54px; }
  .brand-name { display: none; }
  .tab { padding: 0 10px; font-size: 17px; }
  .tab.is-active::after { left: 10px; right: 10px; }
  .wallet { font-size: 14px; }

  .shop-head { margin-bottom: 20px; }
  .shop-head > div:first-child { flex: 1 1 100%; min-width: 0; }
  .tab-count { display: none; }
  /* minmax(0, 1fr) : une colonne ne s'élargit jamais à cause d'un texte long (sinon la page déborde, Safari dézoome) */
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .pack-info { flex-direction: column; gap: 4px; }
  .pack-info h2 { font-size: 20px; }
  .pack-info p { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* Ouverture : les cartes les unes sous les autres, on fait défiler la page vers le bas */
  .stage { justify-content: flex-start; padding: 70px 0 170px; }
  .stage-pack { width: min(260px, 66vw); margin-top: 6vh; }
  .reveal { flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%; max-width: none; padding: 24px 0 30px; gap: 26px; margin-top: 4vh; }
  .slot { --w: 70vw; flex: none; max-width: 330px; animation-name: deal-m; }
  @keyframes deal-m { from { opacity: 0; transform: translateY(40px) scale(.92); } }
  .slot:not(.is-flipped):hover .inner { transform: none; }
  .stage-bar { padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); }
  .stage-actions .btn { padding: 11px 14px; font-size: 16px; }

  /* Album */
  .binder-head { gap: 14px; margin-bottom: 14px; }
  .filters { width: 100%; }
  .filters input[type=search] { width: 100%; flex: 1 1 100%; }
  .filters select { flex: 1; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 20px; padding: 0 14px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 10px 10px; font-size: 15px; }
  /* Classement : les quatre portées tiennent sur l'écran (pas de défilement caché) */
  .rank-tabs { flex-wrap: wrap; overflow-x: visible; padding: 0; }
  .rank-tabs .chip { padding: 9px 8px; font-size: 14px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .grid .card:hover { transform: none; }

  /* Détail plein écran */
  dialog { max-width: 100vw; width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
  dialog.ask-dlg { width: calc(100vw - 32px); max-width: calc(100vw - 32px); height: fit-content; max-height: calc(100dvh - 24px - var(--sat)); margin: calc(12dvh + var(--sat)) auto auto; }
  .ask-btns .btn { flex: 1 1 auto; }
  .detail-inner { grid-template-columns: 1fr; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); gap: 18px; border-radius: 0; border: 0; min-height: 100%; }
  .detail-card { max-width: 260px; margin: 8px auto 0; width: 100%; }
  .detail-info h2 { font-size: 34px; }
  .close { position: fixed; top: 10px; right: 10px; background: var(--bg-3); z-index: 2; }
  .foot { padding: 20px 14px calc(16px + env(safe-area-inset-bottom)); gap: 16px; }
  .foot-groups { flex-direction: column; gap: 16px; }
  .foot-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .foot-btn { padding: 10px 12px; text-align: center; }
  .foot-btn.is-danger { grid-column: 1 / -1; }
  .foot-meta { flex-direction: column; align-items: center; text-align: center; }
  .foot-meta p { flex: none; }
}


/* ============ Nouvelles catégories ============ */
:root {
  --p-biere: #a8650c;
  --p-folklore: #b8321c;
  --p-groupe: #2b2a6b;
  --p-festival: #b8175a;
  --p-science: #17708c;
  --p-militaire: #4b5530;
  --p-animal: #2f6b2a;
  --p-aviation: #2a5a9e;
  --p-rail: #8a2a2a;
  --p-exploration: #1f6f7a;
  --p-finance: #8a6a1c;
}
.card-top .live.unesco { background: #0b62a8; color: #fff; }
.card-top .live.unesco::before { display: none; }

/* ============ Séries ============ */
.tab .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-left: 4px; vertical-align: 3px; }
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.series {
  border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg-2); padding: 18px;
  display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: border-color .15s ease;
}
.series:hover { border-color: var(--ink-2); }
.series.is-complete:not(.is-claimed) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 10px 30px -18px var(--gold); }
.series-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.series h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.02; text-transform: uppercase; }
.series-count { font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.series p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.series-thumbs { display: flex; flex-wrap: wrap; gap: 5px; }
.thumb { width: 34px; height: 46px; border-radius: 3px; background: var(--bg-3) center 20% / cover no-repeat; flex: none; }
.thumb.is-empty { border: 1px dashed var(--line); }
.thumb.more { display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-2); background: transparent; }
.bar { height: 6px; background: var(--bg-3); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--ink); border-radius: 99px; }
.series.is-complete .bar span { background: linear-gradient(90deg, #f6d478, #d29c1c); }
.series-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.series-foot .btn { padding: 7px 14px; font-size: 15px; }
.claimed { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; color: var(--ink-2); }
.series-banner { display: flex; align-items: center; gap: 16px; margin: -12px 0 22px; padding: 10px 14px; border: 1.5px solid var(--gold); border-radius: 4px; font-size: 14px; }
.series-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.chip-s { border: 1.5px solid var(--line); background: transparent; padding: 5px 10px; border-radius: 4px; font-family: var(--display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.chip-s:hover { border-color: var(--ink); }
@media (max-width: 760px) {
  .series-grid { grid-template-columns: 1fr; gap: 12px; }
  .series { padding: 14px; }
  .tab { padding: 0 8px; font-size: 16px; }
}


/* ============ Langue, garantie, succès ============ */
.lang-btn { width: auto; padding: 0 10px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .06em; }
.check em { font-style: normal; }
.free-box { flex-direction: column; align-items: flex-end; gap: 8px; }
.free-line, .pity-line { display: flex; align-items: center; gap: 12px; }
.pity-bar { width: 90px; height: 6px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.pity-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--r-epique), var(--r-legendaire)); }

.ach-head { width: 100%; }
.ach-total { max-width: 520px; margin-top: 12px; }
.ach-total span { background: linear-gradient(90deg, #f6d478, #d29c1c); }
.ach-group { margin-bottom: 34px; }
.ach-group h2 { font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; margin: 0 0 14px; }
.ach-group h2 small { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--ink-2); margin-left: 6px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ach { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg-2); opacity: .75; }
.ach.is-got { opacity: 1; border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.ach .medal { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--ink-2); }
.ach .medal svg { width: 24px; height: 24px; }
.ach .medal b { font-family: var(--display); font-size: 22px; }
.ach.is-got .medal { background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b33c 50%, #9c7112); color: #2a1d00; box-shadow: 0 4px 14px -6px #e2b33c; }
.ach-body { flex: 1; min-width: 0; }
.ach-body b { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.ach-body p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.ach-body .bar { height: 4px; margin-top: 8px; }
.ach-prog { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.ach .price { font-size: 13px; align-self: flex-start; }
.ach.is-secret .ach-body b { color: var(--ink-2); }

.ach-toast {
  position: fixed; top: 76px; left: 50%; translate: -50% -30px; opacity: 0; z-index: 300; pointer-events: none;
  display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 8px;
  background: #111216; color: #f1eee6; border: 1.5px solid #e2b33c; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 0 30px -8px #e2b33c;
  transition: opacity .25s ease, translate .35s cubic-bezier(.2, .9, .3, 1.2);
}
.ach-toast.is-on { opacity: 1; translate: -50% 0; pointer-events: auto; cursor: pointer; }
.ach-toast .medal { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #2a1d00;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b33c 50%, #9c7112); }
.ach-toast .medal svg { width: 24px; height: 24px; }
.ach-toast-text small { display: block; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #e2b33c; }
.ach-toast-text b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1.05; }
.ach-toast-text > span { display: block; font-size: 13px; color: #c9c7c0; margin-top: 2px; }
.ach-toast em { font-style: normal; font-family: var(--mono); font-weight: 600; color: #f6d478; margin-left: 6px; }

@media (max-width: 760px) {
  .free-box { align-items: flex-start; }
  .ach-grid { grid-template-columns: 1fr; }
  .ach-toast { top: 64px; width: calc(100vw - 28px); }
  .topbar-right { gap: 6px; }
  .icon-btn { width: 32px; height: 32px; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tab { padding: 0 7px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Mobile : navigation en barre fixe en bas de l'écran */
@media (max-width: 760px) {
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; overflow: visible;
    height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr);
  }
  .tab { padding: 0 4px; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 4px; }
  .tab.is-active::after { top: 0; bottom: auto; left: 20%; right: 20%; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ============ Jeux ============ */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.game-tile { display: flex; align-items: center; gap: 16px; text-align: left; padding: 18px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg-2); transition: border-color .15s ease, transform .15s ease; }
.game-tile:hover { border-color: var(--ink-2); transform: translateY(-2px); }
.game-icon { width: 54px; height: 54px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #1a1300; background: linear-gradient(135deg, #fff1b8, #d6a12a); }
.game-icon svg { width: 28px; height: 28px; }
.game-text { flex: 1; min-width: 0; }
.game-text b { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; line-height: 1.05; }
.game-text span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.game-best { text-align: right; font-family: var(--mono); font-weight: 600; font-size: 15px; }
.game-best small { display: block; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

.game-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.game-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase; }
.game-extra { margin-left: auto; display: flex; gap: 18px; }
.gstat { text-align: right; }
.gstat small { display: block; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.gstat b { font-family: var(--mono); font-size: 22px; }
.gstat b.bad { color: var(--danger); }
.game-rules { color: var(--ink-2); font-size: 14px; line-height: 1.5; max-width: 820px; margin: 0 0 18px; }
.small { font-size: 12px; }
.game-result { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--bg-2); margin: 16px 0; }
.game-result.win { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.game-result b { font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1.05; }
.game-result small { color: var(--ink-2); }
/* Version serveur : pièces données par la base en fin de partie ; partie sans pièces (hors ligne ou refus) */
.game-gain { font-weight: 700; color: var(--ink); }
.game-gain:empty { display: none; }
.game-nocoins { margin: -8px 0 14px; padding: 8px 12px; border-radius: 6px; border: 1.5px dashed var(--line); color: var(--ink-2); font-size: 14px; }
.game-wait { padding: 24px 0; }
.game-log { list-style: none; padding: 0; margin: 16px 0 0; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line); }
.game-log li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.game-log li.good { color: var(--r-peu-commune); }
.game-log li.bad { color: var(--danger); }

/* Formation */
.hemi { position: relative; margin: 0 0 18px; }
.hemi-bar { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: var(--bg-3); }
.hemi-bar span { height: 100%; }
.hemi-rest { background: var(--bg-3); }
.hemi-mark { position: absolute; left: calc(76 / 150 * 100%); top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 20px; }
.party-tile { padding: 10px 12px; border-radius: 6px; border: 1.5px solid var(--line); border-left: 5px solid var(--fam); background: var(--bg-2); }
.party-tile .pt-head { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; }
.party-tile .pt-head span { font-family: var(--mono); font-size: 14px; }
.party-tile small { display: block; font-size: 11px; color: var(--ink-2); margin: 2px 0 6px; }
.party-tile .bar { height: 4px; }
.party-tile .bar span { background: var(--fam); }
.party-tile.is-in { background: color-mix(in srgb, var(--fam) 18%, var(--bg-2)); border-color: var(--fam); }
.party-tile.is-refuse, .party-tile.is-cordon { opacity: .45; }
.hand-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.hand-head h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.hand { display: grid; grid-template-columns: repeat(5, minmax(0, 170px)); gap: 10px; margin-bottom: 8px; }
.mini { display: flex; flex-direction: column; text-align: left; border: 1.5px solid var(--line); border-top: 5px solid var(--fam); border-radius: 6px; background: var(--bg-2); overflow: hidden; padding: 0 0 8px; transition: transform .15s ease, border-color .15s ease; }
.mini:hover { transform: translateY(-4px); border-color: var(--fam); }
.mini.is-useless { opacity: .5; }
.mini-img { aspect-ratio: 4 / 3; background: var(--bg-3) center 20% / cover no-repeat; }
.mini-party { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 6px 8px 0; }
.mini b { font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: uppercase; line-height: 1.05; padding: 2px 8px; }
.mini-foot { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; padding: 4px 8px 0; }
.mini-foot .gem { width: 8px; height: 8px; box-shadow: none; }

/* Belgle */
.belgle { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 28px; align-items: start; }
.belgle-photo { aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--bg-3); }
.belgle-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: filter .6s ease; transform: scale(1.08); }
.belgle-side h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.belgle-hints { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 16px; font-size: 15px; }
.belgle-hints dt { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-size: 13px; }
.belgle-hints dd { margin: 0; font-weight: 600; }
.belgle-squares { font-size: 22px; letter-spacing: 3px; margin-bottom: 10px; }
.belgle-guesses { margin: 0 0 14px; padding-left: 20px; font-size: 14px; }
.belgle-guesses .bad { color: var(--danger); text-decoration: line-through; }
.belgle-guesses .good { color: var(--r-peu-commune); font-weight: 600; }
.belgle-form { display: flex; gap: 8px; }
.belgle-form input { flex: 1; font: inherit; height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--bg-2); color: var(--ink); }
.belgle-form input:focus { outline: none; border-color: var(--ink); }
.belgle-answer { font-family: var(--display); font-weight: 700; font-size: 20px; text-transform: uppercase; }
/* Belgle du jour, version serveur : répartition anonyme des essais */
.belgle-stats { width: 100%; max-width: 340px; }
.belgle-found { margin: 4px 0 8px; font-weight: 600; font-size: 14px; }
.belgle-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.belgle-dist li { display: grid; grid-template-columns: 1.1em 1fr; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.belgle-bar { display: block; min-width: 2.2em; box-sizing: border-box; padding: 2px 6px; border-radius: 3px; background: var(--bg-3); color: var(--ink); text-align: right; }
.belgle-dist li.is-me .belgle-bar { background: var(--gold); color: var(--bg); font-weight: 700; }

/* Chronologie */
.chrono-current { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.chrono-current p { margin: 0; font-family: var(--display); font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--ink-2); }
.chrono-current .ctile { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.timeline { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x proximity; }
.ctile { flex: none; width: 128px; display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg-2); overflow: hidden; scroll-snap-align: center; }
.ctile-img { aspect-ratio: 4 / 3; background: var(--bg-3) center 20% / cover no-repeat; }
.ctile-ev { display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 30px; color: #f6d478; background: #121318; }
.ctile b { font-family: var(--display); font-weight: 800; font-size: 14px; line-height: 1.05; text-transform: uppercase; padding: 6px 8px 0; }
.ctile small { font-size: 11px; color: var(--ink-2); padding: 2px 8px; }
.ctile-year { margin-top: auto; padding: 4px 8px 8px; font-family: var(--mono); font-weight: 600; font-size: 18px; }
.gap { flex: none; width: 46px; border: 1.5px dashed var(--line); border-radius: 6px; background: transparent; color: var(--ink-2);
  font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; writing-mode: vertical-rl; transition: all .15s ease; }
.gap:hover { border-color: var(--gold); color: var(--ink); background: color-mix(in srgb, var(--gold) 12%, transparent); }

/* Tour de Belgique */
.tour-q { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg-2); margin-bottom: 14px; }
.tour-img { width: 84px; height: 64px; flex: none; border-radius: 4px; background: var(--bg-3) center / cover no-repeat; }
.tour-q small { display: block; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tour-q b { display: block; font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1.05; }
.tour-q span { font-size: 13px; color: var(--ink-2); }
.tour-score { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tour-score > b { font-family: var(--mono); font-size: 30px; color: var(--gold); }
.tour-map { width: 100%; max-width: 900px; max-height: max(320px, calc(100vh - 400px)); display: block; margin: 0 auto; }
.tour-prov { stroke: var(--bg); stroke-width: 2.5; stroke-linejoin: round; pointer-events: none; }
.tour-prov.r-fl { fill: color-mix(in srgb, #f2c400 16%, var(--bg-3)); }
.tour-prov.r-wa { fill: color-mix(in srgb, #c8102e 10%, var(--bg-3)); }
.tour-prov.r-bx { fill: color-mix(in srgb, #1d4f9e 22%, var(--bg-3)); }
.tour-city { fill: var(--ink); stroke: var(--bg); stroke-width: 2; pointer-events: none; }
.tour-city-name { font-family: var(--text); font-weight: 600; font-size: 15px; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; pointer-events: none; }
.tour-edge path { fill: none; stroke: var(--ink-2); stroke-width: 5; stroke-linejoin: round; pointer-events: none; }
.tour-map.is-active { cursor: crosshair; }
.tour-land { fill: var(--bg-3); stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; }
.tour-map.is-active:hover .tour-prov { filter: brightness(1.04); }
.tour-guess { fill: var(--danger); stroke: #fff; stroke-width: 3; }
.tour-true { fill: var(--r-peu-commune); stroke: #fff; stroke-width: 3; }
.tour-line { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 8 6; }

/* Plus ou moins */
.pom-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pom-q { margin: 0 0 14px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.pom { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; max-width: 820px; }
.pom-card { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 2px solid var(--line); background: var(--bg-2); transition: border-color .2s, box-shadow .2s; }
.pom-card.is-ok { border-color: #2f9e5a; box-shadow: 0 0 0 3px color-mix(in srgb, #2f9e5a 30%, transparent); }
.pom-card.is-ko { border-color: #d6253a; box-shadow: 0 0 0 3px color-mix(in srgb, #d6253a 30%, transparent); }
.pom-img { display: block; aspect-ratio: 4 / 3; background: var(--bg-3) center 25% / cover no-repeat; }
.pom-info { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.pom-info b { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1.02; }
.pom-info small { display: block; color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.pom-val { display: block; margin-top: auto; padding-top: 10px; font-family: var(--mono); font-weight: 600; font-size: 30px; color: var(--gold); }
.pom-val em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.pom-vs { position: absolute; left: 50%; top: 32%; translate: -50% -50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-family: var(--display); font-size: 20px; box-shadow: 0 0 0 4px var(--bg); }
.pom-btns { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; }
.pom-btns .btn { justify-content: center; padding: 12px 10px; font-size: 17px; }
.pom + .game-result { margin-top: 16px; max-width: 820px; }

@media (max-width: 760px) {
  .games-grid { grid-template-columns: 1fr; }
  .game-text b { font-size: 19px; }
  .game-head h2 { font-size: 24px; width: 100%; order: 2; }
  .game-extra { margin-left: auto; }
  .hand { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 132px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; margin: 0 -14px 8px; padding: 0 14px 6px; }
  .mini { scroll-snap-align: start; }
  .belgle { grid-template-columns: 1fr; gap: 16px; }
  .belgle-photo { max-width: 260px; margin: 0 auto; width: 100%; }
  .tour-q { flex-wrap: wrap; }
  .tour-score { margin-left: 0; align-items: flex-start; width: 100%; }
  .pom { gap: 10px; }
  .pom-q { font-size: 15px; }
  .pom-info { padding: 10px; }
  .pom-info b { font-size: 17px; }
  .pom-info small { font-size: 11.5px; }
  .pom-val { font-size: 21px; }
  .pom-vs { width: 40px; height: 40px; font-size: 15px; top: 24%; }
  .pom-btns .btn { padding: 11px 6px; font-size: 15px; }
  .tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tab { font-size: 12.5px; padding: 0 1px; letter-spacing: .01em; }
  /* Formation : partis sur trois colonnes, plus compacts */
  .parties { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .party-tile { padding: 7px 8px; border-left-width: 4px; }
  .party-tile .pt-head { font-size: 13px; gap: 4px; }
  .party-tile .pt-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .party-tile .pt-head span { font-size: 12px; }
  .party-tile small { font-size: 10px; }
}
/* Onglets du bas sur les plus petits écrans (« PRESTATIES » touchait le bord) */
@media (max-width: 370px) { .tab { font-size: 11.5px; letter-spacing: 0; } }

/* ============ Échanges ============ */
.t-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.t-actions .game-tile { width: 100%; }
.t-paste { display: flex; gap: 8px; max-width: 560px; margin: 16px 0 34px; }
.t-paste input, #t-search, #t-gsearch { flex: 1; width: 100%; font: inherit; height: 42px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--bg-2); color: var(--ink); }
.t-paste input:focus, #t-search:focus, #t-gsearch:focus { outline: none; border-color: var(--ink); }
.t-pending h2, .t-pickers h3, .t-incoming h3 { font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; margin: 0 0 12px; }
.t-pending h2 small { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--ink-2); margin-left: 6px; text-transform: none; }
.t-empty { color: var(--ink-2); font-size: 14px; margin: 4px 0; }
.t-offer { display: flex; align-items: center; gap: 18px; padding: 14px; margin-bottom: 12px; border: 1.5px solid var(--line); border-left: 5px solid var(--gold); border-radius: 6px; background: var(--bg-2); }
.t-offer-sides { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.t-offer-btns { display: flex; flex-direction: column; gap: 8px; }
.t-side h3 { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; }
.t-side h3 small { font-family: var(--mono); font-weight: 500; margin-left: 4px; }

.t-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.t-item:last-child { border-bottom: 0; }
.t-thumb { width: 40px; height: 52px; flex: none; border-radius: 3px; background: var(--bg-3) center 20% / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.t-thumb.is-ev { display: grid; place-items: center; background: #121318; color: #f6d478; font-family: var(--display); font-weight: 800; font-size: 13px; }
.t-text { flex: 1; min-width: 0; }
.t-text b { display: block; font-family: var(--display); font-weight: 800; font-size: 17px; text-transform: uppercase; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-text small { display: flex; align-items: center; flex-wrap: wrap; gap: 0 5px; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.t-text small .gem { width: 8px; height: 8px; box-shadow: none; }
.t-text em { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--r-peu-commune); margin-top: 3px; }
.t-item.is-bad em { color: var(--danger); }
.t-fin { font-weight: 700; }
.t-x { width: 30px; height: 30px; flex: none; border: 1.5px solid var(--line); border-radius: 4px; background: transparent; font-size: 18px; line-height: 1; }
.t-x:hover { border-color: var(--danger); color: var(--danger); }
.d-normal { box-shadow: inset 0 0 0 2px var(--ink-2); }

.t-tray { position: sticky; top: 68px; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 22px; align-items: end; padding: 14px 16px; margin-bottom: 24px;
  border: 1.5px solid var(--ink); border-radius: 6px; background: var(--bg-2); box-shadow: 0 -10px 0 var(--bg), 0 12px 30px -20px rgba(0, 0, 0, .5); }
.t-pickers { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.t-pickers .small { margin: -6px 0 12px; }
.t-dups, .t-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
.t-pick { cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.t-pick:hover { transform: translateY(-3px); }
.t-pick.is-picked { opacity: .35; }
.t-pick.is-picked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 48px; color: var(--ink); }
.t-results { margin-top: 10px; }
.t-result { padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.t-result .t-item { border: 0; padding-bottom: 4px; }
.t-fins { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 50px; }
.t-finbtn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1.5px solid var(--line); border-radius: 4px; background: transparent;
  font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.t-finbtn:hover { border-color: var(--ink); }
.t-finbtn.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }

.t-qr-wrap { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 32px; align-items: start; }
.t-qr { aspect-ratio: 1; padding: 10px; border-radius: 8px; background: #fff; border: 1.5px solid var(--line); }
.t-qr svg { display: block; width: 100%; height: 100%; }
.t-qr-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.t-link { width: 100%; font-family: var(--mono); font-size: 12px; padding: 8px 10px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-3); color: var(--ink-2); }
.t-incoming { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.t-accept { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.t-warn { color: var(--danger); font-size: 14px; }

.t-scanner { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px;
  background: rgba(8, 9, 12, .94); color: #f1eee6; }
.t-scan-box { position: relative; width: min(86vw, 420px); aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #000; }
.t-scan-box video { width: 100%; height: 100%; object-fit: cover; }
.t-scan-frame { position: absolute; inset: 14%; border: 3px solid #e2b33c; border-radius: 8px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.t-scanner p { margin: 0; font-family: var(--display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 760px) {
  .t-actions { grid-template-columns: 1fr; }
  .t-offer { flex-direction: column; align-items: stretch; }
  .t-offer-btns { flex-direction: row; }
  .t-offer-sides, .t-pickers, .t-incoming, .t-qr-wrap { grid-template-columns: 1fr; gap: 18px; }
  .t-tray { top: 62px; box-shadow: 0 -10px 0 var(--bg), 0 12px 30px -20px rgba(0, 0, 0, .5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px 12px; }
  .t-tray-go { grid-column: 1 / -1; }
  .t-tray-go .btn { width: 100%; justify-content: center; }
  .t-tray .t-item { padding: 4px 0; }
  .t-tray .t-thumb { width: 28px; height: 36px; }
  .t-tray .t-text b { font-size: 14px; }
  .t-tray .t-text small { display: none; }
  .t-dups, .t-cards { grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
  .t-qr { max-width: 340px; width: 100%; margin: 0 auto; }
  .t-fins { padding-left: 0; }
}

/* ============ Lot de 5 paquets ============ */
.buy10 { align-self: flex-start; padding: 7px 12px; font-size: 15px; gap: 10px; }
.buy10 .price { font-size: 14px; }
.buy10 small { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--r-peu-commune); letter-spacing: 0; }
.buy10:disabled small { color: inherit; }
.stage-pack .bulk-badge { position: absolute; top: 18%; right: -14px; z-index: 2; padding: 4px 12px; border-radius: 3px; rotate: 8deg;
  background: var(--gold-hi); color: #1a1300; font-family: var(--display); font-weight: 800; font-size: 30px; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .6); }
.stage-pack.is-torn .bulk-badge { opacity: 0; transition: opacity .2s; }
.stage.is-bulk { justify-content: flex-start; }
.stage.is-bulk .stage-pack { margin-top: 14vh; }
.reveal.is-bulk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 12px; width: min(820px, 100%); padding: 16px 0 24px; }
.reveal.is-bulk .slot { --w: 100%; width: auto; }
/* Lot de 5 : 25 cartes à l'écran, les reflets animés des cadres et finitions restent figés (ils tournent dans la vue détail) */
.reveal.is-bulk .card, .reveal.is-bulk .card *, .reveal.is-bulk .card *::before, .reveal.is-bulk .card *::after { animation: none; }
.reveal.is-bulk .slot .tag { font-size: 10px; top: -9px; padding: 2px 6px; letter-spacing: .06em; white-space: nowrap; }
@media (max-width: 760px) {
  .buy10 { align-self: stretch; justify-content: center; padding: 7px 8px; font-size: 14px; gap: 6px; }
  .reveal.is-bulk { overflow: visible; scroll-snap-type: none; gap: 12px 6px; padding: 12px 10px 24px; margin-top: 0; }
  .reveal.is-bulk .slot { max-width: none; flex: initial; }
  .reveal.is-bulk .slot .tag { font-size: 8px; padding: 1px 4px; top: -7px; }
  .stage-pack .bulk-badge { font-size: 24px; right: -6px; }
}

/* Échanges : onglets « je donne / je demande » (mobile) et recherche */
.t-switch { display: none; }
.t-missing { margin: 10px 0 4px; }
.t-count { font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin: 8px 0 0; }
@media (max-width: 760px) {
  .t-switch { display: grid; grid-template-columns: 1fr 1fr; margin: -8px 0 16px; border-bottom: 1px solid var(--line); }
  .t-tab { border: 0; background: none; padding: 10px 4px; position: relative; color: var(--ink-2);
    font-family: var(--display); font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; }
  .t-tab small { display: block; font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: none; letter-spacing: 0; }
  .t-tab.is-active { color: var(--ink); }
  .t-tab.is-active::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 3px; background: var(--ink); }
  .t-pickers[data-tab="give"] .t-pick-want, .t-pickers[data-tab="want"] .t-pick-give { display: none; }
  .t-pickers h3 { display: none; }
}

/* Paquet spécial (Prestige) */
.pack-card.is-special .pack-visual { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .28)) drop-shadow(0 0 18px rgba(240, 194, 74, .35)); }
.pack-note { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }

/* ============ Carte du jour, événements, fusion ============ */
.shop-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; margin-left: auto; }
.daily-btn, .daily-done { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 16px 10px 10px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--bg-2); }
.daily-btn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 8px 24px -12px var(--gold); animation: daily-glow 2.4s ease-in-out infinite; }
@keyframes daily-glow { 50% { box-shadow: 0 0 0 1px var(--gold), 0 8px 30px -8px var(--gold-hi); } }
.daily-btn:hover { transform: translateY(-1px); }
.daily-gift { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #2a1d00; background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b33c 50%, #9c7112); }
.daily-done .daily-gift { background: var(--bg-3); color: var(--ink-2); }
.daily-gift svg { width: 22px; height: 22px; }
.daily-btn b, .daily-done b { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1.05; }
.daily-btn small, .daily-done small { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-top: 2px; }
/* Pot de pièces : se remplit au fil des heures, bouton Récolter (doré quand il est plein) */
.pot-box { display: flex; align-items: center; gap: 12px; width: min(360px, 100%); padding: 10px 12px 10px 10px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--bg-2); }
.pot-box.is-full { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pot-icon { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); background: var(--bg-3); }
.pot-box.is-full .pot-icon { color: #2a1d00; background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b33c 50%, #9c7112); }
.pot-icon svg { width: 22px; height: 22px; }
.pot-main { flex: 1; min-width: 0; }
.pot-main b { display: block; font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; line-height: 1.05; }
.pot-main small { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.pot-bar { display: block; height: 6px; margin-top: 6px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.pot-bar span { display: block; height: 100%; background: linear-gradient(90deg, #9c7112, var(--gold)); transition: width .4s ease; }
.pot-btn { flex: none; padding: 6px 12px; }
.pot-box.is-full .pot-btn { animation: daily-glow 2.4s ease-in-out infinite; }
.tab.has-dot::before { content: ""; position: absolute; top: 12px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

.event-line { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.event-line:empty { display: none; }
.event-line b { color: var(--ink); }
.pack-card { position: relative; }
.event-ribbon { position: absolute; top: 34px; left: -6px; z-index: 2; padding: 4px 10px; border-radius: 2px; background: var(--danger); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); }

.side-dlg { max-width: min(720px, calc(100vw - 32px)); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 28px 32px 32px; }
.side-dlg h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 34px; text-transform: uppercase; }
.side-dlg h3 { margin: 26px 0 10px; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.side-dlg .close { top: 10px; right: 10px; }

/* Fenêtre de question du jeu (dialog.js : à la place de confirm / alert / prompt). Petite boîte en haut de l'écran,
   jamais plein écran, même sur mobile (sélecteur « dialog.ask-dlg » plus fort que les règles « dialog » plein écran) ;
   en haut pour rester visible au-dessus du clavier de l'iPhone. */
dialog.ask-dlg { width: min(440px, calc(100vw - 32px)); max-width: min(440px, calc(100vw - 32px)); height: fit-content;
  max-height: calc(100dvh - 24px - var(--sat)); margin: calc(12dvh + var(--sat)) auto auto; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 22px 22px 20px; color: var(--ink); }
.ask-dlg h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; text-transform: uppercase; overflow-wrap: anywhere; }
.ask-dlg h2[hidden] { display: none; }
.ask-text { margin: 0; font-size: 16px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.ask-field { display: block; margin: 14px 0 0; }
.ask-field[hidden], .ask-btns [hidden] { display: none; }
/* Avec un champ : plus haut, pour rester au-dessus du clavier sur un petit téléphone (iPhone SE) */
dialog.ask-dlg.has-field { margin-top: calc(6dvh + var(--sat)); }
/* 16 px : l'iPhone ne zoome pas sur le champ */
.ask-field input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.ask-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.ask-btns .btn { justify-content: center; }
html.ask-open { overflow: hidden; }
.fuse-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.fuse-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.fuse-recipe { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.fuse-recipe b { font-family: var(--mono); font-weight: 600; font-size: 14px; }
.fuse-recipe i { font-style: normal; color: var(--ink-2); margin: 0 4px; }
.fuse-recipe .gem, .fuse-holo .gem { width: 9px; height: 9px; box-shadow: none; }
.fuse-row small, .fuse-holo small { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.fuse-row .btn, .fuse-holo .btn { padding: 6px 12px; font-size: 14px; }
.fuse-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fuse-holo .fuse-btns { margin-left: auto; }
.fuse-result.is-many { flex-direction: column; align-items: stretch; gap: 12px; }
.fuse-result.is-many b { margin: 0; font-size: 20px; }
.fuse-lot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fuse-result .fuse-lot .cell { width: auto; min-width: 0; }
.fuse-lot .cell.is-new { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.fuse-lot .party { display: none; } /* vignettes : l'étiquette du parti chevaucherait le nom */
.fuse-holos { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.fuse-holo { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fuse-name { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuse-result { display: flex; align-items: center; gap: 22px; margin: 20px 0 0; padding: 16px; border-radius: 6px; border: 1.5px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--bg-2)); animation: fade-in .3s ease; }
.fuse-result .cell { width: 150px; flex: none; }
.fuse-result b { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1.05; margin-top: 8px; }
.fuse-result small { color: var(--ink-2); }
.tag-inline { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 2px; background: var(--gold-hi); color: #1a1300; }
.tag-inline.dup { background: var(--bg-3); color: var(--ink-2); }
/* Nouvelle version d'une carte déjà possédée : contour doré, pas le fond plein d'une nouvelle carte */
.tag-inline.ver, .slot .tag.ver { background: #17140b; color: var(--gold-hi, #f6d478); box-shadow: inset 0 0 0 1.5px var(--gold-hi, #f6d478); }
.slot .tag { white-space: nowrap; }
.slot .tag.ver { font-size: 12px; letter-spacing: .04em; }
.fuse-lot .cell.is-ver { outline: 2px dashed var(--gold); outline-offset: 3px; border-radius: 6px; }

.daily-dlg { max-width: 360px; text-align: center; color: #f1eee6; padding-top: 44px; }
.daily-dlg .close { top: 0; right: 0; color: #c9c7c0; }
.daily-kicker { margin: 0 0 18px; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-hi); }
.daily-slot { --w: min(260px, 70vw); margin: 0 auto; animation: deal .6s cubic-bezier(.2, .9, .25, 1.05) backwards; }
.daily-hint, .daily-after { margin: 18px 0 0; font-family: var(--mono); font-size: 13px; color: #c9c7c0; }

@media (max-width: 760px) {
  .shop-side { align-items: stretch; width: 100%; }
  .side-dlg { max-width: 100vw; width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; border: 0; padding: 18px 14px calc(28px + env(safe-area-inset-bottom)); }
  .side-dlg .close { position: fixed; top: 10px; right: 10px; background: var(--bg-3); z-index: 2; }
  .side-dlg h2 { font-size: 28px; padding-right: 44px; }
  .fuse-row { grid-template-columns: 1fr auto; }
  .fuse-row small { grid-column: 1; grid-row: 2; }
  .fuse-row .fuse-btns { grid-row: 1 / span 2; grid-column: 2; flex-direction: column; align-items: stretch; }
  .fuse-lot { gap: 8px; }
  .fuse-recipe { font-size: 15px; }
  .fuse-result .cell { width: 110px; }
  .tab.has-dot::before { top: 8px; right: 18%; }
}
@media (max-width: 760px) {
  .daily-dlg[open] { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
}

/* Succès : derniers débloqués et « nouveau » */
.ach-recent .ach { opacity: 1; }
.ach.is-new { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ach-new { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 2px; vertical-align: 2px;
  font-style: normal; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .08em; background: var(--gold-hi); color: #1a1300; }
/* Dans la grille des doublons à échanger, le compteur reste dans la carte (il ne déborde plus sous la barre) */
.t-dups .count-badge { top: 4px; right: 4px; }

/* Paquets spéciaux : reflet métallisé qui passe en continu */
.pack-visual .foil { position: absolute; inset: 4% 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 236, 170, .55) 46%, rgba(255, 255, 255, .8) 50%, rgba(170, 230, 255, .45) 54%, transparent 65%) no-repeat;
  background-size: 260% 100%; animation: foil 3.6s ease-in-out infinite; -webkit-mask: linear-gradient(#000, #000); }
@keyframes foil { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .pack-visual .foil { animation: none; opacity: 0; } }

/* Taux réels d'un paquet */
.odds-btn { align-self: flex-start; font-size: 12px; }
.pack-odds { margin: -6px 0 0; border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.pack-odds th { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-align: right; padding: 5px 8px 2px; }
.pack-odds td { padding: 2px 8px; }
.pack-odds td + td { font-family: var(--mono); font-weight: 600; text-align: right; white-space: nowrap; }
.pack-odds tbody tr:last-child td { padding-bottom: 6px; }
.pack-odds .gem { display: inline-block; width: 8px; height: 8px; margin-right: 6px; box-shadow: none; }
@media (max-width: 760px) { .pack-odds td, .pack-odds th { padding-left: 3px; padding-right: 3px; } .pack-odds { font-size: 10.5px; } .pack-odds th:first-child { width: 42%; } .pack-odds td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* Paquets spéciaux : cartes exclusives et version d'événement */
.pack-extras { display: grid; gap: 7px; margin-top: -8px; font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.ex-row { display: flex; align-items: center; gap: 9px; }
.ex-thumbs { display: flex; gap: 5px; flex: none; }
.ex-thumb { position: relative; width: 26px; height: 36px; border-radius: 3px; overflow: hidden; display: grid; place-items: center;
  background: var(--bg-3) center / cover no-repeat; box-shadow: 0 0 0 2px var(--rc, var(--line)); }
.ex-thumb.r-epique { --rc: var(--r-epique); }
.ex-thumb.r-legendaire { --rc: var(--r-legendaire); }
.ex-thumb.r-mythique { --rc: var(--r-mythique); }
.ex-thumb.is-locked::before { content: ""; position: absolute; inset: 0; -webkit-backdrop-filter: blur(3px) brightness(.45); backdrop-filter: blur(3px) brightness(.45); }
.ex-thumb b { position: relative; font-family: var(--display); font-weight: 800; font-size: 16px; color: #fff; }
.pack-odds .odds-x td { color: var(--ink-2); }
.pack-odds .odds-x.first td { border-top: 1px dashed var(--line); padding-top: 4px; }
.pack-odds .odds-x .fin-dot { width: 8px; height: 8px; margin-right: 6px; vertical-align: -1px; }
.empty-slot .ed-where { font-family: var(--mono); font-size: 4.8cqw; color: var(--gold); line-height: 1.2; }
.slot .tag.ev, .slot .tag.ed { background: var(--tagc); color: #111; box-shadow: 0 0 14px var(--tagc); }
.pack-odds .odds-x td + td { white-space: normal; }
.pack-odds .odds-x td:first-child { white-space: normal; }

/* Missions du jour */
.missions-box { width: min(360px, 100%); border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg-2); padding: 10px 14px 6px; }
.missions-box h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; }
.missions-box h3 small { font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--ink-2); margin-left: 6px; }
.mission { display: grid; grid-template-columns: 1fr 54px auto auto; align-items: center; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.mission:first-of-type { border-top: 0; }
.mission .m-text { line-height: 1.25; }
.mission .m-bar { height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.mission .m-bar i { display: block; height: 100%; background: var(--gold); }
.mission .m-prog { font-family: var(--mono); font-size: 11px; color: var(--ink-2); min-width: 34px; text-align: right; }
.mission .price { font-size: 13px; }
.mission .m-claim { padding: 3px 10px; font-size: 13px; animation: daily-glow 2.4s ease-in-out infinite; }
.mission .m-done { color: var(--gold); font-weight: 800; text-align: center; min-width: 30px; }
.mission.is-claimed .m-text { color: var(--ink-2); text-decoration: line-through; }
.binder-summary .late, .detail-info .late, small.late { color: var(--gold); font-family: var(--mono); }
@media (max-width: 760px) { .shop-head > div:first-child { align-self: flex-start; } }
@media (max-width: 760px) {
  .tour-q { gap: 10px; padding: 8px 10px; margin-bottom: 8px; flex-wrap: wrap; }
  .tour-img { width: 54px; height: 44px; }
  .tour-q b { font-size: 19px; }
  .tour-q span { font-size: 12px; }
  .tour-score { flex-direction: row; align-items: center; width: 100%; margin-left: 0; gap: 10px; }
  .tour-score > b { font-size: 22px; }
  .tour-score .btn { margin-left: auto; padding: 8px 12px; }
  .tour-map { max-height: none; }
  .tour-city-name { font-size: 21px; }
  .tour-city { r: 7; }
}

/* Qui suis-je ? */
.qui { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; max-width: 900px; }
.qui-clues { display: grid; gap: 8px; }
.qui-clue { padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg-2); font-size: 16px; font-weight: 600; animation: fade-in .3s ease; }
.qui-clue small { display: block; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.qui-photo { position: relative; aspect-ratio: 4 / 3; max-height: 260px; border-radius: 6px; background: var(--bg-3) center 25% / cover no-repeat; overflow: hidden; animation: fade-in .3s ease; }
.qui-photo.is-blur { filter: blur(14px) saturate(.8); }
.qui-photo small { position: absolute; left: 10px; bottom: 8px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; }
.qui-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--gold); }
.qui-res { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 6px; border: 2px solid; }
.qui-res.ok { border-color: #2f9e5a; }
.qui-res.lost { border-color: var(--danger); }
.qui-res b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 15px; }
.qui-res span { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1.05; margin-top: 2px; }
.qui-choices { display: grid; gap: 8px; }
.qui-choice, .parti-choice { padding: 14px 14px; border-radius: 6px; border: 2px solid var(--line); background: var(--bg-2); color: var(--ink); text-align: left;
  font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1.1; cursor: pointer; transition: border-color .15s, transform .15s; }
.qui-choice:not(:disabled):hover, .parti-choice:not(:disabled):hover { border-color: var(--gold); transform: translateY(-1px); }
.qui-choice.is-ko, .parti-choice.is-ko { border-color: var(--danger); color: var(--danger); text-decoration: line-through; opacity: .8; }
.qui-choice.is-ok, .parti-choice.is-ok { border-color: #2f9e5a; box-shadow: 0 0 0 3px color-mix(in srgb, #2f9e5a 30%, transparent); }
.qui-choice.is-off, .parti-choice.is-off { opacity: .45; }

/* Le Parti */
.parti { max-width: 620px; }
.parti-card { display: flex; gap: 16px; align-items: center; padding: 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.parti-img { width: 120px; aspect-ratio: 3 / 4; flex: none; border-radius: 6px; background: var(--bg-3) center 20% / cover no-repeat; }
.parti-card b { display: block; font-family: var(--display); font-weight: 800; font-size: 28px; text-transform: uppercase; line-height: 1.02; }
.parti-card small { display: block; color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.parti-q { font-weight: 700; font-size: 17px; margin: 16px 0 10px; }
.parti-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.parti-choice, .parti-choice:not(:disabled):hover { border-left: 8px solid var(--fam); text-align: center; }
.parti-choice.is-ok { background: color-mix(in srgb, #2f9e5a 12%, var(--bg-2)); }

@media (max-width: 760px) {
  .qui { grid-template-columns: 1fr; gap: 12px; }
  .qui-clue { font-size: 14px; padding: 8px 12px; }
  .qui-photo { max-height: 150px; }
  .qui-res span { font-size: 20px; }
  .qui-choices { grid-template-columns: 1fr 1fr; }
  .qui-choice, .parti-choice { font-size: 15px; padding: 12px 10px; }
  .parti-img { width: 90px; }
  .parti-card b { font-size: 21px; }
}

/* ============ Accueil sur ordinateur : vitrine et tableau du jour (le téléphone garde sa colonne) ============ */
.showcase { display: none; }
@media (min-width: 761px) {
  .shop-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "title title title" "show today missions" "show pot missions" "show free missions"; gap: 14px 16px; align-items: stretch; }
  .shop-head > div:first-child { grid-area: title; align-self: end; }
  .shop-side { display: contents; }
  .showcase, #daily-box, #pot-box, #free-box, #missions-box { border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg-2); min-width: 0; }

  /* Vitrine : cinq cartes en éventail, la meilleure au centre */
  .showcase { grid-area: show; display: flex; flex-direction: column; padding: 14px 16px 0; overflow: hidden; position: relative;
    background: radial-gradient(ellipse 70% 60% at 50% 100%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--bg-2); }
  .sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .sc-head h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; }
  .sc-head span { font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
  .sc-bar { height: 5px; margin: 8px 0 0; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
  .sc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--r-legendaire)); }
  .sc-fan { position: relative; flex: 1; min-height: 210px; margin-top: 6px; }
  .sc-card { --w: 128px; --step: min(72px, calc((100% - var(--w) - 56px) / max(1, var(--n) - 1)));
    position: absolute; bottom: -14px; width: var(--w); z-index: var(--z);
    left: calc(50% - var(--w) / 2 + (var(--i) - (var(--n) - 1) / 2) * var(--step));
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 7deg)); transform-origin: 50% 130%;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), bottom .25s cubic-bezier(.2, .8, .2, 1); cursor: pointer; }
  .sc-card:hover { transform: rotate(0deg) scale(1.06); bottom: 4px; z-index: 20; }
  .sc-card .card { box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .65); }
  .sc-card.is-back { cursor: default; }
  .sc-card.is-back:hover { transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 7deg)); bottom: -14px; }
  .sc-backcell { aspect-ratio: 63 / 88; }
  .sc-empty { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 30; margin: 0; padding: 8px 12px; text-align: center; font-weight: 600; font-size: 13px;
    border-radius: 6px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); }

  /* Carte du jour : grand bouton qui remplit sa case */
  #daily-box { grid-area: today; display: flex; padding: 0; border: 0; background: none; }
  #daily-box .daily-btn, #daily-box .daily-done { flex: 1; width: 100%; padding: 16px; gap: 14px; border-radius: 8px; }
  #daily-box .daily-gift { width: 52px; height: 52px; }
  #daily-box .daily-gift svg { width: 28px; height: 28px; }
  #daily-box b { font-size: 21px; }

  /* Pot de pièces */
  #pot-box { grid-area: pot; width: auto; padding: 12px 16px; }
  #pot-box.is-full { border-color: var(--gold); }

  /* Paquets gratuits et garantie */
  #free-box { grid-area: free; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 12px 16px; }
  #free-box .free-line, #free-box .pity-line { gap: 10px; }
  #free-box .pity-bar { flex: 1; max-width: none; }
  #free-box .pity-line .label { flex: 2; }
  #free-box::before { content: attr(data-title); font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
  #free-box .pip { width: 16px; height: 16px; }
  #free-box .pips { gap: 8px; }

  #missions-box { grid-area: missions; width: auto; padding: 12px 16px 8px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .shop-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title title" "show today" "show pot" "show free" "missions missions"; }
}

/* Solde de pièces pendant l'ouverture des paquets */
.stage-wallet { position: absolute; top: 16px; right: 16px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px;
  border-radius: 99px; background: rgba(10, 10, 12, .72); border: 1px solid rgba(226, 179, 60, .45); color: #f6d478;
  font-family: var(--mono); font-weight: 600; font-size: 16px; }
.stage-wallet .coin { width: 18px; height: 18px; }
.stage-wallet em { position: absolute; right: 12px; top: 100%; margin-top: 4px; font-style: normal; font-size: 14px; color: #8ff0b0; opacity: 0; pointer-events: none; }
.stage-wallet em.is-on { animation: gain-pop 1.8s ease-out forwards; }
@keyframes gain-pop { 0% { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } }
@media (max-width: 760px) { .stage-wallet { top: 12px; right: 12px; font-size: 14px; padding: 5px 12px 5px 8px; } }

/* Défis de la semaine : trois paliers (bronze, argent, or). Mobile : une ligne par palier, barre en dessous ;
   ordinateur : trois colonnes */
.weekly-box { display: grid; gap: 10px 16px; width: min(360px, 100%); padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg-2); }
.weekly-box.is-ready { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.wk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.wk-head b { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.wk-head small { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.wk-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Ligne 1 : médaille, défi, récompense (ou bouton) ; ligne 2 : barre de progression */
.wk-row > :last-child { grid-column: 3; grid-row: 1; justify-self: end; }
.wk-row .wk-prog { grid-column: 1 / -1; grid-row: 2; }
.wk-medal { justify-self: start; min-width: 56px; padding: 3px 8px; border-radius: 999px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; }
.tier-bronze .wk-medal { background: linear-gradient(180deg, #edb995, #a8673c); color: #2a1405; }
.tier-argent .wk-medal { background: linear-gradient(180deg, #f4f6f9, #a3abb6); color: #1d2229; }
.tier-or .wk-medal { background: linear-gradient(180deg, #fff1b8, #d6a12a); color: #2a1d00; }
.wk-text b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.15; }
.wk-row.is-done .wk-text b, .wk-row.is-done .wk-prog { opacity: .55; }
.wk-prog { display: flex; align-items: center; gap: 8px; }
.wk-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.wk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--r-legendaire)); }
.wk-num { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.wk-reward { font-family: var(--mono); font-size: 12px; color: var(--ink-2); text-align: right; }
.wk-done { color: var(--gold); font-weight: 800; font-size: 18px; }
.weekly-box .btn { padding: 6px 12px; animation: daily-glow 2.4s ease-in-out infinite; }
/* Promotion : prix normal barré à côté du prix réduit */
.promo-ribbon { background: #12a150; }
.deal-ribbon { background: linear-gradient(90deg, #e2b33c, #f6d478); color: #2a1d00; }
.pack-card:has(.deal-ribbon) .pack-visual { filter: drop-shadow(0 0 1.5px #e2b33c) drop-shadow(0 0 1.5px #e2b33c) drop-shadow(0 0 10px rgba(226, 179, 60, .75)) drop-shadow(0 18px 24px rgba(0, 0, 0, .28)); }
.pack-info .price .was { margin-right: 6px; font-size: .78em; font-weight: 500; color: var(--ink-2); text-decoration-thickness: 2px; }
.ticket-ribbon { position: absolute; top: 12px; right: -6px; z-index: 3; padding: 4px 10px; border-radius: 3px; background: linear-gradient(180deg, #fff1b8, #d6a12a); color: #2a1d00;
  font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
@media (max-width: 760px) {
  .weekly-box, .pot-box { width: 100%; }
}
@media (min-width: 761px) {
  .shop-head { grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "title title title" "show today missions" "show pot missions" "show free missions" "week week week"; }
  #weekly-box { grid-area: week; width: auto; border-radius: 8px; padding: 12px 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #weekly-box .wk-head { grid-column: 1 / -1; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .shop-head { grid-template-areas: "title title" "show today" "show pot" "show free" "missions missions" "week week"; }
}

/* ============ Accessibilité ============ */
/* Rareté lisible sans les couleurs : une forme de gemme par rareté
   (cercle, carré, losange, hexagone, étoile, étoile double) */
.r-commune .gem, .gem[style*="--r-commune"] { transform: none; border-radius: 50%; }
.r-peu-commune .gem, .gem[style*="--r-peu-commune"] { transform: none; border-radius: 1px; }
.r-epique .gem, .gem[style*="--r-epique"] { transform: scale(1.12); clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.r-legendaire .gem, .gem[style*="--r-legendaire"] { transform: scale(1.35);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.r-mythique .gem, .gem[style*="--r-mythique"] { transform: scale(1.4);
  clip-path: polygon(50% 0, 60% 30%, 85% 15%, 70% 40%, 100% 50%, 70% 60%, 85% 85%, 60% 70%, 50% 100%, 40% 70%, 15% 85%, 30% 60%, 0 50%, 30% 40%, 15% 15%, 40% 30%); }
/* Clavier : contour bien visible sur tout ce qui se joue au clavier */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.grid .card:focus-visible, .sc-card .card:focus-visible, .pack-visual:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 6px; }

/* iPhone en mode app (écran d'accueil) : la barre d'état et la Dynamic Island passent par-dessus la page,
   on décale tout ce qui est collé en haut de l'écran. Ailleurs, les marges valent 0. */
:root { --sat: env(safe-area-inset-top, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
.topbar { height: calc(60px + var(--sat)); padding-top: var(--sat); padding-left: calc(32px + var(--sal)); padding-right: calc(32px + var(--sar)); }
.stage { padding-top: calc(40px + var(--sat)); }
.stage-wallet { top: calc(16px + var(--sat)); }
.ach-toast { top: calc(76px + var(--sat)); }
.t-tray { top: calc(68px + var(--sat)); }
@media (max-width: 760px) {
  .topbar { height: calc(54px + var(--sat)); padding-left: calc(14px + var(--sal)); padding-right: calc(14px + var(--sar)); }
  .stage { padding-top: calc(70px + var(--sat)); }
  .stage-wallet { top: calc(12px + var(--sat)); }
  .ach-toast { top: calc(64px + var(--sat)); }
  .t-tray { top: calc(62px + var(--sat)); }
  .close, .side-dlg .close { top: calc(10px + var(--sat)); }
  .detail-inner { padding-top: calc(16px + var(--sat)); }
  .side-dlg { padding-top: calc(18px + var(--sat)); }
}

/* Signaler un bug */
.bug-dlg { width: min(560px, calc(100vw - 32px)); }
.bug-intro, .bug-note { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.bug-note { font-size: 12px; margin: 12px 0 0; }
.bug-dlg textarea { width: 100%; min-height: 120px; resize: vertical; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; }
.bug-tech { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 18px; font-size: 13px; color: var(--ink-2); }
.bug-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.bug-actions .btn { text-decoration: none; }
.bug-req { flex: 1 1 100%; margin: 0 0 -4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.bug-or { margin-top: 8px; }
.bug-msg { margin: 6px 0 0; font-size: 13px; color: var(--danger); font-weight: 600; }
@media (max-width: 760px) {
  .bug-dlg { width: 100vw; }
  .bug-actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
}

/* ===== Cartes Histoire : « Archives » — dossier kraft, tirage photo scotché, texte tapé à la machine,
   tampon à la couleur de la rareté (cachet de cire en légendaire et mythique). Les versions spéciales gardent leur cadre ;
   le Plein cadre garde sa mise en page, avec la police et le tampon. ===== */
.card.cat-histoire { --acc: #6b6b6b; --type: "Special Elite", "Courier New", monospace; }
.card.cat-histoire.r-peu-commune { --acc: #2f7d4a; } .card.cat-histoire.r-rare { --acc: #2e5fc0; } .card.cat-histoire.r-epique { --acc: #6b3db8; }
.card.cat-histoire.r-legendaire { --acc: #b8860b; } .card.cat-histoire.r-mythique { --acc: #c8102e; }
.card.cat-histoire.fin-normal { --frame: linear-gradient(160deg, #c79b62, #8d6633 55%, #b98a52); }
.card.cat-histoire.r-legendaire.fin-normal { --frame: linear-gradient(135deg, #7a5a12, #f7dc84 22%, #a87b1e 45%, #fff1b8 65%, #8a6516); }
.card.cat-histoire.r-mythique.fin-normal { --frame: linear-gradient(160deg, #5a0012, #c8102e 45%, #8a0020); }
.card.cat-histoire.fin-normal .card-in::after { display: none; }
.card.cat-histoire:not(.fin-plein) .card-in { background:
  repeating-linear-gradient(0deg, rgba(90, 60, 20, .05) 0 .3cqw, transparent .3cqw 1.2cqw), linear-gradient(170deg, #dcc597, #cdb07a); }
.card.cat-histoire:not(.fin-plein) .card-photo { inset: 5cqw 7cqw 54cqw; background: #f4efe3; padding: 2.4cqw; rotate: -2deg; box-shadow: 0 1cqw 2.4cqw rgba(60, 40, 10, .4); }
.card.cat-histoire:not(.fin-plein):not(.fin-or) .card-photo img { filter: sepia(.55) contrast(1.05); }
.card.cat-histoire:not(.fin-plein) .card-photo.is-artwork img { padding: 0; filter: sepia(.15); }
/* Bout de scotch */
.card.cat-histoire:not(.fin-plein) .card-photo::before { content: ""; position: absolute; z-index: 2; left: 42%; top: -2.4cqw; width: 16cqw; height: 5.4cqw; rotate: 3deg;
  background: rgba(240, 232, 205, .8); box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .15); }
.card.cat-histoire:not(.fin-plein) .card-top { top: 2cqw; left: auto; right: 3cqw; }
.card.cat-histoire:not(.fin-plein) .card-top .no { background: transparent; color: #4a3414; font-family: var(--type); }
.card.cat-histoire:not(.fin-plein) .card-band { background: transparent; color: #2b2116; clip-path: none; bottom: 18cqw; padding: 2cqw 6cqw 3cqw; }
.card.cat-histoire .card-band h3 { font-family: var(--type); font-weight: 400; font-size: 7.6cqw; line-height: 1.05; }
.card.cat-histoire .card-band .sub, .card.cat-histoire .card-band .meta { font-family: var(--type); }
.card.cat-histoire:not(.fin-plein) .card-band .sub { font-size: 3.9cqw; color: #4a3a26; }
.card.cat-histoire:not(.fin-plein) .card-band .meta { color: #6a4f2c; opacity: 1; }
/* Tampon (ARCHIVES, CONFIDENTIEL en épique) ou cachet de cire */
.card.cat-histoire .card-band::after { content: "ARCHIVES"; position: absolute; right: 5cqw; top: -10cqw; rotate: -12deg; padding: 1cqw 2.6cqw;
  font: 700 4.6cqw/1 var(--display); letter-spacing: .16em; color: var(--acc); border: .6cqw solid var(--acc); border-radius: 1.2cqw; opacity: .8; mix-blend-mode: multiply; }
.card.cat-histoire.r-epique .card-band::after { content: "CONFIDENTIEL"; }
.card.cat-histoire.r-legendaire .card-band::after, .card.cat-histoire.r-mythique .card-band::after {
  content: ""; width: 15cqw; height: 15cqw; padding: 0; border: 0; border-radius: 50%; top: -14cqw; opacity: 1; mix-blend-mode: normal;
  background: radial-gradient(circle at 35% 30%, #fff3c2, #d9a52c 40%, #8a6516 75%); box-shadow: 0 .8cqw 1.6cqw rgba(0, 0, 0, .35), inset 0 0 0 1.2cqw rgba(0, 0, 0, .08); }
.card.cat-histoire.r-mythique .card-band::after { background: radial-gradient(circle at 35% 30%, #ff8fa0, #c8102e 45%, #5a0012 80%); }
.card.cat-histoire.fin-plein .card-band::after { top: 2cqw; }
.card.cat-histoire.fin-plein:not(.r-legendaire):not(.r-mythique) .card-band::after { mix-blend-mode: normal; background: rgba(255, 255, 255, .85); }
.card.cat-histoire:not(.fin-plein) .card-stats { background: rgba(255, 250, 235, .55); border-top: .3cqw dashed #6a4f2c; }
.card.cat-histoire:not(.fin-plein) .card-stats dt { color: #7a5f3a; }
.card.cat-histoire:not(.fin-plein) .card-stats dd { color: #2b2116; font-family: var(--type); font-weight: 400; }
.card.cat-histoire:not(.fin-plein) .card-stats div + div { border-left-color: rgba(90, 60, 20, .25); }

/* Avancement d'un paquet : barre fine sous la description ; paquet complété : barre dorée et coche sur le paquet.
   Texte sans nowrap : sur mobile (deux paquets par ligne), un texte long élargirait la colonne et la page */
.pack-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.pack-prog .bar { flex: 1; display: flex; min-width: 40px; max-width: 160px; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pack-prog .bar i { display: block; height: 100%; background: var(--ink-2); border-radius: inherit; }
.pack-prog small { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.pack-prog.is-done .bar i { background: linear-gradient(90deg, #d6a12a, #f7dc84); }
.pack-prog.is-done small { color: #a87b1e; font-weight: 600; }
.pack-done { position: absolute; z-index: 3; top: -6px; left: 50%; translate: -50% 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font: 800 17px/1 var(--display); color: #2a1d00; background: linear-gradient(180deg, #fff1b8, #d6a12a); box-shadow: 0 3px 8px rgba(0, 0, 0, .3); pointer-events: none; }

/* Fiche d'une carte non possédée : « Demander en échange » avant les chances d'obtention */
#detail-body .detail-actions:has(.trade-ask) { margin: 2px 0 18px; }

/* --- Archives, versions spéciales --- */
/* Holo « document plastifié » : film brillant à rayures sur toute la carte, sceau holographique à la place du tampon */
.card.cat-histoire.fin-holo .card-in::after { display: block; content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light; opacity: .55;
  background: repeating-linear-gradient(125deg, rgba(255, 255, 255, .5) 0 .4cqw, transparent .4cqw 3.2cqw), linear-gradient(160deg, rgba(255, 255, 255, .5), transparent 40%, rgba(255, 255, 255, .35)); animation: none; }
.card.cat-histoire.fin-holo .card-band::after { content: ""; width: 15cqw; height: 15cqw; padding: 0; border: .5cqw solid rgba(255, 255, 255, .85); border-radius: 50%; top: -14cqw; opacity: 1; mix-blend-mode: normal;
  background: radial-gradient(circle, rgba(255, 255, 255, .7) 0 18%, transparent 19% 32%, rgba(255, 255, 255, .5) 33% 36%, transparent 37%),
    conic-gradient(#ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff, #ff7ad9);
  box-shadow: 0 .8cqw 1.6cqw rgba(0, 0, 0, .3); animation: holo-seal 4s linear infinite; }
@keyframes holo-seal { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .card.cat-histoire.fin-holo .card-band::after { animation: none; } }

/* Dorée « archives royales » : parchemin bordé d'or, photo dans un cadre doré, tampon doré */
.card.cat-histoire.fin-or .card-in { background: radial-gradient(ellipse at 50% 40%, #f7ecd0, #e6d3a1 75%, #d7bd80);
  box-shadow: inset 0 0 0 1.4cqw #f7ecd0, inset 0 0 0 1.8cqw #b8891f, inset 0 0 0 2.4cqw #f7ecd0, inset 0 0 0 2.6cqw #b8891f; }
.card.cat-histoire.fin-or .card-photo { background: linear-gradient(135deg, #8a6516, #f7dc84 30%, #b8891f 55%, #fff1b8 75%, #a87b1e); }
.card.cat-histoire.fin-or .card-band, .card.cat-histoire.fin-or .card-band .sub { color: #4a3410; }
.card.cat-histoire.fin-or .card-band .meta { color: #8a6516; }
.card.cat-histoire.fin-or .card-band::after { content: "ARCHIVES ROYALES"; color: #a87b1e; border-color: #a87b1e; font-size: 3.8cqw; }
.card.cat-histoire.fin-or.r-legendaire .card-band::after, .card.cat-histoire.fin-or.r-mythique .card-band::after { content: ""; font-size: 0; }
.card.cat-histoire.fin-or .card-stats { background: rgba(255, 246, 220, .6); border-top: .3cqw solid #b8891f; }
.card.cat-histoire.fin-or .card-stats dd { color: #4a3410; }

/* Plein cadre « grand tirage » : mêmes matériaux que la version standard (carton kraft, tirage bordé de blanc, scotch,
   étiquette tapée à la machine), mais la photo occupe toute la carte */
.card.cat-histoire.fin-plein { --frame: linear-gradient(160deg, #c79b62, #8d6633 55%, #b98a52); }
.card.cat-histoire.fin-plein.r-legendaire { --frame: linear-gradient(135deg, #7a5a12, #f7dc84 22%, #a87b1e 45%, #fff1b8 65%, #8a6516); }
.card.cat-histoire.fin-plein.r-mythique { --frame: linear-gradient(160deg, #5a0012, #c8102e 45%, #8a0020); }
.card.cat-histoire.fin-plein .card-in { background: repeating-linear-gradient(0deg, rgba(90, 60, 20, .05) 0 .3cqw, transparent .3cqw 1.2cqw), linear-gradient(170deg, #dcc597, #cdb07a); }
.card.cat-histoire.fin-plein .card-photo { inset: 2.6cqw 2.6cqw 19cqw; padding: 1.8cqw; background: #f4efe3; box-shadow: 0 .8cqw 2cqw rgba(60, 40, 10, .35); }
.card.cat-histoire.fin-plein .card-photo img { filter: sepia(.55) contrast(1.05); }
/* Deux bouts de scotch en haut du tirage */
.card.cat-histoire.fin-plein .card-photo::before, .card.cat-histoire.fin-plein .card-photo::after { content: ""; position: absolute; z-index: 2; top: -1.8cqw; width: 14cqw; height: 4.6cqw;
  background: rgba(240, 232, 205, .85); box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .15); }
.card.cat-histoire.fin-plein .card-photo::before { left: -2cqw; rotate: -32deg; }
.card.cat-histoire.fin-plein .card-photo::after { right: -2cqw; rotate: 32deg; }
.card.cat-histoire.fin-plein .card-top { top: 6cqw; left: 6cqw; right: 6cqw; }
.card.cat-histoire.fin-plein .card-top .no { font-family: var(--type); background: rgba(244, 239, 227, .92); color: #4a3414; }
/* Étiquette en kraft, scotchée sur le bas du tirage */
.card.cat-histoire.fin-plein .card-band { left: 6cqw; right: 6cqw; bottom: 21cqw; padding: 2.6cqw 4cqw 3cqw; color: #2b2116; rotate: -1.5deg;
  background: repeating-linear-gradient(0deg, rgba(90, 60, 20, .06) 0 .3cqw, transparent .3cqw 1.2cqw), linear-gradient(170deg, #e2cfa6, #d2b886);
  box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, .4); }
.card.cat-histoire.fin-plein .card-band::before { display: block; left: 50%; top: -2.4cqw; width: 14cqw; height: 4.6cqw; translate: -50% 0; rotate: 4deg;
  background: rgba(240, 232, 205, .85); box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .2); }
.card.cat-histoire.fin-plein .card-band h3 { font-size: 7cqw; }
.card.cat-histoire.fin-plein .card-band .sub { color: #4a3a26; font-size: 3.7cqw; }
.card.cat-histoire.fin-plein .card-band .meta { color: #6a4f2c; opacity: 1; }
.card.cat-histoire.fin-plein .card-band::after { top: -9cqw; right: 2cqw; }
.card.cat-histoire.fin-plein:not(.r-legendaire):not(.r-mythique) .card-band::after { background: rgba(244, 239, 227, .9); mix-blend-mode: normal; }
.card.cat-histoire.fin-plein .card-stats { background: rgba(255, 250, 235, .55); border-top: .3cqw dashed #6a4f2c; }
.card.cat-histoire.fin-plein .card-stats dt { color: #7a5f3a; }
.card.cat-histoire.fin-plein .card-stats dd { color: #2b2116; font-family: var(--type); font-weight: 400; }
.card.cat-histoire.fin-plein .card-stats div + div { border-left-color: rgba(90, 60, 20, .25); }

/* Rangées qui défilent à l'horizontale (onglets de l'album et de la fusion, barre du bas, cartes d'un paquet, mini-jeux) :
   jamais de défilement vertical à l'intérieur, sinon sur iPhone la rangée « flotte » quand on la tire du doigt */
.timeline { overflow-y: hidden; overscroll-behavior: contain; }
@media (max-width: 760px) { .chips, .tabs, .hand { overflow-y: hidden; overscroll-behavior: contain; } }

/* Lot de 5 sur téléphone (surtout iPhone) : 25 cartes à l'écran. À plat au repos (50 calques 3D saturent l'iPhone) ;
   retournement en perspective le temps de .is-turning (rotation d'un seul élément, sans calque 3D par carte). Dos allégé ; lueur pulsée seulement pour les légendaires et mythiques ; rayons du fond immobiles */
.reveal.is-bulk .slot .inner { transform-style: flat; transition: none; }
.reveal.is-bulk .slot .face { backface-visibility: visible; -webkit-backface-visibility: visible; }
.reveal.is-bulk .slot .front { transform: none; opacity: 0; }
.reveal.is-bulk .slot.is-flipped .inner { transform: none; }
.reveal.is-bulk .slot.is-flipped .front { opacity: 1; }
.reveal.is-bulk .slot.is-flipped .back { opacity: 0; }
.reveal.is-bulk .slot.is-turning .inner { animation: turn-3d .5s ease-in-out; }
.reveal.is-bulk .slot.is-turning .back { animation: turn-back .5s step-end; }
.reveal.is-bulk .slot.is-turning .front { animation: turn-front .5s step-end; }
.reveal.is-bulk .slot.big-hit.is-flipped:not(.is-turning) .inner { animation: pop-flat .6s cubic-bezier(.2, .9, .3, 1.3); }
/* Rotation en perspective sur un seul élément (pas de preserve-3d) : jusqu'à la tranche, la face change, puis retour */
@keyframes turn-3d { 0% { transform: perspective(500px) rotateY(0); } 50% { transform: perspective(500px) rotateY(90deg); }
  50.01% { transform: perspective(500px) rotateY(-90deg); } 100% { transform: perspective(500px) rotateY(0); } }
@keyframes turn-back { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes turn-front { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes pop-flat { 40% { transform: scale(1.1); } }
.reveal.is-bulk .slot.tease .back::after { animation: none; opacity: .85; box-shadow: 0 0 0 2px var(--hit), 0 0 14px 2px var(--hit); }
.reveal.is-bulk .slot.tease.big-hit .back::after { animation: tease 1.2s ease-in-out infinite; }
.reveal.is-bulk .slot:not(.is-flipped):hover .inner { transform: none; }
.card-back.is-lite .back-logo { width: 46cqw; filter: none; }
.stage.is-bulk .stage-rays { animation-play-state: paused; }

/* Fusion Holo : Holo déjà possédée (grisé) ou nouvelle (mise en avant) */
.fuse-holo .holo-have, .fuse-holo .holo-new { flex: none; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.fuse-holo .holo-have { color: var(--ink-2); background: var(--line); }
.fuse-holo .holo-new { color: #111; background: linear-gradient(110deg, #e9edf3, #ffffff 40%, #aee6ff 60%, #ffd1f1); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }

/* ===== Bulles (BD) : design « Pop », trame Ben-Day, couleurs franches, onomatopée selon la rareté ===== */
.card.cat-bd { --acc: #9a9a9a; --frame: var(--acc); --pop: "Bangers", Impact, sans-serif; --comic: "Comic Neue", "Comic Sans MS", sans-serif;
  box-shadow: 0 0 0 .7cqw #111, 0 14px 30px -16px rgba(0, 0, 0, .55); }
.card.cat-bd.r-peu-commune { --acc: #2fae5f; } .card.cat-bd.r-rare { --acc: #2e6fe0; } .card.cat-bd.r-epique { --acc: #8a4be0; }
.card.cat-bd.r-legendaire { --acc: #f2b300; } .card.cat-bd.r-mythique { --acc: #e3132d; }
.card.cat-bd.r-mythique { box-shadow: 0 0 0 .7cqw #111, 0 0 22px -4px rgba(255, 40, 80, .7), 0 14px 30px -12px rgba(0, 0, 0, .6); }
.card.cat-bd.fin-normal .card-in::after { display: none; }
.card.cat-bd .card-in { background: radial-gradient(circle, rgba(0, 0, 0, .18) 22%, transparent 24%) 0 0 / 2.6cqw 2.6cqw, var(--acc); border: .7cqw solid #111; }
.card.cat-bd.r-mythique .card-in { background: radial-gradient(circle, rgba(255, 225, 74, .55) 22%, transparent 24%) 0 0 / 2.6cqw 2.6cqw, #e3132d; }
.card.cat-bd .card-photo { inset: 4cqw 4cqw 44cqw; border: .7cqw solid #111; rotate: -1.5deg; box-shadow: 1.4cqw 1.4cqw 0 #111; }
.card.cat-bd .card-photo img { filter: saturate(1.4) contrast(1.15); }
/* Trame d'imprimerie sur la photo */
.card.cat-bd .card-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; opacity: .35;
  background: radial-gradient(circle, #000 25%, transparent 27%) 0 0 / 1.8cqw 1.8cqw; }
.card.cat-bd .card-top { top: 1cqw; } .card.cat-bd .card-top .no { background: #111; color: #fff; border-radius: 0; }
.card.cat-bd .card-band { left: 4cqw; right: 4cqw; bottom: 20cqw; background: #fff; color: #111; clip-path: none; padding: 2.6cqw 4cqw;
  border: .7cqw solid #111; box-shadow: 1.2cqw 1.2cqw 0 #111; rotate: 1deg; }
.card.cat-bd .card-band h3 { font-family: var(--pop); font-weight: 400; font-size: 9cqw; letter-spacing: .05em; }
.card.cat-bd .card-band .sub { font-family: var(--comic); font-weight: 700; color: #333; }
.card.cat-bd .card-band .meta { display: none; }
/* Onomatopée : de PLOP (commune) à KABOOM! (mythique) */
.card.cat-bd .card-band::after { position: absolute; right: -3cqw; top: -13cqw; display: grid; place-items: center; width: 26cqw; height: 15cqw; rotate: -8deg;
  font: 400 6.4cqw/1 var(--pop); letter-spacing: .04em; color: #111; background: #fff; border: .6cqw solid #111;
  clip-path: polygon(50% 0, 62% 26%, 96% 10%, 76% 42%, 100% 58%, 70% 66%, 80% 100%, 50% 78%, 20% 100%, 30% 66%, 0 58%, 24% 42%, 4% 10%, 38% 26%); }
.card.cat-bd.r-commune .card-band::after { content: "PLOP"; } .card.cat-bd.r-peu-commune .card-band::after { content: "PIF!"; }
.card.cat-bd.r-rare .card-band::after { content: "PAF!"; } .card.cat-bd.r-epique .card-band::after { content: "BAM!"; }
.card.cat-bd.r-legendaire .card-band::after { content: "BOUM!"; background: #ffe14a; }
.card.cat-bd.r-mythique .card-band::after { content: "KABOOM!"; width: 32cqw; background: #ffe14a; color: #e3132d; }
.card.cat-bd .card-stats { background: #111; } .card.cat-bd .card-stats dd { font-family: var(--comic); font-weight: 700; color: #fff; }

/* Holo « foil » : cadre chromé, trame de points irisés, onomatopée holographique */
.card.cat-bd.fin-holo { --frame: linear-gradient(160deg, #5d6470, #e9edf3 18%, #8a92a0 36%, #ffffff 52%, #6f7783 70%, #dfe4ec 88%, #4f5560); }
.card.cat-bd.fin-holo .card-in { background: radial-gradient(circle, rgba(255, 255, 255, .7) 22%, transparent 24%) 0 0 / 2.6cqw 2.6cqw,
  linear-gradient(135deg, #ff7ad9, #ffd36b 25%, #7dffb2 50%, #6bd7ff 75%, #b38bff); }
.card.cat-bd.fin-holo .card-band::after { background: conic-gradient(from 30deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff, #ff7ad9); color: #111; animation: bd-foil 4s linear infinite; }
@keyframes bd-foil { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .card.cat-bd.fin-holo .card-band::after { animation: none; } }

/* Dorée « édition collector » : fond or tramé, nom en lettres d'or sur noir, onomatopée dorée */
.card.cat-bd.fin-or { --frame: linear-gradient(135deg, #6e4f0c, #f9e08a 18%, #b8891f 36%, #fff3c2 52%, #a87b1e 70%, #f3d47a 86%, #7a5a12); }
.card.cat-bd.fin-or .card-in { background: radial-gradient(circle, rgba(120, 80, 0, .35) 22%, transparent 24%) 0 0 / 2.6cqw 2.6cqw, linear-gradient(160deg, #ffe58a, #e0b23a 60%, #f7d777); }
.card.cat-bd.fin-or .card-photo img { filter: sepia(.35) saturate(1.3) contrast(1.1); }
.card.cat-bd.fin-or .card-band { background: #111; color: #f6d478; }
.card.cat-bd.fin-or .card-band .sub { color: #e8cf8a; }
.card.cat-bd.fin-or .card-band::after { background: linear-gradient(135deg, #8a6516, #f7dc84 35%, #b8891f 60%, #fff1b8); color: #111; }
.card.cat-bd.fin-or .card-stats { background: #111; border-top: 0; } .card.cat-bd.fin-or .card-stats dd { color: #f6d478; }

/* Plein cadre « couverture d'album » : photo pleine, titre jaune cerclé de noir, logo d'éditeur */
.card.cat-bd.fin-plein .card-in { background: #111; }
.card.cat-bd.fin-plein .card-photo { inset: 0 0 18cqw; rotate: 0deg; border: 0; box-shadow: none; }
.card.cat-bd.fin-plein .card-photo::before { opacity: .22; }
.card.cat-bd.fin-plein .card-band { inset: 9cqw 3cqw auto; bottom: auto; padding: 0; background: none; border: 0; box-shadow: none; rotate: -2deg; text-align: center; }
.card.cat-bd.fin-plein .card-band::before { display: none; }
.card.cat-bd.fin-plein .card-band h3 { font-size: 12cqw; line-height: .95; color: #ffe14a; -webkit-text-stroke: .7cqw #111; paint-order: stroke fill; text-shadow: .8cqw .8cqw 0 #111; }
.card.cat-bd.fin-plein .card-band .sub { display: inline-block; margin-top: 1.6cqw; padding: .6cqw 2.4cqw; background: #fff; border: .5cqw solid #111; color: #111; }
.card.cat-bd.fin-plein .card-band::after { top: auto; bottom: -78cqw; right: 2cqw; }
.card.cat-bd.fin-plein .card-in::before { content: "BROL"; position: absolute; z-index: 4; right: 3cqw; bottom: 21cqw; padding: .8cqw 2cqw; font: 400 4.6cqw/1 var(--pop);
  letter-spacing: .08em; color: #fff; background: #e3132d; border: .5cqw solid #111; transform: rotate(-4deg); }
.card.cat-bd.fin-plein .card-top { top: 2cqw; } .card.cat-bd.fin-plein .card-top .fin-tag { display: none; }
.card.cat-bd.fin-plein .card-stats { background: #111; border-top: .7cqw solid var(--acc); }

/* ===== Paysages : cartes horizontales « carte postale » (Souvenir de…) ===== */
/* Cadre .land : à plat dans l'album (.cell.is-wide, sur deux colonnes) et dans la fiche ; ailleurs (ouverture,
   fusion, échanges, séries) la carte est couchée d'un quart de tour dans une case verticale de même taille */
/* Conteneur : les cqw posés sur la carte elle-même (anneau des Plein cadre) se calculent sur ce cadre, pas sur l'écran */
.land { position: relative; width: 100%; aspect-ratio: 63 / 88; container-type: inline-size; }
.land > .card.is-land { position: absolute; left: 50%; top: 50%; width: 139.683%; translate: -50% -50%; rotate: -90deg; }
.cell.is-wide, .detail-card .cell.is-wide { grid-column: span 2; }
.cell.is-wide .land, .detail-card .land { aspect-ratio: 88 / 63; }
.cell.is-wide .land > .card.is-land, .detail-card .land > .card.is-land { position: relative; left: auto; top: auto; width: 100%; translate: none; rotate: none; }
.cell.is-wide .empty-slot { aspect-ratio: 88 / 63; border-radius: 2% / 2.8%; }
#detail.is-land .detail-inner { grid-template-columns: 1fr; }
#detail.is-land .detail-card { max-width: 640px; margin: 0 auto; width: 100%; }
.grid.has-wide { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid.has-wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .grid .cell.is-wide { grid-column: 1 / -1; } }

/* Coins en pourcentages de la carte elle-même (1,6 % de la largeur) : en cqw, ils se calculaient sur l'écran à
   l'ouverture d'un paquet (aucun conteneur autour), trop arrondis pour la photo qui dépassait aux coins */
.card.is-land { --acc: #8a8a8a; --stamp: #6f7a86; --line: transparent; aspect-ratio: 88 / 63; padding: 0; border-radius: 1.6% / 2.24%; background: #fff; color: #2b2620; }
.card.is-land.r-peu-commune { --acc: #2f7d4a; --stamp: #3f8a5a; --line: #3f8a5a; } .card.is-land.r-rare { --acc: #2e5fc0; --stamp: #2e5fc0; --line: #2e5fc0; }
.card.is-land.r-epique { --acc: #6b3db8; --stamp: #7a4ac8; --line: #7a4ac8; }
.card.is-land.r-legendaire { --acc: #b8860b; --stamp: #c9971c; background: linear-gradient(135deg, #7a5a12, #f7dc84 22%, #a87b1e 45%, #fff1b8 65%, #8a6516); }
.card.is-land.r-mythique { --acc: #c8102e; --stamp: #c8102e; background: conic-gradient(from 20deg, #5a0012, #ff2d55, #9a0020, #ff6b81, #6a0016, #ff2d55, #5a0012); }
.card.is-land .card-in { position: absolute; inset: .9cqw; height: auto; border-radius: 1cqw; background: #2a2c33; }
.card.is-land:not(.fin-ev) .card-in::before, .card.is-land .card-in::after { display: none; }
.card.is-land .card-in > * { z-index: 4; }
.card.is-land .card-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #2a2c33; }
/* Cadrage par carte : --pos (point visé), puis zoom éventuel (« 50% 70%;--zoom:1.2 » dans PAYSAGE_POS) */
.card.is-land .card-photo img { object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); filter: saturate(1.25) contrast(1.05); }
.card.is-land .card-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .3)); }
/* Liseré intérieur de la couleur de la rareté */
.card.is-land .card-photo::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 1cqw; pointer-events: none; box-shadow: inset 0 0 0 .5cqw var(--line); }
.card.is-land .pc-hello { position: absolute; left: 4cqw; top: 3cqw; margin: 0; font: 400 4.4cqw/1 "Lobster", cursive; color: #fff; text-shadow: .3cqw .3cqw 0 rgba(0, 0, 0, .5); rotate: -4deg; }
.card.is-land .pc-name { position: absolute; left: 3cqw; right: 20cqw; top: 9cqw; margin: 0; font: 400 8cqw/.95 "Alfa Slab One", serif; color: #fff4c7;
  -webkit-text-stroke: .35cqw var(--acc); paint-order: stroke fill; text-shadow: .7cqw .7cqw 0 #1a1a1a; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: break-word; }
/* Timbre dentelé (perforations par masque) et cachet de la poste */
.card.is-land .pc-name.is-long { font-size: 6.6cqw; } .card.is-land .pc-name.is-xlong { font-size: 5.4cqw; }
.card.is-land.fin-plein .pc-name.is-long { font-size: 7.6cqw; } .card.is-land.fin-plein .pc-name.is-xlong { font-size: 6.2cqw; }
.card.is-land .pc-stamp { position: absolute; right: 2.4cqw; top: 2.4cqw; width: 12cqw; aspect-ratio: 4 / 5; padding: 1cqw; background: #fff;
  -webkit-mask: radial-gradient(circle at center, transparent .55cqw, #000 .6cqw) -.9cqw -.9cqw / 1.8cqw 1.8cqw, linear-gradient(#000, #000) .9cqw .9cqw / calc(100% - 1.8cqw) calc(100% - 1.8cqw) no-repeat;
  mask: radial-gradient(circle at center, transparent .55cqw, #000 .6cqw) -.9cqw -.9cqw / 1.8cqw 1.8cqw, linear-gradient(#000, #000) .9cqw .9cqw / calc(100% - 1.8cqw) calc(100% - 1.8cqw) no-repeat;
  filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .25)); }
.card.is-land .pc-stamp > div { position: relative; height: 100%; background: var(--stamp); color: #fff; display: grid; place-items: center; overflow: hidden; }
.card.is-land .pc-stamp svg { width: 70%; opacity: .9; }
.card.is-land .pc-stamp b { position: absolute; left: .8cqw; top: .6cqw; font: 700 2.6cqw/1 var(--display); }
.card.is-land .pc-stamp i { position: absolute; right: .8cqw; bottom: .6cqw; font: 600 1.4cqw/1 var(--display); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.card.is-land.r-legendaire .pc-stamp > div { background: linear-gradient(135deg, #7a5a12, #f7dc84 30%, #a87b1e 55%, #fff1b8 75%, #8a6516); color: #3a2a08; }
.card.is-land.r-mythique .pc-stamp > div { background: radial-gradient(circle at 30% 25%, #ff6b81, #c8102e 55%, #5a0012); }
.card.is-land.r-mythique .pc-stamp > div::after { content: ""; position: absolute; inset: .6cqw; border: .25cqw solid #f7dc84; }
.card.is-land .pc-postmark { position: absolute; right: 9cqw; top: 9cqw; width: 15cqw; aspect-ratio: 1; border-radius: 50%; border: .35cqw solid rgba(255, 255, 255, .85);
  display: grid; place-items: center; text-align: center; color: rgba(255, 255, 255, .9); rotate: -14deg; }
.card.is-land .pc-postmark::before { content: ""; position: absolute; inset: 1.1cqw; border-radius: 50%; border: .2cqw solid currentColor; }
.card.is-land .pc-postmark span { font: 700 1.6cqw/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; max-width: 10.5cqw; overflow-wrap: anywhere; }
.card.is-land .pc-postmark small { display: block; font-size: 1.9cqw; }
.card.is-land .card-top { top: auto; bottom: 13.6cqw; left: 3cqw; right: auto; gap: 1cqw; }
.card.is-land .card-top .no { font-size: 1.9cqw; padding: .4cqw .9cqw; border-radius: .5cqw; background: rgba(0, 0, 0, .55); }
.card.is-land .card-top .fin-tag { font-size: 1.7cqw; padding: .5cqw .9cqw; border-radius: .4cqw; }
/* Bande du bas : description et stats, posée sur la photo */
.card.is-land .pc-band { position: absolute; left: 2cqw; right: 2cqw; bottom: 2cqw; height: 10cqw; background: rgba(246, 239, 220, .93); border-radius: .6cqw;
  border-left: 1.2cqw solid var(--acc); box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .3); display: flex; align-items: center; padding: 0 2.4cqw; gap: 3cqw; }
.card.is-land .pc-band .sub { margin: 0; font: 400 2.2cqw/1.15 "Special Elite", monospace; color: #3a3226; flex: 1.4; min-width: 0; }
.card.is-land .pc-stats { display: flex; gap: 2.6cqw; flex: 2; justify-content: flex-end; margin: 0; min-width: 0; }
.card.is-land .pc-stats dt { font: 600 1.4cqw/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #8a7a5a; }
.card.is-land .pc-stats dd { margin: .4cqw 0 0; font: 700 2.6cqw/1 var(--display); color: #2b2620; white-space: nowrap; }
.card.is-land .var-dots { right: 3cqw; bottom: 13.6cqw; gap: .8cqw; padding: .7cqw; }
.card.is-land .var-dots i { width: 2cqw; height: 2cqw; }
.card.is-land.r-mythique { box-shadow: 0 0 22px -4px rgba(255, 40, 80, .7), 0 14px 30px -12px rgba(0, 0, 0, .6); }

/* Holo : cadre chromé, reflet irisé qui glisse sur la photo, timbre holographique */
.card.is-land.fin-holo { background: linear-gradient(160deg, #5d6470, #e9edf3 18%, #8a92a0 36%, #ffffff 52%, #6f7783 70%, #dfe4ec 88%, #4f5560); }
.card.is-land.fin-holo .card-photo::after { mix-blend-mode: color-dodge; opacity: .45;
  background: linear-gradient(115deg, transparent 20%, #ff7ad9 32%, #ffd36b 40%, #7dffb2 48%, #6bd7ff 56%, #b38bff 64%, transparent 76%) 0 0 / 250% 100%; animation: pc-foil 5s ease-in-out infinite alternate; }
@keyframes pc-foil { to { background-position: 100% 0; } }
.card.is-land.fin-holo .pc-stamp > div { background: conic-gradient(from 30deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff, #ff7ad9); color: #111; animation: bd-foil 4s linear infinite; }
.card.is-land.fin-holo .pc-band { border-left-color: #b38bff; }
@media (prefers-reduced-motion: reduce) { .card.is-land.fin-holo .card-photo::after, .card.is-land.fin-holo .pc-stamp > div { animation: none; } }
/* Dorée « carte de luxe » : cadre or épais, lettres dorées, bande noire et or */
.card.is-land.fin-or { background: linear-gradient(135deg, #6e4f0c, #f9e08a 18%, #b8891f 36%, #fff3c2 52%, #a87b1e 70%, #f3d47a 86%, #7a5a12); }
.card.is-land.fin-or .card-in { inset: 1.8cqw; }
.card.is-land.fin-or .card-photo img { filter: sepia(.3) saturate(1.3) contrast(1.05); }
.card.is-land.fin-or .pc-name { -webkit-text-stroke: .35cqw #5a3f08; background: linear-gradient(180deg, #fff6cf, #f2c94c 50%, #b8891f); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(.6cqw .6cqw 0 #1a1a1a); }
.card.is-land.fin-or .pc-hello { color: #f6d478; }
.card.is-land.fin-or .pc-band { background: rgba(14, 11, 6, .9); border-left-color: #d9a52c; }
.card.is-land.fin-or .pc-band .sub { color: #e8cf8a; } .card.is-land.fin-or .pc-stats dt { color: #b8a06a; } .card.is-land.fin-or .pc-stats dd { color: #f6d478; }
.card.is-land.fin-or .pc-stamp > div { background: linear-gradient(135deg, #7a5a12, #f7dc84 30%, #a87b1e 55%, #fff1b8 75%, #8a6516); color: #3a2a08; }
/* Plein cadre « grand format » : plus de liseré ni de bande, la photo seule, les infos en petit dessus */
.card.is-land.fin-plein .card-in { inset: 0; border-radius: 1.6cqw; }
.card.is-land.fin-plein .card-photo::before { display: none; }
.card.is-land.fin-plein .card-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .65)); }
.card.is-land.fin-plein .pc-name { font-size: 9.4cqw; }
.card.is-land.fin-plein .pc-band { left: 0; right: 0; bottom: 0; height: 9cqw; background: none; box-shadow: none; border: 0; border-radius: 0; }
.card.is-land.fin-plein .pc-band .sub, .card.is-land.fin-plein .pc-stats dd { color: #fff; text-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .8); }
.card.is-land.fin-plein .pc-stats dt { color: rgba(255, 255, 255, .75); }
.card.is-land.fin-plein .card-top { bottom: 10cqw; }
.card.is-land.fin-plein.r-legendaire { box-shadow: 0 0 0 .5cqw #d9a52c, 0 14px 30px -12px rgba(0, 0, 0, .6); }
.card.is-land.fin-plein.r-mythique { box-shadow: 0 0 0 .5cqw #c8102e, 0 0 22px -4px rgba(255, 40, 80, .7), 0 14px 30px -12px rgba(0, 0, 0, .6); }

/* Ouverture d'un paquet : un Paysage est à plat, dans une case horizontale (dos compris) ; dans un lot mixte il reste couché */
.slot.is-land { width: calc(var(--w) * 1.75); }
@media (max-width: 760px) { .slot.is-land { width: 92vw; max-width: 560px; } }
.slot.is-land .inner { aspect-ratio: 88 / 63; }
.slot.is-land .land { aspect-ratio: 88 / 63; }
.slot.is-land .land > .card.is-land { position: relative; left: auto; top: auto; width: 100%; translate: none; rotate: none; }
.slot.is-land .card-back { border-radius: 2% / 2.8%; }
.slot.is-land .card-back svg { width: 40cqw; }
.slot.is-land .card-back .back-logo { width: 22cqw; }
.slot.is-land .card-back::before { inset: 2.6cqw; } .slot.is-land .card-back::after { inset: 3.8cqw; }
.slot.is-land .card-back .back-foot { bottom: 5cqw; font-size: 2.6cqw; }
.slot.is-land.tease .back::after { border-radius: 2% / 2.8%; }

/* Lot de 5 du paquet Paysages : 5 cartes horizontales par rangée sur ordinateur, 2 sur téléphone */
.reveal.is-bulk.is-landbulk { width: min(1320px, 100%); }
.reveal.is-bulk .slot.is-land { width: auto; max-width: none; }
@media (max-width: 760px) { .reveal.is-bulk.is-landbulk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; } }

/* ===== Balades : « fiche de randonnée » (balisage, pastille des kilomètres, profil de dénivelé décoratif) ===== */
.card.cat-balade { --acc: #8a8a8a; --paper: #f3efe4; --ink-w: #23281f; --ring: transparent; padding: 0; background: var(--paper); color: var(--ink-w); }
.card.cat-balade.r-peu-commune { --acc: #2f7d4a; } .card.cat-balade.r-rare { --acc: #2e5fc0; } .card.cat-balade.r-epique { --acc: #6b3db8; }
.card.cat-balade.r-legendaire { --acc: #b8860b; --ring: #d9a52c; } .card.cat-balade.r-mythique { --acc: #c8102e; --ring: #c8102e; }
.card.cat-balade.r-mythique { box-shadow: 0 0 22px -6px rgba(255, 40, 80, .55), 0 14px 30px -16px rgba(0, 0, 0, .55); }
.card.cat-balade .card-in { height: 100%; border-radius: inherit; background: transparent; }
.card.cat-balade:not(.fin-ev) .card-in::before { display: none; }
/* Liseré de rareté dessiné à l'intérieur : rien ne dépasse sur les cartes voisines */
.card.card.cat-balade .card-in::after { content: ""; display: block; position: absolute; inset: 0; z-index: 9; border-radius: inherit; pointer-events: none; background: none;
  box-shadow: inset 0 0 0 1.4cqw var(--ring); mix-blend-mode: normal; opacity: 1; animation: none; }
.card.cat-balade .wk-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 11cqw; background: var(--ink-w); display: flex; align-items: center; gap: 2.4cqw; padding: 0 4cqw; color: var(--paper); }
.card.cat-balade .wk-mark { width: 9cqw; height: 5.4cqw; display: grid; grid-template-rows: 1fr 1fr; border-radius: .6cqw; overflow: hidden; box-shadow: 0 0 0 .4cqw var(--paper); flex: none; }
.card.cat-balade .wk-mark i:first-child { background: #fff; } .card.cat-balade .wk-mark i:last-child { background: var(--acc); }
.card.cat-balade .wk-top b { font: 700 3.6cqw/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.card.cat-balade .wk-top .no { margin-left: auto; font: 600 3.4cqw/1 var(--mono); opacity: .8; }
.card.cat-balade .wk-top .fin-tag { font-size: 3cqw; padding: .6cqw 1.6cqw; }
.card.cat-balade .card-photo { inset: 14cqw 4cqw auto; height: 66cqw; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 0 0 .6cqw #fff, 0 1cqw 2cqw rgba(0, 0, 0, .25); }
.card.cat-balade .card-photo img { object-position: center 50%; }
.card.cat-balade .wk-km { position: absolute; right: 5cqw; top: 70cqw; z-index: 3; display: grid; place-items: center; align-content: center; width: 22cqw; height: 22cqw; border-radius: 50%;
  background: var(--acc); color: #fff; box-shadow: 0 0 0 1cqw var(--paper); font: 800 8cqw/.9 var(--display); text-align: center; }
.card.cat-balade .wk-km small { display: block; font-size: 3.6cqw; letter-spacing: .1em; }
.card.cat-balade .card-band { inset: 84cqw 30cqw auto 5cqw; padding: 0; background: none; color: var(--ink-w); clip-path: none; }
.card.cat-balade .card-band h3 { font: 800 8.4cqw/.95 var(--display); text-transform: uppercase; color: var(--ink-w); margin: 0; }
.card.cat-balade .card-band .sub { margin: 1.4cqw 0 0; font: 500 3.6cqw/1.25 var(--text); color: #59604f; opacity: 1; }
.card.cat-balade .card-band::before, .card.cat-balade .card-band::after { display: none; }
.card.cat-balade .wk-prof { position: absolute; left: 0; right: 0; bottom: 18cqw; height: 13cqw; }
.card.cat-balade .wk-prof svg { width: 100%; height: 100%; display: block; }
.card.cat-balade .pf-area { fill: var(--acc); opacity: .3; } .card.cat-balade .pf-line { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linejoin: round; }
.card.cat-balade .card-stats { height: 18cqw; background: var(--ink-w); border-top: 0; }
.card.cat-balade .card-stats dt { color: #a8ad9c; } .card.cat-balade .card-stats dd { color: var(--paper); }
.card.cat-balade .wk-lvl { display: inline-flex; gap: .8cqw; } .card.cat-balade .wk-lvl i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.card.cat-balade .wk-lvl i.on { background: var(--acc); }
.card.cat-balade .var-dots { bottom: 20cqw; }
/* Holo : pastille et balisage holographiques, fond irisé */
.card.cat-balade.fin-holo { background: linear-gradient(160deg, #f3efe4, #e9f3ff 50%, #fbe9ff); }
.card.cat-balade.fin-holo .wk-mark i:last-child, .card.cat-balade.fin-holo .wk-km { background: conic-gradient(from 30deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff, #ff7ad9); color: #111; }
/* Dorée : fiche couleur parchemin doré, pastille en or */
.card.cat-balade.fin-or { --ink-w: #17130a; background: linear-gradient(160deg, #fff6d6, #f1dc9c); }
.card.cat-balade.fin-or .card-band { background: none; } .card.cat-balade.fin-or .card-band h3 { color: #3a2a08; }
.card.cat-balade.fin-or .card-stats { background: #17130a; } .card.cat-balade.fin-or .card-stats dd { color: #f6d478; }
.card.cat-balade.fin-or .wk-km { background: linear-gradient(135deg, #8a6516, #f7dc84 40%, #b8891f 70%, #fff1b8); color: #2a1e05; }
.card.cat-balade.fin-or .card-photo { box-shadow: 0 0 0 .8cqw #d9a52c; }
/* Plein cadre : photo sur toute la fiche, nom en blanc */
.card.cat-balade.fin-plein .card-photo { inset: 11cqw 0 18cqw; height: auto; border-radius: 0; box-shadow: none; }
.card.cat-balade.fin-plein .card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .75)); }
.card.cat-balade.fin-plein .card-band { inset: auto 5cqw 33cqw; } .card.cat-balade.fin-plein .card-band h3, .card.cat-balade.fin-plein .card-band .sub { color: #fff; }
.card.cat-balade.fin-plein .wk-km { top: 16cqw; } .card.cat-balade.fin-plein .wk-prof { opacity: .85; }

/* Fiche d'une balade : carte des provinces et point de départ */
.walk-map { margin: 0 0 24px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-3); }
.walk-map svg { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
.walk-map path { fill: color-mix(in srgb, var(--ink) 12%, transparent); stroke: var(--bg-2); stroke-width: 1.2; }
.walk-map .wm-halo { fill: #c8102e; opacity: .25; } .walk-map .wm-dot { fill: #c8102e; stroke: #fff; stroke-width: 2; }
.walk-map p { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 8px 0 0; font-size: 13px; }
.walk-map small { color: var(--ink-2); font-family: var(--mono); } .walk-map a { white-space: nowrap; }

/* Balades et Paysages : les calques internes (z-index) restent dans la carte, sous l'étiquette « Nouvelle » et la croix */
.card.cat-balade, .card.is-land { isolation: isolate; }
.slot .tag { z-index: 6; }
#detail .close { z-index: 10; }
@media (max-width: 760px) { #detail.is-land .detail-card { margin-top: 40px; } }

/* Formation : règles repliables */
.game-rules-box { margin: 0 0 16px; }
.game-rules-box summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding: 2px 0; }
.game-rules-box .game-rules { margin: 8px 0 0; }
.hemi + .hand-head, .hemi + .game-result { margin-top: 18px; }
.hand + .muted + .game-log, .game-result + .game-log { margin-bottom: 18px; }

/* Statistiques longues : plus petites plutôt que coupées */
.card-stats dd.is-long { font-size: 3.6cqw; }
.card-stats dd.is-xlong { font-size: 2.9cqw; }
.card-stats dd.is-xxlong { font-size: 3cqw; line-height: 1.1; white-space: normal; } /* sur deux lignes (« Marchienne-au-Pont ») */

/* Tableau des chances : il défile dans son cadre sur téléphone au lieu de dépasser la marge */
.detail-info .card-odds .odds-scroll { overflow-x: auto; max-width: 100%; }

/* Image introuvable (Paysages, Balades) : collines dessinées à la place de la zone vide */
.card .card-photo.no-img { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 63' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2397b8c9'/%3E%3Cstop offset='1' stop-color='%23e8dcc0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='88' height='63' fill='url(%23s)'/%3E%3Ccircle cx='62' cy='20' r='7' fill='%23f6e3a1'/%3E%3Cpath d='M0 44L20 30L34 40L52 24L70 38L88 30V63H0Z' fill='%236f8f6a'/%3E%3Cpath d='M0 52L24 44L44 50L66 42L88 48V63H0Z' fill='%23455f45'/%3E%3C/svg%3E") center bottom / cover; }

/* Album sur grand écran : cartes moins larges, plus de colonnes ; Paysages sur six colonnes (trois par rangée) */
@media (min-width: 761px) { .grid:not(.has-wide) { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (min-width: 1300px) { .grid.has-wide { grid-template-columns: repeat(6, 1fr); } }

/* Fiche : carte précédente / suivante (boutons sur ordinateur, balayage sur téléphone) */
.detail-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 5; width: 26px; height: 64px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-2); color: var(--ink); font: 400 30px/1 var(--display); cursor: pointer; opacity: .85; padding: 0; }
.detail-nav:hover { opacity: 1; border-color: var(--gold); }
#detail-prev { left: 3px; } #detail-next { right: 3px; }
@media (max-width: 760px), (hover: none) { .detail-nav { display: none; } }
.detail-card.slide-l { animation: slide-l .28s ease-out; } .detail-card.slide-r { animation: slide-r .28s ease-out; }
@keyframes slide-l { from { opacity: .2; transform: translateX(40px); } }
@keyframes slide-r { from { opacity: .2; transform: translateX(-40px); } }
@media (prefers-reduced-motion: reduce) { .detail-card.slide-l, .detail-card.slide-r { animation: none; } }

/* ===== Voitures belges : « Showroom » (fond noir, photo en lumière, filet chromé, emblème émaillé de la rareté) ===== */
.card.cat-voiture { --acc: #8a8a8a; --chrome: linear-gradient(135deg, #f5f6f8, #7d828c 30%, #e8eaee 50%, #6c717a 70%, #f5f6f8); padding: 0;
  background: radial-gradient(ellipse at 50% 30%, #2b2e35, #0b0c0f 70%); color: #eceae4; }
.card.cat-voiture.r-peu-commune { --acc: #2f7d4a; } .card.cat-voiture.r-rare { --acc: #2e5fc0; } .card.cat-voiture.r-epique { --acc: #6b3db8; }
.card.cat-voiture.r-legendaire { --acc: #b8860b; --chrome: linear-gradient(135deg, #fff1b8, #a87b1e 30%, #f7dc84 50%, #8a6516 70%, #fff1b8); box-shadow: 0 0 20px -6px rgba(230, 195, 106, .55), 0 14px 30px -16px rgba(0, 0, 0, .6); }
.card.cat-voiture.r-mythique { --acc: #c8102e; --chrome: linear-gradient(135deg, #ffd0d8, #8a0020 30%, #ff6b81 50%, #6a0016 70%, #ffd0d8); box-shadow: 0 0 22px -6px rgba(255, 40, 80, .55), 0 14px 30px -16px rgba(0, 0, 0, .6); }
.card.cat-voiture .card-in { height: 100%; border-radius: inherit; background: transparent; }
.card.cat-voiture:not(.fin-ev) .card-in::before { display: none; }
/* Filet chromé fin (à l'intérieur de la carte) */
.card.card.cat-voiture .card-in::after { content: ""; display: block; position: absolute; inset: 1.6cqw; z-index: 6; border-radius: 3cqw; pointer-events: none; opacity: 1; animation: none;
  mix-blend-mode: normal; border: .35cqw solid transparent; background: var(--chrome) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card.cat-voiture .card-photo { inset: 1.6cqw 1.6cqw auto; height: 66cqw; border-radius: 3cqw 3cqw 0 0; overflow: hidden; background: #1b1d22; }
.card.cat-voiture .card-photo img { object-position: var(--pos, 50% 55%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 55%); }
.card.cat-voiture .card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #0b0c0f); }
.card.cat-voiture .card-top { top: 4cqw; left: 4cqw; right: 4cqw; z-index: 3; }
.card.cat-voiture .card-top .no { background: rgba(0, 0, 0, .55); font-size: 3.2cqw; }
.card.cat-voiture .car-badge { position: absolute; left: 50%; top: 60cqw; translate: -50% 0; z-index: 3; width: 14cqw; height: 14cqw; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--acc) 50%, #fff), var(--acc) 55%, color-mix(in srgb, var(--acc) 60%, #000));
  box-shadow: 0 0 0 .7cqw #d9dce2, 0 0 0 1.1cqw #6c717a, 0 1cqw 2cqw rgba(0, 0, 0, .6); font: 700 4.6cqw/1 Georgia, serif; color: #fff; }
.card.cat-voiture .card-band { inset: 78cqw 6cqw auto; padding: 0; background: none; clip-path: none; text-align: center; color: #eceae4; }
.card.cat-voiture .card-band::before, .card.cat-voiture .card-band::after { display: none; }
.card.cat-voiture .card-band h3 { margin: 0; font: 600 7.4cqw/1 var(--text); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.card.cat-voiture .card-band h3.is-long { font-size: 5.4cqw; letter-spacing: .08em; }
.card.cat-voiture .card-band .sub { margin: 2.4cqw 2cqw 0; font: 400 3.4cqw/1.3 var(--text); color: #a5a8af; opacity: 1; }
.card.cat-voiture .card-stats { left: 8cqw; right: 8cqw; bottom: 7cqw; height: auto; background: none; border: 0; text-align: center; }
.card.cat-voiture .card-stats div + div { border-left: .25cqw solid rgba(255, 255, 255, .15); }
.card.cat-voiture .card-stats dt { font-size: 2.3cqw; letter-spacing: .2em; color: #8d9098; }
.card.cat-voiture .card-stats dd { font: 500 4cqw/1 var(--text); color: #eceae4; }
.card.cat-voiture .var-dots { bottom: 24cqw; }
/* Holo : filet et emblème irisés, reflet discret sur la photo */
.card.cat-voiture.fin-holo { --chrome: conic-gradient(from 30deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff, #ff7ad9); }
.card.cat-voiture.fin-holo .card-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: color-dodge; opacity: .26;
  background: linear-gradient(115deg, transparent 25%, #ff7ad9 35%, #ffd36b 43%, #7dffb2 51%, #6bd7ff 59%, #b38bff 67%, transparent 77%); }
.card.cat-voiture.fin-holo .car-badge { background: conic-gradient(from 30deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff, #ff7ad9); color: #111; }
.card.cat-voiture.fin-holo .card-band h3 { background: linear-gradient(90deg, #ffd1f1, #fff, #b8f3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Dorée : noir chaud, filet, emblème et lettres en or */
.card.cat-voiture.fin-or { --chrome: linear-gradient(135deg, #fff1b8, #a87b1e 30%, #f7dc84 50%, #8a6516 70%, #fff1b8); background: radial-gradient(ellipse at 50% 30%, #2e2614, #0b0904 70%); }
.card.cat-voiture.fin-or .card-photo img { filter: sepia(.25) saturate(1.2); } .card.cat-voiture.fin-or .card-photo::after { background: linear-gradient(180deg, transparent 55%, #0b0904); }
.card.cat-voiture.fin-or .car-badge { background: radial-gradient(circle at 35% 30%, #fff1b8, #d9a52c 55%, #7a5a12); color: #2a1e05; box-shadow: 0 0 0 .7cqw #f7dc84, 0 0 0 1.1cqw #7a5a12, 0 1cqw 2cqw rgba(0, 0, 0, .6); }
.card.cat-voiture.fin-or .card-band h3, .card.cat-voiture.fin-or .card-stats dd { color: #f6d478; }
.card.cat-voiture.fin-or .card-band .sub, .card.cat-voiture.fin-or .card-stats dt { color: #b8a06a; }
/* Plein cadre : photo sur toute la carte, emblème en petit dans le coin */
.card.cat-voiture.fin-plein .card-photo { inset: 1.6cqw; height: auto; border-radius: 3cqw; }
.card.cat-voiture.fin-plein .card-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .15), transparent 35%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .92)); }
.card.cat-voiture.fin-plein .car-badge { top: 4cqw; left: auto; right: 4cqw; translate: none; width: 12cqw; height: 12cqw; }
.card.cat-voiture.fin-plein .card-band .sub { color: #d5d7dc; }
.card.cat-voiture .card-stats dd.is-long { font-size: 3.4cqw; }
.card.cat-voiture .card-stats dd.is-xlong { font-size: 2.9cqw; }
.card.cat-voiture .card-stats dd.is-xxlong { font-size: 3cqw; line-height: 1.1; white-space: normal; }

/* ===== Cours d'eau : « Atlas » (carte horizontale de géographe : bordure graduée, courbes de niveau, nom en italique
   bleu, tracé du cours d'eau, rose des vents, échelle proportionnelle à la longueur) ===== */
.card.is-land.cat-riviere { --paper: #f1ead6; --ink-m: #22303f; --water: #1d5aa6; }
.card.is-land.cat-riviere .card-in { background:
    repeating-radial-gradient(circle at 18% 86%, transparent 0 2.6cqw, rgba(29, 90, 166, .09) 2.6cqw 2.85cqw),
    linear-gradient(rgba(34, 48, 63, .05) .15cqw, transparent .15cqw) 0 0 / 100% 12cqw,
    linear-gradient(90deg, rgba(34, 48, 63, .05) .15cqw, transparent .15cqw) 0 0 / 12cqw 100%,
    var(--paper); }
/* Bordure graduée (blanc / couleur de la rareté) et filet intérieur, comme le cadre d'une carte d'état-major */
.card.is-land.cat-riviere .card-in::before { display: block; content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: none; mix-blend-mode: normal; opacity: 1;
  background: repeating-linear-gradient(90deg, var(--acc) 0 4cqw, #fbf8ef 4cqw 8cqw) top / 100% 1.1cqw no-repeat,
    repeating-linear-gradient(90deg, var(--acc) 0 4cqw, #fbf8ef 4cqw 8cqw) bottom / 100% 1.1cqw no-repeat,
    repeating-linear-gradient(180deg, var(--acc) 0 4cqw, #fbf8ef 4cqw 8cqw) left / 1.1cqw 100% no-repeat,
    repeating-linear-gradient(180deg, var(--acc) 0 4cqw, #fbf8ef 4cqw 8cqw) right / 1.1cqw 100% no-repeat; }
.card.is-land.cat-riviere .card-in::after { display: block; content: ""; position: absolute; inset: 1.1cqw; z-index: 1; pointer-events: none; border: .25cqw solid var(--ink-m); background: none; animation: none; mix-blend-mode: normal; opacity: 1; }
.card.is-land.cat-riviere .card-photo { inset: 3cqw 3cqw 3cqw 40cqw; z-index: 2; border: .3cqw solid var(--ink-m); }
.card.is-land.cat-riviere .card-photo::before, .card.is-land.cat-riviere .card-photo::after { display: none; }
.card.is-land.cat-riviere .card-photo img { filter: saturate(1.1) contrast(1.03); }
.card.is-land.cat-riviere .rv-rose { position: absolute; right: 4.6cqw; top: 4.6cqw; width: 11cqw; z-index: 4; filter: drop-shadow(0 .3cqw .5cqw rgba(0, 0, 0, .5)); }
.card.is-land.cat-riviere .rv-rose svg { display: block; overflow: visible; }
.card.is-land.cat-riviere .rs-ring { fill: none; stroke: #fff; stroke-width: 1; opacity: .8; }
.card.is-land.cat-riviere .rs-n { fill: var(--acc); stroke: #fff; stroke-width: .8; } .card.is-land.cat-riviere .rs-o { fill: #fff; opacity: .9; }
.card.is-land.cat-riviere .rs-t { font: 700 6px/1 var(--display); fill: #fff; text-anchor: middle; }
.card.is-land.cat-riviere .rv-panel { position: absolute; left: 3.2cqw; top: 3.2cqw; bottom: 3.2cqw; width: 34.4cqw; display: flex; flex-direction: column; gap: 1cqw; padding: 1.2cqw 1.2cqw 1cqw; color: var(--ink-m); }
.card.is-land.cat-riviere .card-top { position: static; display: flex; align-items: center; gap: 1cqw; }
.card.is-land.cat-riviere .rv-kind { font: 600 1.9cqw/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: #7a6f58; }
.card.is-land.cat-riviere .card-top .no { margin-left: auto; background: none; color: var(--ink-m); padding: 0; font-size: 1.9cqw; }
.card.is-land.cat-riviere .card-top .fin-tag { font-size: 1.6cqw; padding: .4cqw .8cqw; }
.card.is-land.cat-riviere .rv-name { margin: .6cqw 0 0; font: italic 700 7.4cqw/.95 "EB Garamond", Georgia, serif; color: var(--water); letter-spacing: .01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: .1em; }
.card.is-land.cat-riviere .rv-name.is-long { font-size: 6cqw; } .card.is-land.cat-riviere .rv-name.is-xlong { font-size: 4.8cqw; }
.card.is-land.cat-riviere.r-legendaire .rv-name, .card.is-land.cat-riviere.r-mythique .rv-name { letter-spacing: .1em; text-transform: uppercase; font-size: 6.2cqw; }
.card.is-land.cat-riviere.r-legendaire .rv-name.is-long, .card.is-land.cat-riviere.r-mythique .rv-name.is-long { font-size: 5cqw; }
.card.is-land.cat-riviere.r-legendaire .rv-name.is-xlong, .card.is-land.cat-riviere.r-mythique .rv-name.is-xlong { font-size: 4cqw; }
.card.is-land.cat-riviere .sub { margin: 0; font: 500 2.2cqw/1.2 var(--text); color: #5a5140; }
.card.is-land.cat-riviere .rv-trace { height: 8.4cqw; border-top: .2cqw solid rgba(34, 48, 63, .25); border-bottom: .2cqw solid rgba(34, 48, 63, .25); }
.card.is-land.cat-riviere .rv-trace svg { width: 100%; height: 100%; display: block; overflow: visible; }
.card.is-land.cat-riviere .rv-bed { fill: none; stroke: rgba(29, 90, 166, .18); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.card.is-land.cat-riviere .rv-line { fill: none; stroke: var(--water); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.card.is-land.cat-riviere .rv-src { fill: #fff; stroke: var(--water); stroke-width: 1; vector-effect: non-scaling-stroke; } .card.is-land.cat-riviere .rv-mouth { fill: var(--water); }
.card.is-land.cat-riviere .rv-stats { margin: 0; display: grid; gap: .5cqw; }
.card.is-land.cat-riviere .rv-stats div { display: flex; align-items: baseline; gap: 1cqw; }
.card.is-land.cat-riviere .rv-stats div::before { content: ""; order: 1; flex: 1; border-bottom: .25cqw dotted rgba(34, 48, 63, .35); }
.card.is-land.cat-riviere .rv-stats dt { font: 600 1.8cqw/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #7a6f58; white-space: nowrap; }
.card.is-land.cat-riviere .rv-stats dd { order: 2; margin: 0; font: 700 2.4cqw/1 var(--display); color: var(--ink-m); white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.card.is-land.cat-riviere .rv-scale { margin-top: auto; display: flex; align-items: center; gap: 1cqw; font: 600 1.8cqw/1 var(--mono); color: var(--ink-m); }
.card.is-land.cat-riviere .rv-scale i { flex: 1; height: 1.3cqw; border: .2cqw solid var(--ink-m);
  background: repeating-linear-gradient(90deg, var(--acc) 0 calc(100% / var(--seg)), #fbf8ef calc(100% / var(--seg)) calc(200% / var(--seg))); }
.card.is-land.cat-riviere .var-dots { right: 4.4cqw; bottom: 4.4cqw; }
/* Holo « nacre » : papier irisé, cadre chromé, reflet qui glisse sur la photo, nom et échelle holographiques */
.card.is-land.cat-riviere.fin-holo { --paper: #f3f1fb; }
.card.is-land.cat-riviere.fin-holo .card-in { background: repeating-radial-gradient(circle at 18% 86%, transparent 0 2.6cqw, rgba(150, 110, 255, .12) 2.6cqw 2.85cqw),
    linear-gradient(135deg, #f6efff, #e5fbff 40%, #fff3e3 70%, #f1e9ff); }
.card.is-land.cat-riviere.fin-holo .card-photo::after { display: block; content: ""; position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: .4;
  background: linear-gradient(115deg, transparent 20%, #ff7ad9 32%, #ffd36b 40%, #7dffb2 48%, #6bd7ff 56%, #b38bff 64%, transparent 76%) 0 0 / 250% 100%; animation: pc-foil 5s ease-in-out infinite alternate; }
.card.is-land.cat-riviere.fin-holo .rv-name { background: linear-gradient(90deg, #6a3df0, #1d8fd6, #12a57a, #c0399a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.is-land.cat-riviere.fin-holo .rv-scale i, .card.is-land.cat-riviere.fin-holo .rs-n { background: conic-gradient(from 30deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff, #ff7ad9); fill: #b38bff; }
@media (prefers-reduced-motion: reduce) { .card.is-land.cat-riviere.fin-holo .card-photo::after { animation: none; } }
/* Dorée « atlas ancien » : papier jauni, encre sépia, rose et graduations dorées */
.card.is-land.cat-riviere.fin-or { --paper: #ead7a6; --ink-m: #4a3410; --water: #7a5410; --acc: #b8891f; }
.card.is-land.cat-riviere.fin-or .card-photo img { filter: sepia(.45) saturate(1.2) contrast(1.05); }
.card.is-land.cat-riviere.fin-or .rv-name { background: linear-gradient(180deg, #8a6516, #c9971c 50%, #5a3f08); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.is-land.cat-riviere.fin-or .rs-n { fill: #f7dc84; }
/* Plein cadre : la photo sur toute la carte, la légende dans un cartouche de papier */
.card.is-land.cat-riviere.fin-plein .card-photo { inset: 0; border: 0; }
.card.is-land.cat-riviere.fin-plein .card-in::before, .card.is-land.cat-riviere.fin-plein .card-in::after { display: none; }
.card.is-land.cat-riviere.fin-plein .rv-panel { left: 2.4cqw; top: auto; bottom: 2.4cqw; width: 36cqw; padding: 1.6cqw; background: rgba(241, 234, 214, .93); border: .25cqw solid var(--ink-m); box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, .35); }
.card.is-land.cat-riviere.fin-plein .rv-trace { display: none; }

/* ===== Moulins : « Sac de farine » (toile de jute, médaillon imprimé, nom au pochoir, qualité de farine selon la rareté) ===== */
.card.cat-moulin { --ink: #3b3a36; --jute: #e9dec2; }
.card.cat-moulin.r-peu-commune { --ink: #2f6b3f; } .card.cat-moulin.r-rare { --ink: #224f9c; } .card.cat-moulin.r-epique { --ink: #5b2f98; }
.card.cat-moulin.r-legendaire { --ink: #8f6208; } .card.cat-moulin.r-mythique { --ink: #b0122a; }
.card.cat-moulin .card-in { color: var(--ink); background:
    repeating-linear-gradient(0deg, rgba(110, 80, 30, .09) 0 .35cqw, transparent .35cqw .9cqw),
    repeating-linear-gradient(90deg, rgba(110, 80, 30, .09) 0 .35cqw, transparent .35cqw .9cqw),
    radial-gradient(ellipse at 50% 38%, #f3ead3, #d8c69c 92%); }
.card.cat-moulin.r-epique .card-in::after, .card.cat-moulin.r-legendaire .card-in::after { opacity: .2; }
/* Ourlet cousu et deux rayures de sac à la couleur de l'encre */
.card.cat-moulin .ml-hem { position: absolute; left: 0; right: 0; top: 0; height: 12cqw; z-index: 1;
  background: linear-gradient(var(--ink), var(--ink)) 0 6.6cqw / 100% 1.5cqw no-repeat, linear-gradient(var(--ink), var(--ink)) 0 9.4cqw / 100% 1.5cqw no-repeat;
  border-top: 3.6cqw solid rgba(110, 80, 30, .14); opacity: .85; }
.card.cat-moulin .ml-hem::after { content: ""; position: absolute; left: 0; right: 0; top: 1.2cqw; border-top: .4cqw dashed rgba(70, 50, 20, .55); }
.card.cat-moulin .ml-arch { position: absolute; left: 6cqw; right: 6cqw; top: 12.6cqw; z-index: 2; overflow: visible; }
.card.cat-moulin .ml-arch text { font: 700 8.6px/1 "Stardos Stencil", "Arial Black", sans-serif; letter-spacing: 1.6px; fill: var(--ink); }
.card.cat-moulin .card-photo { inset: 31cqw auto auto 50%; width: 56cqw; height: 56cqw; translate: -50% 0; border-radius: 50%; overflow: hidden; z-index: 2;
  box-shadow: 0 0 0 1cqw var(--jute), 0 0 0 1.7cqw var(--ink), 0 0 0 2.6cqw var(--jute), 0 0 0 3cqw var(--ink); }
.card.cat-moulin .card-photo img { object-position: var(--pos, 50% 45%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 45%); filter: saturate(.85) sepia(.15) contrast(1.05); }
.card.cat-moulin .ml-icon { position: absolute; left: 64cqw; top: 74cqw; z-index: 3; width: 13cqw; height: 13cqw; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); box-shadow: 0 0 0 .8cqw var(--jute); }
.card.cat-moulin .ml-icon svg { width: 72%; fill: var(--jute); } .card.cat-moulin .ml-icon .mi-w { fill: none; stroke: var(--jute); stroke-width: 2; }
.card.cat-moulin .card-top { top: .3cqw; left: 4cqw; right: 4cqw; z-index: 3; justify-content: flex-end; }
.card.cat-moulin .card-top .no { order: 2; background: none; padding: 0; color: rgba(70, 50, 20, .7); font: 700 3.2cqw/1 var(--mono); }
.card.cat-moulin .card-top .fin-tag { font-size: 3cqw; }
.card.cat-moulin .card-band, .card.cat-moulin .card-stats { z-index: 3; }
.card.cat-moulin .card-band { left: 4cqw; right: 4cqw; top: 93cqw; bottom: auto; padding: 0; background: none; clip-path: none; text-align: center; color: var(--ink); }
.card.cat-moulin .card-band::before, .card.cat-moulin .card-band::after { display: none; }
.card.cat-moulin .card-band h3 { font: 700 8.6cqw/1 "Stardos Stencil", "Arial Black", sans-serif; letter-spacing: .03em; color: var(--ink); -webkit-line-clamp: 1; white-space: nowrap; display: block; text-overflow: ellipsis; }
.card.cat-moulin .card-band h3.is-long { font-size: 6.6cqw; } .card.cat-moulin .card-band h3.is-xlong { font-size: 5.2cqw; }
.card.cat-moulin .ml-grade { display: inline-block; margin: 1.6cqw 0 0; padding: .7cqw 3cqw; background: var(--ink); color: var(--jute); rotate: -2deg;
  font: 700 3.2cqw/1 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.card.cat-moulin .card-band .sub { margin: 1.6cqw 0 0; font: 500 3.4cqw/1.2 var(--text); color: #5b4a2c; opacity: 1; }
.card.cat-moulin .card-stats { left: 3.4cqw; right: 3.4cqw; bottom: 3cqw; height: 15cqw; padding: 0; gap: 1.6cqw; background: none; }
.card.cat-moulin .card-stats div { padding: 1.4cqw 1.6cqw; border: .45cqw solid var(--ink); border-radius: .8cqw; text-align: center; }
.card.cat-moulin .card-stats div + div { border-left: .45cqw solid var(--ink); }
.card.cat-moulin .card-stats dt { color: #7a6440; font-size: 2.6cqw; } .card.cat-moulin .card-stats dd { color: var(--ink); font: 700 3.8cqw/1.1 var(--display); }
.card.cat-moulin .var-dots { bottom: 20cqw; }
/* Mythique : rubis autour du sac, encre rouge */
.card.cat-moulin.r-mythique.fin-normal .card-band { background: none; color: var(--ink); } .card.cat-moulin.r-mythique.fin-normal .card-stats { background: none; }
.card.cat-moulin.r-mythique.fin-normal .card-stats dd { color: var(--ink); }
/* Holo : encre irisée */
.card.cat-moulin.fin-holo .card-band h3, .card.cat-moulin.fin-holo .ml-arch text { background: none; fill: #7a5cd6; }
.card.cat-moulin.fin-holo .card-band h3 { background: linear-gradient(90deg, #c0399a, #6a3df0, #1d8fd6, #12a57a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.cat-moulin.fin-holo .ml-grade, .card.cat-moulin.fin-holo .ml-icon { background: conic-gradient(from 30deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff, #ff7ad9); color: #2a1d3a; }
.card.cat-moulin.fin-holo .card-photo { box-shadow: 0 0 0 1cqw var(--jute), 0 0 0 1.7cqw #b38bff, 0 0 0 2.6cqw var(--jute), 0 0 0 3cqw #6bd7ff; }
/* Dorée « sac de prestige » : toile claire, encre or */
.card.cat-moulin.fin-or { --ink: #8a6516; }
.card.cat-moulin.fin-or .card-in { background: repeating-linear-gradient(0deg, rgba(150, 110, 20, .08) 0 .35cqw, transparent .35cqw .9cqw),
    repeating-linear-gradient(90deg, rgba(150, 110, 20, .08) 0 .35cqw, transparent .35cqw .9cqw), radial-gradient(ellipse at 50% 38%, #fff8e2, #ecd9a2 92%); }
.card.cat-moulin.fin-or .card-band { background: none; color: var(--ink); } .card.cat-moulin.fin-or .card-stats { background: none; border: 0; }
.card.cat-moulin.fin-or .card-band h3 { background: linear-gradient(180deg, #6e4f0c, #a87b1e 50%, #4a3410); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.cat-moulin.fin-or .card-stats dd { color: #6e4f0c; }
/* Plein cadre : la photo imprimée sur toute la toile, textes en blanc */
.card.cat-moulin.fin-plein .card-photo { inset: 0; width: auto; height: auto; translate: none; border-radius: 0; box-shadow: none; }
.card.cat-moulin.fin-plein .card-photo::after { content: ""; position: absolute; inset: 0; background:
    repeating-linear-gradient(0deg, rgba(110, 80, 30, .12) 0 .35cqw, transparent .35cqw .9cqw), repeating-linear-gradient(90deg, rgba(110, 80, 30, .12) 0 .35cqw, transparent .35cqw .9cqw),
    linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, transparent 50%, rgba(0, 0, 0, .8)); }
.card.cat-moulin.fin-plein .ml-arch text { fill: #fff; } .card.cat-moulin.fin-plein .ml-hem { opacity: .6; }
.card.cat-moulin.fin-plein .card-band { top: 88cqw; background: none; color: #fff; } .card.cat-moulin.fin-plein .card-band h3 { color: #fff; }
.card.cat-moulin.fin-plein .card-band .sub { color: #eee; } .card.cat-moulin.fin-plein .card-stats { background: none; }
.card.cat-moulin.fin-plein .card-stats div { border-color: rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .35); }
.card.cat-moulin.fin-plein .card-stats dt { color: #ddd; } .card.cat-moulin.fin-plein .card-stats dd { color: #fff; }
.card.cat-moulin.fin-plein .ml-icon { top: 4cqw; left: 4cqw; width: 11cqw; height: 11cqw; }

/* ===== Arsenal : « Plan d'armurier » (calque bleu quadrillé, figure cotée, cartouche du plan, poinçon du banc d'épreuves) ===== */
.card.cat-arme { --bp: #123d73; --line-w: rgba(235, 244, 255, .85); --proof: #cfd8e6; }
.card.cat-arme.r-peu-commune { --proof: #6fe0a0; } .card.cat-arme.r-rare { --proof: #7fb2ff; } .card.cat-arme.r-epique { --proof: #c39bff; }
.card.cat-arme.r-legendaire { --proof: #ffd36b; } .card.cat-arme.r-mythique { --proof: #ff5a6e; }
.card.cat-arme .card-in { color: #eaf3ff; box-shadow: inset 0 0 0 .3cqw var(--line-w); background:
    linear-gradient(rgba(255, 255, 255, .16) .2cqw, transparent .2cqw) 0 0 / 100% 15cqw, linear-gradient(90deg, rgba(255, 255, 255, .16) .2cqw, transparent .2cqw) 0 0 / 15cqw 100%,
    linear-gradient(rgba(255, 255, 255, .06) .12cqw, transparent .12cqw) 0 0 / 100% 3cqw, linear-gradient(90deg, rgba(255, 255, 255, .06) .12cqw, transparent .12cqw) 0 0 / 3cqw 100%,
    radial-gradient(ellipse at 50% 30%, #1a4f8f, var(--bp) 75%); }
.card.cat-arme .ar-head { position: absolute; left: 4cqw; right: 4cqw; top: 2.6cqw; z-index: 3; display: flex; align-items: center; gap: 2cqw; padding-bottom: 1.4cqw;
  border-bottom: .3cqw solid var(--line-w); font: 600 3cqw/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.card.cat-arme .ar-head .ar-fig { margin-left: auto; opacity: .75; } .card.cat-arme .ar-head .fin-tag { font-size: 2.8cqw; }
.card.cat-arme .card-photo { inset: 13cqw 6cqw auto 9cqw; height: 66cqw; z-index: 2; background: #dce7f4; border: .35cqw solid var(--line-w); }
/* Tirage « cyanotype » : la photo en niveaux de gris imprimée sur papier bleuté */
/* --fit:cover (ARME_POS) : photo à fond coloré remplissant le cadre, sans bandes ; les armes sur fond blanc restent entières */
.card.cat-arme .card-photo img { object-fit: var(--fit, contain); object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); filter: grayscale(1) contrast(1.25) brightness(1.06); mix-blend-mode: multiply; }
.card.cat-arme .card-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(18, 61, 115, .22), rgba(18, 61, 115, .22)); mix-blend-mode: multiply; }
/* Cotes : flèches et traits de rappel autour de la figure */
.card.cat-arme .ar-dim { position: absolute; z-index: 2; border-color: var(--line-w); border-style: solid; border-width: 0; }
.card.cat-arme .ar-dim-h { left: 9cqw; right: 6cqw; top: 81.6cqw; border-top-width: .25cqw; }
.card.cat-arme .ar-dim-v { left: 5.4cqw; top: 13cqw; height: 66cqw; border-left-width: .25cqw; }
.card.cat-arme .ar-dim::before, .card.cat-arme .ar-dim::after { content: ""; position: absolute; border: 1cqw solid transparent; }
.card.cat-arme .ar-dim-h::before { left: 0; top: -1.1cqw; border-left: 2cqw solid var(--line-w); border-right: 0; }
.card.cat-arme .ar-dim-h::after { right: 0; top: -1.1cqw; border-right: 2cqw solid var(--line-w); border-left: 0; }
.card.cat-arme .ar-dim-v::before { top: 0; left: -1.1cqw; border-top: 2cqw solid var(--line-w); border-bottom: 0; }
.card.cat-arme .ar-dim-v::after { bottom: 0; left: -1.1cqw; border-bottom: 2cqw solid var(--line-w); border-top: 0; }
/* Cartouche du plan : titre, poinçon, caractéristiques */
.card.cat-arme .ar-block { position: absolute; left: 4cqw; right: 4cqw; bottom: 3cqw; top: 86cqw; z-index: 3; display: grid; grid-template-columns: 1fr 23cqw; grid-template-rows: 1fr auto;
  border: .35cqw solid var(--line-w); background: rgba(10, 40, 80, .55); }
.card.cat-arme .ar-title { padding: 2.2cqw 3cqw; border-right: .3cqw solid var(--line-w); min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.card.cat-arme .ar-title h3 { margin: 0; font: 800 8.6cqw/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: .08em; }
.card.cat-arme .ar-title h3.is-long { font-size: 7cqw; } .card.cat-arme .ar-title h3.is-xlong { font-size: 5.6cqw; }
.card.cat-arme .ar-title .sub { margin: 1cqw 0 0; font: 500 3.2cqw/1.2 var(--text); color: #b9cfea; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.cat-arme .ar-proof { display: grid; place-items: center; align-content: center; gap: .8cqw; padding: 1.6cqw; }
.card.cat-arme .ar-proof svg { width: 12cqw; } .card.cat-arme .ar-proof small { font: 700 2.3cqw/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--proof); text-align: center; }
.card.cat-arme .pr-o { fill: none; stroke: var(--proof); stroke-width: 2.4; } .card.cat-arme .pr-i { fill: none; stroke: var(--proof); stroke-width: 1; }
.card.cat-arme .pr-p { fill: var(--proof); }
.card.cat-arme .ar-stats { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: .3cqw solid var(--line-w); }
.card.cat-arme .ar-stats div { min-width: 0; padding: 1.6cqw 2.2cqw; } .card.cat-arme .ar-stats div + div { border-left: .3cqw solid var(--line-w); }
.card.cat-arme .ar-stats dt { font: 600 2.4cqw/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #9fb8d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.cat-arme .ar-stats dd { margin: .8cqw 0 0; font: 600 3.8cqw/1.1 var(--mono); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.cat-arme .ar-stats dd.is-long { font-size: 3.2cqw; } .card.cat-arme .ar-stats dd.is-xlong { font-size: 2.7cqw; } .card.cat-arme .ar-stats dd.is-xxlong { font-size: 2.6cqw; white-space: normal; }
.card.cat-arme .var-dots { bottom: 22cqw; }
/* Holo : quadrillage et poinçon irisés */
.card.cat-arme.fin-holo { --proof: #fff; }
.card.cat-arme.fin-holo .card-in { background:
    linear-gradient(rgba(255, 255, 255, .2) .2cqw, transparent .2cqw) 0 0 / 100% 15cqw, linear-gradient(90deg, rgba(255, 255, 255, .2) .2cqw, transparent .2cqw) 0 0 / 15cqw 100%,
    linear-gradient(135deg, #1b3f8f, #3b2c8f 35%, #0f6a8f 65%, #2a3f9a); }
.card.cat-arme.fin-holo .ar-proof svg { filter: drop-shadow(0 0 1.2cqw #b38bff); } .card.cat-arme.fin-holo .pr-p { fill: #ffd36b; }
.card.cat-arme.fin-holo .ar-title h3 { background: linear-gradient(90deg, #ffd1f1, #fff, #b8f3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Dorée « plaque de laiton gravée » */
.card.cat-arme.fin-or { --line-w: rgba(60, 40, 8, .75); --proof: #5a3f08; }
.card.cat-arme.fin-or .card-in { color: #3a2a08; background: linear-gradient(rgba(60, 40, 8, .12) .2cqw, transparent .2cqw) 0 0 / 100% 15cqw,
    linear-gradient(90deg, rgba(60, 40, 8, .12) .2cqw, transparent .2cqw) 0 0 / 15cqw 100%, linear-gradient(135deg, #b8891f, #f7dc84 30%, #c9971c 55%, #fff1b8 75%, #a87b1e); }
.card.cat-arme.fin-or .ar-block { background: rgba(255, 246, 210, .35); } .card.cat-arme.fin-or .ar-title h3, .card.cat-arme.fin-or .ar-stats dd { color: #2a1e05; }
.card.cat-arme.fin-or .ar-title .sub, .card.cat-arme.fin-or .ar-stats dt { color: #5a4416; }
.card.cat-arme.fin-or .card-photo img { filter: grayscale(1) sepia(.6) contrast(1.2); } .card.cat-arme.fin-or .card-photo::after { background: rgba(184, 137, 31, .25); }
/* Plein cadre : la vraie photo en couleur sur toute la carte, quadrillage du calque par-dessus */
/* --plein-* par carte (ARME_POS) : petite pièce verticale gardée entière en Plein cadre, sur un fond qui prolonge la photo */
.card.cat-arme.fin-plein .card-photo { inset: 0; height: auto; border: 0; background: var(--plein-bg, #0b2a50); }
.card.cat-arme.fin-plein .card-photo img { object-fit: var(--plein-fit, cover); object-position: var(--plein-pos, var(--pos, 50% 50%)); transform: scale(var(--plein-zoom, var(--zoom, 1))); transform-origin: var(--plein-pos, var(--pos, 50% 50%)); -webkit-mask-image: var(--plein-mask, none); mask-image: var(--plein-mask, none); -webkit-mask-composite: source-in; mask-composite: intersect; filter: none; mix-blend-mode: normal; }
.card.cat-arme.fin-plein .card-photo::after { mix-blend-mode: normal; background: linear-gradient(rgba(255, 255, 255, .14) .2cqw, transparent .2cqw) 0 0 / 100% 15cqw,
    linear-gradient(90deg, rgba(255, 255, 255, .14) .2cqw, transparent .2cqw) 0 0 / 15cqw 100%, linear-gradient(180deg, rgba(8, 30, 60, .5), transparent 25%, transparent 50%, rgba(8, 30, 60, .9)); }
.card.cat-arme.fin-plein .ar-dim { display: none; } .card.cat-arme.fin-plein .ar-block { background: rgba(8, 30, 60, .72); }
/* Moulins et Arsenal mythiques : cadre rubis (sans le bandeau rubis des cartes classiques) */
.card.cat-moulin.r-mythique.fin-normal, .card.cat-arme.r-mythique.fin-normal, .card.cat-industrie.r-mythique.fin-normal, .card.cat-marine.r-mythique.fin-normal, .card.cat-presse.r-mythique.fin-normal, .card.cat-chocolat.r-mythique.fin-normal, .card.cat-geant.r-mythique.fin-normal, .card.cat-invention.r-mythique.fin-normal, .card.cat-abbaye.r-mythique.fin-normal {
  --frame: conic-gradient(from 20deg at 50% 50%, #5a0012, #ff2d55, #9a0020, #ff6b81, #6a0016, #ff2d55, #4a000e, #ff8fa0, #5a0012); }
.card.cat-moulin.fin-plein .card-top .no { color: #fff; }
.card.cat-moulin.fin-or .ml-arch text { fill: #7a5a12; } .card.cat-moulin.fin-or .card-band .sub { color: #5a4416; }

/* ===== Pays noir : « Lampisterie » (charbon, photo sous la lampe, jeton de lampe, plaque rivetée, bande de sécurité) ===== */
.card.cat-industrie { --tk: #8e9298; }
.card.cat-industrie.r-peu-commune { --tk: #4f9a73; } .card.cat-industrie.r-rare { --tk: #4f7fd0; } .card.cat-industrie.r-epique { --tk: #8a5bd0; }
.card.cat-industrie.r-legendaire { --tk: #d9a52c; } .card.cat-industrie.r-mythique { --tk: #d4483c; }
.card.cat-industrie .card-in { background: radial-gradient(circle, rgba(255, 255, 255, .05) .25cqw, transparent .35cqw) 0 0 / 1.6cqw 1.6cqw,
    radial-gradient(ellipse at 50% 0%, #2c2d31, #0e0e10 72%); }
.card.cat-industrie .card-photo { inset: 3cqw 3cqw auto; height: 80cqw; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 0 0 .4cqw #3a3b40; }
.card.cat-industrie .card-photo img { object-position: var(--pos, 50% 45%); filter: sepia(.35) contrast(1.12) saturate(.8) brightness(.95); }
/* Lumière jaune de la lampe au centre, la nuit de la galerie sur les bords */
.card.cat-industrie .card-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 196, 110, .22), transparent 55%, rgba(0, 0, 0, .7)); mix-blend-mode: normal; }
.card.cat-industrie .mn-token { position: absolute; right: 5cqw; top: 72cqw; z-index: 3; width: 17cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tk) 35%, #fff), var(--tk) 55%, color-mix(in srgb, var(--tk) 50%, #000));
  box-shadow: inset 0 0 0 .5cqw color-mix(in srgb, var(--tk) 60%, #000), 0 1cqw 2cqw rgba(0, 0, 0, .6); color: color-mix(in srgb, var(--tk) 30%, #000); }
.card.cat-industrie .mn-token::before { content: ""; position: absolute; top: 1.6cqw; left: 50%; width: 2.6cqw; height: 2.6cqw; translate: -50% 0; border-radius: 50%; background: #0e0e10; box-shadow: inset 0 .3cqw .4cqw rgba(0, 0, 0, .8); }
.card.cat-industrie .mn-token b { margin-top: 2.6cqw; font: 700 3.6cqw/1 var(--mono); text-shadow: 0 .15cqw 0 rgba(255, 255, 255, .35); }
.card.cat-industrie .mn-token small { font: 700 1.7cqw/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; margin-top: .4cqw; }
.card.cat-industrie .card-top { top: 5cqw; left: 5cqw; right: 5cqw; }
.card.cat-industrie .card-band { left: 5cqw; right: 24cqw; top: 87cqw; bottom: auto; padding: 0; background: none; clip-path: none; color: #f2efe8; }
.card.cat-industrie .card-band::before, .card.cat-industrie .card-band::after { display: none; }
.card.cat-industrie .card-band h3 { font: 800 9cqw/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #f2efe8; text-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .8); }
.card.cat-industrie .card-band h3.is-long { font-size: 7.4cqw; } .card.cat-industrie .card-band h3.is-xlong { font-size: 6cqw; }
.card.cat-industrie .card-band .sub { margin-top: 1.6cqw; font-size: 3.5cqw; color: #b9b3a6; opacity: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Plaque d'acier rivetée et bande de sécurité jaune et noire */
.card.cat-industrie .card-stats { left: 3cqw; right: 3cqw; bottom: 3cqw; height: 17cqw; border-radius: 1cqw; padding: 2.8cqw 3.6cqw;
  background: radial-gradient(circle, #c9ccd2 .5cqw, #2d2f34 .62cqw, transparent .8cqw) 1cqw 1cqw / 2cqw 2cqw no-repeat, radial-gradient(circle, #c9ccd2 .5cqw, #2d2f34 .62cqw, transparent .8cqw) calc(100% - 1cqw) 1cqw / 2cqw 2cqw no-repeat, radial-gradient(circle, #c9ccd2 .5cqw, #2d2f34 .62cqw, transparent .8cqw) 1cqw calc(100% - 1cqw) / 2cqw 2cqw no-repeat, radial-gradient(circle, #c9ccd2 .5cqw, #2d2f34 .62cqw, transparent .8cqw) calc(100% - 1cqw) calc(100% - 1cqw) / 2cqw 2cqw no-repeat,
    linear-gradient(180deg, #5d6066, #33353a 55%, #26282c); box-shadow: inset 0 .3cqw 0 rgba(255, 255, 255, .15); }
.card.cat-industrie .card-stats::before { content: ""; position: absolute; left: 0; right: 0; top: -3cqw; height: 1.6cqw; border-radius: .4cqw;
  background: repeating-linear-gradient(-45deg, #f2c400 0 1.8cqw, #141414 1.8cqw 3.6cqw); }
.card.cat-industrie .card-stats div + div { border-left-color: rgba(255, 255, 255, .15); }
.card.cat-industrie .card-stats dt { color: #c3c7cf; } .card.cat-industrie .card-stats dd { color: #fff; font-size: 3.8cqw; }
.card.cat-industrie .card-stats dd.is-long { font-size: 3.2cqw; } .card.cat-industrie .card-stats dd.is-xlong { font-size: 2.7cqw; }
.card.cat-industrie .var-dots { bottom: 24cqw; }
.card.cat-industrie.fin-holo .mn-token { background: conic-gradient(from 30deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff, #ff7ad9); color: #1a1a1a; }
.card.cat-industrie.fin-holo .card-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: color-dodge; opacity: .3;
  background: linear-gradient(115deg, transparent 25%, #ff7ad9 35%, #ffd36b 43%, #7dffb2 51%, #6bd7ff 59%, #b38bff 67%, transparent 77%); }
.card.cat-industrie.fin-or { --tk: #d9a52c; }
.card.cat-industrie.fin-or .card-band { background: none; } .card.cat-industrie.fin-or .card-band h3 { color: #f6d478; }
.card.cat-industrie.fin-or .card-stats { background: radial-gradient(circle, #fff1b8 .5cqw, #5a3f08 .62cqw, transparent .8cqw) 1cqw 1cqw / 2cqw 2cqw no-repeat, radial-gradient(circle, #fff1b8 .5cqw, #5a3f08 .62cqw, transparent .8cqw) calc(100% - 1cqw) 1cqw / 2cqw 2cqw no-repeat, radial-gradient(circle, #fff1b8 .5cqw, #5a3f08 .62cqw, transparent .8cqw) 1cqw calc(100% - 1cqw) / 2cqw 2cqw no-repeat, radial-gradient(circle, #fff1b8 .5cqw, #5a3f08 .62cqw, transparent .8cqw) calc(100% - 1cqw) calc(100% - 1cqw) / 2cqw 2cqw no-repeat,
    linear-gradient(180deg, #c9971c, #8a6516 55%, #6e4f0c); border: 0; }
.card.cat-industrie.fin-or .card-stats dd { color: #fff6d8; }
.card.cat-industrie.fin-plein .card-photo { inset: 0; height: auto; border-radius: 0; box-shadow: none; }
.card.cat-industrie.fin-plein .card-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 30%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, .9)); }
.card.cat-industrie.fin-plein .card-band { background: none; }

/* ===== Port et marine : « Affiche de paquebot » (affiche Art déco, flamme à étoile, bandes de coque) ===== */
.card.cat-marine { --flag: #8a8a8a; --navy: #14213d; --cream: #efe6cf; }
.card.cat-marine.r-peu-commune { --flag: #2f7d4a; } .card.cat-marine.r-rare { --flag: #2e5fc0; } .card.cat-marine.r-epique { --flag: #6b3db8; }
.card.cat-marine.r-legendaire { --flag: #c9971c; } .card.cat-marine.r-mythique { --flag: #c8102e; }
.card.cat-marine .card-in { background: radial-gradient(ellipse at 50% 100%, #f6efdc, var(--cream)); }
.card.cat-marine .card-photo { inset: 0 0 auto; height: 88cqw; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); background: var(--navy); }
.card.cat-marine .card-photo img { object-position: var(--pos, 50% 50%); filter: saturate(1.2) contrast(1.1); }
.card.cat-marine .card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 33, 61, .35), transparent 30%); }
.card.cat-marine .mr-stripes { position: absolute; left: -6%; right: -6%; top: 79cqw; height: 16cqw; z-index: 2; pointer-events: none; }
.card.cat-marine .mr-stripes i { position: absolute; left: 0; right: 0; height: 2.6cqw; rotate: -6.6deg; transform-origin: left; }
.card.cat-marine .mr-stripes i:first-child { top: 9cqw; background: var(--flag); } .card.cat-marine .mr-stripes i:last-child { top: 13cqw; background: var(--navy); }
.card.cat-marine .mr-pennant { position: absolute; right: 0; top: 5cqw; z-index: 3; width: 24cqw; filter: drop-shadow(0 .6cqw .8cqw rgba(0, 0, 0, .4)); }
.card.cat-marine .mr-pennant path:first-child { fill: var(--flag); } .card.cat-marine .mr-star { fill: #fff; }
.card.cat-marine .card-top { top: 4cqw; left: 4cqw; right: 30cqw; }
.card.cat-marine .card-top .no { background: var(--cream); color: var(--navy); font-size: 3.2cqw; }
.card.cat-marine .card-band { left: 5cqw; right: 5cqw; top: 96cqw; bottom: auto; padding: 0; background: none; clip-path: none; color: var(--navy); }
.card.cat-marine .card-band::before, .card.cat-marine .card-band::after { display: none; }
.card.cat-marine .mr-kick { margin: 0 0 1cqw; font: 700 2.8cqw/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--flag); }
.card.cat-marine .card-band h3 { font: 400 8.4cqw/1 "Limelight", Georgia, serif; text-transform: uppercase; letter-spacing: .03em; color: var(--navy); }
.card.cat-marine .card-band h3.is-long { font-size: 6.8cqw; } .card.cat-marine .card-band h3.is-xlong { font-size: 5.4cqw; }
.card.cat-marine .card-band .sub { margin-top: 1.4cqw; font: italic 500 3.5cqw/1.2 "Playfair Display", Georgia, serif; color: #3b3b45; opacity: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card.cat-marine .card-stats { height: 16cqw; background: var(--navy); border-top: .8cqw solid var(--flag); }
.card.cat-marine .card-stats dt { color: #9fb3d1; } .card.cat-marine .card-stats dd { font-family: var(--display); font-size: 4.6cqw; color: #f4ecd8; }
.card.cat-marine .card-stats dd.is-long { font-size: 3.9cqw; } .card.cat-marine .card-stats dd.is-xlong { font-size: 3.3cqw; } .card.cat-marine .card-stats dd.is-xxlong { font-size: 2.8cqw; }
.card.cat-marine .var-dots { bottom: 19cqw; }
.card.cat-marine.fin-holo { --cream: #f3f1fb; }
.card.cat-marine.fin-holo .mr-pennant path:first-child, .card.cat-marine.fin-holo .mr-stripes i:first-child { fill: #b38bff; background: linear-gradient(90deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff); }
.card.cat-marine.fin-holo .card-band h3 { background: linear-gradient(90deg, #6a3df0, #1d8fd6, #12a57a, #c0399a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.cat-marine.fin-or { --navy: #0d0b06; --cream: #f6e7b4; --flag: #c9971c; }
.card.cat-marine.fin-or .card-band { background: none; } .card.cat-marine.fin-or .card-stats { background: #0d0b06; } .card.cat-marine.fin-or .card-stats dd { color: #f6d478; }
.card.cat-marine.fin-plein .card-photo { height: auto; inset: 0; clip-path: none; }
.card.cat-marine.fin-plein .card-photo::after { background: linear-gradient(180deg, rgba(20, 33, 61, .3), transparent 30%, transparent 50%, rgba(10, 16, 30, .92) 80%); }
.card.cat-marine.fin-plein .card-band { background: none; color: #f4ecd8; } .card.cat-marine.fin-plein .card-band h3 { color: #f4ecd8; } .card.cat-marine.fin-plein .card-band .sub { color: #dcd3bd; }
.card.cat-marine.fin-plein .mr-stripes { display: none; }

/* ===== Presse et imprimerie : « Une de journal » (titre gothique, édition et prix selon la rareté, photo tramée) ===== */
.card.cat-presse { --acc: #555; --ink-n: #1a1a1a; --paper-n: #f2ede1; }
.card.cat-presse.r-peu-commune { --acc: #2f7d4a; } .card.cat-presse.r-rare { --acc: #2e5fc0; } .card.cat-presse.r-epique { --acc: #6b3db8; }
.card.cat-presse.r-legendaire { --acc: #a87b1e; } .card.cat-presse.r-mythique { --acc: #c8102e; }
.card.cat-presse .card-in { color: var(--ink-n); background: radial-gradient(circle, rgba(60, 50, 30, .05) .2cqw, transparent .3cqw) 0 0 / 1.1cqw 1.1cqw, linear-gradient(180deg, #f6f2e8, var(--paper-n)); }
.card.cat-presse .nw-mast { position: absolute; left: 0; right: 0; top: 2.4cqw; text-align: center; font: 400 11cqw/1 "UnifrakturMaguntia", "Old English Text MT", serif; color: var(--ink-n); }
.card.cat-presse .nw-line { position: absolute; left: 4cqw; right: 4cqw; top: 16.5cqw; display: flex; justify-content: space-between; align-items: center; padding: .8cqw 0;
  border-top: .5cqw solid var(--ink-n); border-bottom: .2cqw solid var(--ink-n); font: 600 2.5cqw/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.card.cat-presse .nw-ed { color: var(--acc); font-weight: 800; }
.card.cat-presse.r-legendaire .nw-ed, .card.cat-presse.r-mythique .nw-ed { padding: .5cqw 1.6cqw; background: var(--acc); color: #fff; }
.card.cat-presse .nw-head { position: absolute; left: 4cqw; right: 4cqw; top: 22.4cqw; margin: 0; font: 900 8.4cqw/1.1 "Playfair Display", Georgia, serif; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.cat-presse .nw-head.is-long { font-size: 6.4cqw; } .card.cat-presse .nw-head.is-xlong { font-size: 4.8cqw; }
.card.cat-presse .card-photo { inset: 34cqw 4cqw auto; height: 64cqw; border: .25cqw solid var(--ink-n); background: #ddd6c6; }
.card.cat-presse .card-photo img { object-position: var(--pos, 50% 30%); filter: grayscale(1) contrast(1.3) brightness(1.05); }
/* Trame de points de l'impression en similigravure */
.card.cat-presse .card-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .45;
  background: radial-gradient(circle, rgba(0, 0, 0, .55) 28%, transparent 34%) 0 0 / 1.1cqw 1.1cqw; }
.card.cat-presse .card-top { top: 36cqw; left: 6cqw; right: 6cqw; }
.card.cat-presse > .card-in > .sub { position: absolute; left: 4cqw; right: 4cqw; top: 100cqw; margin: 0; font: italic 500 3.6cqw/1.25 "Playfair Display", Georgia, serif; color: #2b2b2b;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card.cat-presse .card-stats { left: 4cqw; right: 4cqw; bottom: 3cqw; height: 15cqw; padding: 2cqw 0 0; background: none; border-top: 1cqw double var(--ink-n); }
.card.cat-presse .card-stats div + div { border-left: .2cqw solid rgba(0, 0, 0, .3); }
.card.cat-presse .card-stats dt { color: #5a5550; } .card.cat-presse .card-stats dd { font: 800 4.2cqw/1.1 "Playfair Display", Georgia, serif; color: var(--ink-n); }
.card.cat-presse .card-stats dd.is-long { font-size: 3.5cqw; } .card.cat-presse .card-stats dd.is-xlong { font-size: 3cqw; } .card.cat-presse .card-stats dd.is-xxlong { font-size: 2.6cqw; }
.card.cat-presse .var-dots { bottom: 20cqw; }
.card.cat-presse.fin-holo { --paper-n: #f1ecfb; }
.card.cat-presse.fin-holo .nw-mast, .card.cat-presse.fin-holo .nw-head { background: linear-gradient(90deg, #6a3df0, #1d8fd6, #12a57a, #c0399a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.cat-presse.fin-or { --paper-n: #f1dc9c; --ink-n: #3a2a08; }
.card.cat-presse.fin-or .nw-mast { color: #8a6516; } .card.cat-presse.fin-or .card-stats { background: none; border-top-color: #3a2a08; } .card.cat-presse.fin-or .card-stats dd { color: #3a2a08; }
.card.cat-presse.fin-or .card-photo img { filter: grayscale(1) sepia(.7) contrast(1.2); }
.card.cat-presse.fin-plein .card-photo { inset: 0; height: auto; border: 0; }
.card.cat-presse.fin-plein .card-photo img { filter: grayscale(1) contrast(1.15); }
.card.cat-presse.fin-plein .card-photo::after { opacity: .3; }
.card.cat-presse.fin-plein .nw-mast, .card.cat-presse.fin-plein .nw-line, .card.cat-presse.fin-plein .nw-head { z-index: 2; }
.card.cat-presse.fin-plein .card-in::before { display: block; content: ""; position: absolute; inset: 0 0 auto; height: 46cqw; z-index: 1; background: linear-gradient(180deg, var(--paper-n) 80%, transparent); animation: none; mix-blend-mode: normal; opacity: 1; }
.card.cat-presse.fin-plein > .card-in > .sub, .card.cat-presse.fin-plein .card-stats { z-index: 2; background: rgba(242, 237, 225, .94); padding-left: 2cqw; padding-right: 2cqw; }
/* Trois colonnes d'article (lignes grises) entre le chapeau et « En bref » */
.card.cat-presse .card-stats::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 2.4cqw); height: 10cqw; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 .55cqw, transparent .55cqw 1.7cqw) left / 31% 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 .55cqw, transparent .55cqw 1.7cqw) center / 31% 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 .55cqw, transparent .55cqw 1.7cqw) right / 31% 100% no-repeat; }
.card.cat-presse.fin-plein .card-stats::before { display: none; }

/* ===== Chocolat & biscuits : « Ballotin » (carton chocolat bordé d'or, fenêtre du couvercle, ruban noué, alvéoles) ===== */
.card.cat-chocolat { --rib: #8a6f5a; --gold: #d9a441; --cocoa: #3b2117; --cream-c: #f6e3b4; }
.card.cat-chocolat.r-peu-commune { --rib: #2f7d4a; } .card.cat-chocolat.r-rare { --rib: #2e5fc0; } .card.cat-chocolat.r-epique { --rib: #6b3db8; }
.card.cat-chocolat.r-legendaire { --rib: #c9971c; } .card.cat-chocolat.r-mythique { --rib: #c8102e; }
/* Carton gaufré à losanges dorés et filet d'or intérieur */
.card.cat-chocolat .card-in { color: var(--cream-c);
  background: repeating-linear-gradient(45deg, rgba(217, 164, 65, .07) 0 .25cqw, transparent .25cqw 4cqw), repeating-linear-gradient(-45deg, rgba(217, 164, 65, .07) 0 .25cqw, transparent .25cqw 4cqw),
    radial-gradient(ellipse at 50% 30%, #4a2a1b, var(--cocoa) 60%, #24130c);
  box-shadow: inset 0 0 0 1.4cqw var(--cocoa), inset 0 0 0 1.8cqw var(--gold), inset 0 0 0 2.1cqw #24130c; }
/* Fenêtre du couvercle : cadre doré à double filet */
.card.cat-chocolat .card-photo { inset: 5cqw 5cqw auto; height: 78cqw; border-radius: 2cqw; overflow: hidden; background: #24130c;
  box-shadow: 0 0 0 .6cqw var(--gold), 0 0 0 1.2cqw #24130c, 0 0 0 1.5cqw color-mix(in srgb, var(--gold) 70%, #fff); }
.card.cat-chocolat .card-photo img { object-position: var(--pos, 50% 45%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 45%); filter: saturate(1.08) contrast(1.04); }
.card.cat-chocolat .card-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(36, 19, 12, .45)); }
/* Ruban satiné en travers de la boîte et rosette (numéro et rareté) */
.card.cat-chocolat .ch-ribbon { position: absolute; left: 0; right: 0; top: 77cqw; height: 5cqw; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rib) 55%, #fff), var(--rib) 35%, color-mix(in srgb, var(--rib) 60%, #000));
  box-shadow: 0 .6cqw 1cqw rgba(0, 0, 0, .45); }
.card.cat-chocolat .ch-bow { position: absolute; right: 6cqw; top: 70.5cqw; z-index: 3; width: 18cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rib) 40%, #fff), var(--rib) 55%, color-mix(in srgb, var(--rib) 55%, #000));
  box-shadow: 0 0 0 .5cqw var(--gold), 0 1cqw 2cqw rgba(0, 0, 0, .55); color: #fff; text-shadow: 0 .2cqw .3cqw rgba(0, 0, 0, .5); }
.card.cat-chocolat .ch-bow::before, .card.cat-chocolat .ch-bow::after { content: ""; position: absolute; top: 50%; width: 11cqw; height: 7cqw; z-index: -1; border-radius: 50%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rib) 55%, #fff), var(--rib) 50%, color-mix(in srgb, var(--rib) 60%, #000)); box-shadow: 0 .6cqw 1cqw rgba(0, 0, 0, .4); }
.card.cat-chocolat .ch-bow::before { right: 70%; translate: 0 -60%; rotate: -14deg; } .card.cat-chocolat .ch-bow::after { left: 70%; translate: 0 -60%; rotate: 14deg; }
.card.cat-chocolat .ch-bow b { font: 700 3.8cqw/1 var(--mono); }
.card.cat-chocolat .ch-bow small { font: 700 2.3cqw/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; margin-top: .5cqw; max-width: 15cqw; text-align: center; }
/* Ruban doré (légendaire) : texte foncé pour rester lisible */
.card.cat-chocolat.r-legendaire .ch-bow { color: #2a1a05; text-shadow: 0 .15cqw 0 rgba(255, 241, 184, .5); }
.card.cat-chocolat .card-top { top: 7cqw; left: 7cqw; right: 7cqw; }
/* Étiquette du nom : lettres de confiseur, filet doré */
.card.cat-chocolat .card-band { left: 6cqw; right: 6cqw; top: 90cqw; bottom: auto; padding: 0; background: none; clip-path: none; color: var(--cream-c); text-align: center; }
.card.cat-chocolat .card-band::before, .card.cat-chocolat .card-band::after { display: none; }
.card.cat-chocolat .card-band h3 { font: 900 8cqw/1.05 "Playfair Display", Georgia, serif; text-transform: none; letter-spacing: 0; color: var(--cream-c); text-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .6); }
.card.cat-chocolat .card-band h3.is-long { font-size: 6.6cqw; } .card.cat-chocolat .card-band h3.is-xlong { font-size: 5.4cqw; }
.card.cat-chocolat .card-band .sub { margin-top: 1.2cqw; font: italic 500 3.5cqw/1.2 "Playfair Display", Georgia, serif; color: #d8c3a0; opacity: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Caractéristiques dans trois alvéoles de pralines */
.card.cat-chocolat .card-stats { left: 5cqw; right: 5cqw; bottom: 4.5cqw; height: 17cqw; padding: 0; gap: 2cqw; background: none; }
.card.cat-chocolat .card-stats div, .card.cat-chocolat .card-stats div:first-child { padding: 2.4cqw 1.6cqw 0; border: 0; border-radius: 4cqw / 3.4cqw; text-align: center;
  background: radial-gradient(ellipse at 50% 30%, #2a160d, #160a05 75%); box-shadow: inset 0 .8cqw 1.4cqw rgba(0, 0, 0, .8), inset 0 -.4cqw .6cqw rgba(217, 164, 65, .18), 0 0 0 .35cqw color-mix(in srgb, var(--gold) 75%, #000); }
.card.cat-chocolat .card-stats dt { color: var(--gold); font-size: 2.6cqw; } .card.cat-chocolat .card-stats dd { font: 700 4cqw/1.1 "Playfair Display", Georgia, serif; color: var(--cream-c); }
.card.cat-chocolat .card-stats dd.is-long { font-size: 3.3cqw; } .card.cat-chocolat .card-stats dd.is-xlong { font-size: 2.8cqw; } .card.cat-chocolat .card-stats dd.is-xxlong { font-size: 2.4cqw; }
.card.cat-chocolat .var-dots { bottom: 23cqw; }
.card.cat-chocolat.fin-holo .ch-ribbon, .card.cat-chocolat.fin-holo .ch-bow, .card.cat-chocolat.fin-holo .ch-bow::before, .card.cat-chocolat.fin-holo .ch-bow::after {
  background: linear-gradient(90deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff); } .card.cat-chocolat.fin-holo .ch-bow { color: #1a1a1a; text-shadow: none; }
.card.cat-chocolat.fin-holo .card-band h3 { background: linear-gradient(90deg, #ffd1f1, #fff6c8, #b8f3ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
/* Dorée : papier d'or de la boîte, lettres chocolat */
.card.cat-chocolat.fin-or { --rib: #6e3b1c; --cream-c: #3a1f0f; --gold: #8a5a1c; }
.card.cat-chocolat.fin-or .card-in { background: repeating-linear-gradient(45deg, rgba(110, 70, 10, .14) 0 .25cqw, transparent .25cqw 4cqw), repeating-linear-gradient(-45deg, rgba(110, 70, 10, .14) 0 .25cqw, transparent .25cqw 4cqw),
    linear-gradient(135deg, #b8891f, #f7dc84 30%, #c9971c 55%, #fff1b8 75%, #a87b1e); box-shadow: inset 0 0 0 1.4cqw #c9971c, inset 0 0 0 1.8cqw #6e4f0c; }
.card.cat-chocolat.fin-or .card-band { background: none; } .card.cat-chocolat.fin-or .card-band h3 { text-shadow: 0 .2cqw 0 rgba(255, 241, 184, .6); } .card.cat-chocolat.fin-or .card-band .sub { color: #5a3a14; }
.card.cat-chocolat.fin-or .card-stats dd { color: #f6e3b4; } .card.cat-chocolat.fin-or .card-stats dt { color: #e0b75a; }
/* Plein cadre : la photo sur toute la carte, ruban et alvéoles par-dessus */
.card.cat-chocolat.fin-plein .card-photo { inset: 0; height: auto; border-radius: 0; box-shadow: none; }
.card.cat-chocolat.fin-plein .card-photo::after { background: linear-gradient(180deg, rgba(36, 19, 12, .2), transparent 30%, transparent 48%, rgba(36, 19, 12, .9) 66%, rgba(24, 12, 6, .95)); }
.card.cat-chocolat.fin-plein .card-band { background: none; }
.card.cat-chocolat.fin-plein .ch-ribbon { display: none; } /* pas de ruban en travers du visage */

/* ===== Géants et carnavals : « Affiche de ducasse » (papier à losanges de Gille, fanions, photo festonnée, ruban, programme) ===== */
.card.cat-geant { --rib: #8a6f5a; --red-g: #c8102e; --yel-g: #f4b41a; --ink-g: #1a1a1a; --paper-g: #f6e7c1; --prog-g: #fff6dc; }
.card.cat-geant.r-peu-commune { --rib: #2f7d4a; } .card.cat-geant.r-rare { --rib: #2e5fc0; } .card.cat-geant.r-epique { --rib: #6b3db8; }
.card.cat-geant.r-legendaire { --rib: #c9971c; } .card.cat-geant.r-mythique { --rib: #c8102e; }
/* Papier d'affiche : losanges rouges et noirs croisés (habit de Gille) et confettis */
.card.cat-geant .card-in { color: var(--ink-g);
  background: radial-gradient(circle, rgba(200, 16, 46, .28) 0 .5cqw, transparent .6cqw) 3cqw 5cqw / 17cqw 19cqw,
    radial-gradient(circle, rgba(244, 180, 26, .5) 0 .45cqw, transparent .55cqw) 11cqw 13cqw / 13cqw 23cqw,
    radial-gradient(circle, rgba(46, 95, 192, .22) 0 .4cqw, transparent .5cqw) 7cqw 1cqw / 21cqw 15cqw,
    repeating-linear-gradient(56deg, rgba(200, 16, 46, .07) 0 .35cqw, transparent .35cqw 7cqw), repeating-linear-gradient(-56deg, rgba(26, 26, 26, .06) 0 .35cqw, transparent .35cqw 7cqw),
    linear-gradient(180deg, #faefd2, var(--paper-g));
  box-shadow: inset 0 0 0 1.2cqw var(--red-g), inset 0 0 0 1.6cqw var(--paper-g), inset 0 0 0 1.9cqw var(--ink-g); }
.card.cat-geant .gd-head { position: absolute; left: 4cqw; right: 4cqw; top: 3.4cqw; text-align: center; white-space: nowrap;
  font: 400 6.4cqw/1 "Alfa Slab One", Georgia, serif; letter-spacing: .05em; text-transform: uppercase; color: var(--red-g); text-shadow: .35cqw .35cqw 0 var(--yel-g); }
/* Photo sous une guirlande de fanions, bordée d'un lambrequin festonné (comme une baraque foraine) */
.card.cat-geant .card-photo { inset: 12.5cqw 5cqw auto; height: 68cqw; overflow: hidden; background: #2a0f0f; box-shadow: 0 0 0 .7cqw var(--red-g), 0 0 0 1cqw var(--ink-g); }
.card.cat-geant .card-photo img { object-position: var(--pos, 50% 35%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 35%); filter: saturate(1.12) contrast(1.04); }
.card.cat-geant .gd-valance { position: absolute; left: 4.3cqw; right: 4.3cqw; top: 81.2cqw; height: 3cqw; pointer-events: none; background: var(--red-g);
  -webkit-mask: radial-gradient(circle 1.6cqw at 50% 0, #000 96%, transparent) 0 0 / 3.2cqw 100% repeat-x; mask: radial-gradient(circle 1.6cqw at 50% 0, #000 96%, transparent) 0 0 / 3.2cqw 100% repeat-x; }
.card.cat-geant .gd-flags { position: absolute; left: 4.3cqw; right: 4.3cqw; top: 12.5cqw; height: 4.4cqw; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--red-g) 0 6.4cqw, var(--yel-g) 6.4cqw 12.8cqw, var(--ink-g) 12.8cqw 19.2cqw);
  -webkit-mask: conic-gradient(from -36deg at 50% 100%, #000 72deg, transparent 0) 0 0 / 6.4cqw 100% repeat-x; mask: conic-gradient(from -36deg at 50% 100%, #000 72deg, transparent 0) 0 0 / 6.4cqw 100% repeat-x;
  filter: drop-shadow(0 .4cqw .4cqw rgba(0, 0, 0, .4)); }
.card.cat-geant .card-top { top: 18.5cqw; left: 7cqw; right: 7cqw; }
.card.cat-geant .card-top .no { background: var(--prog-g); color: var(--ink-g); border: .3cqw solid var(--ink-g); border-radius: .6cqw; font-size: 3.4cqw; padding: .5cqw 1.6cqw; }
/* Rareté : étoiles de Gille (une à six) */
.card.cat-geant .gd-stars { position: absolute; right: 7cqw; top: 73cqw; z-index: 2; display: flex; gap: .5cqw; padding: .9cqw 1.4cqw; border-radius: 99px; background: rgba(26, 26, 26, .72); }
.card.cat-geant .gd-stars i { width: 4cqw; height: 4cqw; background: linear-gradient(180deg, #fff1b8, var(--yel-g)); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
/* Nom sur un ruban en arc à queues d'aronde, à la couleur de la rareté */
.card.cat-geant .card-band { left: 2cqw; right: 2cqw; top: 83.5cqw; bottom: auto; height: 15cqw; padding: 0; background: none; clip-path: none; text-align: center; }
.card.cat-geant .card-band::before, .card.cat-geant .card-band::after { display: none; }
.card.cat-geant .gd-ribbon { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--rib) 60%, #fff), var(--rib) 30%, color-mix(in srgb, var(--rib) 70%, #000));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 4L9 6Q50 -1 91 6L100 4L95 11L100 18L91 16Q50 9 9 16L0 18L5 11Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 4L9 6Q50 -1 91 6L100 4L95 11L100 18L91 16Q50 9 9 16L0 18L5 11Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  filter: drop-shadow(0 .5cqw .6cqw rgba(0, 0, 0, .35)); }
.card.cat-geant .card-band h3 { position: relative; margin: 0; padding: 3.2cqw 12cqw 0; font: 400 7.4cqw/1.1 "Lobster", cursive; text-transform: none; letter-spacing: 0; color: #fff;
  text-shadow: 0 .35cqw 0 rgba(0, 0, 0, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.card.cat-geant .card-band h3.is-long { font-size: 6.2cqw; padding-top: 3.8cqw; } .card.cat-geant .card-band h3.is-xlong { font-size: 5.1cqw; padding-top: 4.3cqw; } .card.cat-geant .card-band h3.is-xxlong { font-size: 4.3cqw; padding-top: 4.7cqw; }
.card.cat-geant.r-legendaire .card-band h3 { color: #2a1a05; text-shadow: 0 .25cqw 0 rgba(255, 241, 184, .6); } /* ruban doré : texte foncé */
.card.cat-geant > .card-in > .sub { position: absolute; left: 7cqw; right: 7cqw; top: 99cqw; margin: 0; text-align: center; font: italic 500 3.5cqw/1.22 var(--text); color: #4a1f14;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Caractéristiques au « Programme » : cartouche crème, filet rouge, chiffres en lettres d'affiche */
.card.cat-geant .card-stats { left: 5.5cqw; right: 5.5cqw; bottom: 4.4cqw; height: 19.5cqw; padding: 3.8cqw 1cqw 1cqw; background: var(--prog-g); overflow: visible;
  border: 0; box-shadow: inset 0 0 0 .5cqw var(--red-g), inset 0 0 0 .9cqw var(--prog-g), inset 0 0 0 1.1cqw var(--red-g), 0 .6cqw 1cqw rgba(0, 0, 0, .25); }
.card.cat-geant .card-stats::before { content: attr(data-label); position: absolute; left: 50%; top: -2.2cqw; translate: -50% 0; padding: .5cqw 2.6cqw; white-space: nowrap;
  font: 400 3cqw/1 "Alfa Slab One", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--prog-g); background: var(--red-g); box-shadow: 0 0 0 .3cqw var(--ink-g); }
.card.cat-geant .card-stats div, .card.cat-geant .card-stats div:first-child { padding: 0 1.4cqw; text-align: center; }
.card.cat-geant .card-stats div + div { border-left: .3cqw dotted rgba(200, 16, 46, .55); }
.card.cat-geant .card-stats dt { color: var(--red-g); font-size: 2.8cqw; letter-spacing: .06em; }
.card.cat-geant .card-stats dd { margin-top: 1cqw; font: 400 4.2cqw/1.15 "Alfa Slab One", Georgia, serif; color: var(--ink-g);
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card.cat-geant .card-stats dd.is-long { font-size: 3.4cqw; } .card.cat-geant .card-stats dd.is-xlong { font-size: 3cqw; } .card.cat-geant .card-stats dd.is-xxlong { font-size: 2.6cqw; } /* sur deux lignes au besoin */
.card.cat-geant .var-dots { bottom: 27cqw; }
/* Paillettes des épiques et mieux : points dorés et roses qui scintillent sur le papier, sous la photo, le ruban et le programme */
.card.cat-geant .gd-spark { display: none; }
.card.cat-geant.r-epique .gd-spark, .card.cat-geant.r-legendaire .gd-spark, .card.cat-geant.r-mythique .gd-spark { display: block; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, #fff7d0 0 .25cqw, rgba(214, 160, 20, .95) .45cqw, transparent .8cqw) 2cqw 3cqw / 9cqw 11cqw,
    radial-gradient(circle, #fff 0 .2cqw, rgba(220, 60, 120, .75) .4cqw, transparent .7cqw) 6cqw 8cqw / 13cqw 9cqw;
  animation: gd-twinkle 2.2s ease-in-out infinite alternate; }
.card.cat-geant.r-epique .gd-spark { opacity: .6; }
@keyframes gd-twinkle { 0% { background-position: 2cqw 3cqw, 6cqw 8cqw; filter: brightness(.8); } 100% { background-position: 2.6cqw 3.6cqw, 5.4cqw 8.8cqw; filter: brightness(1.3); } }
@media (prefers-reduced-motion: reduce) { .card.cat-geant .gd-spark { animation: none !important; } }
/* Holo : ruban irisé */
.card.cat-geant.fin-holo .gd-ribbon { background: linear-gradient(90deg, #ff7ad9, #ffd36b, #7dffb2, #6bd7ff, #b38bff); } .card.cat-geant.fin-holo .card-band h3 { color: #1a1a1a; text-shadow: 0 .25cqw 0 rgba(255, 255, 255, .6); }
.card.cat-geant.fin-holo .gd-head { background: linear-gradient(90deg, #c8102e, #b33dc6, #1d8fd6, #12a57a, #c8102e); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
/* Dorée : affiche imprimée sur papier d'or, encre brune */
.card.cat-geant.fin-or { --rib: #6e3b1c; --red-g: #7a2a12; --ink-g: #3a2a08; --prog-g: #fff1c4; }
.card.cat-geant.fin-or .card-in { background: repeating-linear-gradient(56deg, rgba(110, 70, 10, .12) 0 .35cqw, transparent .35cqw 7cqw), repeating-linear-gradient(-56deg, rgba(110, 70, 10, .12) 0 .35cqw, transparent .35cqw 7cqw),
    linear-gradient(135deg, #b8891f, #f7dc84 30%, #c9971c 55%, #fff1b8 75%, #a87b1e); }
.card.cat-geant.fin-or .gd-head { text-shadow: .3cqw .3cqw 0 rgba(255, 241, 184, .7); } .card.cat-geant.fin-or > .card-in > .sub { color: #3a2a08; }
.card.cat-geant.fin-or .card-band h3 { color: #fff1c4; }
/* Plein cadre : la photo sur toute la carte, en-tête, ruban et programme par-dessus */
.card.cat-geant.fin-plein .card-photo { inset: 0; height: auto; box-shadow: none; }
.card.cat-geant.fin-plein .card-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(42, 15, 15, .75), transparent 16%, transparent 50%, rgba(42, 15, 15, .88) 66%, rgba(30, 8, 8, .95)); }
.card.cat-geant.fin-plein .gd-valance { display: none; }
.card.cat-geant.fin-plein .gd-head { z-index: 2; color: #fff1c9; text-shadow: .35cqw .35cqw 0 var(--red-g); }
.card.cat-geant.fin-plein > .card-in > .sub { color: #fff1c9; text-shadow: 0 .2cqw .4cqw rgba(0, 0, 0, .8); }

/* ===== Inventions belges : « Brevet d'invention » (papier crème quadrillé, planche à double filet, cachet de cire) ===== */
.card.cat-invention { --acc: #7a5c3e; --ink-p: #1d2a44; --ink-soft: #4a4636; --paper-p: #f4efe2; --paper-hi: #faf6ec; --paper-lo: #e6dcc4; --grid-p: rgba(70, 110, 170, .14); }
.card.cat-invention.r-peu-commune { --acc: #2f7d4a; } .card.cat-invention.r-rare { --acc: #2e5fc0; } .card.cat-invention.r-epique { --acc: #6b3db8; }
.card.cat-invention.r-legendaire { --acc: #b8891f; } .card.cat-invention.r-mythique { --acc: #c8102e; }
/* Papier quadrillé bleu pâle et double filet d'encadrement */
.card.cat-invention .card-in { color: var(--ink-p);
  background: linear-gradient(var(--grid-p) .14cqw, transparent .14cqw) 0 0 / 3.2cqw 3.2cqw, linear-gradient(90deg, var(--grid-p) .14cqw, transparent .14cqw) 0 0 / 3.2cqw 3.2cqw,
    radial-gradient(ellipse at 50% 40%, var(--paper-hi), var(--paper-p) 65%, var(--paper-lo));
  box-shadow: inset 0 0 0 1.5cqw var(--paper-p), inset 0 0 0 1.75cqw var(--ink-p), inset 0 0 0 2.3cqw var(--paper-p), inset 0 0 0 2.45cqw var(--ink-p); }
/* En-tête du Royaume et numéro tapé à la machine */
.card.cat-invention .pt-head { position: absolute; left: 0; right: 0; top: 3.6cqw; z-index: 1; text-align: center; line-height: 1; }
.card.cat-invention .pt-head span { display: block; font: 600 2.5cqw/1 var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.card.cat-invention .pt-head b { display: block; margin-top: .9cqw; font: 800 5cqw/1 "Playfair Display", Georgia, serif; font-variant-caps: small-caps; letter-spacing: .05em; }
.card.cat-invention .pt-no { position: absolute; left: 5cqw; right: 5cqw; top: 12.8cqw; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 1cqw .4cqw;
  border-top: .7cqw double var(--ink-p); border-bottom: .2cqw solid var(--ink-p); font: 400 3.5cqw/1 "Special Elite", "Courier New", monospace; }
.card.cat-invention .pt-rar { font: 700 2.9cqw/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
/* Planche : photo à double filet, légère teinte sépia */
.card.cat-invention .card-photo { inset: 21.5cqw 6cqw auto; height: 70cqw; overflow: hidden; background: #e8e1cf;
  box-shadow: 0 0 0 .3cqw var(--ink-p), 0 0 0 1.1cqw var(--paper-p), 0 0 0 1.35cqw var(--ink-p); }
/* --fit:contain (INVENTION_POS) : image entière sur le papier, pour un schéma sur fond transparent trop large pour le cadre */
.card.cat-invention .card-photo img { object-fit: var(--fit, cover); object-position: var(--pos, 50% 45%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 45%); filter: sepia(.28) saturate(.9) contrast(1.05); }
.card.cat-invention .card-top { top: 23.5cqw; left: 8cqw; right: 8cqw; justify-content: flex-end; }
/* Cachet de cire à la couleur de la rareté, au coin de la planche */
.card.cat-invention .pt-seal { position: absolute; right: 2.6cqw; top: 80.5cqw; z-index: 2; width: 15cqw; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 48% 52% 50% 50% / 53% 47% 53% 47%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--acc) 50%, #fff), var(--acc) 45%, color-mix(in srgb, var(--acc) 55%, #000));
  box-shadow: 0 .8cqw 1.6cqw rgba(0, 0, 0, .35), inset 0 -.6cqw 1cqw rgba(0, 0, 0, .3), .5cqw -.3cqw 0 -.2cqw color-mix(in srgb, var(--acc) 80%, #000); }
.card.cat-invention .pt-seal b { display: grid; place-items: center; width: 10.4cqw; aspect-ratio: 1; border-radius: 50%; border: .35cqw dashed rgba(255, 255, 255, .45);
  font: 900 4.2cqw/1 "Playfair Display", Georgia, serif; color: rgba(255, 255, 255, .88); text-shadow: 0 -.2cqw 0 rgba(0, 0, 0, .35), 0 .2cqw 0 rgba(255, 255, 255, .25); }
/* Tampon rouge en biais : légendaires et mythiques */
.card.cat-invention .pt-stamp { position: absolute; left: 8cqw; top: 27cqw; z-index: 2; padding: .8cqw 2.2cqw; rotate: -12deg;
  font: 800 5.2cqw/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #c8102e;
  border: .55cqw solid currentColor; border-radius: 1cqw; box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .4); background: rgba(255, 246, 240, .55); opacity: .88; }
/* Titre : « Fig. 1 — nom » en Garamond italique, description dessous */
.card.cat-invention .card-band { left: 6cqw; right: 6cqw; top: 95cqw; bottom: auto; z-index: 1; padding: 0; background: none; clip-path: none; color: var(--ink-p); }
.card.cat-invention .card-band::before, .card.cat-invention .card-band::after { display: none; }
.card.cat-invention .card-band h3 { font: italic 700 6.6cqw/1.05 "EB Garamond", Georgia, serif; text-transform: none; letter-spacing: 0; color: var(--ink-p); }
.card.cat-invention .card-band h3::before { content: "Fig. 1 — "; font-weight: 500; font-size: .62em; color: var(--ink-soft); }
.card.cat-invention .card-band h3.is-long { font-size: 5.6cqw; } .card.cat-invention .card-band h3.is-xlong { font-size: 4.8cqw; }
.card.cat-invention .card-band .sub { margin-top: 1cqw; font: italic 500 3.7cqw/1.2 "EB Garamond", Georgia, serif; color: var(--ink-soft); opacity: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Champs du formulaire tapés à la machine sur ligne pointillée */
.card.cat-invention .card-stats { left: 5cqw; right: 5cqw; bottom: 4.4cqw; height: 14cqw; z-index: 1; padding: 1.8cqw 0 0; gap: 2.6cqw; background: none; border-top: .25cqw solid var(--ink-p); }
.card.cat-invention .card-stats div, .card.cat-invention .card-stats div:first-child { padding: 0; border: 0; }
.card.cat-invention .card-stats dt { font-size: 2.6cqw; letter-spacing: .14em; color: var(--ink-soft); }
.card.cat-invention .card-stats dd { margin-top: 1cqw; padding-bottom: .6cqw; font: 400 3.9cqw/1.15 "Special Elite", "Courier New", monospace; color: var(--ink-p); border-bottom: .3cqw dotted var(--ink-soft); }
.card.cat-invention .card-stats dd.is-long { font-size: 3.3cqw; } .card.cat-invention .card-stats dd.is-xlong { font-size: 2.8cqw; } .card.cat-invention .card-stats dd.is-xxlong { font-size: 2.4cqw; }
.card.cat-invention .var-dots { bottom: 21cqw; }
/* Holo : cyanotype (bleu de Prusse, traits blancs) */
.card.cat-invention.fin-holo { --ink-p: #f1f6ff; --ink-soft: #c4d8f2; --paper-p: #1f4f8f; --paper-hi: #2c66ad; --paper-lo: #153a6c; --grid-p: rgba(255, 255, 255, .13); }
.card.cat-invention.fin-holo .pt-rar { color: var(--ink-p); }
.card.cat-invention.fin-holo .card-photo img { filter: grayscale(1) contrast(1.1) brightness(1.08); }
.card.cat-invention.fin-holo .card-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #2a6bb5; mix-blend-mode: color; }
/* Dorée : parchemin et sceau doré */
.card.cat-invention.fin-or { --ink-p: #3a2a08; --ink-soft: #6a5226; --paper-p: #ead6a6; --paper-hi: #f6e9c4; --paper-lo: #d2b276; --grid-p: rgba(120, 80, 20, .12); }
.card.cat-invention.fin-or .card-band { background: none; } .card.cat-invention.fin-or .card-stats { background: none; border-top: .25cqw solid var(--ink-p); }
.card.cat-invention.fin-or .card-stats dd { color: var(--ink-p); }
.card.cat-invention.fin-or .card-photo img { filter: sepia(.6) saturate(1.1) contrast(1.05); }
.card.cat-invention.fin-or .pt-seal { background: radial-gradient(circle at 36% 30%, #fff3c2, #d9b04a 40%, #8a6516); }
.card.cat-invention.fin-or .pt-seal b { color: #5a3f08; border-color: rgba(90, 63, 8, .45); text-shadow: 0 .2cqw 0 rgba(255, 243, 194, .6); }
/* Plein cadre : photo sur toute la carte, en-tête, titre et champs sur bandeaux de papier translucides */
.card.cat-invention.fin-plein .card-photo { inset: 0; height: auto; box-shadow: none; }
.card.cat-invention.fin-plein .pt-head { top: 0; padding: 3.6cqw 0 10.2cqw; background: rgba(244, 239, 226, .9); }
.card.cat-invention.fin-plein .pt-no { background: none; }
.card.cat-invention.fin-plein .card-band { left: 4cqw; right: 4cqw; padding: 1.6cqw 2.4cqw; border-radius: 1cqw; background: rgba(244, 239, 226, .88); }
.card.cat-invention.fin-plein .card-stats { left: 4cqw; right: 4cqw; padding: 1.6cqw 2.4cqw 0; border-radius: 1cqw; background: rgba(244, 239, 226, .88); }
.card.cat-invention.fin-plein .pt-seal { top: 83cqw; }

/* ===== Abbayes : « Enluminure » (vélin, double filet or et rouge, fleurons, arcade gothique, lettrine, rubriques) ===== */
.card.cat-abbaye { --rub: #6b4a2b; --rubric: #9b1c1c; --ink-a: #2a1a0e; --gold-a: #c9a03a; --vellum: #f3e6c4;
  --arch: polygon(0% 100%, 0% 34%, 1% 28.7%, 3.7% 24%, 7.8% 20%, 13% 16.4%, 19% 13.3%, 25.5% 10.4%, 32.1% 7.7%, 38.7% 5.2%, 44.7% 2.6%, 50% 0%, 55.3% 2.6%, 61.3% 5.2%, 67.9% 7.7%, 74.5% 10.4%, 81% 13.3%, 87% 16.4%, 92.2% 20%, 96.3% 24%, 99% 28.7%, 100% 34%, 100% 100%); }
.card.cat-abbaye.r-peu-commune { --rub: #2f6b3a; } .card.cat-abbaye.r-rare { --rub: #1f3a8a; } .card.cat-abbaye.r-epique { --rub: #5b2378; }
.card.cat-abbaye.r-legendaire, .card.cat-abbaye.r-mythique { --rub: #b8891f; }
/* Vélin : taches brunes, grain léger, bords plus sombres */
.card.cat-abbaye .card-in { color: var(--ink-a);
  background: radial-gradient(ellipse 40% 30% at 18% 14%, rgba(160, 110, 40, .13), transparent 70%), radial-gradient(ellipse 45% 35% at 86% 78%, rgba(140, 90, 30, .14), transparent 70%),
    radial-gradient(ellipse 30% 22% at 70% 40%, rgba(150, 100, 40, .07), transparent 70%), radial-gradient(circle, rgba(90, 60, 20, .07) .2cqw, transparent .3cqw) 0 0 / 1.3cqw 1.3cqw,
    radial-gradient(ellipse at 50% 45%, #f7edd2, var(--vellum) 62%, #e6d1a2); }
/* Double filet : or, puis rouge à l'extérieur */
.card.cat-abbaye .ab-frame { position: absolute; inset: 1.8cqw; z-index: 1; pointer-events: none; border: .45cqw solid var(--gold-a); outline: .3cqw solid var(--rubric); outline-offset: .55cqw; }
/* Fleurons des coins : quatre lobes d'or autour d'un bouton rouge */
.card.cat-abbaye .ab-corners i { position: absolute; z-index: 2; width: 6cqw; height: 6cqw; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--rubric) 0 .75cqw, transparent .85cqw), radial-gradient(circle at 50% 24%, var(--gold-a) 0 1.25cqw, transparent 1.35cqw),
    radial-gradient(circle at 24% 50%, var(--gold-a) 0 1.25cqw, transparent 1.35cqw), radial-gradient(circle at 76% 50%, var(--gold-a) 0 1.25cqw, transparent 1.35cqw),
    radial-gradient(circle at 50% 76%, var(--gold-a) 0 1.25cqw, transparent 1.35cqw); }
.card.cat-abbaye .ab-corners i:nth-child(1) { left: 2.6cqw; top: 2.6cqw; } .card.cat-abbaye .ab-corners i:nth-child(2) { right: 2.6cqw; top: 2.6cqw; }
.card.cat-abbaye .ab-corners i:nth-child(3) { left: 2.6cqw; bottom: 2.6cqw; } .card.cat-abbaye .ab-corners i:nth-child(4) { right: 2.6cqw; bottom: 2.6cqw; }
.card.cat-abbaye .ab-cart { display: none; }
.card.cat-abbaye .ab-head { position: absolute; left: 10cqw; right: 10cqw; top: 3.3cqw; z-index: 2; text-align: center; white-space: nowrap;
  font: 800 3.4cqw/1 "Playfair Display", Georgia, serif; font-variant: small-caps; letter-spacing: .22em; color: var(--rubric); }
.card.cat-abbaye .ab-head::before, .card.cat-abbaye .ab-head::after { content: ""; display: inline-block; width: 5cqw; height: 1.3cqw; vertical-align: middle; margin: 0 1.6cqw;
  background: linear-gradient(var(--gold-a), var(--gold-a)) 0 50% / 100% .25cqw no-repeat, linear-gradient(45deg, transparent 32%, var(--rubric) 32% 68%, transparent 68%) 100% 50% / 1.3cqw 1.3cqw no-repeat; }
.card.cat-abbaye .ab-head::after { scale: -1 1; }
/* Photo dans une arcade gothique (arc brisé), liseré d'or */
.card.cat-abbaye .card-photo { inset: 8.4cqw 7cqw auto; height: 68cqw; padding: .9cqw; clip-path: var(--arch);
  background: linear-gradient(160deg, #8a6516, #f7dc84 30%, #b8891f 55%, #fff1b8 75%, #a87b1e); }
.card.cat-abbaye .card-photo img { clip-path: var(--arch); background: #3a2a18; object-position: var(--pos, 50% 45%); filter: saturate(1.05) contrast(1.03) sepia(.08); }
.card.cat-abbaye .card-top { top: 9.4cqw; left: 6.4cqw; right: 6.4cqw; }
.card.cat-abbaye .card-top .no { padding: 0; background: none; border-radius: 0; font: 800 2.9cqw/1 "Playfair Display", Georgia, serif; letter-spacing: .04em; color: var(--rubric); }
/* Nom : lettrine à la feuille d'or, peinte à la couleur de la rareté, puis le nom en italique */
.card.cat-abbaye .card-band { left: 7cqw; right: 7cqw; top: 79cqw; bottom: auto; height: 15.4cqw; padding: 0 0 0 15.6cqw; display: flex; align-items: center;
  background: none; clip-path: none; color: var(--ink-a); }
.card.cat-abbaye .card-band::before, .card.cat-abbaye .card-band::after { display: none; }
.card.cat-abbaye .ab-init { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 13.4cqw; height: 13.4cqw; display: grid; place-items: center;
  font: 900 10.4cqw/1 "Playfair Display", Georgia, serif; font-style: normal; color: #f7dc84; text-shadow: 0 .3cqw 0 rgba(0, 0, 0, .35);
  background: radial-gradient(circle, rgba(255, 241, 184, .35) 0 .3cqw, transparent .4cqw) 0 0 / 2.2cqw 2.2cqw, var(--rub);
  box-shadow: inset 0 0 0 .55cqw #d4a537, inset 0 0 0 .8cqw #7a5410, 0 0 0 .25cqw #7a5410, .3cqw .5cqw .8cqw rgba(60, 40, 10, .35); }
.card.cat-abbaye.r-legendaire .ab-init, .card.cat-abbaye.r-mythique .ab-init { color: var(--rubric); text-shadow: 0 .25cqw 0 rgba(255, 248, 220, .7);
  background: linear-gradient(115deg, #a87b1e, #fff3c2 25%, #d4a537 45%, #fff8dc 60%, #b8891f 80%, #f7dc84) 0 0 / 250% 100%; }
/* Mythique : feuille d'or qui brille (reflet qui va et vient) */
.card.cat-abbaye.r-mythique .ab-init { animation: ab-leaf 3.2s ease-in-out infinite alternate; box-shadow: inset 0 0 0 .55cqw #fff1b8, inset 0 0 0 .8cqw #7a5410, 0 0 0 .25cqw #7a5410, 0 0 2.4cqw rgba(255, 210, 90, .8); }
@keyframes ab-leaf { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .card.cat-abbaye.r-mythique .ab-init { animation: none; } }
.card.cat-abbaye .card-band h3 { margin: 0; font: italic 700 6.6cqw/1.06 "EB Garamond", Georgia, serif; text-transform: none; letter-spacing: 0; color: var(--ink-a); }
.card.cat-abbaye .card-band h3.is-long { font-size: 5.7cqw; } .card.cat-abbaye .card-band h3.is-xlong { font-size: 5cqw; } .card.cat-abbaye .card-band h3.is-xxlong { font-size: 4.4cqw; }
.card.cat-abbaye > .card-in > .sub { position: absolute; left: 8cqw; right: 8cqw; top: 95cqw; margin: 0; text-align: center; font: italic 500 3.7cqw/1.22 "EB Garamond", Georgia, serif; color: #4a3420;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Caractéristiques rubriquées : libellés rouges, valeurs à l'encre, filets or et rouge au-dessus */
.card.cat-abbaye .card-stats { left: 7cqw; right: 7cqw; bottom: 6cqw; height: 18.6cqw; padding: 3cqw .4cqw 0; background: none; overflow: visible;
  border-top: .3cqw solid var(--gold-a); box-shadow: 0 -.9cqw 0 -.6cqw var(--rubric); }
.card.cat-abbaye .card-stats::before { content: ""; position: absolute; left: 50%; top: -1.25cqw; width: 2.2cqw; height: 2.2cqw; translate: -50% 0; rotate: 45deg; background: var(--rubric); box-shadow: 0 0 0 .4cqw var(--vellum); }
.card.cat-abbaye .card-stats div, .card.cat-abbaye .card-stats div:first-child { padding: 0 1.2cqw; text-align: center; }
.card.cat-abbaye .card-stats div + div { border-left: .25cqw solid rgba(155, 28, 28, .35); }
.card.cat-abbaye .card-stats dt { font: 800 2.6cqw/1.1 "Playfair Display", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: var(--rubric); }
.card.cat-abbaye .card-stats dd { margin-top: 1.2cqw; font: italic 700 4.4cqw/1.12 "EB Garamond", Georgia, serif; color: var(--ink-a);
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card.cat-abbaye .card-stats dd.is-long { font-size: 3.9cqw; } .card.cat-abbaye .card-stats dd.is-xlong { font-size: 3.5cqw; } .card.cat-abbaye .card-stats dd.is-xxlong { font-size: 3.1cqw; } /* sur deux lignes au besoin */
.card.cat-abbaye .var-dots { bottom: 27cqw; }
/* Holo : vitrail (verres colorés et plombs sombres sur la photo), lettrine en verre */
.card.cat-abbaye.fin-holo .card-photo::before, .card.cat-abbaye.fin-holo .card-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.card.cat-abbaye.fin-holo .card-photo::before { mix-blend-mode: color; opacity: .6;
  background: conic-gradient(from 30deg at 50% 60%, #c81e32, #1e46c8, #e6b428, #1e8c50, #7a2ab8, #c81e32); }
.card.cat-abbaye.fin-holo .card-photo::after { background: repeating-linear-gradient(60deg, rgba(25, 18, 12, .8) 0 .35cqw, transparent .35cqw 9cqw), repeating-linear-gradient(-60deg, rgba(25, 18, 12, .8) 0 .35cqw, transparent .35cqw 9cqw),
    linear-gradient(rgba(25, 18, 12, .8), rgba(25, 18, 12, .8)) 50% 0 / .5cqw 100% no-repeat; }
.card.cat-abbaye.fin-holo .ab-init { color: #fff; background: conic-gradient(from 45deg, #c81e32, #e6b428, #1e8c50, #1e46c8, #7a2ab8, #c81e32); text-shadow: 0 .3cqw .4cqw rgba(0, 0, 0, .6); }
/* Dorée : bordure entière à la feuille d'or, filet rouge à l'intérieur */
.card.cat-abbaye.fin-or .ab-frame { inset: 0; border: 2.4cqw solid #c9971c; border-image: linear-gradient(135deg, #8a6516, #f9e08a 20%, #b8891f 40%, #fff3c2 55%, #a87b1e 72%, #f3d47a 88%, #7a5a12) 1;
  outline: .3cqw solid var(--rubric); outline-offset: -3.1cqw; }
.card.cat-abbaye.fin-or .ab-corners i { --gold-a: #7a5410; }
.card.cat-abbaye.fin-or .card-band { background: none; } .card.cat-abbaye.fin-or .card-stats { background: none; border-top: .3cqw solid var(--gold-a); }
.card.cat-abbaye.fin-or .card-stats dd { color: var(--ink-a); } .card.cat-abbaye.fin-or > .card-in > .sub { color: #4a3420; }
/* Plein cadre : la photo sur toute la carte, nom et caractéristiques sur un cartouche de vélin */
.card.cat-abbaye.fin-plein .card-photo { inset: 0; height: auto; padding: 0; clip-path: none; background: #2a1a0e; }
.card.cat-abbaye.fin-plein .card-photo img { clip-path: none; }
.card.cat-abbaye.fin-plein .ab-frame, .card.cat-abbaye.fin-plein .ab-corners { display: none; }
.card.cat-abbaye.fin-plein .ab-cart { display: block; position: absolute; left: 3.6cqw; right: 3.6cqw; top: 77cqw; bottom: 3.6cqw; z-index: 0; border-radius: 1cqw;
  background: radial-gradient(ellipse at 50% 30%, #f7edd2, var(--vellum) 65%, #e6d1a2); border: .45cqw solid var(--gold-a); outline: .3cqw solid var(--rubric); outline-offset: .5cqw;
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .55); }
.card.cat-abbaye.fin-plein .ab-head { left: 50%; right: auto; translate: -50% 0; top: 2.6cqw; padding: 1cqw 2.4cqw; border-radius: 99px; background: var(--vellum); box-shadow: 0 0 0 .3cqw var(--gold-a), 0 .6cqw 1.6cqw rgba(0, 0, 0, .45); }
.card.cat-abbaye.fin-plein .ab-head::before, .card.cat-abbaye.fin-plein .ab-head::after { display: none; }
.card.cat-abbaye.fin-plein .card-top .no { padding: .8cqw 1.8cqw; border-radius: .8cqw; background: var(--vellum); }
.card.cat-abbaye.fin-plein .card-top { top: 10cqw; }

/* Compte (version serveur, account.js) : bouton de la barre du haut et fenêtre de connexion */
.account-btn { width: auto; min-width: 36px; padding: 0 8px; gap: 6px; grid-auto-flow: column; }
.account-btn .acct-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: 13px; }
.account-btn .acct-name:empty { display: none; }
.account-btn.is-in { border-color: var(--gold); }
.acct-dlg { width: min(460px, calc(100vw - 32px)); }
.acct-intro, .acct-rules { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.acct-rules { font-size: 13px; margin: 6px 0 0; }
.acct-field { display: grid; gap: 6px; margin: 16px 0 0; font-size: 13px; font-weight: 600; }
.acct-field input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 500 16px/1.3 var(--text); }
.acct-field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
#acct-code { font-family: var(--mono); font-size: 22px; letter-spacing: .35em; }
.acct-msg { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--danger); }
.acct-dlg form > .btn, .acct-actions { margin-top: 18px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.btn-link { padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btn-link:disabled { color: var(--ink-2); text-decoration: none; cursor: default; }
.btn-danger { background: var(--danger-btn); border-color: var(--danger-btn); color: #fff; }
.acct-who { display: grid; gap: 4px; margin: 14px 0 0; }
.acct-who b { font-family: var(--display); font-weight: 800; font-size: 26px; overflow-wrap: anywhere; }
.acct-who > span { color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
.acct-danger { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.acct-danger .btn-link { color: var(--danger); }
.acct-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 16px; }
.acct-google svg { width: 18px; height: 18px; flex: none; }
.acct-or { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; color: var(--ink-2); font-size: 13px; }
.acct-or::before, .acct-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.acct-captcha:not(:empty) { margin-top: 12px; }
/* Sauvegarde en ligne : état de l'envoi, reprise GitHub, badge Pionnier, choix entre deux parties */
.acct-badge { justify-self: start; display: inline-block; margin: 10px 0 0; padding: 3px 10px; border: 1.5px solid var(--gold); border-radius: 999px; color: var(--gold); font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.acct-save { display: grid; justify-items: start; gap: 10px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.acct-sync { margin: 0; color: var(--ink-2); font-size: 14px; }
.sync-dlg { width: min(620px, calc(100vw - 32px)); }
.sync-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.sync-opt { display: grid; align-content: start; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.sync-dlg .sync-opt h3 { margin: 0; font-size: 17px; }
.sync-opt p { margin: 0; font-size: 14px; line-height: 1.45; }
.sync-opt .sync-when { color: var(--ink-2); font-size: 13px; }
.sync-opt .btn { margin-top: 8px; justify-self: start; }
.sync-later { margin: 14px 0 0; }
.acct-suspended { color: var(--danger); }
/* Administration (admin.js) : modérateurs et admins */
.adm-role { display: inline-block; margin-right: 6px; padding: 1px 8px; border: 1.5px solid var(--gold); border-radius: 999px; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 12px; text-transform: uppercase; }
/* Comme les autres rangées d'onglets : jamais de défilement vertical à l'intérieur (la rangée « flottait » sous le doigt) */
.adm-tabs { display: flex; gap: 6px; margin: 4px 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
.adm-tab { padding: 8px 14px; border: 0; background: none; color: var(--ink-2); font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; cursor: pointer; border-bottom: 3px solid transparent; flex: none; }
.adm-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.adm-search { max-width: 420px; margin-bottom: 14px; }
.adm-search .acct-field { margin: 0; }
.adm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.adm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.adm-row.is-suspended { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.adm-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.adm-pseudo { font-family: var(--display); font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.adm-chip { padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.adm-chip-modo, .adm-chip-admin { border-color: var(--gold); color: var(--ink); }
.adm-meta { flex-basis: 100%; color: var(--ink-2); font-size: 13px; }
.adm-meta.adm-susp { color: var(--danger); font-weight: 600; }
.adm-log .adm-meta { flex-basis: auto; }
.adm-line { font-size: 14px; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.adm-select { padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 600 14px var(--text); }
.adm-empty { padding: 14px 2px; color: var(--ink-2); }
.adm-more-wrap { margin: 14px 0 0; }
.adm-copy-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
/* Code d'accès de la bêta : en entier, lisible et facile à sélectionner (40 caractères sans espace au plus) */
.adm-bt-code { font-family: var(--mono); font-size: 15px; letter-spacing: .03em; overflow-wrap: anywhere; user-select: all; }
.adm-bt-old { color: var(--ink-2); font-size: 13px; }
.adm-copy-box { width: 100%; min-height: 220px; margin: 0 0 14px; padding: 10px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 13px/1.45 var(--mono); }
.adm-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.adm-filter { padding: 5px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: none; color: var(--ink-2); font: 600 13px var(--text); cursor: pointer; }
.adm-filter[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.adm-card { display: block; }
.adm-card-head { display: flex; align-items: center; gap: 12px 14px; }
.adm-card-head .adm-who { flex: 1; }
.adm-card-head .adm-actions { align-items: center; }
.adm-see { font-size: 13px; color: var(--ink-2); }
.adm-card-mini { width: 64px; flex: none; }
.adm-card-mini.is-wide { width: 96px; }
.adm-card-none { display: grid; place-items: center; aspect-ratio: 63 / 88; border: 1.5px dashed var(--line); border-radius: 6px; color: var(--ink-2); font-weight: 800; }
.adm-reports { list-style: none; margin: 10px 0 0; padding: 0 0 0 78px; }
.adm-report { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px dashed var(--line); }
.adm-comment { flex-basis: 100%; margin: 2px 0 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-st-confirme { border-color: var(--gold); color: var(--ink); }
.adm-st-refuse { color: var(--ink-2); text-decoration: line-through; }
@media (max-width: 760px) { .adm-reports { padding-left: 0; } .adm-card-mini { width: 52px; } .adm-card-mini.is-wide { width: 78px; } }
/* Signalement d'une carte erronée (fiche, account.js) */
.report-wrap { margin: 18px 0 0; }
.report-box { margin: 8px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.report-motifs { margin: 0; padding: 0; border: 0; }
.report-motifs legend { padding: 0; font-weight: 700; font-size: 15px; }
.report-motifs .acct-check { margin-top: 8px; }
.report-box textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 500 15px/1.4 var(--text); resize: vertical; }
.report-box textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.report-count { margin: 4px 0 0; text-align: right; font-size: 12px; color: var(--ink-2); }
.report-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.report-done { margin: 0; font-weight: 600; }
.report-box > .btn { margin-top: 10px; }
.acct-reports { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 760px) {
  .sync-opts { grid-template-columns: 1fr; }
  .acct-dlg { width: 100vw; }
  .account-btn .acct-name { display: none; }
}

/* Pages légales (/privacy, /cgu) : texte lisible, une colonne, mêmes couleurs et polices que le jeu */
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.legal-top .brand { color: var(--ink); }
.legal { width: min(760px, 100%); margin: 0 auto; padding: 28px 24px 48px; line-height: 1.6; font-size: 16px; }
.legal h1 { margin: 0; }
.legal h2 { margin: 34px 0 8px; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .01em; }
.legal h3 { margin: 20px 0 4px; font-size: 16px; }
.legal p, .legal ul { margin: 8px 0; }
.legal ul { padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal a { color: inherit; text-underline-offset: 3px; }
.legal code { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.legal-date { margin-top: 6px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.legal-lead { font-size: 17px; }
.legal-table { overflow-x: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 6px; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.legal-table th, .legal-table td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table th { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; background: var(--bg-2); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-foot { padding: 18px 24px 32px; text-align: center; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--line); }
.legal-foot a { color: inherit; }
@media (max-width: 760px) {
  .legal { padding: 20px 16px 40px; font-size: 15px; }
  .legal-top { padding: 12px 16px; }
  .legal-table table { min-width: 560px; }
}
.acct-check { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: 14px; line-height: 1.45; cursor: pointer; }
.acct-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--gold); }
.acct-check a { color: inherit; text-underline-offset: 3px; }
.foot-legal a { color: inherit; }
.foot-about { max-width: 760px; margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.foot-about h4 { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.foot-about p { margin: 0 0 6px; }
.foot-about a { color: inherit; }
.legal-langs { display: flex; gap: 6px; }
.legal-langs button { min-width: 38px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 13px; cursor: pointer; }
.legal-langs button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.legal a.btn { display: inline-block; margin: 8px 0 4px; padding: 10px 26px; color: #1a1300; text-decoration: none; }
#t-gsearch { margin: 6px 0 12px; }
/* Cartes reprises de la page GitHub, jamais obtenues en jouant : grisées, avec la mention « importée » */
.cell.is-imported { position: relative; }
.cell.is-imported .card, #detail-card.is-imported .card { filter: grayscale(1) contrast(.9); opacity: .78; }
.imp-tag { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 11px/1.4 var(--text); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.imp-note { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--ink-2); background: var(--bg); color: var(--ink-2); font-size: 14px; line-height: 1.45; }
/* Économie sur le serveur (version serveur, joueur connecté) : action en attente de la réponse, hors ligne */
.is-wait { cursor: progress !important; }
.btn.is-wait, .pack-visual.is-wait { opacity: .6; animation: wait-pulse 1s ease-in-out infinite; }
@keyframes wait-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .btn.is-wait, .pack-visual.is-wait { animation: none; } }
.pack-note.is-offline { color: var(--ink-2); }
.daily-btn:disabled { animation: none; box-shadow: none; border-color: var(--line); cursor: not-allowed; opacity: .7; }
.daily-btn:disabled:hover { transform: none; }
.t-server { max-width: 640px; line-height: 1.5; }
/* Classement (sous-onglet de Succès) */
.ach-tabs { margin: 0 0 18px; }
.rank-me { margin: 0 0 12px; font-weight: 600; color: var(--ink); }
.rank-tabs, .rank-weeks { margin: 0 0 12px; }
.rank-cat { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; max-width: 640px; font-size: 14px; color: var(--ink-2); }
.rank-cat select { flex: 1; max-width: 320px; font: inherit; height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--bg-2); color: var(--ink); }
.rank-cat select:focus { outline: none; border-color: var(--ink); }
.acct-rank { margin-top: 12px; }
.rank-list { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--line); max-width: 640px; }
.rank-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.rank-row.is-me { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.rank-place { min-width: 2.4em; font-family: var(--mono); font-weight: 600; color: var(--ink-2); text-align: right; }
.rank-pseudo { flex: 1; min-width: 0; font-family: var(--display); font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.rank-n { font-family: var(--mono); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.rank-who { flex: 1; min-width: 0; }
.rank-who .rank-pseudo { display: block; }
.rank-title { display: block; font-size: 12.5px; color: var(--ink-2); font-style: italic; }
.rank-lvl { font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap; padding: 2px 7px; border: 1px solid var(--gold); border-radius: 99px; }
/* Lignes du classement : le pseudo est un bouton (clavier), toute la ligne s'ouvre à la souris */
.rank-row { cursor: pointer; }
.rank-row:hover .rank-pseudo { text-decoration: underline; text-underline-offset: 3px; }
.rank-pseudo { border: 0; background: none; padding: 0; color: inherit; text-align: left; cursor: pointer; line-height: 1.2; }
.rank-pseudo:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.rank-myprof { margin: 0 0 14px; padding: 6px 14px; font-size: 14px; }

/* Profil d'un joueur (fenêtre ; feuille du bas sur téléphone) */
.profile-dlg { width: min(480px, calc(100vw - 32px)); }
.prof-name { padding-right: 44px; overflow-wrap: anywhere; }
.side-dlg h2.prof-name { font-size: 30px; line-height: 1.05; text-transform: none; }
.prof-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.prof-title { font-size: 14px; font-style: italic; color: var(--ink-2); }
.prof-badge { padding: 2px 10px; border: 1.5px solid var(--gold); border-radius: 999px; color: var(--gold); font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.prof-album { margin: 22px 0 18px; }
.prof-album .bar { height: 8px; }
.prof-album .bar span { background: linear-gradient(90deg, #f6d478, #d29c1c); }
.prof-album p { margin: 8px 0 0; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.prof-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.prof-stats div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.prof-stats div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.prof-stats dt { font-size: 13px; color: var(--ink-2); }
.prof-stats dd { margin: 2px 0 0; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.1; }
.prof-msg { margin: 18px 0 0; font-weight: 600; }
.profile-dlg .small { margin: 14px 0 0; }
@media (max-width: 760px) {
  .profile-dlg { inset: auto 0 0; width: 100vw; height: auto; max-height: 92dvh; margin: 0; overflow-y: auto;padding-top: 18px; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; }
  .profile-dlg .close { position: absolute; top: 10px; right: 10px; }
  .side-dlg h2.prof-name { font-size: 26px; }
  .prof-stats dd { font-size: 22px; }
}

/* ============ XP et niveaux ============ */
/* Pastille « Niv. 12 » près du solde : l'anneau montre l'avancée dans le niveau */
.level-pill { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 5px; border: 1px solid var(--line); border-radius: 99px;
  background: transparent; color: var(--ink); font-family: var(--mono); font-weight: 600; font-size: 13px; white-space: nowrap; position: relative; }
.level-pill:hover { border-color: var(--ink-2); }
.lvl-ring { width: 26px; height: 26px; rotate: -90deg; flex: none; }
.lvl-ring circle { fill: none; stroke-width: 4; }
.lvl-track { stroke: var(--bg-3); }
.lvl-arc { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .6s ease; }
.level-pill.has-dot::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); border: 2px solid var(--bg); }
.level-pill.is-up { animation: lvl-up .9s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes lvl-up { 30% { transform: scale(1.18); box-shadow: 0 0 18px var(--gold); } }
.ach-toast .lvl-medal b { font-family: var(--display); font-weight: 800; font-size: 20px; }
/* Sous-onglet Niveaux */
.lvl { max-width: 720px; }
.lvl h3 { margin: 26px 0 10px; font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.lvl-head { display: flex; align-items: center; gap: 18px; }
.lvl-big { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 34px;
  color: #2a1d00; background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b33c 50%, #9c7112); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); }
.lvl-now { flex: 1; min-width: 0; }
.lvl-now h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; }
.lvl-title-now { margin: 0 0 8px; font-style: italic; color: var(--ink-2); }
.lvl-now .bar span { background: linear-gradient(90deg, #f6d478, #d29c1c); }
.lvl-src { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 24px; }
.lvl-src li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lvl-src b { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.lvl-ladder { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lvl-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.lvl-row.is-ready, .lvl-row.is-got { color: var(--ink); }
.lvl-row.is-now { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.lvl-num { min-width: 2.2em; font-family: var(--display); font-weight: 800; font-size: 20px; text-align: right; }
.lvl-gift { flex: 1; min-width: 0; font-size: 14px; }
.lvl-ttl { display: block; font-style: italic; color: var(--ink-2); }
.lvl-claim { padding: 6px 12px; font-size: 14px; }
.lvl-done { font-weight: 800; color: var(--gold); padding: 0 8px; }
.lvl-need { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.ach-tabs .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-left: 4px; vertical-align: 2px; }
@media (max-width: 760px) {
  .level-pill { height: 32px; padding: 0 8px 0 4px; font-size: 12px; gap: 4px; }
  .lvl-ring { width: 22px; height: 22px; }
  .lvl-big { width: 60px; height: 60px; font-size: 28px; }
  .lvl-now h2 { font-size: 22px; }
}
/* Administration : onglet Économie */
.adm-h { margin: 22px 0 8px; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.adm-eco-line { margin: 4px 0; font-size: 15px; }
.adm-eco-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 24px; margin-top: 10px; }
.adm-eco-top h3, .adm-eco-player h3 { margin: 14px 0 6px; font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: uppercase; }
.adm-eco-top ol { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.6; }
.adm-eco-top small { color: var(--ink-2); }
.adm-eco-player { margin-top: 18px; padding: 4px 16px 12px; border: 1.5px solid var(--line); border-radius: 8px; }
.adm-eco-player .adm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm-fix { display: grid; gap: 8px; max-width: 420px; margin: 8px 0 4px; }
.adm-fix .btn { justify-self: start; }
/* Votes du pot commun (admin.js) */
.adm-vt-form { display: grid; gap: 10px; max-width: 640px; margin: 8px 0 18px; }
.adm-vt-form > .btn { justify-self: start; }
.adm-vt-opt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0 0 10px; padding: 10px 12px 12px; border: 1.5px solid var(--line); border-radius: 6px; }
.adm-vt-opt legend { padding: 0 6px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.adm-vt-opt .acct-field { margin: 0; }
.adm-vt-opt textarea { width: 100%; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 500 15px/1.35 var(--text); resize: vertical; }
.adm-vt-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.adm-vt-ann { max-width: 640px; margin: 8px 0 18px; padding: 10px 12px 12px; border: 1.5px dashed var(--gold); border-radius: 6px; }
.adm-vt-ann h3 { margin: 0; }
.adm-vt-days input { max-width: 120px; }
.adm-vt-opts { margin: 6px 0; padding-left: 22px; display: grid; gap: 4px; width: 100%; }
.adm-vt-opts li { overflow-wrap: anywhere; }
.adm-vt-opts li.is-win b { color: var(--gold); }
.adm-vt-opts .adm-chip { margin-left: 6px; }
@media (max-width: 640px) { .adm-vt-opt { grid-template-columns: 1fr; } }

/* ============ Marché (version serveur, market.js) ============ */
.mk-notice { margin: 0 0 18px; padding: 12px 14px; border: 1.5px solid var(--gold); border-radius: 6px; background: color-mix(in srgb, var(--gold) 12%, transparent); font-size: 14px; line-height: 1.45; }
.mk-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.mk-top .chips { margin: 0; border: 0; }
/* Pot commun : encadré avec la barre vers le palier du prochain vote */
.mk-pot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; max-width: 560px; margin: 4px 0 14px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg-2); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.mk-pot-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.mk-pot-amount { font-family: var(--mono); font-size: 26px; line-height: 1.1; }
.mk-pot-bar { display: block; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.mk-pot-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #f6d478); transition: width .4s ease; }
.mk-pot-bar.is-full > i { background: var(--gold); }
.mk-pot-line { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted, var(--ink)); }
.mk-pot-see { font-weight: 700; color: var(--gold); white-space: nowrap; }
/* Aperçu du vote annoncé : une ligne coupée ; la colonne de .mk-pot (minmax 0) l'empêche d'élargir la page */
.mk-pot-next.is-ann { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pot:hover, .mk-pot:focus-visible, .mk-pot.is-active { border-color: var(--gold); }
.mk-pot-open { font-style: normal; font-family: var(--display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.mk-pot-open::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 6px; vertical-align: 1px; }
.mk-rep { margin: -8px 0 18px; font-size: 14px; line-height: 1.45; }
.mk-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.mk-frow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mk-filters input[type=search], .mk-filters input[type=number], .mk-filters select {
  font: inherit; font-size: 14px; height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--bg-2); color: var(--ink); }
.mk-filters input:focus, .mk-filters select:focus { outline: none; border-color: var(--ink); }
.mk-filters input[type=search] { flex: 1 1 240px; min-width: 0; }
.mk-filters input[type=number] { width: 110px; }
.mk-more-f summary { cursor: pointer; width: max-content; font-family: var(--display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding: 2px 0; }
.mk-more-f[open] summary { margin-bottom: 10px; }
.mk-checks { gap: 6px 18px; }
.mk-checks .check em { font-style: normal; }
.mk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.mk-ad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 12px 14px; border: 1.5px solid var(--line); border-left: 5px solid var(--gold); border-radius: 6px; background: var(--bg-2); }
.mk-ad.mk-echange { border-left-color: var(--r-rare); }
.mk-ad.mk-don { border-left-color: var(--r-peu-commune); }
.mk-cards { min-width: 0; }
.mk-cards .t-item, .mk-want .t-item { cursor: pointer; }
.mk-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.mk-kind { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: 13px; color: var(--ink-2); }
.mk-type { font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.mk-seller { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.mk-chip { padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-family: var(--mono); }
.mk-chip.is-arch { border-color: var(--ink-2); }
.mk-price { margin: 0; font-size: 20px; }
.mk-price .coin { width: 18px; height: 18px; }
.mk-free { font-family: var(--display); font-weight: 800; text-transform: uppercase; color: var(--r-peu-commune); }
.mk-want { width: 100%; }
.mk-want > small { font-family: var(--display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.mk-want .t-thumb { width: 30px; height: 40px; }
.mk-want .t-text b { font-size: 14px; }
.mk-go { margin-top: auto; }
.mk-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.mk-more-wrap { margin: 16px 0 0; }
.mk-h { font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; margin: 24px 0 12px; }
.mk-h:first-child { margin-top: 0; }
.mk-h small { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--ink-2); margin-left: 6px; text-transform: none; }
.mk-mine .mk-ad { margin-bottom: 12px; }
.mk-done { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mk-done li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.mk-done-cards { flex: 1 1 220px; min-width: 0; color: var(--ink-2); }
.mk-done-line { overflow-wrap: anywhere; }
.mk-done small { font-family: var(--mono); color: var(--ink-2); }
.mk-st-conclue .mk-done-line { color: var(--r-peu-commune); }
.mk-rules { max-width: 760px; line-height: 1.5; margin: 0 0 18px; }
.t-extra { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-price-field { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: var(--ink-2); }
.mk-price-field input { width: 120px; height: 40px; padding: 0 10px; font: inherit; font-family: var(--mono); font-size: 16px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); }
.mk-price-field input:focus { outline: none; border-color: var(--ink); }
.mk-bounds, .mk-net { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.mk-pick { margin: 0; }
/* Vote du pot commun (panneau du Marché) */
.vt { max-width: 760px; }
.vt-back { margin: 0 0 14px; }
.vt-intro { line-height: 1.5; margin: 0 0 18px; }
.vt-gauge { margin: 0 0 18px; }
.vt-bar { height: 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.vt-bar i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.vt-gauge-line { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font-size: 14px; }
.vt-gauge-line b { font-family: var(--mono); }
.vt-ann { margin: 14px 0 0; padding: 12px 14px; border: 1.5px dashed var(--line); border-radius: 6px; }
.vt-ann-h { margin: 0 0 8px; font-weight: 700; }
.vt-ann-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.vt-ann-list li { overflow-wrap: anywhere; }
.vt-ann-list small { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.vt-ann-left { margin: 10px 0 0; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.vt-when { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin: 0 0 12px; }
.vt-acces { margin: 0 0 14px; padding: 10px 14px; border: 1.5px solid var(--gold); border-radius: 6px; font-size: 14px; }
.vt-opts { display: grid; gap: 10px; margin: 0 0 16px; }
.vt-opt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg-2); cursor: pointer; }
.vt-opt:has(input:checked), .vt-opt.is-mine { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
.vt-opt:has(input:disabled) { cursor: default; }
.vt-opt input { margin: 3px 0 0; accent-color: var(--gold); width: 18px; height: 18px; flex: none; }
.vt-opt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vt-opt-text b { font-size: 16px; overflow-wrap: anywhere; }
.vt-opt-text small { font-size: 13px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.vt-mine { font-weight: 700; margin: 0 0 10px; }
.vt-actions { margin: 0 0 16px; }
.vt-results { display: grid; gap: 14px; margin: 0 0 14px; }
.vt-res-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.vt-res-head b { overflow-wrap: anywhere; }
.vt-res-n { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.vt-res:not(.is-win) .vt-bar i { background: var(--ink-2); }
.vt-res.is-win .mk-chip { border-color: var(--gold); color: var(--gold); }
.vt-delivered { font-weight: 700; margin: 0 0 10px; }
.vt-cancel { margin: 0 0 18px; line-height: 1.5; }
.vt-cancel em { font-style: normal; font-weight: 700; overflow-wrap: anywhere; }
.vt-rules { margin: 18px 0 0; font-size: 14px; line-height: 1.5; }
.vt-rules summary { cursor: pointer; width: max-content; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.vt-rules ul { margin: 8px 0 0; padding-left: 20px; }
@media (max-width: 760px) {
  .mk-top { flex-direction: column; align-items: stretch; }
  .mk-top .chips { overflow-x: auto; flex-wrap: nowrap; }
  .mk-pot { margin: 0 0 12px; max-width: none; }
  .vt-actions .btn { width: 100%; justify-content: center; }
  .mk-list { grid-template-columns: 1fr; }
  .mk-ad { grid-template-columns: 1fr; gap: 10px; }
  .mk-go, .mk-btns { width: 100%; }
  .mk-go { justify-content: center; }
  .mk-btns .btn { flex: 1; justify-content: center; }
  .mk-filters select { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .mk-filters input[type=number] { flex: 1 1 calc(50% - 5px); width: auto; }
  .t-extra { grid-column: 1 / -1; }
  .mk-price-field input { flex: 1; width: auto; }
}