/* =====================================================================================
   CD-Room : feuille de style unique.
   Palette : fond argenté, encre bleu nuit, jaune "autocollant", rose vif, bleu électrique.
   Polices : Unbounded (titres), Hanken Grotesk (texte), Permanent Marker (petites touches).
   Pour changer une couleur du site, c'est dans :root juste en dessous.
   ===================================================================================== */

/* Permet d'animer la rotation du dégradé conique (cadre irisé des légendaires) */
:root {
  --argent: #d5dae1;
  --encre: #17152b;
  --jaune: #ffdd33;
  --rose: #ff4d9d;
  --bleu: #2a2bff;
  --gris: #3d4156;
  --panneau: #eef1f5;
  --trait: rgba(23, 21, 43, .18);
  --titres: 'Unbounded', system-ui, sans-serif;
  --texte: 'Hanken Grotesk', system-ui, sans-serif;
  --marqueur: 'Permanent Marker', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--argent); color: var(--encre);
  font-family: var(--texte); font-size: 16px; line-height: 1.45;
  /* Grands sillons de disque dans un coin, comme sur la maquette */
  background-image: repeating-radial-gradient(circle at 105% -10%, rgba(23,21,43,.08) 0 1px, transparent 1px 22px);
  background-repeat: no-repeat; background-size: 980px 980px; background-position: right -300px top -260px;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.lien { background: none; border: 0; padding: 0; text-decoration: underline; font-weight: 600; cursor: pointer; }

/* ---------- Boutons ---------- */
.btn { font-weight: 800; font-size: 16px; border: 0; padding: 14px 24px; border-radius: 4px; background: var(--encre); color: var(--jaune); }
.btn:hover:not(:disabled) { background: #2a2750; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.petit { padding: 10px 16px; font-size: 14px; }
.btn.jaune { background: var(--jaune); color: var(--encre); }
.btn.jaune:hover:not(:disabled) { background: #ffe96b; }
.btn-fantome { font-weight: 800; font-size: 15px; padding: 12px 20px; border-radius: 4px; border: 0; background: transparent; color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
.btn-fantome:hover:not(:disabled) { background: var(--encre); color: #fff; }
.btn-fantome:disabled { opacity: .45; cursor: not-allowed; }
.btn-verrou { background: rgba(23,21,43,.08); color: #4a4f63; font-weight: 600; cursor: not-allowed; }

/* ---------- Champs ---------- */
input[type="text"], input[type="search"], input[type="password"], input[type="number"], select {
  font-size: 16px; padding: 12px 14px; border: 0; border-radius: 4px; background: #fff; color: var(--encre);
  box-shadow: inset 0 0 0 2px var(--encre);
}
select { padding-right: 8px; }
input[type="checkbox"] { accent-color: var(--encre); }

/* ---------- Disque (motif CD) ---------- */
.disque {
  border-radius: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--argent) 0 9%, transparent 9.5%),
              repeating-radial-gradient(circle, rgba(23,21,43,.07) 0 1px, transparent 1px 7px),
              conic-gradient(from 40deg, #eef1f6, #aab4c6, #f8fafc, #9099ae, #e9edf4, #b7c0d1, #eef1f6);
  box-shadow: inset 0 0 0 2px rgba(23,21,43,.35);
}
.disque.theme {
  background: radial-gradient(circle, var(--argent) 0 9%, transparent 9.5%),
              repeating-radial-gradient(circle, rgba(23,21,43,.07) 0 1px, transparent 1px 7px),
              conic-gradient(from 40deg, #ff9ad5, #9ae8ff, #fff3a0, #b8a0ff, #ff9ad5);
}
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes rebond { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@keyframes holo { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ---------- En-tête ---------- */
.haut { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding: 22px 56px; }
.marque { display: flex; align-items: center; gap: 12px; font-family: var(--titres); font-weight: 800; font-size: 22px; letter-spacing: -.01em; text-decoration: none; }
.marque .disque { width: 44px; animation: tourne 28s linear infinite; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.onglet { position: relative; background: transparent; border: 0; padding: 9px 16px; font-weight: 600; font-size: 15px; border-radius: 4px; }
.onglet:hover { background: rgba(23,21,43,.08); }
.onglet.actif { background: var(--jaune); font-weight: 800; transform: rotate(-1.6deg); box-shadow: 2px 3px 0 rgba(23,21,43,.3); }
.onglet.nouveau::after { content: ''; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 2px var(--argent); }
.cote { display: flex; align-items: center; gap: 14px; }
.solde { display: flex; align-items: baseline; gap: 6px; background: var(--encre); color: var(--jaune); padding: 10px 16px; border-radius: 4px; border: 0;
  font-family: var(--titres); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.solde span { font-family: var(--texte); font-size: 19px; }
.solde.gain { animation: pouf .6s ease; }
@keyframes pouf { 40% { transform: scale(1.12); background: var(--jaune); color: var(--encre); } }
.compte { display: flex; align-items: center; gap: 10px; }
.compte-pastille { width: 42px; height: 42px; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; font-weight: 800; text-transform: uppercase; }
.compte-texte { display: flex; flex-direction: column; line-height: 1.15; font-size: 14px; }
.compte-texte b { font-weight: 800; }
.compte-texte .lien { font-size: 12px; font-weight: 600; color: var(--gris); text-align: left; }

/* ---------- Pages ---------- */
main { position: relative; z-index: 1; padding: 0 56px 96px; }
.page-tete { padding: 18px 0 28px; }
.page-titre { font-family: var(--titres); font-weight: 800; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -.02em; }
.page-sous { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--gris); max-width: 720px; }
.groove { display: none; }
.titre-section { font-family: var(--titres); font-weight: 800; font-size: 26px; letter-spacing: -.01em; }
.panneau { background: var(--panneau); border-radius: 6px; padding: 28px; box-shadow: inset 0 0 0 1px var(--trait); }
.panneau.sombre { background: var(--encre); color: #fff; box-shadow: none; }
.panneau.jaune { background: var(--jaune); box-shadow: none; }
.pack-titre { font-family: var(--texte); font-weight: 800; font-size: 20px; }
.np-aide { margin: 0 0 12px; font-size: 14px; color: var(--gris); }
.np-aide b { color: var(--encre); }
.erreur { min-height: 20px; font-size: 14px; font-weight: 600; color: #c0123f; }
.bulle-info { position: fixed; left: 50%; bottom: 28px; z-index: 300; transform: translateX(-50%); background: var(--encre); color: var(--jaune); padding: 12px 20px; border-radius: 4px; font-weight: 800; box-shadow: 3px 5px 0 rgba(23,21,43,.3); }

/* =====================================================================================
   LA CARTE (300 x 420 px, mise à l'échelle par --zoom)
   ===================================================================================== */
.carte-wrap { position: relative; width: calc(300px * var(--zoom, 1)); height: calc(420px * var(--zoom, 1)); perspective: 900px; flex: none; cursor: pointer; }
.inclin { width: 100%; height: 100%; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-style: preserve-3d; }
/* La 3D n'est préparée (calque graphique dédié) que pour la carte survolée ou sélectionnée : sinon chaque carte de la grille réserve de la mémoire */
.carte-wrap:hover .inclin, .carte-wrap:focus-visible .inclin { will-change: transform; }
.carte { position: absolute; left: 0; top: 0; width: 300px; height: 420px; transform: scale(var(--zoom, 1)); transform-origin: 0 0;
  overflow: hidden; border-radius: 18px; color: #fff; isolation: isolate; background: #101018; }
.carte.r1 { --ac: #555b6e; box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.carte.r2 { --ac: #2f7fd6; box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 24px rgba(80,160,255,.34); }
.carte.r3 { --ac: #7a3fd0; box-shadow: 0 14px 36px rgba(0,0,0,.5), 0 0 28px rgba(160,100,255,.42); }
.carte.r4 { --ac: #c8921a; box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 38px rgba(255,200,80,.52); }
.carte .cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.carte .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 46%, rgba(8,6,22,.84) 100%); }
.carte .grain { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .38; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.carte .fx { position: absolute; inset: 0; pointer-events: none; }
.carte .glare { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--card-opacity, 0) * .5); mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255,255,255,.9), transparent 55%); }
.carte .wear { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.6) 30.3%, transparent 30.7%), linear-gradient(68deg, transparent 58%, rgba(255,255,255,.45) 58.2%, transparent 58.5%),
    linear-gradient(101deg, transparent 72%, rgba(255,255,255,.55) 72.3%, transparent 72.6%), linear-gradient(80deg, transparent 15%, rgba(0,0,0,.5) 15.3%, transparent 15.7%),
    linear-gradient(155deg, transparent 44%, rgba(255,255,255,.4) 44.2%, transparent 44.5%), radial-gradient(circle at 78% 20%, rgba(255,255,255,.35) 0 6%, transparent 7%),
    radial-gradient(circle at 18% 70%, rgba(0,0,0,.4) 0 8%, transparent 9%); }
.carte .frame { position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.72); border-radius: 8px; }
.carte .dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); background: rgba(10,8,24,.5); }
.carte .dot.tl { top: -6px; left: -6px; } .carte .dot.tr { top: -6px; right: -6px; }
.carte .dot.bl { bottom: -6px; left: -6px; } .carte .dot.br { bottom: -6px; right: -6px; }
.carte .chip { position: absolute; top: 26px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.carte .chip.l { left: 28px; } .carte .chip.r { right: 28px; opacity: .9; }
.carte .band { position: absolute; left: 14px; right: 14px; top: 228px; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(90deg, rgba(0,0,0,0), color-mix(in srgb, var(--ac) 80%, transparent) 22%, color-mix(in srgb, var(--ac) 80%, transparent) 78%, rgba(0,0,0,0)); }
.carte .tt { font-weight: 800; font-size: 17px; line-height: 1.15; max-width: 226px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.carte .ar { font-size: 12px; opacity: .92; margin-top: 1px; max-width: 226px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte .stat { position: absolute; left: 44px; right: 44px; top: 290px; text-align: center; font-size: 13px; line-height: 1.35; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.carte .alb { position: absolute; left: 44px; right: 44px; top: 330px; text-align: center; font-size: 11px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte .num { position: absolute; left: 28px; bottom: 46px; font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.01em; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.carte .num.sp { color: #ffe58a; text-shadow: 0 0 12px rgba(255,210,74,.9); }
.carte .numsub { position: absolute; left: 28px; bottom: 31px; font-size: 9.5px; opacity: .85; }
.carte .etat { position: absolute; right: 28px; bottom: 46px; font-size: 14px; font-weight: 800; line-height: 1.1; text-align: right; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.carte .etatsub { position: absolute; right: 28px; bottom: 31px; font-size: 9.5px; opacity: .85; text-align: right; }
.carte .dots { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 5px; padding: 5px 9px; border-radius: 12px; border: 1px solid rgba(255,255,255,.8); background: rgba(10,8,24,.5); }
.carte .d { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.9); }

/* Commune : pochette en noir et blanc tramé, cadre pâle */
.r1 .cover { filter: grayscale(.92) contrast(1.05) brightness(.95); }
.r1 .fx { background: radial-gradient(rgba(0,0,0,.6) 28%, transparent 31%) 0 0/5px 5px; mix-blend-mode: multiply; opacity: .4; }
.r1 .frame { border-color: rgba(255,255,255,.42); }
.r1 .dot { display: none; }
.r1 .dots { border-color: rgba(255,255,255,.5); }
/* Rare : couleurs pleines, double filet bleu argenté, reflet au survol */
.r2 .frame { border-color: rgba(196,228,255,.95); outline: 1px solid rgba(196,228,255,.5); outline-offset: 4px; }
.r2 .fx { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.42) 50%, transparent 60%); background-size: 250% 100%; background-position: 130% 0; transition: background-position .9s ease; }
.r2:hover .fx { background-position: -30% 0; }
/* Épique : couleurs saturées, double filet violet et or, bande holographique */
.r3 .cover { filter: saturate(1.4) contrast(1.06); }
.r3 .frame { border-color: rgba(226,200,255,.95); outline: 1px solid rgba(255,214,130,.75); outline-offset: 4px; }
.r3 .dot { border-color: #ffd682; background: rgba(255,214,130,.4); }
.r3 .band { background: linear-gradient(90deg, rgba(0,0,0,0), rgba(122,63,208,.9) 20%, rgba(214,160,60,.9) 50%, rgba(122,63,208,.9) 80%, rgba(0,0,0,0)); }
.r3 .fx { background: linear-gradient(115deg, transparent 28%, rgba(255,120,220,.42) 40%, rgba(120,240,255,.44) 50%, rgba(255,240,140,.42) 60%, transparent 72%); background-size: 230% 100%; background-position: 85% 0; mix-blend-mode: screen; transition: background-position 1s ease; }
.r3:hover .fx { background-position: 10% 0; }
.r3 .dots { border-color: #ffd682; }
/* Légendaire : cadre irisé animé, reflet doré permanent */
.r4 .cover { filter: saturate(1.25) contrast(1.05); }
.r4 .frame { border-color: transparent; }
.r4 .frame::before { content: ''; position: absolute; inset: -1px; padding: 2px; border-radius: 9px;
  background: linear-gradient(120deg, #ffe58a, #ff9ad5, #9ae8ff, #fff3a0, #ffd24a, #ff9ad5, #ffe58a); background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: holo 7s linear infinite; }
.r4 .dot { border-color: #ffe58a; background: #ffd24a; }
.r4 .fx { background: linear-gradient(115deg, rgba(255,215,120,0) 25%, rgba(255,150,230,.45) 38%, rgba(130,240,255,.45) 48%, rgba(255,245,150,.5) 58%, rgba(255,215,120,0) 72%); background-size: 260% 100%; mix-blend-mode: screen; animation: holo 6s linear infinite; }
.r4 .dots { border-color: #ffe58a; }

/* Cadres de la boutique : ils REMPLACENT seulement l'anneau extérieur, jamais la rareté */
.carte .dc { position: absolute; inset: 0; pointer-events: none; display: none; }
.dx .frame { visibility: hidden; }
.dx .dc { display: block; }
.dx .dc::before, .dx .dc::after { content: ''; position: absolute; }
.d-cassette .dc { border: 14px solid #24252d; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); --sc: radial-gradient(circle, #c9ccd6 0 2.5px, #4a4b58 3px 5px, transparent 5.5px); }
.d-cassette .dc::before { inset: -14px; background: var(--sc) 0 0/14px 14px no-repeat, var(--sc) 100% 0/14px 14px no-repeat, var(--sc) 0 100%/14px 14px no-repeat, var(--sc) 100% 100%/14px 14px no-repeat; }
.d-neon .dc { inset: 7px; border: 2px solid #ffe3f8; border-radius: 12px; box-shadow: 0 0 5px #ff4fd8, 0 0 14px #ff4fd8, inset 0 0 6px #ff4fd8, inset 0 0 14px rgba(255,79,216,.5); }
.d-neon .dc::before { inset: 4px; border: 2px solid #d9fbff; border-radius: 8px; box-shadow: 0 0 5px #3df2ff, 0 0 12px #3df2ff, inset 0 0 6px #3df2ff; }
.d-ticket .dc::before, .d-ticket .dc::after { inset: 0; padding: 14px; border-radius: 18px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.d-ticket .dc::after { background: #ff6b35; }
.d-ticket .dc::before { z-index: 2; background: radial-gradient(circle, #101018 3px, transparent 3.6px) 0 0/14px 14px; }
.d-polaroid { border-radius: 8px; }
.d-polaroid .dc { border: 14px solid #f4f5f7; border-radius: 6px; box-shadow: inset 0 0 8px rgba(0,0,0,.35); }
.d-polaroid .dc::before { left: 50%; top: -18px; width: 74px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgba(255,226,74,.82); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.d-jewel { border-radius: 8px; }
.d-jewel .dc { border: 14px solid rgba(235,242,250,.38); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(255,255,255,.4); }
.d-jewel .dc::before { inset: -14px; background: linear-gradient(115deg, rgba(255,255,255,.26) 0 18%, transparent 18.5% 55%, rgba(255,255,255,.13) 55.5% 62%, transparent 62.5%); }
.d-jewel .dc::after { left: -14px; top: 70px; width: 14px; height: 44px; border-radius: 2px; background: #cfd6e0; box-shadow: 0 190px 0 #cfd6e0; }
.d-vinyle .dc { border: 14px solid #0c0c11; border-radius: 18px; box-shadow: inset 0 0 0 1px #3b3b48, inset 0 0 0 3px #0c0c11, inset 0 0 0 4px #2b2b36; }
.d-vinyle .dc::before { right: -14px; bottom: -14px; width: 30px; height: 30px; background: radial-gradient(circle, #0c0c11 0 2px, #e63946 3px 10px, #1a1a22 11px 12px, transparent 13px); }
.d-pixel { border-radius: 0; clip-path: polygon(0 18px, 6px 18px, 6px 12px, 12px 12px, 12px 6px, 18px 6px, 18px 0, calc(100% - 18px) 0, calc(100% - 18px) 6px, calc(100% - 12px) 6px, calc(100% - 12px) 12px, calc(100% - 6px) 12px, calc(100% - 6px) 18px, 100% 18px, 100% calc(100% - 18px), calc(100% - 6px) calc(100% - 18px), calc(100% - 6px) calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) calc(100% - 6px), calc(100% - 18px) calc(100% - 6px), calc(100% - 18px) 100%, 18px 100%, 18px calc(100% - 6px), 12px calc(100% - 6px), 12px calc(100% - 12px), 6px calc(100% - 12px), 6px calc(100% - 18px), 0 calc(100% - 18px)); }
.d-pixel .dc { border: 8px solid #5ef0ff; box-shadow: inset 0 0 0 4px #ff3d81; }
.d-baroque .dc { border: 12px solid transparent; border-radius: 14px; box-shadow: inset 0 0 0 1px #ffe58a; --co: radial-gradient(circle at 15px 15px, #fff0a8 0 4px, #8a5a00 5px 6px, #e5c04d 7px 11px, transparent 12px); }
.d-baroque .dc::after { inset: -12px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, #f7e08a, #b8860b, #fff0a8, #9a6b00, #f7e08a); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.d-baroque .dc::before { z-index: 2; inset: -12px; background: var(--co) 0 0/30px 30px no-repeat, var(--co) 100% 0/30px 30px no-repeat, var(--co) 0 100%/30px 30px no-repeat, var(--co) 100% 100%/30px 30px no-repeat; }

/* Cadres illustrés de la boutique : une image 5:7 à bordure fine (fenêtre transparente) posée sur la carte */
.d-onyx .dc,
.d-sillon .dc,
.d-cuivre .dc,
.d-carte-au-tresor .dc,
.d-ondes .dc,
.d-acier .dc,
.d-carton .dc,
.d-herbier .dc,
.d-pellicule .dc,
.d-jungle .dc,
.d-ciel .dc,
.d-lagon .dc,
.d-mousse .dc,
.d-arc-en-ciel .dc,
.d-abysses .dc,
.d-crepuscule .dc,
.d-glacier .dc,
.d-marbre .dc,
.d-sakura .dc,
.d-nuit-etoilee .dc,
.d-roses-blanches .dc,
.d-cyber .dc,
.d-roses-noires .dc,
.d-synthwave .dc,
.d-brasier .dc,
.d-ronces .dc,
.d-grille-retro .dc,
.d-foudre .dc,
.d-holo .dc,
.d-or .dc,
.d-nebuleuse .dc,
.d-prisme .dc,
.d-eclipse .dc,
.d-opale .dc,
.d-minuit .dc { inset: 0; background: var(--cadre) center / 100% 100% no-repeat; }
.d-onyx { --cadre: url("frames/onyx.webp"); }
.d-sillon { --cadre: url("frames/sillon.webp"); }
.d-cuivre { --cadre: url("frames/cuivre.webp"); }
.d-carte-au-tresor { --cadre: url("frames/carte-au-tresor.webp"); }
.d-ondes { --cadre: url("frames/ondes.webp"); }
.d-acier { --cadre: url("frames/acier.webp"); }
.d-carton { --cadre: url("frames/carton.webp"); }
.d-herbier { --cadre: url("frames/herbier.webp"); }
.d-pellicule { --cadre: url("frames/pellicule.webp"); }
.d-jungle { --cadre: url("frames/jungle.webp"); }
.d-ciel { --cadre: url("frames/ciel.webp"); }
.d-lagon { --cadre: url("frames/lagon.webp"); }
.d-mousse { --cadre: url("frames/mousse.webp"); }
.d-arc-en-ciel { --cadre: url("frames/arc-en-ciel.webp"); }
.d-abysses { --cadre: url("frames/abysses.webp"); }
.d-crepuscule { --cadre: url("frames/crepuscule.webp"); }
.d-glacier { --cadre: url("frames/glacier.webp"); }
.d-marbre { --cadre: url("frames/marbre.webp"); }
.d-sakura { --cadre: url("frames/sakura.webp"); }
.d-nuit-etoilee { --cadre: url("frames/nuit-etoilee.webp"); }
.d-roses-blanches { --cadre: url("frames/roses-blanches.webp"); }
.d-cyber { --cadre: url("frames/cyber.webp"); }
.d-roses-noires { --cadre: url("frames/roses-noires.webp"); }
.d-synthwave { --cadre: url("frames/synthwave.webp"); }
.d-brasier { --cadre: url("frames/brasier.webp"); }
.d-ronces { --cadre: url("frames/ronces.webp"); }
.d-grille-retro { --cadre: url("frames/grille-retro.webp"); }
.d-foudre { --cadre: url("frames/foudre.webp"); }
.d-holo { --cadre: url("frames/holo.webp"); }
.d-or { --cadre: url("frames/or.webp"); }
.d-nebuleuse { --cadre: url("frames/nebuleuse.webp"); }
.d-prisme { --cadre: url("frames/prisme.webp"); }
.d-eclipse { --cadre: url("frames/eclipse.webp"); }
.d-opale { --cadre: url("frames/opale.webp"); }
.d-minuit { --cadre: url("frames/minuit.webp"); }

/* =====================================================================================
   ACCUEIL (onglet Packs)
   ===================================================================================== */
.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 8px 0 64px; }
.hero-texte { flex: 1 1 440px; max-width: 580px; }
.hero h1 { font-family: var(--titres); font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1.04; letter-spacing: -.02em; }
.hero-sous { margin-top: 24px; font-size: 19px; line-height: 1.5; color: var(--gris); max-width: 480px; }
.stock-bloc { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 20px 24px; background: var(--encre); color: #fff; border-radius: 6px; max-width: 520px; }
.stock-chiffre { display: flex; align-items: baseline; gap: 8px; font-family: var(--titres); font-weight: 800; }
.stock-chiffre b { font-size: 72px; line-height: 1; color: var(--jaune); font-variant-numeric: tabular-nums; }
.stock-chiffre span { font-size: 26px; color: #b9bdd6; }
.stock-legende { font-weight: 800; font-size: 20px; }
.slots { display: flex; gap: 6px; margin-top: 12px; }
.slot { width: 26px; height: 36px; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); transition: background .3s; }
.slot.plein { background: var(--jaune); box-shadow: inset 0 0 0 2px var(--jaune); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.hero-actions .btn { font-size: 17px; padding: 16px 28px; }
.themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 540px; max-height: 128px; overflow-y: auto; padding: 3px; }
.puce { padding: 6px 14px; font-size: 14px; font-weight: 600; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 2px rgba(23,21,43,.35); }
.puce:hover { box-shadow: inset 0 0 0 2px var(--encre); }
.puce.actif { background: var(--encre); color: var(--jaune); box-shadow: none; }
.puce small { opacity: .6; }
.themes-titre { margin-top: 22px; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }

.disque-zone { position: relative; flex: 0 0 auto; width: 640px; height: 540px; max-width: 100%; }
.roue { position: absolute; left: 0; top: 50px; width: 440px; height: 440px; }
.tick { position: absolute; left: 50%; top: 50%; width: 22px; height: 34px; margin: -17px 0 0 -11px; border-radius: 3px; background: rgba(23,21,43,.16); transition: background .3s; }
.tick.plein { background: var(--jaune); box-shadow: 0 0 0 2px var(--encre); }
.disque-gros { position: absolute; left: 50px; top: 50px; width: 340px; animation: tourne 28s linear infinite; box-shadow: inset 0 0 0 2px rgba(23,21,43,.35), 0 18px 40px rgba(23,21,43,.25); }
.disque-gros::after { content: ''; position: absolute; left: 28%; top: 28%; width: 44%; height: 44%; border-radius: 50%; background: var(--encre); box-shadow: 0 0 0 0 transparent; }
.disque-gros::before { content: ''; position: absolute; z-index: 1; left: 41%; top: 41%; width: 18%; height: 18%; border-radius: 50%; background: var(--argent); box-shadow: 0 0 0 4px rgba(255,255,255,.5); }
.autocollant { position: absolute; left: -6px; bottom: 20px; z-index: 3; background: var(--jaune); padding: 9px 14px; font-weight: 800; font-size: 15px; transform: rotate(-4deg); box-shadow: 2px 3px 0 rgba(23,21,43,.3); font-variant-numeric: tabular-nums; }
.pile-eventail { position: absolute; z-index: 2; pointer-events: none; }
.pile-eventail.a { left: 212px; top: 96px; transform: rotate(-8deg) scale(.86); }
.pile-eventail.b { left: 336px; top: 40px; transform: rotate(7deg) scale(.86); }

.section-cartes { padding-bottom: 56px; }
.section-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-tete p { margin-top: 10px; font-size: 16px; color: var(--gris); }
.tabs { display: flex; gap: 22px; }
.tab { font-weight: 600; font-size: 15px; padding: 6px 2px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--gris); }
.tab.on { color: var(--encre); border-bottom-color: var(--rose); }
.rangee { --zoom: .8; display: flex; flex-wrap: wrap; gap: 28px; }
.vide-msg { color: var(--gris); font-size: 16px; }

.garanties { display: flex; flex-wrap: wrap; gap: 24px; }
.garanties .panneau { flex: 1 1 360px; }
.jauge-ligne { margin-top: 16px; }
.jauge-ligne div.t { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; }
.jauge-piste { margin-top: 8px; height: 10px; border-radius: 5px; background: rgba(23,21,43,.14); overflow: hidden; }
.jauge-piste i { display: block; height: 100%; border-radius: 5px; }

/* =====================================================================================
   COLLECTION
   ===================================================================================== */
.barre { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; padding: 18px 22px; margin-bottom: 28px; }
.barre label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--gris); }
#cartes { --zoom: .6; display: flex; flex-wrap: wrap; gap: 24px; }
#plus { margin-top: 28px; }

/* Fiche d'une carte (fenêtre) */
.fiche { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; background: rgba(23,21,43,.72); }
.fiche-boite { position: relative; display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: flex-start; justify-content: center; max-width: 880px; margin: auto; padding: 32px; border-radius: 6px; background: var(--panneau); }
.fiche-carte { --zoom: 1; }
.fiche-infos { flex: 1 1 280px; min-width: min(260px, 100%); }
.fiche-infos h2 { font-family: var(--titres); font-weight: 800; font-size: 24px; line-height: 1.15; }
.fiche-infos .sous { margin-top: 6px; color: var(--gris); }
.fiche-liste { margin: 20px 0 0; padding: 0; list-style: none; }
.fiche-liste li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--trait); font-size: 15px; }
.fiche-liste li span { color: var(--gris); }
.fiche-liste li b { text-align: right; }
.fiche-bloc { margin-top: 20px; }
.fiche-bloc h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.fiche-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.fiche-x { position: absolute; right: 10px; top: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; font-size: 26px; line-height: 1; }
.fiche-x:hover { background: rgba(23,21,43,.1); }

/* =====================================================================================
   WISHLIST
   ===================================================================================== */
.wl { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.wl-principal { flex: 1 1 700px; min-width: 0; }
.wl-cote { flex: 1 1 340px; max-width: 440px; display: flex; flex-direction: column; gap: 24px; }
.wl-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.wl-tete span { font-weight: 600; }
.souhait { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: center; padding: 24px 0; border-top: 1px solid rgba(23,21,43,.2); }
.souhait img, .souhait .pochette-vide { width: 88px; height: 88px; border-radius: 6px; flex: 0 0 auto; object-fit: cover; background: linear-gradient(135deg, #ff3d81 0 50%, #2438ff 50% 100%); box-shadow: 0 8px 18px rgba(23,21,43,.3); }
.souhait .corps { flex: 1 1 240px; min-width: 0; }
.souhait .nom { font-weight: 800; font-size: 19px; }
.souhait .qui { margin-top: 2px; font-size: 15px; color: var(--gris); }
.souhait .note { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--gris); }
.souhait .chiffres { flex: 1 1 250px; }
.souhait .chiffres .l { display: flex; justify-content: space-between; font-size: 14px; }
.souhait .chiffres .l.t { font-weight: 600; }
.souhait .piste { margin: 6px 0 12px; height: 8px; border-radius: 4px; background: rgba(23,21,43,.16); overflow: hidden; }
.souhait .piste i { display: block; height: 100%; background: var(--rose); border-radius: 4px; }
.souhait .l + .l { margin-top: 4px; }
.wl-ajout { padding: 24px 0; border-top: 1px solid rgba(23,21,43,.2); }
.wl-ajout-boite { border: 2px dashed rgba(23,21,43,.45); border-radius: 6px; padding: 24px; }
.wl-ajout-boite input { width: 100%; margin-top: 12px; }
.resultat { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 0; border-top: 1px solid rgba(23,21,43,.16); margin-top: 12px; }
.resultat img, .resultat .pochette-vide { width: 48px; height: 48px; border-radius: 4px; flex: 0 0 auto; object-fit: cover; background: linear-gradient(135deg, #ff3d81 0 50%, #2438ff 50% 100%); }
.resultat .corps { flex: 1 1 200px; min-width: 0; }
.resultat .nom { font-weight: 800; font-size: 15px; }
.resultat .qui { font-size: 14px; color: var(--gris); }
.regles p { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #e6e8f5; }
.regles .pack-titre { color: var(--jaune); }
.recap-ligne { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(23,21,43,.14); font-size: 15px; }
.recap-ligne span { color: var(--gris); }
.recap-ligne b { text-align: right; }

/* =====================================================================================
   BOUTIQUE ET PORTEFEUILLE
   ===================================================================================== */
.bq-haut { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; margin-bottom: 56px; }
.bq-haut > * { flex: 1 1 380px; }
.portefeuille .petit-titre { font-size: 15px; color: #b9bdd6; }
.portefeuille .gros { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.portefeuille .gros b { font-family: var(--titres); font-weight: 800; font-size: 60px; color: var(--jaune); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.portefeuille .gros span { font-size: 34px; color: var(--jaune); }
.portefeuille .jour { margin-top: 18px; font-size: 15px; color: #d6d9ec; }
.portefeuille h3 { margin-top: 26px; font-weight: 800; font-size: 15px; }
.mouvement { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 15px; }
.mouvement b { white-space: nowrap; }
.mouvement b.plus { color: #7ef0b0; } .mouvement b.moins { color: #ff8fb5; }
.gagner p { margin-top: 12px; font-size: 15px; color: var(--gris); }
.gagner ul { margin: 14px 0 0; padding: 0; list-style: none; }
.gagner li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(23,21,43,.2); font-size: 15px; font-weight: 600; }
.gagner li b { white-space: nowrap; }
.bq-section { margin-top: 56px; }
.bq-section > p { margin: 12px 0 28px; max-width: 760px; font-size: 17px; color: var(--gris); }
.cadres-grille { display: flex; flex-wrap: wrap; gap: 28px; }
.cadre-item { width: 240px; padding: 18px; background: var(--panneau); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--trait); display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.cadre-item .nom { font-weight: 800; font-size: 17px; }
.cadre-item .desc { font-size: 14px; color: var(--gris); min-height: 40px; }
.cadre-item .carte-wrap { cursor: default; --zoom: .6; }
.achete { display: inline-block; padding: 8px 14px; font-weight: 800; font-size: 14px; border-radius: 4px; background: rgba(23,21,43,.08); color: var(--gris); }
.packs-cadres { display: flex; flex-wrap: wrap; gap: 28px; }
.pack-cadre { position: relative; width: 420px; max-width: 100%; padding: 20px 24px 24px; background: var(--encre); color: #fff; border-radius: 6px; }
.pack-cadre .fan { position: relative; height: 230px; }
.pack-cadre .fan .carte-wrap { position: absolute; top: 6px; --zoom: .5; cursor: default; }
.pack-cadre .bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; }
.pack-cadre .nom { font-weight: 800; font-size: 19px; }
.pack-cadre .contenu { margin-top: 4px; font-size: 14px; color: #c4c7d4; line-height: 1.45; }
.pack-cadre .eco { margin-top: 4px; font-size: 13px; color: #7ef0b0; }
.pack-cadre .btn { background: var(--jaune); color: var(--encre); padding: 11px 18px; font-size: 15px; }
.pack-cadre .limite { position: absolute; right: -8px; top: -12px; background: var(--rose); color: #fff; font-weight: 800; font-size: 13px; padding: 8px 12px; transform: rotate(4deg); box-shadow: 2px 3px 0 rgba(0,0,0,.35); }

/* =====================================================================================
   CATALOGUE
   ===================================================================================== */
#cat-total { font-weight: 400; color: var(--gris); font-size: 18px; }
.cat-outils { position: sticky; top: 0; z-index: 20; margin: 0 -12px; padding: 14px 12px 10px; background: linear-gradient(var(--argent) 82%, rgba(213,218,225,0)); display: grid; gap: 12px; }
.cat-champ { position: relative; display: flex; align-items: center; }
.cat-champ > svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--gris); pointer-events: none; }
.cat-champ input { width: 100%; padding: 14px 48px 14px 46px; font-size: 17px; }
.cat-champ input::-webkit-search-cancel-button { display: none; }
#cat-effacer { position: absolute; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; font-size: 24px; line-height: 1; }
#cat-effacer:hover { background: rgba(23,21,43,.1); }
.cat-ligne2 { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cat-genres { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.cat-genres::-webkit-scrollbar { display: none; }
.cat-genres .puce { flex: none; white-space: nowrap; }
.cat-reglages { flex: none; display: flex; align-items: center; gap: 10px; }
.cat-reglages select { padding: 9px 10px; font-size: 14px; }
.cat-vues { display: flex; gap: 4px; }
.cat-vues button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 2px rgba(23,21,43,.3); }
.cat-vues button svg { width: 18px; height: 18px; }
.cat-vues button.actif { background: var(--encre); color: var(--jaune); box-shadow: none; }
.cat-ligne { display: grid; grid-template-columns: 42px minmax(0, 6fr) minmax(0, 4fr) minmax(0, 2fr) 60px 110px; align-items: center; gap: 16px; padding: 7px 14px; }
.cat-entete { margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); border-bottom: 2px solid var(--encre); padding-bottom: 10px; }
.cat-liste { margin-top: 6px; }
.cat-item { border-radius: 6px; transition: background .15s; }
.cat-item:hover { background: rgba(255,255,255,.55); }
.c-num { text-align: center; color: var(--gris); font-variant-numeric: tabular-nums; }
.c-annee { color: var(--gris); font-size: 14px; font-variant-numeric: tabular-nums; }
.c-album { color: var(--gris); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-genre { color: var(--gris); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-souhait { text-align: right; }
.c-souhait .btn-fantome { padding: 7px 12px; font-size: 13px; }
.c-souhait { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cat-wl { font-size: 12px; font-weight: 800; color: #d6337a; white-space: nowrap; }
.cat-tirees { font-size: 12px; font-weight: 700; color: var(--gris); white-space: nowrap; }
.cat-trier { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.cat-trier:hover { color: var(--encre); }
.cat-trier.actif { color: var(--encre); }
.cat-trier.actif::after { content: ' ' attr(data-sens); }
.c-titre { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cat-pochette { position: relative; flex: none; width: 46px; height: 46px; }
.cat-pochette img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: cover; background: #aab4c6; }
.cat-pochette .disque { position: absolute; z-index: 0; inset: 6%; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.cat-item:hover .cat-pochette .disque { transform: translateX(32%) rotate(90deg); }
.c-textes { min-width: 0; }
.cat-titre { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-sous { font-size: 14px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-titre mark, .cat-sous mark { background: var(--jaune); color: var(--encre); font-weight: 800; padding: 0 2px; }
.cat-item.fantome { pointer-events: none; }
.cat-item.fantome .cat-pochette img, .cat-item.fantome .c-textes > * { background: linear-gradient(90deg, #c3c9d3, #e3e7ed, #c3c9d3); background-size: 200% 100%; animation: brille 1.2s linear infinite; border-radius: 4px; color: transparent; }
.cat-item.fantome .cat-titre { width: 55%; height: 14px; margin-bottom: 6px; }
.cat-item.fantome .cat-sous { width: 35%; height: 12px; }
@keyframes brille { to { background-position: -200% 0; } }
.cat-liste.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 18px; margin-top: 16px; }
.cat-liste.grille .cat-ligne { display: block; padding: 12px; background: var(--panneau); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--trait); }
.cat-liste.grille .cat-item:hover { background: #fff; }
.cat-liste.grille .c-num, .cat-liste.grille .c-album, .cat-liste.grille .c-annee { display: none; }
.cat-liste.grille .c-genre { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; }
.cat-liste.grille .c-souhait { margin-top: 10px; text-align: left; justify-content: flex-start; }
.cat-liste.grille .c-titre { display: block; }
.cat-liste.grille .cat-pochette { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 10px; }
.cat-liste.grille .cat-pochette img { border-radius: 4px; box-shadow: 0 8px 20px rgba(23,21,43,.3); }
#cat-vide { color: var(--gris); text-align: center; padding: 48px 0; }
#cat-fin { height: 1px; }
#cat-plus { margin-top: 20px; }
@media (max-width: 900px) { .cat-ligne { grid-template-columns: 34px minmax(0, 1fr) 100px; } .c-album, .c-annee, .cat-entete .c-genre { display: none; } .cat-ligne .c-genre { grid-column: 2; font-size: 12px; margin-top: -4px; } }

/* =====================================================================================
   EN ÉCOUTE (platine)
   ===================================================================================== */
#vue-ecoute { max-width: 760px; }
.recherche { display: flex; gap: 8px; margin-bottom: 12px; max-width: 420px; }
.recherche input { flex: 1; min-width: 0; }
.consentement { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 18px; font-size: 14px; color: var(--gris); }
.consentement input { margin-top: 4px; }
.platine { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.plateau { position: relative; flex: none; width: 270px; height: 224px; }
.vinyle { position: absolute; left: 0; top: 0; width: 224px; height: 224px; display: grid; place-items: center; background: repeating-radial-gradient(circle, #1d1b36 0 2px, #17152b 2px 5px); box-shadow: 0 10px 24px rgba(23,21,43,.35); }
.platine.joue .vinyle { animation: tourne 3.4s linear infinite; }
.vinyle .np-pochette { width: 36%; height: 36%; border-radius: 50%; object-fit: cover; background: var(--jaune); position: relative; z-index: 1; }
.vinyle::after { content: ''; position: absolute; width: 5%; height: 5%; border-radius: 50%; background: var(--argent); z-index: 2; }
.bras { position: absolute; top: 10px; right: 14px; width: 8px; height: 176px; transform-origin: 50% 10px; transform: rotate(-26deg); transition: transform 1.2s cubic-bezier(.3,.7,.2,1); border-radius: 4px; background: linear-gradient(90deg, #8d909a, #e4e6ec 50%, #8d909a); }
.bras::before { content: ''; position: absolute; top: -11px; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0f1f5, #6f727c 70%); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.bras::after { content: ''; position: absolute; bottom: -14px; left: -6px; width: 19px; height: 26px; border-radius: 3px; background: linear-gradient(#2a2a2a, #111); }
.platine.joue .bras { transform: rotate(17deg); }
.np-infos { flex: 1; min-width: 190px; }
.np-titre { font-family: var(--titres); font-weight: 800; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.np-titre.message { font-family: var(--texte); font-weight: 600; font-size: 16px; color: var(--gris); }
.np-artiste { margin-top: 6px; color: var(--gris); overflow-wrap: anywhere; }
.np-statut { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--gris); }
.egaliseur { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.egaliseur span { width: 3px; height: 40%; background: var(--encre); }
.egaliseur.actif span { animation: rebond .9s ease-in-out infinite; }
.egaliseur.actif span:nth-child(2) { animation-delay: .2s; }
.egaliseur.actif span:nth-child(3) { animation-delay: .4s; }

/* =====================================================================================
   CONNEXION
   ===================================================================================== */
#auth { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; overflow-x: hidden; overflow-y: auto; background: var(--argent); }
.auth-fond { position: absolute; width: 140vmin; left: 50%; top: 50%; margin: -70vmin 0 0 -70vmin; opacity: .45; animation: tourne 60s linear infinite; }
.auth-boite { position: relative; width: min(400px, 100%); padding: 32px 28px 28px; background: var(--panneau); box-shadow: 4px 6px 0 rgba(23,21,43,.3), inset 0 0 0 1px var(--trait); }
.auth-boite h1 { font-family: var(--titres); font-weight: 800; font-size: 28px; margin-bottom: 4px; }
.auth-sous { margin-bottom: 22px; color: var(--gris); font-size: 15px; }
.auth-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.auth-onglets button { padding: 10px; border-radius: 4px; background: transparent; border: 0; box-shadow: inset 0 0 0 2px rgba(23,21,43,.35); font-weight: 600; }
.auth-onglets button.actif { background: var(--jaune); box-shadow: inset 0 0 0 2px var(--encre); font-weight: 800; }
.auth-boite label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--gris); }
.auth-boite input[type="text"], .auth-boite input[type="password"] { width: 100%; margin-top: 4px; }
#auth-erreur { min-height: 20px; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #c0123f; }
#auth-envoyer { width: 100%; }

/* =====================================================================================
   SCÈNE D'OUVERTURE DE PACK
   Plein écran, SANS barre de défilement : tout s'adapte à la taille de la fenêtre (voir packs.js).
   ===================================================================================== */
html.scene-ouverte { overflow: hidden; }   /* la page derrière ne défile plus : plus de barre à droite */
#scene { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; overflow: hidden; overflow: clip;
  background: radial-gradient(circle at 50% 45%, #2a2750 0, var(--encre) 70%); color: #fff; user-select: none; -webkit-user-select: none; }
#scene > * { position: relative; z-index: 2; flex-shrink: 0; }   /* le halo (z-index 1) reste derrière les cartes */
.scene-fx { position: absolute !important; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.scene-halo { position: absolute !important; top: 50%; left: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, var(--halo, rgba(255,221,51,.6)), transparent 70%); }
.scene-x { position: absolute !important; top: 14px; right: 14px; z-index: 7; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 28px; line-height: 1; }
.scene-x:hover { background: rgba(255,255,255,.25); }

/* En-tête : le compteur et le badge de rareté partagent la même case, donc rien ne bouge quand l'un remplace l'autre */
.scene-tete { display: grid; place-items: center; height: 38px; min-width: 260px; }
.scene-tete > * { grid-area: 1 / 1; }
.scene-compteur { font-family: var(--titres); font-weight: 800; font-size: 14px; color: #b9bdd6; letter-spacing: .04em; }
.scene-badge { font-family: var(--titres); font-weight: 900; font-size: 28px; letter-spacing: .06em; opacity: 0; text-shadow: 0 0 18px currentColor, 0 3px 0 rgba(0,0,0,.4); }
.scene-indice { min-height: 20px; font-size: 14px; color: #b9bdd6; text-align: center; }
.scene-bonus { position: absolute !important; z-index: 4; rotate: -4deg; background: var(--jaune); color: var(--encre); padding: 9px 16px; font-weight: 800; font-size: 15px; box-shadow: 2px 3px 0 rgba(0,0,0,.45); pointer-events: none; }

/* --- Le paquet --- */
.paquet { --z: 1; --p: 0; width: calc(260px * var(--z)); height: calc(380px * var(--z)); flex: none; touch-action: none; cursor: grab; perspective: 900px; outline-offset: 10px; }
.paquet:active { cursor: grabbing; }
.pq-incl { position: absolute; inset: 0; transform: rotateX(var(--ix, 0deg)) rotateY(var(--iy, 0deg)); transition: transform .12s ease-out; }
.pq-echelle { position: absolute; left: 0; top: 0; width: 260px; height: 380px; transform: scale(var(--z)); transform-origin: 0 0; }
.pq-flotte { position: absolute; inset: 0; animation: flotte 3.4s ease-in-out infinite; will-change: transform; }
/* l'ombre portée : un dégradé fixe sous le paquet (un filter drop-shadow se recalculait à chaque image de la déchirure) */
.pq-flotte::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -34px; height: 60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); }
.paquet.dechire .pq-flotte { animation: none; }
@keyframes flotte { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-9px) rotate(.6deg); } }
.pq-corps, .pq-reste, .pq-arrache { position: absolute; inset: 0; }
.pq-lueur { position: absolute; left: 0; top: 40px; height: 24px; width: calc(var(--p) * 260px); opacity: min(1, calc(var(--p) * 6)); z-index: 3; pointer-events: none; filter: blur(5px);
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 25%, #fff6b8 85%, rgba(255,255,255,0)); }
.paquet.attend .pq-corps { animation: attend .45s ease-in-out infinite alternate; }
.paquet.attend .pq-corps { animation: none; }
.pq-corps::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.paquet.attend .pq-corps::after { animation: attend .45s ease-in-out infinite alternate; }
@keyframes attend { to { opacity: .22; } }

.pq-face { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: var(--jaune); color: var(--encre); }
.pq-face::before { content: ''; position: absolute; left: -20%; right: -20%; top: 168px; height: 104px; background: var(--rose); transform: rotate(-8deg); }
.pq-face::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: var(--bleu); }
.pq-face.theme { background: linear-gradient(135deg, #ff9ad5, #9ae8ff 50%, #fff3a0); }
.pq-face.theme::after { background: var(--encre); }
.pq-disque { position: absolute; width: 168px; left: 46px; top: 62px; z-index: 1; transform: rotate(-20deg); box-shadow: inset 0 0 0 2px rgba(23,21,43,.35), 0 8px 18px rgba(23,21,43,.3); }
.pq-marque { position: absolute; z-index: 2; left: 0; right: 0; top: 190px; text-align: center; font-family: var(--titres); font-weight: 900; font-size: 31px; letter-spacing: .03em; color: #fff; transform: rotate(-8deg); text-shadow: 0 3px 0 rgba(23,21,43,.35); }
.pq-etiquette { position: absolute; z-index: 2; left: 0; right: 0; bottom: 56px; text-align: center; font-family: var(--titres); font-weight: 800; font-size: 11px; letter-spacing: .14em; color: var(--jaune); }
.pq-sous { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px; text-align: center; font-family: var(--titres); font-weight: 800; font-size: 20px; color: #fff; padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La bande à déchirer : stries de sertissage et petit texte */
.pq-crampon { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 56px; display: grid; place-items: center; padding-bottom: 6px;
  background: repeating-linear-gradient(90deg, rgba(23,21,43,.2) 0 2px, transparent 2px 6px), linear-gradient(#ffe45c, #ffd21f); font-size: 11px; font-weight: 800; letter-spacing: .1em; color: rgba(23,21,43,.7); }
.pq-face.theme .pq-crampon { background: repeating-linear-gradient(90deg, rgba(23,21,43,.18) 0 2px, transparent 2px 6px), linear-gradient(#ffc7ea, #ff9ad5); }

/* --- La carte du moment (dos + face), avec les cartes qui attendent derrière --- */
.scene-pile { --zoom: 1; width: calc(300px * var(--zoom)); height: calc(420px * var(--zoom)); perspective: 1100px; cursor: pointer; isolation: isolate; flex: none; }
.scene-pile::before, .scene-pile::after { content: ''; display: none; position: absolute; inset: 0; z-index: -1; border-radius: calc(18px * var(--zoom)); background: #17152b; border: 3px solid rgba(255,255,255,.14); }
.scene-pile[data-reste="2"]::before, .scene-pile[data-reste="3"]::before, .scene-pile[data-reste="3"]::after { display: block; }
.scene-pile::before { transform: translate(9px, 7px) rotate(2.5deg); }
.scene-pile::after { transform: translate(-9px, 12px) rotate(-3deg); }
.retourne { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.avant { transform: rotateY(180deg); }
.face.dos { --rim: #8a8fa3; display: grid; place-items: center; border-radius: 18px; border: 3px solid rgba(255,255,255,.25); background: radial-gradient(circle at 50% 40%, #2a2750, #100e22); box-shadow: 0 0 26px rgba(138,143,163,.25); overflow: hidden; }
.face.dos::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 10px; background: var(--rim); }
.face.dos .disque { width: 72%; animation: tourne 8s linear infinite; }
.face.dos .dos-nom { position: absolute; bottom: 18px; font-family: var(--titres); font-weight: 800; font-size: 17px; }
/* Le suspense : la tranche du dos laisse deviner la rareté avant de retourner */
/* Dos des communes : barre grise (comme leurs pastilles), pas jaune */
.retourne[data-rarete="COMMON"] .face.dos, .dos-recap[data-rarete="COMMON"] { --rim: #8a8fa3; border-color: rgba(138,143,163,.6); box-shadow: 0 0 22px rgba(138,143,163,.35); }
.retourne[data-rarete="RARE"] .face.dos, .dos-recap[data-rarete="RARE"] { --rim: #4da3ff; border-color: #4da3ff; box-shadow: 0 0 34px rgba(77,163,255,.75); }
.retourne[data-rarete="EPIC"] .face.dos, .dos-recap[data-rarete="EPIC"] { --rim: #b46bff; border-color: #c690ff; box-shadow: 0 0 40px rgba(180,107,255,.85), 0 0 90px rgba(255,214,130,.3); }
.retourne[data-rarete="LEGENDARY"] .face.dos, .dos-recap[data-rarete="LEGENDARY"] { --rim: #ffd24a; border-color: #ffe58a; box-shadow: 0 0 55px rgba(255,210,74,.9); }
/* la pulsation dorée : une lueur intérieure dont seule l'opacité varie (animer un box-shadow de 80px redessinait tout à chaque image) */
.retourne[data-rarete="LEGENDARY"] .face.dos::after, .dos-recap[data-rarete="LEGENDARY"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 36px rgba(255,210,74,.95), inset 0 0 0 3px #fff3a0; opacity: .25; animation: pulseOr 1.1s ease-in-out infinite alternate; }
@keyframes pulseOr { to { opacity: 1; } }
.scene-pips { display: flex; gap: 9px; height: 14px; align-items: center; }
.pip { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .2s, box-shadow .2s; }
.pip.cur { box-shadow: 0 0 0 2px #fff; }
.pip.r1 { background: #c9ccd8; } .pip.r2 { background: #4da3ff; } .pip.r3 { background: #b46bff; } .pip.r4 { background: #ffd24a; box-shadow: 0 0 8px #ffd24a; }

/* --- Récapitulatif --- */
.scene-cartes { --zoom: .62; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 14px; }
.scene-cartes .carte-wrap:hover { z-index: 10; }
.carte.dos-recap { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2a2750, #100e22); border: 3px solid rgba(255,255,255,.25); }
.carte.dos-recap .disque { width: 72%; }
.carte-wrap.meilleure::after { content: '★ Meilleure carte'; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; padding: 4px 12px; border-radius: 12px; background: var(--jaune); color: var(--encre); font-weight: 800; font-size: 12px; z-index: 11; }
.scene-resume { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pastille-rarete { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 16px; background: rgba(255,255,255,.1); font-weight: 700; font-size: 14px; }
.pastille-rarete i { width: 10px; height: 10px; border-radius: 50%; }
.pastille-rarete.gain { background: var(--jaune); color: var(--encre); font-weight: 800; }
.scene-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; min-height: 52px; }
.scene-actions .btn { padding: 14px 32px; background: var(--jaune); color: var(--encre); }
.scene-actions .btn:hover:not(:disabled) { background: #ffe96b; }
.scene-actions .btn-fantome { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.scene-actions .btn-fantome:hover { background: #fff; color: var(--encre); }

/* =====================================================================================
   SESSION (cartes passives)
   ===================================================================================== */
.sess-verif { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 680px; }
.sess-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.sess-haut { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: stretch; }
.sess-jauge { display: grid; place-items: center; }
.sess-infos { display: flex; flex-direction: column; gap: 12px; }
.sess-cadran { --p: 0; position: relative; width: 208px; aspect-ratio: 1; }
.sess-anneau { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--encre) calc(var(--p) * 1%), rgba(23,21,43,.14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px)); mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px)); transition: background .6s; }
.disque.sess-disque { position: absolute; inset: 11%; opacity: .35; animation: tourne 9s linear infinite; }
.sess-chiffre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.sess-chiffre b { font-family: var(--titres); font-size: 48px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sess-chiffre span { font-family: var(--titres); font-size: 15px; color: var(--gris); }
.sess-chiffre small { margin-top: 4px; color: var(--gris); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sess-jour { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.sess-pips { display: inline-flex; gap: 7px; }
.sess-pip { width: 24px; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--encre); }
.sess-pip.plein { background: var(--jaune); }
.sess-reste { font-weight: 700; font-size: 15px; }
.sess-reste.bloque { color: var(--gris); font-weight: 600; }
.sess-regles { margin: 0; padding-left: 18px; color: var(--gris); font-size: 14px; display: grid; gap: 4px; }
.sess-titre { margin: 36px 0 4px; font-family: var(--titres); font-size: 20px; font-weight: 800; }
.sess-cartes { --zoom: .6; display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; }
.sess-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.sess-liste li { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--panneau); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--trait); font-size: 15px; }
.sess-liste li.refus { opacity: .6; }
.sess-heure { color: var(--gris); font-variant-numeric: tabular-nums; font-size: 13px; }
.sess-morceau { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sess-morceau small { color: var(--gris); font-weight: 400; }
.sess-badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(23,21,43,.35); color: var(--gris); white-space: nowrap; }
.sess-badge.ok { color: var(--encre); background: var(--jaune); box-shadow: none; font-weight: 800; }

/* ---------- Petits écrans ---------- */
@media (max-width: 900px) {
  .haut { padding: 16px 20px; }
  main { padding: 0 20px 72px; }
  .disque-zone { transform: scale(.8); transform-origin: top left; margin-bottom: -110px; }
  .sess-haut { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .scene-actions .btn { padding: 14px 18px; font-size: 15px; }
  .scene-actions .btn-fantome { padding: 12px 16px; }
  .disque-zone { transform: scale(.55); margin-bottom: -240px; }
  .sess-liste li { grid-template-columns: 56px 1fr; }
  .sess-liste .sess-badge { grid-column: 2; justify-self: start; }
  .compte-texte { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marque .disque, .disque-gros, .auth-fond, .face.dos .disque, .platine.joue .vinyle, .disque.sess-disque,
  .egaliseur.actif span, .r4 .frame::before, .r4 .fx, .solde.gain, .pq-flotte, .retourne[data-rarete="LEGENDARY"] .face.dos::after, .dos-recap[data-rarete="LEGENDARY"]::after { animation: none; }
}


/* =====================================================================================
   MARCHÉ : annonces, mes annonces, historique, panneau "Vendre" de la fiche d'une carte
   ===================================================================================== */
.mq-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mq-onglets .puce { padding: 9px 18px; font-size: 15px; }
.barre input[type="number"] { width: 110px; }
.barre .mq-case { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 12px; color: var(--encre); }

/* La grille d'annonces : chaque tuile = la carte, son prix, quelques infos */
.mq-grille { --zoom: .6; display: flex; flex-wrap: wrap; gap: 28px 22px; }
.mq-tuile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: calc(300px * var(--zoom)); min-width: 150px; text-align: center; }
.mq-tuile[role="button"] { cursor: pointer; }
.mq-tuile[role="button"] .carte-wrap { cursor: pointer; }
.mq-prix { font-family: var(--titres); font-weight: 800; font-size: 20px; line-height: 1.1; }
.mq-meta { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.mq-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mq-chip { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(23,21,43,.1); }
.mq-chip.souhait { background: var(--rose); color: #fff; }
.mq-chip.mienne { background: var(--encre); color: var(--jaune); }
.mq-pages { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; font-weight: 600; }

/* L'étiquette "En vente" posée sur le bord gauche d'une carte (visible en collection ; masquée dans le marché lui-même) */
.carte .ruban-vente { position: absolute; left: 0; top: 44%; z-index: 20; padding: 6px 14px 6px 12px; border-radius: 0 12px 12px 0;
  background: var(--jaune); color: var(--encre); font-weight: 800; font-size: 14px; box-shadow: 2px 3px 8px rgba(0,0,0,.45); }
.mq-grille .ruban-vente, .mq-fiche-zone .ruban-vente, #mq-fiche .ruban-vente { display: none; }

/* L'historique : une ligne par vente, achat, retrait ou expiration */
.mq-histo { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.mq-ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px;
  background: var(--panneau); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--trait); }
.mq-texte b { overflow-wrap: anywhere; }
.mq-badge { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; text-align: center; background: rgba(23,21,43,.1); color: var(--gris); }
.mq-badge.SOLD { background: #c9f2d9; color: #0b5d2c; }
.mq-badge.BOUGHT { background: #d6dcff; color: #1a2a9a; }
.mq-montant { font-weight: 800; white-space: nowrap; }
.mq-montant.plus { color: #0b7a3a; }
.mq-montant.moins { color: #c0123f; }

/* Le panneau "Vendre au marché" dans la fiche d'une carte */
.mq-vente { padding: 16px; border-radius: 6px; background: rgba(23,21,43,.06); }
.mq-vente label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 8px; }
.mq-vente input[type="number"] { width: 160px; }
.mq-calcul { margin: 8px 0; font-weight: 700; }
.mq-vente .btn { margin-top: 6px; }

@media (max-width: 560px) {
  .mq-grille { --zoom: .5; gap: 24px 14px; }
  .mq-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .mq-badge { grid-column: 1 / -1; justify-self: start; }
}


/* ---------- Accueil : bandeau "En ce moment" (morceau en cours + jauge) ---------- */
.en-cours { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; padding-bottom: 56px; align-items: stretch; }
.platine.compacte { padding: 20px 24px; gap: 16px 24px; }
.platine.compacte .plateau { width: 156px; height: 130px; }
.platine.compacte .vinyle { width: 130px; height: 130px; }
.platine.compacte .bras { top: 6px; right: 8px; height: 102px; width: 6px; }
.platine.compacte .bras::before { width: 22px; height: 22px; margin-left: -11px; top: -7px; }
.platine.compacte .bras::after { width: 14px; height: 18px; left: -4px; bottom: -10px; }
.platine.compacte .np-titre { font-size: 18px; }
.en-cours-tag { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.acc-invite { margin-top: 12px; }
.jauge-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.jauge-acc .sess-cadran { width: 132px; flex: none; }
.jauge-acc .sess-chiffre b { font-size: 32px; }
.jauge-acc .sess-chiffre span { font-size: 12px; }
.jauge-acc .sess-chiffre small { font-size: 10px; }
.jauge-texte { display: grid; gap: 10px; justify-items: start; min-width: 0; }

/* ---------- Réglages ---------- */
.reg-bloc { margin-bottom: 20px; max-width: 760px; }
.reg-bloc .sess-regles li { line-height: 1.45; }
.reg-sous { margin: 22px 0 6px; font-family: var(--titres); font-size: 16px; font-weight: 800; }
.reg-ok { margin: 14px 0 0; font-weight: 700; color: var(--encre); }
.reg-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .en-cours { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .platine.compacte .plateau { width: 120px; height: 100px; } .platine.compacte .vinyle { width: 100px; height: 100px; } .platine.compacte .bras { height: 78px; } }


/* ---------- Boutique de luxe : stock limité et inventaire ---------- */
.stock { font-size: 13px; font-weight: 800; padding: 3px 12px; border-radius: 999px; background: rgba(23,21,43,.08); }
.stock.dernier { background: var(--rose); color: #fff; }
.stock.vide { background: transparent; box-shadow: inset 0 0 0 1px rgba(23,21,43,.35); color: var(--gris); }
.cadre-item .btn:disabled { opacity: .45; cursor: not-allowed; }
.inventaire { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ----- Boutique : pack de cadre et cadre du jour (shop.js) ----- */
.bq-offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; }
.bq-offre { display: flex; gap: 24px; align-items: center; padding: 24px; border-radius: 6px; min-width: 0; }
.bq-pack { background: var(--encre); color: #fff; }
.bq-jour { background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); }
.bq-visuel { position: relative; flex: none; width: calc(300px * .56); height: calc(420px * .56); }
.bq-visuel .carte-wrap { --zoom: .56; cursor: default; }
.bq-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bq-texte h3 { font-family: var(--titres); font-weight: 800; font-size: 24px; line-height: 1.1; overflow-wrap: anywhere; }
.bq-texte p { font-size: 15px; line-height: 1.45; }
.bq-pack .petit-titre { color: var(--jaune); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.bq-jour .petit-titre { color: var(--rose); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.bq-pack p { color: #c4c7d4; }
.bq-jour p { color: var(--gris); }
.bq-jour .np-aide { margin: 0; }
.bq-texte .btn { margin-top: 8px; }
.bq-chances { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; font-size: 13px; }
.bq-chances li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #d6d9ec; }
.bq-chances b { color: #fff; font-variant-numeric: tabular-nums; }
.bq-mystere .carte { filter: blur(3px) saturate(.6) brightness(.7); }
.bq-question { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--titres); font-weight: 800; font-size: 96px; color: var(--jaune); text-shadow: 0 4px 24px rgba(0,0,0,.6); pointer-events: none; }
.bq-gain { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 24px; padding: 24px; border-radius: 6px; background: var(--jaune); }
.bq-gain .carte-wrap { --zoom: .56; cursor: default; }
.bq-gain-texte { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bq-gain-texte .petit-titre { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.bq-gain-texte h3 { font-family: var(--titres); font-weight: 800; font-size: 30px; line-height: 1.1; }
.bq-gain-texte .np-aide { margin: 0; color: var(--encre); }
.bq-niveau { padding: 3px 10px; border-radius: 999px; background: var(--encre); color: var(--jaune); font-size: 12px; font-weight: 800; }
@media (max-width: 520px) {
  .bq-offre { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================================
   ADMIN (admin.js)
   ===================================================================================== */
.gp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 32px; }
.gp-tuile { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--encre); color: #fff; border-radius: 6px; min-width: 0; }
.gp-tuile b { font-family: var(--titres); font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--jaune); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gp-tuile span { font-size: 14px; color: #d4d7e6; }
.gp-tuile small { font-size: 12px; color: #9ea3bd; }
.gp-raretes { margin: 16px 0 8px; }
.gp-piste { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(23,21,43,.1); }
.gp-piste span { min-width: 3px; }
.gp-piste em { font-size: 12px; padding-left: 8px; line-height: 12px; color: var(--gris); }
.gp-legende { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 13px; color: var(--gris); }
.gp-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.gp-legende b { color: var(--encre); font-variant-numeric: tabular-nums; }

.gp-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; margin: 12px 0 64px; }
.gp-liste-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.gp-liste-tete .np-aide { margin: 0; }
#gp-recherche { width: 100%; margin-bottom: 12px; }
.gp-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gp-table-boite { overflow-x: auto; background: var(--panneau); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--trait); }
.gp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gp-table th { text-align: left; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); padding: 12px 14px; border-bottom: 2px solid var(--trait); white-space: nowrap; }
.gp-table td { padding: 10px 14px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.gp-table tbody tr { cursor: pointer; }
.gp-table tbody tr:hover { background: rgba(255,221,51,.25); }
.gp-table tbody tr.choisi { background: var(--jaune); }
.gp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-nom { font-weight: 800; white-space: nowrap; }
.gp-nom .lien { font: inherit; font-weight: 800; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.gp-lastfm { color: var(--gris); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-date { color: var(--gris); white-space: nowrap; font-size: 13px; }
.gp-badge.soutien { background: linear-gradient(120deg, #c8921a, #d0408a); }
.gp-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }

.gp-cote { position: sticky; top: 16px; }
.gp-vide { color: var(--gris); }
.gp-fiche { display: flex; flex-direction: column; gap: 24px; }
.gp-fiche-tete h2 { font-family: var(--titres); font-weight: 800; font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.gp-fiche-tete .np-aide { margin: 6px 0 14px; }
.gp-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.gp-chiffres .gp-tuile b { font-size: 22px; }
.gp-bloc { border-top: 2px solid var(--trait); padding-top: 18px; }
.gp-bloc h3 { font-size: 17px; font-weight: 800; margin-bottom: 12px; }
.gp-sous { margin: 14px 0 8px; font-weight: 600; }
.gp-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.gp-champ { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.gp-champ.etroit { flex: 0 1 140px; }
.gp-champ label { font-size: 13px; font-weight: 600; color: var(--gris); }
.gp-champ input, .gp-champ select { width: 100%; }
.gp-form + .np-aide { margin-top: 10px; }
.gp-titres { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gp-titre { display: flex; align-items: center; gap: 12px; padding: 8px; background: #fff; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--trait); }
.gp-titre > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gp-titre b, .gp-titre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-titre span { font-size: 13px; color: var(--gris); }
.gp-pochette { flex: none; width: 44px; height: 44px; border-radius: 3px; background: linear-gradient(135deg, #ff3d81 0 50%, #2438ff 50% 100%) center / cover; }
.gp-mouv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.gp-mouv span:nth-child(2) { overflow-wrap: anywhere; }
.gp-mouv b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-mouv .plus { color: #0d8a4f; }
.gp-mouv .moins { color: #c0123f; }

@media (max-width: 900px) {
  .gp-grille { grid-template-columns: minmax(0, 1fr); }
  .gp-cote { position: static; }
}

/* =====================================================================================
   COLLECTION : la discothèque (collection.js)
   ===================================================================================== */
.dq-barre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dq-vues { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--panneau); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--trait); }
.dq-vues button { border: 0; font: inherit; font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 4px; background: transparent; color: var(--encre); cursor: pointer; }
.dq-vues button:hover { background: rgba(23,21,43,.08); }
.dq-vues button[aria-pressed="true"] { background: var(--encre); color: var(--jaune); font-weight: 800; }
.dq-vues button:focus-visible, .dq-tranche:focus-visible, .dq-vignette:focus-visible, .dq-fleche:focus-visible, .dq-lien:focus-visible, .dq-mini:focus-visible, .dq-retour:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }

.dq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.dq-tuile { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; background: var(--encre); color: #fff; border-radius: 6px; min-width: 0; }
.dq-tuile b { font-family: var(--titres); font-weight: 800; font-size: 28px; line-height: 1.1; color: var(--jaune); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dq-tuile span { font-size: 14px; color: #d4d7e6; }
.dq-tuile small { font-size: 12px; color: #a3a8c2; }

.dq-proche { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 24px; padding: 20px 24px; background: var(--jaune); border-radius: 6px; box-shadow: 4px 6px 0 rgba(23,21,43,.22); }
.dq-proche-disque { flex: none; width: 84px; height: 84px; border-radius: 4px; box-shadow: 0 6px 14px rgba(23,21,43,.35); }
.dq-proche-texte { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dq-proche-texte h2 { font-family: var(--titres); font-weight: 800; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.dq-surtitre { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }

.dq-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 32px 0 20px; }
.dq-tris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dq-tris > span, .dq-chercher { font-size: 14px; font-weight: 600; color: var(--gris); }
.dq-tris .puce[aria-pressed="true"] { background: var(--encre); color: var(--jaune); box-shadow: none; }
.dq-chercher { display: flex; align-items: center; gap: 8px; }
.dq-chercher input { width: 240px; max-width: 60vw; }

.dq-rayon { margin-bottom: 36px; }
.dq-ligne { display: flex; align-items: flex-end; gap: 6px; padding: 0 14px; min-height: 300px; overflow-x: auto; overflow-y: hidden; padding-top: 18px; }
.dq-intercalaire { flex: none; width: 46px; height: 290px; border-radius: 6px 6px 0 0; background: var(--encre); display: flex; justify-content: center; padding-top: 14px; box-sizing: border-box; }
.dq-intercalaire span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--titres); font-weight: 800; font-size: 14px; letter-spacing: .08em; color: var(--jaune); text-transform: uppercase; white-space: nowrap; overflow: hidden; max-height: 260px; text-overflow: ellipsis; }
.dq-tranche { position: relative; flex: none; padding: 10px 0 18px; border: 0; border-radius: 3px 3px 0 0; cursor: pointer; color: #fff; font: inherit;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 50%, rgba(0,0,0,.6)), var(--fond, #3d4156);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 3px 0 0 rgba(255,255,255,.18); transition: transform .18s ease; display: flex; align-items: center; justify-content: center; }
.dq-tranche:hover { transform: translateY(-14px); }
/* Étagère « Mes favoris » : glisser-déposer */
.dq-rayon.favoris .dq-intercalaire { background: var(--jaune); }
.dq-rayon.favoris .dq-intercalaire span { color: var(--encre); }
.dq-rayon.favoris .dq-tranche { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dq-ligne.rangement { touch-action: none; }
.dq-ligne.rangement .dq-tranche { cursor: grabbing; }
.dq-ligne.rangement .dq-tranche:not(.glisse) { transition: transform .18s ease; }
.dq-tranche.glisse { transform: translateY(-24px) rotate(-2deg) scale(1.05); z-index: 2; opacity: .92; transition: none;
  box-shadow: 0 16px 24px rgba(0,0,0,.35), inset 0 0 0 2px var(--jaune); }
.dq-etoile { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: #ffd84a; font-size: 13px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.7); pointer-events: none; }
.dq-rayon.favoris.vide .dq-ligne { min-height: 0; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.dq-rayon.favoris.vide .dq-intercalaire { width: auto; padding: 0 12px; height: 44px; padding-top: 0; align-items: center; }
.dq-rayon.favoris.vide .dq-intercalaire span { writing-mode: horizontal-tb; transform: none; font-size: 11px; }
.dq-fav-vide { align-self: center; max-width: 380px; margin: 0 0 0 10px; color: var(--gris); font-size: 14px; line-height: 1.5; }
.dq-favori-btn { align-self: flex-start; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--panneau); color: var(--encre);
  box-shadow: inset 0 0 0 2px var(--encre); font: 700 14px var(--texte); cursor: pointer; }
.dq-favori-btn[aria-pressed="true"] { background: var(--jaune); color: #17152b; box-shadow: none; }
.dq-favori-btn:disabled { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .dq-tranche.glisse { transform: translateY(-16px); } }
.dq-tranche-texte { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; max-height: 100%; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.dq-tranche-texte b { font-size: 13px; font-weight: 800; }
/* Album complet : la tranche garde sa couleur (sa pochette), un RUBAN en haut montre le palier
   (or = jaune, platine = blanc, émeraude = vert, légende = arc-en-ciel). La médaille est posée sur le ruban. */
.dq-tranche.or, .dq-tranche.platine, .dq-tranche.emeraude, .dq-tranche.legende { padding-top: 40px; }
.dq-tranche.or::before, .dq-tranche.platine::before, .dq-tranche.emeraude::before, .dq-tranche.legende::before {
  content: ''; position: absolute; top: 0; left: -2px; right: -2px; height: 30px; z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.dq-tranche.or::before { background: linear-gradient(90deg, #9a6b00, #ffe58a 35%, #f2c94c 60%, #9a6b00); }
.dq-tranche.platine::before { background: linear-gradient(90deg, #9aa1ad, #ffffff 40%, #dfe3ea 65%, #8f96a3); }
.dq-tranche.emeraude::before { background: linear-gradient(90deg, #04462c, #3ee59a 40%, #12a866 65%, #03361f); }
.dq-tranche.legende::before { background: linear-gradient(90deg, #ff7a3d, #ffd84a 22%, #fff6c8 40%, #7ef0c8 58%, #b98cff 78%, #ff5fa8); }
.dq-tranche.legende { box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 3px 0 0 rgba(255,255,255,.18), 0 0 12px rgba(255,200,80,.45); }
.dq-tranche .dq-medaille { z-index: 2; top: 5px; }
.dq-tranche.platine .dq-medaille { background: radial-gradient(circle, #17152b 0 2px, #ffffff 3px 6px, #7d8491 7px); }
.dq-tranche.emeraude .dq-medaille { background: radial-gradient(circle, #17152b 0 2px, #5ff0ae 3px 6px, #08703f 7px); }
.dq-tranche.legende .dq-medaille { background: radial-gradient(circle, #17152b 0 2px, transparent 3px), conic-gradient(#ff7a3d, #ffd84a, #7ef0c8, #b98cff, #ff5fa8, #ff7a3d); }
.dq-tranche-texte span { font-size: 12px; opacity: .9; }
.dq-medaille { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #17152b 0 2px, #ffe58a 3px 6px, #b8860b 7px); }
.dq-medaille.grande { position: static; transform: none; flex: none; width: 34px; height: 34px; background: radial-gradient(circle, #17152b 0 4px, #ffe58a 5px 11px, #b8860b 12px); }
.dq-jauge { position: absolute; left: 6px; right: 6px; bottom: 7px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.4); overflow: hidden; }
.dq-jauge span { display: block; height: 100%; background: var(--jaune); }
/* Album complet : la jauge est pleine, en vert vif (en foncé sur fond foncé, elle avait l'air vide) */
.dq-tranche.or .dq-jauge, .dq-tranche.platine .dq-jauge, .dq-tranche.emeraude .dq-jauge, .dq-tranche.legende .dq-jauge { background: rgba(23,21,43,.35); }
.dq-tranche.or .dq-jauge span, .dq-tranche.platine .dq-jauge span, .dq-tranche.emeraude .dq-jauge span, .dq-tranche.legende .dq-jauge span { background: #2fae62; box-shadow: 0 0 6px rgba(47,174,98,.7); }
.dq-planche { height: 18px; background: linear-gradient(180deg, #2a2750, var(--encre)); border-radius: 3px; box-shadow: 0 10px 18px rgba(23,21,43,.28); }
.dq-resume { margin: 10px 14px 0; font-size: 13px; color: var(--gris); }
.dq-vide { padding: 32px; background: var(--panneau); border-radius: 6px; color: var(--gris); }
.dq-note { margin-top: 8px; max-width: 760px; }

/* Bac à fouiller */
.dq-pochette { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1; border-radius: 4px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #fff; overflow: hidden; }
.dq-pochette.derriere { left: calc(var(--k) * 6px); right: calc(var(--k) * 6px); bottom: calc(var(--k) * 11px); box-shadow: 0 -2px 8px rgba(23,21,43,.25), inset 0 0 0 1px rgba(255,255,255,.1); }
.dq-pochette.devant { transform: rotate(-1.5deg); box-shadow: 0 18px 40px rgba(23,21,43,.45), inset 0 0 0 1px rgba(255,255,255,.12); }
.dq-pochette-artiste { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; opacity: .85; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.dq-pochette-titre { font-family: var(--titres); font-weight: 800; font-size: 26px; line-height: 1.05; margin-top: 6px; overflow-wrap: anywhere; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.dq-artiste { font-weight: 600; }
.dq-prog { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.dq-prog-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.dq-prog-ligne b { font-variant-numeric: tabular-nums; }
.dq-prog-barre { height: 10px; border-radius: 5px; background: rgba(23,21,43,.12); overflow: hidden; }
.dq-prog-barre span { display: block; height: 100%; background: var(--encre); }
.dq-prog-barre span.or { background: #c8921a; }
.dq-sous-titre { margin: 32px 0 8px; font-weight: 800; font-size: 17px; }

/* Album ouvert */
.dq-retour { border: 0; background: none; font: inherit; font-weight: 800; font-size: 15px; color: var(--encre); padding: 6px 0; cursor: pointer; margin-bottom: 20px; }
.dq-retour:hover { color: var(--bleu); }
.dq-album { overflow-x: clip; }
.dq-album-grille { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; }
.dq-boitier-col { flex: 0 1 440px; min-width: min(280px, 100%); display: flex; flex-direction: column; gap: 20px; }
.dq-boitier { position: relative; width: min(360px, 100%); aspect-ratio: 1; }
.dq-disque { position: absolute; top: 4%; left: 4%; width: 92%; aspect-ratio: 1; border-radius: 50%; transform: translateX(90px);
  background: radial-gradient(circle, var(--argent) 0 7%, #9aa1ad 7.5% 9%, #e8ebf0 9.5% 30%, transparent 30.5%), conic-gradient(from 20deg, #c9ced8, #f6f7fa, #9ea6b3, #eceff4, #b3bac6, #f6f7fa, #c9ced8);
  box-shadow: 0 10px 30px rgba(23,21,43,.35); }
.dq-pochette.grande { position: absolute; inset: 0; box-shadow: 0 18px 40px rgba(23,21,43,.45), inset 0 0 0 1px rgba(255,255,255,.12); }
.dq-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.dq-puce { padding: 4px 12px; border-radius: 999px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); font-size: 13px; font-weight: 600; white-space: nowrap; }
.dq-puce.rarete { font-size: 12px; font-weight: 800; box-shadow: none; }
.dq-puce.cadre { background: var(--jaune); box-shadow: none; }
.dq-puce.souhait { background: var(--encre); color: var(--jaune); box-shadow: none; }
.dq-album-infos { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dq-album-infos > .dq-surtitre { color: var(--gris); }
.dq-album-titre { font-family: var(--titres); font-weight: 800; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dq-prog-ligne.grande b { font-family: var(--titres); font-size: 26px; }
.dq-prog-ligne.grande small { font-family: var(--texte); font-size: 16px; font-weight: 600; color: var(--gris); }
.dq-prog-ligne.grande > span { color: var(--gris); }
.dq-segments { display: grid; gap: 4px; }
.dq-segments span { height: 12px; border-radius: 2px; }
.dq-segments span.vide { background: repeating-linear-gradient(45deg, rgba(23,21,43,.14) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px rgba(23,21,43,.3); }
.dq-recompense { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 22px; background: var(--encre); color: #d4d7e6; border-radius: 6px; }
.dq-recompense p { flex: 1 1 260px; min-width: 0; font-size: 15px; }
.dq-recompense p b { color: var(--jaune); }
.dq-recompense .btn-fantome { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.dq-recompense .btn-fantome:hover:not(:disabled) { background: #fff; color: var(--encre); }
.dq-rec-tete { flex: 1 1 100%; margin: 0; }
.dq-paliers { flex: 1 1 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dq-palier { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); opacity: .62; }
.dq-palier.atteint, .dq-palier.touche { opacity: 1; }
.dq-palier.atteint:not(.touche) { box-shadow: inset 0 0 0 2px var(--jaune); background: rgba(255,221,51,.08); }
.dq-palier-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.dq-palier-txt b { color: #fff; font-size: 15px; }
.dq-palier-gain { color: var(--jaune); font-weight: 700; font-size: 13px; }
.dq-palier-etat { font-weight: 800; font-size: 13px; color: #6fe3a1; white-space: nowrap; }
.dq-palier-etat.verrou { color: rgba(255,255,255,.4); }
.dq-palier .btn { padding: 8px 14px; }
.dq-palier.platine .dq-medaille { background: radial-gradient(circle, #17152b 0 4px, #f4f6fa 5px 11px, #7d8491 12px); }
.dq-palier.emeraude .dq-medaille { background: radial-gradient(circle, #17152b 0 4px, #5ff0ae 5px 11px, #08703f 12px); }
.dq-palier.legende .dq-medaille { background: radial-gradient(circle, #17152b 0 4px, transparent 5px), conic-gradient(#ff7a3d, #ffd84a, #7ef0c8, #b98cff, #ff5fa8, #ff7a3d); }
.dq-table-boite { background: var(--panneau); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--trait); overflow-x: auto; }
.dq-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.dq-table caption { text-align: left; padding: 16px 18px 6px; font-weight: 800; font-size: 17px; }
.dq-table th { text-align: left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); border-bottom: 2px solid var(--trait); }
.dq-table td { padding: 10px 12px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.dq-table .num { text-align: right; width: 44px; padding-left: 18px; color: var(--gris); font-variant-numeric: tabular-nums; }
.dq-table td.titre { font-weight: 600; }
.dq-table tr.manque { background: repeating-linear-gradient(135deg, rgba(23,21,43,.035) 0 10px, transparent 10px 20px); }
.dq-table tr.manque td.titre { color: var(--gris); }
.dq-table tbody tr:hover { background: rgba(255,221,51,.22); }
.dq-ma-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dq-lien { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dq-lien:hover { color: var(--bleu); }
.dq-etat { font-size: 13px; color: var(--gris); }
.dq-doubles { font-size: 13px; font-weight: 800; color: #c0123f; }
.dq-manquant { font-size: 13px; font-weight: 800; color: var(--gris); }
.dq-mini { border: 0; font: inherit; font-size: 13px; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: transparent; color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); cursor: pointer; }
.dq-mini:hover:not(:disabled) { background: var(--encre); color: var(--jaune); }
.dq-mini:disabled { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .dq-tranche, .dq-vignette { transition: none; }
  .dq-tranche:hover, .dq-vignette:hover { transform: none; }
}
@media (max-width: 600px) {
  .dq-disque { transform: translateX(40px); }
}

/* ----- Compte : comprendre une carte (legende.js) ----- */
.lg-bloc { max-width: 980px; }
.lg-grille { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: flex-start; margin-top: 8px; }
.lg-carte { flex: none; padding: 14px; }
.lg-wrap { --zoom: 1; cursor: default; }
.lg-repere { position: absolute; z-index: 20; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--jaune); color: var(--encre); font-size: 12px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--encre), 0 2px 6px rgba(0,0,0,.4); pointer-events: none; font-variant-numeric: tabular-nums; }
.lg-liste { flex: 1 1 320px; min-width: 0; margin: 0; padding: 0; list-style: none; counter-reset: lg; display: flex; flex-direction: column; gap: 10px; }
.lg-liste li { counter-increment: lg; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; font-size: 15px; line-height: 1.45; }
.lg-liste li::before { content: counter(lg); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--jaune); color: var(--encre); font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--encre); margin-top: 1px; }
.lg-liste b { font-weight: 800; }
.lg-liste span { color: var(--gris); }
@media (max-width: 380px) { .lg-carte { padding: 0; transform: scale(.9); transform-origin: 0 0; } }

/* ----- Profil (profil.js) : onglets Ma WL / Écoute / Comprendre une carte ----- */
.pf-onglets { margin-bottom: 24px; }
.pf-onglets .puce small { margin-left: 4px; }
.pf-intro { margin: 0 0 24px; max-width: 760px; font-size: 17px; line-height: 1.5; color: var(--gris); }
button.compte-pastille { border: 0; padding: 0; font: inherit; cursor: pointer; }
button.compte-pastille:hover { filter: brightness(1.08); }
button.compte-pastille:focus-visible, .pf-onglets .puce:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }

/* ----- Économie de ressources : les reflets animés des Légendaires ne tournent qu'au survol, au focus,
   ou sur la grande carte de la fiche (une seule à la fois). Au repos, ils restent figés. ----- */
.r4 .frame::before, .r4 .fx { animation-play-state: paused; }
.carte-wrap:hover .r4 .frame::before, .carte-wrap:hover .r4 .fx,
.carte-wrap:focus-visible .r4 .frame::before, .carte-wrap:focus-visible .r4 .fx,
.fiche-boite .r4 .frame::before, .fiche-boite .r4 .fx,
.bq-gain .r4 .frame::before, .bq-gain .r4 .fx { animation-play-state: running; }

/* =====================================================================================
   PROFIL : onglet « Mon profil » (vitrine.js)
   ===================================================================================== */
.pv-identite { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding: 24px; border-radius: 6px; background: var(--encre); color: #fff; }
.pv-avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; font-family: var(--titres); font-weight: 800; font-size: 32px; text-transform: uppercase; }
.pv-id-texte { flex: 1 1 220px; min-width: 0; }
.pv-id-texte h2 { font-family: var(--titres); font-weight: 800; font-size: 30px; line-height: 1.1; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv-titre { margin-top: 4px; font-weight: 600; color: var(--jaune); }
.pv-badge-soutien { font-family: var(--texte); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: linear-gradient(120deg, #ffe58a, #ff9ad5, #9ae8ff); color: var(--encre); }
.pv-chiffres { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pv-chiffres li { display: flex; flex-direction: column; }
.pv-chiffres b { font-family: var(--titres); font-weight: 800; font-size: 22px; color: var(--jaune); font-variant-numeric: tabular-nums; }
.pv-chiffres span { font-size: 13px; color: #c4c7d4; }

.pv-section { margin-top: 40px; }
.pv-section-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.pv-section-tete .np-aide { margin: 0; }
.pv-label { display: block; font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 4px; }

/* L'étagère et ses thèmes */
.pv-etagere { display: flex; flex-wrap: wrap; gap: 22px; padding: 26px 24px 30px; border-radius: 6px; background: #2a2750; box-shadow: inset 0 -16px 0 rgba(0,0,0,.25); }
.pv-etagere[data-theme="bois"] { background: linear-gradient(180deg, #8b5a2b, #6b4220); box-shadow: inset 0 -16px 0 #4a2c14; }
.pv-etagere[data-theme="neon"] { background: #0d0b1f; box-shadow: inset 0 0 0 2px #ff4fd8, 0 0 22px rgba(255,79,216,.45), inset 0 -16px 0 rgba(61,242,255,.25); }
.pv-etagere[data-theme="velours"] { background: radial-gradient(120% 90% at 50% 0%, #7a1030, #3a0618); box-shadow: inset 0 -16px 0 #24030e; }
.pv-etagere[data-theme="emeraude"] { background: radial-gradient(120% 90% at 50% 0%, #17a866, #04462c 70%); box-shadow: inset 0 0 0 2px #5ff0ae, inset 0 -16px 0 #022a18; }
.pv-etagere[data-theme="legende"] { background: linear-gradient(135deg, #3a1d5c, #1a0f33 45%, #4a1640); box-shadow: inset 0 0 0 3px #ffd84a, 0 0 26px rgba(255,200,80,.45), inset 0 -16px 0 rgba(255,216,74,.25); }
.pv-etagere[data-theme="or"] { background: linear-gradient(135deg, #f7e08a, #b8860b 45%, #fff0a8 60%, #9a6b00); box-shadow: inset 0 -16px 0 rgba(90,60,0,.5); }
.pv-place { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pv-carte { --zoom: .62; }
.pv-prod { font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.pv-place.deco .pv-prod { color: #d4d7e6; font-weight: 600; }
.pv-vide { width: calc(300px * .62); height: calc(420px * .62); border-radius: 12px; border: 2px dashed rgba(255,255,255,.55); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.pv-vide:hover { background: rgba(255,255,255,.14); }
.pv-place.deco .pv-vide { border-style: dotted; font-weight: 600; }
.pv-etagere.petite .pv-carte { --zoom: .5; }
.pv-etagere-vide { color: #d4d7e6; }
.pv-recolte { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.pv-recolte p { flex: 1 1 320px; min-width: 0; color: var(--gris); }
.pv-recolte p b { color: var(--encre); }

/* Choix des cartes de la vitrine : une liste légère */
.pv-choix { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.pv-choix-tete h3 { font-size: 18px; font-weight: 800; }
.pv-choix-tete .np-aide { margin: 4px 0 0; }
.pv-choix input { width: 100%; }
.pv-choix-liste { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pv-choix-ligne { width: 100%; display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 4px; background: #fff; font: inherit; font-size: 14px; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--trait); color: var(--encre); }
.pv-choix-ligne:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--encre); }
.pv-choix-ligne.choisie { background: var(--jaune); box-shadow: inset 0 0 0 2px var(--encre); }
.pv-choix-ligne:disabled { opacity: .5; cursor: not-allowed; }
.pv-rang { font-weight: 800; text-align: center; }
.pv-rarete { font-size: 11px; font-weight: 800; color: #fff; padding: 2px 8px; border-radius: 999px; }
.pv-choix-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pv-choix-meta { font-size: 12px; color: var(--gris); white-space: nowrap; }
.pv-choix-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.pv-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 40px; }

/* Titres */
.pv-titres { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pv-titre-puce { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border: 0; border-radius: 6px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); font: inherit; text-align: left; cursor: pointer; color: var(--encre); }
.pv-titre-puce b { font-size: 15px; }
.pv-titre-puce small { font-size: 12px; color: var(--gris); line-height: 1.35; }
.pv-titre-puce:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--encre); }
.pv-titre-puce.actif { background: var(--encre); color: var(--jaune); box-shadow: none; }
.pv-titre-puce.actif small { color: #c4c7d4; }
.pv-titre-puce.verrou { cursor: default; opacity: .7; }
.pv-titre-puce.verrou b { color: var(--gris); }
.pv-titre-puce.exclusif:not(.verrou) b { background: linear-gradient(120deg, #c8921a, #d0408a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pv-titre-puce.actif.exclusif b { background: none; color: var(--jaune); }
.pv-titre-barre { width: 100%; height: 5px; border-radius: 3px; background: rgba(23,21,43,.12); overflow: hidden; }
.pv-titre-barre span { display: block; height: 100%; background: var(--encre); }

/* Favoris */
.pv-favoris { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pv-fav { display: grid; grid-template-columns: 22px 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; background: var(--panneau); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--trait); }
.pv-fav-rang { font-family: var(--titres); font-weight: 800; text-align: center; }
.pv-fav-pochette { width: 48px; height: 48px; border-radius: 3px; background: linear-gradient(135deg, #ff3d81 0 50%, #2438ff 50% 100%) center / cover; }
.pv-fav-texte { min-width: 0; display: flex; flex-direction: column; }
.pv-fav-texte b, .pv-fav-texte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-fav-texte span { font-size: 13px; color: var(--gris); }
.pv-fav-outils { display: flex; gap: 4px; }
.pv-mini { border: 0; font: inherit; font-size: 13px; font-weight: 800; min-width: 32px; padding: 6px 10px; border-radius: 4px; background: transparent; color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); cursor: pointer; }
.pv-mini:hover:not(:disabled) { background: var(--encre); color: var(--jaune); }
.pv-mini:disabled { opacity: .3; cursor: default; }
.pv-fav-ajout { margin-top: 14px; }
.pv-fav-ajout input { width: 100%; }
.pv-fav-resultats { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pv-fav-resultat { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; border: 0; border-radius: 4px; background: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--trait); color: var(--encre); }
.pv-fav-resultat span { font-size: 13px; color: var(--gris); }
.pv-fav-resultat:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--encre); }
.pv-fav-resultat:disabled { opacity: .45; cursor: default; }

/* Thèmes et Soutien */
.pv-themes { display: flex; flex-wrap: wrap; gap: 10px; }
.pv-theme { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; background: var(--panneau); box-shadow: inset 0 0 0 2px var(--trait); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--encre); }
.pv-theme.actif { box-shadow: inset 0 0 0 2px var(--encre); background: #fff; }
.pv-theme.verrou { opacity: .6; }
.pv-theme.verrou:hover { opacity: 1; }
.pv-theme-apercu { width: 26px; height: 26px; border-radius: 50%; background: #2a2750; }
.pv-theme[data-theme="bois"] .pv-theme-apercu { background: linear-gradient(180deg, #8b5a2b, #6b4220); }
.pv-theme[data-theme="neon"] .pv-theme-apercu { background: #0d0b1f; box-shadow: inset 0 0 0 2px #ff4fd8; }
.pv-theme[data-theme="velours"] .pv-theme-apercu { background: radial-gradient(#7a1030, #3a0618); }
.pv-theme[data-theme="emeraude"] .pv-theme-apercu { background: radial-gradient(#3ee59a, #04462c); }
.pv-theme[data-theme="legende"] .pv-theme-apercu { background: conic-gradient(#ff7a3d, #ffd84a, #7ef0c8, #b98cff, #ff5fa8, #ff7a3d); }
.pv-theme[data-theme="or"] .pv-theme-apercu { background: linear-gradient(135deg, #f7e08a, #b8860b); }
.pv-soutien { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 18px; padding: 22px 24px; border-radius: 6px; background: var(--jaune); }
.pv-soutien > div { flex: 1 1 360px; min-width: 0; }
.pv-surtitre { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.pv-soutien h3 { font-family: var(--titres); font-weight: 800; font-size: 22px; line-height: 1.2; margin-top: 4px; }
.pv-soutien ul { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.pv-soutien-note { margin-top: 10px; font-size: 13px; }
.pv-soutien-bientot { font-weight: 800; padding: 10px 16px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--encre); }
.pv-soutien-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pv-soutien-btn { font: inherit; font-weight: 800; font-size: 16px; padding: 12px 22px; border: 0; border-radius: 4px; background: var(--encre); color: var(--jaune); cursor: pointer; }
.pv-soutien-btn:hover:not(:disabled) { transform: translateY(-1px); }
.pv-soutien-btn:disabled { opacity: .6; cursor: progress; }
.pv-soutien-btn:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.pv-soutien-prix { font-weight: 700; font-size: 13px; }
.pv-soutien-prix:empty { display: none; }
.pv-soutien-actif { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pv-soutien-actif[hidden], .pv-soutien-msg[hidden] { display: none; }
.pv-soutien-msg { margin-top: 12px; padding: 10px 14px; border-radius: 4px; font-weight: 700; box-shadow: inset 0 0 0 2px currentColor; }

/* Vitrine d'un autre joueur */
.pv-autre-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.pv-autre-form .pv-label { width: 100%; margin: 0; }
.pv-autre-form input { flex: 1 1 220px; min-width: 0; max-width: 360px; }
.pv-autre { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.pv-autre-tete h3 { font-family: var(--titres); font-weight: 800; font-size: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv-autre-tete .pv-titre { color: var(--encre); }
.pv-autre-tete .np-aide { margin: 2px 0 0; }
.pv-autre h4 { font-weight: 800; }
.pv-autre-favoris { margin: 0; padding-left: 22px; }

@media (max-width: 520px) {
  .pv-carte { --zoom: .5; }
  .pv-vide { width: calc(300px * .5); height: calc(420px * .5); }
  .pv-etagere { padding: 18px 14px 24px; gap: 14px; justify-content: center; }
}

/* ----- Mise en avant de l'abonnement Soutien ----- */
.soutien-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--jaune); color: var(--encre); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: inset 0 0 0 2px var(--encre); }
.soutien-pill:hover { transform: translateY(-1px); }
.soutien-pill:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.soutien-pill[hidden] { display: none; }
@media (max-width: 600px) { .soutien-pill { padding: 9px 11px; } .soutien-pill-txt { display: none; } }

.pv-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; padding: 14px 18px; border-radius: 6px; background: var(--jaune); color: var(--encre); }
.pv-promo[hidden] { display: none; }
.pv-promo p { flex: 1 1 260px; min-width: 0; margin: 0; line-height: 1.4; }
.pv-promo-sous { font-size: 13px; }
.pv-promo-coeur { font-size: 26px; line-height: 1; }
.pv-promo .btn-fantome { color: var(--encre); }

.pv-place.verrou .pv-vide { border-style: dotted; border-color: rgba(255, 213, 74, .7); color: #ffe27a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; text-align: center; }
.pv-place.verrou .pv-vide small { font-weight: 600; font-size: 12px; color: #d4d7e6; }
.pv-place.verrou .pv-prod { color: #ffe27a; }

.pv-flash { animation: pv-flash 1.4s ease; }
@keyframes pv-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px var(--encre); } }
@media (prefers-reduced-motion: reduce) { .pv-flash { animation: none; } }

/* =====================================================================
   Avantages Soutien (soutien.js)
   ===================================================================== */
.pseudo-soutien { color: #b8860b; font-weight: 800; }
.pseudo-soutien::before { content: "♥ "; }

/* --- Bannière du profil (pochette du favori n°1) --- */
.pv-identite.pv-banniere { background: linear-gradient(90deg, rgba(23,21,43,.94) 30%, rgba(23,21,43,.6)), var(--pv-banniere) center / cover; }
.pv-autre-tete.pv-banniere { padding: 18px 20px; border-radius: 6px; color: #fff; background: linear-gradient(90deg, rgba(23,21,43,.94) 30%, rgba(23,21,43,.6)), var(--pv-banniere) center / cover; }
.pv-autre-tete.pv-banniere .np-aide { color: #d4d7e6; }
.pv-autre-tete.pv-banniere .pv-titre { color: var(--jaune); }

/* --- Cadres de vitrine du mois --- */
.pv-etagere[data-cadre] { border: 10px solid transparent; border-radius: 0; }
.pv-etagere[data-cadre="vinyle"], .sx-cadre[data-cadre="vinyle"] .sx-cadre-apercu { border-image: repeating-linear-gradient(45deg, #0b0a12 0 3px, #5a5770 3px 5px, #0b0a12 5px 8px) 12; }
.pv-etagere[data-cadre="cassette"], .sx-cadre[data-cadre="cassette"] .sx-cadre-apercu { border-image: linear-gradient(90deg, #ff8a00 0 33%, #ff4d4d 33% 66%, #ffd000 66%) 10; }
.pv-etagere[data-cadre="neon"], .sx-cadre[data-cadre="neon"] .sx-cadre-apercu { border-image: linear-gradient(90deg, #ff4fd8, #3df2ff, #ff4fd8) 10; }
.pv-etagere[data-cadre="argent"], .sx-cadre[data-cadre="argent"] .sx-cadre-apercu { border-image: linear-gradient(135deg, #f5f7fa, #9aa3ad 40%, #fff 55%, #7d8691) 10; }
.pv-etagere[data-cadre="aurore"], .sx-cadre[data-cadre="aurore"] .sx-cadre-apercu { border-image: linear-gradient(90deg, #7b2ff7, #f107a3, #ffb86c, #3df2ff) 10; }
.pv-etagere[data-cadre="pixel"], .sx-cadre[data-cadre="pixel"] .sx-cadre-apercu { border-image: repeating-linear-gradient(90deg, #17152b 0 8px, #ffdd33 8px 16px) 10; }

.sx-cadres { display: flex; flex-wrap: wrap; gap: 10px; }
.sx-cadre { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 0; border-radius: 6px; background: var(--panneau); box-shadow: inset 0 0 0 2px var(--trait); font: inherit; font-weight: 600; font-size: 14px; color: var(--encre); cursor: pointer; text-align: left; }
.sx-cadre span { display: flex; flex-direction: column; }
.sx-cadre small { font-weight: 600; font-size: 12px; opacity: .7; }
.sx-cadre.actif { background: #fff; box-shadow: inset 0 0 0 2px var(--encre); }
.sx-cadre.verrou { opacity: .65; }
.sx-cadre.verrou:hover { opacity: 1; }
.sx-cadre-apercu { flex: none; width: 34px; height: 34px; background: #2a2750; border: 6px solid var(--trait); }
.sx-mur-choix { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; font-size: 14px; cursor: pointer; }

/* --- Rétrospective --- */
.pv-section-tete select { font: inherit; font-weight: 600; padding: 6px 10px; border-radius: 4px; border: 2px solid var(--encre); background: #fff; color: var(--encre); }
.sx-retro { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.sx-chiffres { padding: 18px 20px; border-radius: 6px; background: var(--encre); color: #fff; width: 100%; }
.sx-meilleures h3, .sx-tops h3 { font-family: var(--titres); font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.sx-meilleures-cartes { display: flex; flex-wrap: wrap; gap: 16px; }
.sx-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; width: 100%; }
.sx-tops ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.sx-verrou { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 20px; border-radius: 6px; background: var(--panneau); border: 2px dashed var(--trait); width: 100%; }
.sx-verrou p { flex: 1 1 280px; min-width: 0; }
.sx-cta { font-size: 14px; padding: 10px 16px; }
.sx-export { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.sx-export-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sx-export-tete h3 { font-family: var(--titres); font-weight: 800; font-size: 16px; }
.sx-export-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-export-texte { width: 100%; font: 14px/1.5 ui-monospace, Consolas, monospace; padding: 10px 12px; border: 2px solid var(--trait); border-radius: 4px; background: #fff; color: var(--encre); resize: vertical; }
.sx-export-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* --- Mur des soutiens --- */
.sx-mur { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sx-mur-nom { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 6px; background: var(--jaune); color: var(--encre); }
.sx-mur-nom small { font-size: 12px; font-weight: 600; }
.sx-mur-toi { display: flex; align-items: center; }

/* --- Accueil : vote de la prochaine édition --- */
.vt-vote { margin: 28px 0 8px; padding: 22px 24px; border-radius: 6px; background: var(--encre); color: #fff; }
.vt-surtitre { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--jaune); }
.vt-vote .titre-section { color: #fff; margin-top: 4px; overflow-wrap: anywhere; }
.vt-etat { font-size: 14px; color: #c9cbe0; margin-top: 4px; }
.vt-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 16px; }
.vt-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 4px; overflow: hidden; font: inherit; font-weight: 700; color: #fff; text-align: left; cursor: pointer;
  background: linear-gradient(90deg, rgba(255,221,51,.28) var(--pct, 0%), rgba(255,255,255,.08) var(--pct, 0%)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.vt-option:disabled { cursor: default; }
.vt-option:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--jaune); }
.vt-option:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.vt-option.choisi { box-shadow: inset 0 0 0 3px var(--jaune); }
.vt-option.choisi .vt-label::after { content: " ✓"; color: var(--jaune); }
.vt-option.gagnant { box-shadow: inset 0 0 0 3px var(--jaune); }
.vt-option.gagnant .vt-label::before { content: "★ "; color: var(--jaune); }
.vt-label { min-width: 0; overflow-wrap: anywhere; }
.vt-pct { flex: none; font-variant-numeric: tabular-nums; }
.vt-pied .pv-soutien-btn { background: var(--jaune); color: var(--encre); }
.vt-pied { margin-top: 14px; font-size: 14px; color: #c9cbe0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gp-vote .vt-option.petit { min-height: 36px; padding: 6px 10px; font-size: 14px; color: var(--encre); background: linear-gradient(90deg, rgba(255,221,51,.6) var(--pct, 0%), var(--panneau) var(--pct, 0%)); box-shadow: inset 0 0 0 1px var(--trait); margin-top: 6px; }

/* --- Catalogue : proposer un titre --- */
.px { margin: 0 0 20px; padding: 16px 20px; border-radius: 6px; background: var(--panneau); box-shadow: inset 0 0 0 2px var(--trait); }
.px-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.px-tete > div { flex: 1 1 300px; min-width: 0; }
.px-titre { font-family: var(--titres); font-weight: 800; font-size: 18px; }
.px-sous { font-size: 14px; margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.px-corps { margin-top: 16px; }
.px-form { display: flex; flex-wrap: wrap; gap: 10px; }
.px-form input { flex: 1 1 240px; min-width: 0; font: inherit; padding: 10px 12px; border: 2px solid var(--encre); border-radius: 4px; background: #fff; color: var(--encre); }
.px-liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.px-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px; border-radius: 4px; background: #fff; }
.px-pochette { flex: none; width: 48px; height: 48px; border-radius: 3px; background: var(--argent); object-fit: cover; }
.px-txt { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.px-txt b, .px-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-txt span { font-size: 14px; opacity: .75; }
.px-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.px-statut { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--panneau); }
.px-statut.pending { background: #fff3b0; }
.px-statut.approved { background: #d6f5dd; }
.px-statut.rejected { background: #ffd9df; }
.px-h3 { font-family: var(--titres); font-weight: 800; font-size: 15px; margin-top: 18px; }
.btn-fantome.petit { padding: 8px 14px; font-size: 14px; }

/* --- Admin --- */
.gp-soutien { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 28px; margin: 0 0 64px; align-items: start; }
.gp-bloc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gp-vote-form { display: flex; flex-direction: column; gap: 6px; }
.gp-vote-form label { font-weight: 700; font-size: 14px; margin-top: 6px; }
.gp-vote-form input, .gp-vote-form textarea, .gp-note { font: inherit; padding: 8px 10px; border: 2px solid var(--trait); border-radius: 4px; background: #fff; color: var(--encre); min-width: 0; }
.gp-vote-form button { align-self: flex-start; margin-top: 8px; }
.gp-votes { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.gp-vote-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.gp-note { flex: 1 1 140px; font-size: 14px; }

@media (max-width: 520px) {
  .vt-vote { padding: 18px 16px; }
  .px { padding: 14px 14px; }
  .px-actions { justify-content: flex-start; width: 100%; }
}


/* =====================================================================
   Écran de connexion : la Pochette du jour à côté du formulaire
   ===================================================================== */
.auth-contenu { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 24px; width: min(860px, 100%); margin: auto; }
.auth-contenu .auth-boite { flex: 0 1 400px; }
.auth-jeu { position: relative; flex: 1 1 360px; max-width: 420px; padding: 24px 24px 22px; background: var(--panneau); box-shadow: 4px 6px 0 rgba(23,21,43,.3), inset 0 0 0 1px var(--trait); }
.auth-jeu h2 { font-family: var(--titres); font-weight: 800; font-size: 22px; margin-bottom: 4px; }
.auth-parrain { margin-top: 14px; padding: 10px 12px; border-radius: 4px; background: var(--jaune); font-weight: 700; font-size: 14px; }
@media (max-width: 520px) { #auth { place-items: start center; } .auth-boite, .auth-jeu { padding: 20px 16px; } }

/* =====================================================================
   Accueil : Aujourd'hui (jeux.js)
   ===================================================================== */
.aj { margin: 28px 0 8px; }
.aj-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.aj-edition { font-size: 14px; }
.aj-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.aj-bloc { padding: 16px 18px; border-radius: 6px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aj-surtitre { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.aj-gros { font-size: 15px; }
.aj-gros b { font-family: var(--titres); font-size: 28px; font-weight: 800; }
.aj-aide { font-size: 13px; color: var(--gris); }
.aj-jours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.aj-jour { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--trait); font-size: 11px; text-align: center; }
.aj-jour b { font-size: 11px; line-height: 1.15; }
.aj-jour.fait { background: var(--encre); color: var(--jaune); box-shadow: none; }
.aj-jour.aujourdhui { outline: 2px solid var(--jaune); outline-offset: 1px; }
.aj-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aj-mission { display: flex; align-items: center; gap: 10px; }
.aj-mission-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aj-mission-txt b { font-size: 14px; }
.aj-mission-txt span { font-size: 12px; color: var(--gris); }
.aj-mission.recue .aj-mission-txt { opacity: .6; }
.aj-ok { font-weight: 800; font-size: 18px; }
.aj-barre { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--encre) var(--pct, 0%), rgba(23,21,43,.12) var(--pct, 0%)); }
.aj-barre.gros { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--jaune) var(--pct, 0%), rgba(23,21,43,.12) var(--pct, 0%)); box-shadow: inset 0 0 0 1px var(--trait); }
.aj-jeu { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 0; border-radius: 4px; background: var(--encre); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.aj-jeu b { color: var(--jaune); }
.aj-jeu span { font-size: 13px; color: #d4d7e6; }
.aj-jeu:hover { transform: translateY(-1px); }
.aj-jeu:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.pastille-rarete.partage { border: 0; cursor: pointer; background: var(--jaune); color: var(--encre); font: inherit; font-weight: 800; }

/* =====================================================================
   Jeux : Pochette du jour
   ===================================================================== */
.jx-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px; align-items: start; margin: 16px 0 64px; }
.pc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pc-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.pc-image { width: min(360px, 100%); height: auto; aspect-ratio: 1; border-radius: 6px; background: #2a2750; image-rendering: pixelated; box-shadow: 4px 6px 0 rgba(23,21,43,.25); }
.pc-essais { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-essais li { padding: 6px 10px; border-radius: 4px; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.pc-essais li.ko { background: #ffd9df; }
.pc-essais li.ok { background: #d6f5dd; }
.pc-indices { margin: 0; padding-left: 18px; font-size: 14px; color: var(--gris); }
.pc-form { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-form input { flex: 1 1 200px; min-width: 0; font: inherit; padding: 10px 12px; border: 2px solid var(--encre); border-radius: 4px; background: #fff; color: var(--encre); }
.pc-msg { width: 100%; min-height: 18px; font-size: 14px; font-weight: 600; color: #c0123f; }
.pc-fin { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pc-reponse { font-size: 16px; }
.pc-partage { margin: 0; padding: 10px 12px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--trait); font: 15px/1.5 var(--texte); white-space: pre-wrap; }
.pc-cta { padding: 10px 12px; border-radius: 4px; background: var(--jaune); font-weight: 700; font-size: 14px; }
.pc-auth .pc-image { width: min(300px, 100%); }
.pc-cote { display: flex; flex-direction: column; gap: 8px; }
.pc-top { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }

/* =====================================================================
   Jeux : Duels
   ===================================================================== */
.du-bloc { margin: 16px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.du-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.du-deck { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.du-slot { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 8px 10px; border-radius: 6px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); }
.du-critere { font-weight: 800; font-size: 14px; }
.du-vide { color: var(--gris); font-size: 14px; }
.du-outils { display: flex; gap: 4px; }
.du-outils button { width: 34px; height: 34px; border: 0; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 2px var(--encre); font: inherit; font-weight: 800; cursor: pointer; }
.du-outils button:disabled { opacity: .35; cursor: default; }
.du-carte { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 8px 4px 4px; border-radius: 6px; background: #fff; box-shadow: inset 4px 0 0 #8a8fa3; }
.du-carte.r-rare { box-shadow: inset 4px 0 0 #2f7fd6; }
.du-carte.r-epic { box-shadow: inset 4px 0 0 #7a3fd0; }
.du-carte.r-legendary { box-shadow: inset 4px 0 0 #c8921a; }
.du-carte img { flex: none; width: 40px; height: 40px; border-radius: 3px; object-fit: cover; background: var(--argent); margin-left: 4px; }
.du-carte-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.du-carte-txt b, .du-carte-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.du-carte-txt span { font-size: 12px; color: var(--gris); }
.du-valeur { flex: none; font-weight: 800; font-size: 13px; padding: 3px 8px; border-radius: 999px; background: var(--panneau); }
.du-carte.gagne { background: #d6f5dd; }
.du-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.du-choix { display: flex; flex-direction: column; gap: 10px; }
.du-choix input { font: inherit; padding: 8px 10px; border: 2px solid var(--trait); border-radius: 4px; }
.du-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; max-height: 420px; overflow-y: auto; }
.du-pioche { width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.du-pioche:hover .du-carte { background: #fff8cc; }
.du-resultat { padding: 16px 18px; border-radius: 6px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); }
.du-issue-W { color: #1d7a3a; }
.du-issue-L { color: #b0123c; }
.du-manches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.du-manche { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.du-vs { font-weight: 800; font-size: 13px; text-align: center; }
.du-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; margin-bottom: 64px; }
.du-classement, .du-recents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.du-classement li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px; border-radius: 4px; background: var(--panneau); font-size: 14px; }
.du-classement li.moi { background: var(--jaune); }
.du-rang { font-weight: 800; }
.du-recents li { font-size: 14px; }
@media (max-width: 720px) {
  .jx-grille { grid-template-columns: minmax(0, 1fr); }
  .du-slot { grid-template-columns: minmax(0, 1fr) auto; }
  .du-slot .du-critere { grid-column: 1 / -1; }
  .du-manche { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--trait); }
  .du-manche .du-vs { text-align: left; padding-left: 8px; }
}

/* =====================================================================
   Amis (amis.js)
   ===================================================================== */
.am-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; align-items: start; margin: 12px 0 24px; }
.am-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.am-bloc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.am-form, .am-lien { display: flex; flex-wrap: wrap; gap: 8px; }
.am-form input, .am-lien input, .am-note-champ, .am-col-ech input[type="search"] { flex: 1 1 200px; min-width: 0; font: inherit; padding: 9px 12px; border: 2px solid var(--trait); border-radius: 4px; background: #fff; color: var(--encre); }
.am-suivis, .am-fil, .am-choix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.am-personne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 4px; background: #fff; }
.am-personne-txt { display: flex; flex-direction: column; min-width: 0; }
.am-personne-txt span { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.am-mutuel { font-size: 12px; font-weight: 700; }
.am-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.am-evt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.am-evt img { flex: none; width: 40px; height: 40px; border-radius: 3px; object-fit: cover; }
.am-evt small { display: block; color: var(--gris); font-size: 12px; }
.am-h3 { font-family: var(--titres); font-weight: 800; font-size: 15px; margin-top: 6px; }
.am-offre { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 4px; background: #fff; }
.am-offre-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.am-offre-cols small { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.am-mini { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.am-mini-carte { font-size: 13px; padding: 4px 8px; border-radius: 3px; background: var(--panneau); box-shadow: inset 3px 0 0 #8a8fa3; overflow-wrap: anywhere; }
.am-mini-carte.r-rare { box-shadow: inset 3px 0 0 #2f7fd6; }
.am-mini-carte.r-epic { box-shadow: inset 3px 0 0 #7a3fd0; }
.am-mini-carte.r-legendary { box-shadow: inset 3px 0 0 #c8921a; }
.am-note { font-style: italic; font-size: 14px; }
.am-panneau { margin-bottom: 64px; display: flex; flex-direction: column; gap: 12px; }
.am-panneau-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.am-ech-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.am-col-ech { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.am-choix { max-height: 380px; overflow-y: auto; }
.am-choix-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 6px 8px; border-radius: 4px; background: #fff; cursor: pointer; font-size: 14px; }
.am-choix-ligne small { grid-column: 2; font-size: 12px; color: var(--gris); }
.am-choix-ligne.utile { box-shadow: inset 3px 0 0 var(--jaune); }
.am-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv-partage { display: flex; justify-content: flex-end; margin-top: 10px; }

/* Cadre « Duo » (parrainage) */
.pv-etagere[data-cadre="duo"], .sx-cadre[data-cadre="duo"] .sx-cadre-apercu { border-image: linear-gradient(90deg, #ff4d9d 0 50%, #2a2bff 50%) 10; }

/* Menu à 9 onglets : plus serré sur les écrans moyens pour que le solde reste sur la même ligne */
@media (max-width: 1500px) and (min-width: 1181px) {
  .haut { padding-left: 32px; padding-right: 32px; gap: 14px 18px; }
  .menu { gap: 2px; }
  .onglet { padding: 8px 10px; font-size: 14px; }
}
@media (max-width: 1300px) and (min-width: 1181px) { .compte-texte b, .soutien-pill-txt { display: none; } .marque { font-size: 19px; } }
.am-col-ech input[type="search"] { flex: none; }

/* =====================================================================================
   PC / TABLETTE / TÉLÉPHONE
   - PC (> 1180 px)  : onglets en haut, comme avant.
   - ≤ 1180 px       : en-tête compact collé en haut + barre d'onglets fixée en bas (4 principaux + « Plus »).
   - ≤ 560 px        : mise en page téléphone (2 cartes par ligne, panneaux plus serrés…).
   ===================================================================================== */
.onglet .ic { display: none; }
.onglet-plus { display: none; }
.menu-plus { display: none; }

@media (max-width: 1180px) {
  :root { --barre-bas: calc(64px + env(safe-area-inset-bottom, 0px)); --haut-h: 60px; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--haut-h) + 8px); scroll-padding-bottom: calc(var(--barre-bas) + 8px); }
  body { padding-bottom: var(--barre-bas); }

  /* En-tête : une seule ligne, collée en haut */
  .haut { position: sticky; top: 0; z-index: 90; flex-wrap: nowrap; gap: 10px; min-height: var(--haut-h);
    padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
    background: var(--argent); box-shadow: 0 1px 0 var(--trait); }
  /* Pas de filter/backdrop-filter/transform sur .haut : la barre du bas (fixed) se caserait dans l'en-tête */
  .marque { font-size: 18px; gap: 8px; min-width: 0; }
  .marque .disque { width: 34px; }
  .cote { gap: 8px; }
  .solde { padding: 8px 12px; font-size: 15px; }
  .solde span { font-size: 16px; }
  .compte-pastille { width: 38px; height: 38px; }
  .compte-texte { display: none; }

  /* La barre du bas */
  .menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0;
    height: var(--barre-bas); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left));
    background: var(--encre); box-shadow: 0 -6px 20px rgba(23,21,43,.18); }
  .menu .onglet { flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 64px; min-width: 0; padding: 6px 2px;
    border-radius: 0; background: transparent; color: #b9bdd3; font-size: 11px; font-weight: 600; transform: none; box-shadow: none;
    -webkit-tap-highlight-color: transparent; }
  .menu .onglet .ic { display: block; width: 24px; height: 24px; transition: transform .2s; }
  .menu .onglet-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu .onglet:hover { background: transparent; color: #fff; }
  .menu .onglet.actif { background: transparent; color: var(--jaune); font-weight: 800; transform: none; box-shadow: none; }
  .menu .onglet.actif .ic { transform: translateY(-1px) scale(1.08); }
  .menu .onglet.actif::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--jaune); }
  .menu .onglet.nouveau::after { top: 8px; right: calc(50% - 18px); box-shadow: 0 0 0 2px var(--encre); }
  .menu .onglet:focus-visible { outline: 2px solid var(--jaune); outline-offset: -4px; }

  /* Le panneau « Plus » */
  .menu-plus { display: block; position: fixed; inset: 0; z-index: 99; background: rgba(23,21,43,.45); animation: mp-fond .18s ease; }
  .menu-plus-feuille { position: absolute; left: 0; right: 0; bottom: var(--barre-bas); padding: 16px 16px 18px; border-radius: 16px 16px 0 0;
    background: var(--argent); max-width: 620px; margin: 0 auto; box-shadow: 0 -10px 30px rgba(23,21,43,.25); animation: mp-monte .22s cubic-bezier(.2,.8,.2,1); }
  .menu-plus-tete { margin: 0 0 12px; font-size: 13px; color: var(--gris); }
  .menu-plus-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .menu-plus-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 0; border-radius: 8px;
    background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); color: var(--encre); font: inherit; font-weight: 700; font-size: 14px; }
  .menu-plus-item .ic { display: block; width: 26px; height: 26px; }
  .menu-plus-item.actif { background: var(--jaune); box-shadow: none; }
  .menu-plus-item.nouveau::after { content: ''; position: absolute; top: 8px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); }
  .menu-plus-deco { display: block; width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 6px; background: transparent;
    box-shadow: inset 0 0 0 2px rgba(23,21,43,.3); color: var(--encre); font: inherit; font-weight: 700; }
  @keyframes mp-fond { from { opacity: 0; } }
  @keyframes mp-monte { from { transform: translateY(24px); opacity: 0; } }

  /* Ce qui flotte en bas passe au-dessus de la barre */
  .bulle-info { bottom: calc(var(--barre-bas) + 14px); max-width: calc(100vw - 32px); text-align: center; }
  .cat-outils { top: var(--haut-h); }
  .gp-cote { position: static; }

  main { padding: 0 20px 40px; }
  .page-tete { padding: 14px 0 20px; }
  .hero { padding-bottom: 36px; gap: 20px; }

  /* Les fenêtres (fiche d'une carte, scène d'ouverture) restent au-dessus de la barre */
  .fiche { padding: 12px; }
}

@media (max-width: 560px) {
  main { padding: 0 16px 32px; }
  .page-titre { font-size: 34px; }
  .page-sous { margin-top: 10px; font-size: 16px; }
  .hero h1 { font-size: 40px; }
  .hero-sous { margin-top: 14px; font-size: 16px; }
  .hero-actions .btn { padding: 14px 20px; font-size: 16px; }
  .titre-section { font-size: 22px; }
  .panneau { padding: 18px 16px; }

  /* Saisie : 16 px minimum, sinon iPhone zoome sur le champ */
  input, select, textarea { font-size: 16px; }

  /* Deux cartes par ligne */
  .rangee, .sess-cartes, .mq-grille { --zoom: .54; gap: 14px 12px; justify-content: center; }
  .mq-tuile { min-width: 0; }
  .pv-carte { --zoom: .46; }
  .pv-vide { width: calc(300px * .46); height: calc(420px * .46); }
  .pv-etagere { gap: 14px 12px; }

  /* Packs : le bloc « 3 sur 6 » plus compact */
  .stock-bloc { margin-top: 20px; padding: 14px 18px; gap: 10px 18px; }
  .stock-chiffre b { font-size: 52px; }
  .stock-chiffre span { font-size: 20px; }
  .stock-legende { font-size: 17px; }

  /* Filtres de « Toutes les cartes » et du marché : deux colonnes */
  .barre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; margin-bottom: 20px; }
  .barre label { min-width: 0; }
  .barre select, .barre input:not([type="checkbox"]) { width: 100%; min-width: 0; }
  .barre label:has(input[type="search"]), .barre .mq-case { grid-column: 1 / -1; }
  .barre .mq-case { padding-bottom: 0; }
  #dq-grille .barre label:has(#taille) { display: none; }
  #cartes { --zoom: .54 !important; gap: 14px 12px; justify-content: center; }

  /* Collection */
  .dq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dq-vues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .dq-vues button { padding: 10px 6px; font-size: 13px; }

  /* Catalogue : en liste, le bouton WL à droite et le genre sous l'artiste */
  .cat-liste:not(.grille) .cat-ligne { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 4px; }
  .cat-liste:not(.grille) .c-num { grid-row: 1 / span 2; font-size: 13px; }
  .cat-liste:not(.grille) .c-titre { grid-column: 2; grid-row: 1; }
  .cat-liste:not(.grille) .c-genre { grid-column: 2; grid-row: 2; margin: -4px 0 0 60px; font-size: 12px; }
  .cat-liste:not(.grille) .c-souhait { grid-column: 3; grid-row: 1 / span 2; }
  .c-souhait .btn-fantome { padding: 8px 10px; }
  .cat-liste.grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-liste.grille .cat-ligne { padding: 10px; }
  .cat-entete { display: none; }
  .cat-reglages select { max-width: 132px; }
  .cat-champ input { padding-top: 12px; padding-bottom: 12px; font-size: 16px; }

  /* Onglets internes (puces) : sur une ligne qui défile plutôt que sur trois lignes */
  .mq-onglets, .pf-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 3px 16px; }
  .mq-onglets::-webkit-scrollbar, .pf-onglets::-webkit-scrollbar { display: none; }
  .mq-onglets > *, .pf-onglets > * { flex: none; white-space: nowrap; }
}

@media (max-width: 340px) { .marque > span:last-child { display: none; } }
@media (max-width: 380px) {
  .disque-zone { transform: scale(.48); margin-bottom: -280px; }
  .hero { overflow-x: clip; }
  .rangee, .sess-cartes, .mq-grille { --zoom: .46; }
  .pv-carte { --zoom: .42; }
  .pv-vide { width: calc(300px * .42); height: calc(420px * .42); }
}

/* Écrans tactiles : pas d'effet de survol « collé » après un appui, et des cibles assez grandes */
@media (hover: none) {
  .soutien-pill:hover, .aj-jeu:hover { transform: none; }
  .puce, .btn, .btn-fantome { min-height: 40px; }
}

/* Téléphone à l'horizontale : peu de hauteur, l'en-tête ne reste pas collé et la barre du bas s'affine */
@media (max-width: 1180px) and (max-height: 500px) {
  :root { --barre-bas: calc(50px + env(safe-area-inset-bottom, 0px)); }
  .haut { position: relative; }
  .cat-outils { top: 0; }
  .menu .onglet { height: 50px; flex-direction: row; gap: 6px; font-size: 12px; }
  .menu .onglet .ic { width: 20px; height: 20px; }
}

/* =====================================================================================
   ATELIER (Collection → Atelier, atelier.js) : fondre en éclats ◆, fabriquer
   ===================================================================================== */
.at { display: flex; flex-direction: column; gap: 20px; }
.at-tete { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.at-solde { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 24px; border-radius: 6px; background: var(--encre); color: #fff; }
.at-solde > b { font-family: var(--titres); font-weight: 800; font-size: 48px; line-height: 1; color: #7fe3ff; font-variant-numeric: tabular-nums; }
.at-gemme { font-size: 34px; }
.at-label { font-size: 14px; color: #c9cce0; }
.at-label b { color: var(--jaune); }
.at-regles { padding: 18px 22px; border-radius: 6px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); }
.at-regles h2 { font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.at-regles ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--gris); }
.at-regles b { color: var(--encre); }
.at-bloc .titre-section { margin-bottom: 6px; }
.at-lots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; margin-top: 14px; }
.at-lot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--trait); }
.at-lot-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.at-lot-txt span { font-size: 14px; color: var(--gris); }
.at-chercher { display: block; max-width: 520px; margin-top: 12px; }
.at-chercher input { width: 100%; }
.at-sous-titre { margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.at-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.at-titre { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--trait); }
.at-pochette { width: 52px; height: 52px; border-radius: 4px; background: #aab4c6 center / cover; }
.at-titre-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.at-titre-txt > b, .at-titre-txt > span:not(.at-infos) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-titre-txt > span:not(.at-infos) { font-size: 14px; color: var(--gris); }
.at-infos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.at-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(23,21,43,.08); color: var(--gris); }
.at-badge.wl { background: var(--jaune); color: var(--encre); }
.at-boutons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.btn-fantome.petit { padding: 8px 14px; font-size: 14px; }
.at-vide { padding: 14px 4px; color: var(--gris); }
.at-resultat { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 16px; border-radius: 6px; background: var(--encre); color: #fff; --zoom: .42; }
.at-resultat-txt { display: flex; flex-direction: column; gap: 4px; }
.at-resultat-txt b { color: var(--jaune); font-size: 17px; }
.at-resultat-txt span { color: #d4d7e6; font-size: 14px; }

@media (max-width: 760px) {
  .at-tete { grid-template-columns: minmax(0, 1fr); }
  .at-solde > b { font-size: 40px; }
  .at-titre { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; }
  .at-pochette { width: 44px; height: 44px; grid-row: 1 / span 2; align-self: start; }
  .at-boutons { grid-column: 2; justify-content: flex-start; margin-top: 6px; }
  .at-lot { flex-wrap: wrap; }
}

/* Pack spécial : genre ou album */
.sp-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sp-albums { margin-top: 14px; max-width: 540px; }
.sp-album-label { display: block; }
.sp-album-label select { width: 100%; max-width: 100%; }
.sp-albums .np-aide { margin-top: 8px; }

/* =====================================================================================
   LE DISQUAIRE (page Packs, disquaire.js)
   ===================================================================================== */
.dsq { margin: 8px 0 48px; }
.dsq-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 16px; }
.dsq-sous { margin-top: 4px; font-size: 15px; color: var(--gris); max-width: 560px; }
.dsq-infos { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 14px; }
.dsq-chrono b { font-variant-numeric: tabular-nums; }
.dsq-prises { color: var(--gris); font-size: 13px; }
.dsq-disques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 880px; }
.dsq-disque { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 8px; background: var(--encre); color: #fff; min-width: 0; }
.dsq-disque.pourtoi { box-shadow: 0 0 0 3px var(--rose), 0 10px 26px rgba(255,77,157,.35); }
.dsq-disque.pris:not(.moi) { opacity: .55; }
.dsq-disque.moi { box-shadow: 0 0 0 3px var(--jaune); }
.dsq-pochette { position: relative; aspect-ratio: 1; border-radius: 4px; background: #3b3a5c center / cover; overflow: hidden; }
.dsq-vinyle { position: absolute; width: 46%; right: -18%; top: 27%; opacity: .9; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.dsq-disque:not(.pris):hover .dsq-vinyle { transform: translateX(-20%) rotate(120deg); }
.dsq-badge { position: absolute; left: 8px; top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 12px; font-weight: 800; }
.dsq-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dsq-txt b, .dsq-txt span, .dsq-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsq-txt b { font-size: 16px; }
.dsq-txt span { color: #d4d7e6; font-size: 14px; }
.dsq-txt small { color: #9ea2bd; font-size: 12px; }
.dsq-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.dsq-pied .btn { background: var(--jaune); color: var(--encre); }
.dsq-pied .btn:hover:not(:disabled) { background: #ffe96b; }
.dsq-pied .btn-fantome { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.dsq-mystere { font-size: 12px; color: #9ea2bd; }
.dsq-pris { font-size: 13px; font-weight: 800; color: var(--jaune); }
.dsq-disque.pris:not(.moi) .dsq-pris { color: #d4d7e6; }
.dsq-carte { display: grid; place-items: center; --zoom: .56; padding: 6px 0; }
.dsq-etat { text-align: center; font-size: 13px; font-weight: 800; color: var(--jaune); }

@media (max-width: 760px) {
  .dsq-disques { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dsq-disque { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 12px; padding: 10px; }
  .dsq-pochette { grid-row: 1 / span 2; }
  .dsq-pied { grid-column: 2; margin-top: 0; }
  .dsq-badge { left: 4px; top: 4px; padding: 2px 6px; font-size: 10px; }
  .dsq-infos { align-items: flex-start; }
  .dsq-carte { grid-column: 1 / -1; }
  .dsq-etat { grid-column: 1 / -1; }
}

/* =====================================================================================
   PSEUDOS CLIQUABLES et FENÊTRE DE PROFIL (joueur.js)
   ===================================================================================== */
.lien-joueur { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: inherit; cursor: pointer;
  text-decoration: underline dotted 1.5px; text-underline-offset: 3px; }
.lien-joueur:hover { text-decoration-style: solid; }
.lien-joueur:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 2px; }
.jr { position: fixed; inset: 0; z-index: 125; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; background: rgba(23,21,43,.72); }
.jr-boite { position: relative; width: min(760px, 100%); margin: auto; padding: 28px; border-radius: 6px; background: var(--panneau); }
.jr-fermer { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 28px; line-height: 1; color: var(--encre); cursor: pointer; }
.jr-fermer:hover { background: rgba(23,21,43,.08); }
.jr-corps { display: flex; flex-direction: column; gap: 14px; }
.jr-corps .pv-autre-tete h3 { font-family: var(--titres); font-weight: 800; font-size: 24px; padding-right: 40px; }
.jr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
a.btn-fantome, a.btn { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 560px) {
  .jr { padding: 0; align-items: flex-end; }
  .jr-boite { padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 14px 14px 0 0; max-height: 92vh; overflow-y: auto; }
}

/* =====================================================================================
   ANNONCES (annonces.js)
   ===================================================================================== */
.an { margin: 0 0 36px; }
.an-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.an-liste { display: flex; flex-direction: column; gap: 10px; max-width: 880px; }
.an-item { padding: 16px 20px; border-radius: 6px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); }
.an-item.ouverte { background: var(--jaune); box-shadow: 4px 5px 0 rgba(23,21,43,.25); }
.an-item h3 { font-weight: 800; font-size: 18px; }
.an-meta { margin-top: 2px; font-size: 13px; color: var(--gris); }
.an-texte { margin-top: 10px; white-space: pre-line; line-height: 1.5; overflow-wrap: anywhere; }
.gp-an-liste { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gp-an-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--trait); }
.gp-an-item div { display: flex; flex-direction: column; min-width: 0; }
.gp-an-item small { color: var(--gris); font-size: 12px; }
#gp-an-texte { width: 100%; font: inherit; padding: 10px 12px; border-radius: 4px; border: 2px solid var(--encre); resize: vertical; }

/* Thème de vitrine « Palestine » (libre, pour tous) : bandes noire, blanche, verte et triangle rouge */
.pv-etagere[data-theme="palestine"] {
  background:
    linear-gradient(to top right, #ce1126 50%, transparent 50.5%) left top / 36% 50% no-repeat,
    linear-gradient(to bottom right, #ce1126 50%, transparent 50.5%) left bottom / 36% 50% no-repeat,
    linear-gradient(180deg, #111 0 33.4%, #f4f4f4 33.4% 66.6%, #007a3d 66.6%);
  box-shadow: inset 0 -16px 0 rgba(0,0,0,.28);
}
.pv-etagere[data-theme="palestine"] .pv-prod, .pv-etagere[data-theme="palestine"] .pv-etagere-vide { color: #fff; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,.8); }
.pv-theme[data-theme="palestine"] .pv-theme-apercu {
  background:
    linear-gradient(to top right, #ce1126 50%, transparent 50.5%) left top / 40% 50% no-repeat,
    linear-gradient(to bottom right, #ce1126 50%, transparent 50.5%) left bottom / 40% 50% no-repeat,
    linear-gradient(180deg, #111 0 33.4%, #f4f4f4 33.4% 66.6%, #007a3d 66.6%);
}

/* Stock de 16 packs classiques : les repères sur 2 lignes de 8 */
.slots { display: grid; grid-template-columns: repeat(8, 22px); gap: 5px; }
.slot { width: 22px; height: 26px; }
@media (max-width: 380px) { .slots { grid-template-columns: repeat(8, 18px); gap: 4px; } .slot { width: 18px; height: 22px; } }

/* GOLD PACK : le paquet classique se change en or à l'ouverture (0,5 % des packs) */
.gold .pq-face { background: linear-gradient(135deg, #fff3b0, #e0a400 32%, #fff7cf 48%, #b47a00 68%, #ffe27a); color: #3a2600; }
.gold .pq-face::before { background: #17152b; }
.gold .pq-face::after { background: #7a5200; }
.gold .pq-etiquette, .gold .pq-sous { color: #fff3b0; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.gold .pq-disque { filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.1); }
.gold { filter: drop-shadow(0 0 28px rgba(255, 213, 74, .85)); }
.admin-remplir { align-self: center; font-size: 13px; }

/* =====================================================================================
   PAGE PACKS : LE COMPTOIR (refonte)
   Les deux paquets posés sur un comptoir sombre comme de vrais objets (leur pile = le stock),
   un autocollant au feutre avec le chrono, et un ticket de caisse pour ce qui arrive et ce qui est garanti.
   ===================================================================================== */
.cpt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-areas: "texte ticket" "packs ticket";
  gap: 6px 44px; margin: 6px 0 44px; padding: 34px 40px 0; border-radius: 10px; background: var(--encre); color: #fff; overflow: hidden; isolation: isolate; }
/* Le sillon d'un disque géant qui dépasse du coin : le seul décor */
.cpt::before { content: ''; position: absolute; z-index: -1; right: -260px; top: -300px; width: 620px; height: 620px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255,255,255,.045) 0 1px, transparent 1px 7px); }
.cpt-texte { grid-area: texte; }
.cpt-texte h1 { font-family: var(--titres); font-weight: 800; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.04; letter-spacing: -.02em; }
.cpt-sous { margin-top: 10px; max-width: 520px; color: #c9cce0; font-size: 16px; line-height: 1.5; }

/* L'étagère où sont posés les paquets */
.cpt-packs { grid-area: packs; display: flex; align-items: flex-end; gap: 52px; padding: 34px 0 0; margin-top: 8px;
  border-bottom: 14px solid #2c2950; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.cpt-pack { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cpt-classique { --z: .66; }
.cpt-special { --z: .54; }
.cpt-objet { position: relative; display: block; width: calc(260px * var(--z)); height: calc(380px * var(--z)); padding: 0; border: 0; background: none;
  cursor: pointer; transform: rotate(-2.5deg); transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s; }
.cpt-special .cpt-objet { transform: rotate(2deg); }
.cpt-objet:hover:not(:disabled), .cpt-objet:focus-visible { transform: translateY(-8px) rotate(-1deg); }
.cpt-objet:focus-visible { outline: 3px solid var(--jaune); outline-offset: 6px; border-radius: 12px; }
.cpt-objet:disabled { cursor: default; }
.cpt-objet.vide { filter: grayscale(.85) brightness(.6); }
.cpt-dessin { position: absolute; left: 0; top: 0; width: 260px; height: 380px; transform: scale(var(--z)); transform-origin: 0 0; z-index: 1;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.5)); }
.cpt-pile { position: absolute; inset: 0; z-index: 0; border-radius: calc(12px * var(--z)); transition: box-shadow .3s; }
.cpt-sticker { left: -14px; bottom: 18%; z-index: 3; padding: 7px 12px; font-family: var(--marqueur); font-weight: 400; font-size: 15px; color: var(--encre);
  transform: rotate(-6deg); white-space: nowrap; }
.cpt-special .cpt-sticker { background: #ff9ad5; transform: rotate(5deg); left: auto; right: -18px; }

.cpt-pied { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; min-width: 0; }
.cpt-legende { font-size: 14px; color: #c9cce0; }
.cpt-legende b { font-family: var(--titres); font-size: 20px; color: var(--jaune); font-variant-numeric: tabular-nums; }
.cpt .btn.jaune { padding: 13px 22px; }
.cpt-special .cpt-pied { width: 250px; }
.cpt .sp-modes { margin: 0; gap: 6px; }
.cpt .puce { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); background: transparent; }
.cpt .puce.actif { background: #ff9ad5; color: var(--encre); box-shadow: none; }
.cpt .puce small { color: inherit; opacity: .7; }
.cpt .themes { margin: 0; max-width: 100%; max-height: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.cpt .themes::-webkit-scrollbar { display: none; }
.cpt .themes .puce { flex: none; padding: 6px 12px; font-size: 13px; }
.cpt .sp-albums { margin: 0; }
.cpt .sp-albums select { width: 100%; }
.cpt-mini { display: block; font-size: 12px; line-height: 1.4; color: #b9bdd3; margin-bottom: 4px; }
.cpt .sp-albums .cpt-mini:last-child { margin: 6px 0 0; }
.cpt-btn-sp { color: #fff; box-shadow: inset 0 0 0 2px #ff9ad5; }
.cpt-btn-sp:hover:not(:disabled) { background: #ff9ad5; color: var(--encre); }

/* Le ticket de caisse */
.cpt-ticket { grid-area: ticket; align-self: start; position: relative; margin: 4px 0 30px; padding: 18px 18px 30px; background: #fbfbf6; color: var(--encre);
  transform: rotate(1.4deg); box-shadow: 0 16px 30px rgba(0,0,0,.4);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x; }
.cpt-ticket-tete { text-align: center; font-family: var(--titres); font-weight: 800; font-size: 13px; padding-bottom: 10px; border-bottom: 2px dashed rgba(23,21,43,.3); }
.cpt-lignes { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.cpt-lignes div { display: flex; align-items: baseline; gap: 6px; }
.cpt-lignes dt { flex: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cpt-lignes dt::after { content: ''; flex: 1; min-width: 10px; border-bottom: 2px dotted rgba(23,21,43,.35); }
.cpt-lignes dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpt-garanties { margin-top: 14px; padding-top: 6px; border-top: 2px dashed rgba(23,21,43,.3); }
.cpt-garanties .jauge-ligne { margin-top: 10px; }
.cpt-garanties .jauge-ligne div.t { font-size: 13px; }
.cpt-garanties .jauge-piste { height: 6px; margin-top: 5px; }
.cpt-ticket-pied { margin-top: 14px; text-align: center; font-size: 12px; color: var(--gris); }
.cpt .admin-remplir { display: block; margin: 10px auto 0; }

/* Sous le comptoir : deux colonnes */
.pk-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 40px; align-items: start; }
.pk-principal, .pk-cote { min-width: 0; }
.pk-cote .aj-grille { grid-template-columns: minmax(0, 1fr); }
.pk-cote .en-cours { grid-template-columns: minmax(0, 1fr); }
.pk-cote .aj-tete { flex-direction: column; align-items: flex-start; }
.pk-principal .rangee { flex-wrap: nowrap; overflow-x: auto; padding: 6px 4px 18px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.pk-principal .rangee > * { scroll-snap-align: start; }

@media (max-width: 1180px) {
  .pk-colonnes { grid-template-columns: minmax(0, 1fr); }
  .pk-cote .aj-grille { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
}
@media (max-width: 900px) {
  .cpt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "packs" "ticket"; padding: 24px 20px 0; gap: 4px; }
  .cpt-packs { gap: 28px; flex-wrap: wrap; }
  .cpt-ticket { transform: none; max-width: 420px; margin-top: 22px; }
}
@media (max-width: 560px) {
  .cpt { margin: 4px -16px 32px; border-radius: 0; padding: 22px 16px 0; }
  .cpt-classique { --z: .5; }
  .cpt-special { --z: .42; }
  .cpt-packs { gap: 14px 22px; flex-wrap: nowrap; align-items: flex-start; padding-top: 24px; }
  .cpt-pack { min-width: 0; }
  .cpt-classique { flex: 0 0 auto; }
  .cpt-special { flex: 1 1 0; }
  .cpt-special .cpt-pied { width: 100%; }
  .cpt-sticker { font-size: 12px; padding: 5px 8px; left: -8px; }
  .cpt-special .cpt-sticker { right: -6px; }
  .cpt .btn.jaune { padding: 12px 14px; font-size: 15px; }
  .cpt-ticket { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .cpt-objet { transition: none; } }
.cpt-btn-sp { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-cote .aj { margin-top: 0; }
.pk-cote .aj-tete { margin-top: 0; }
/* Petit téléphone : un pack par ligne, le paquet à gauche et ses boutons à droite */
@media (max-width: 420px) {
  .cpt-packs { flex-direction: column; align-items: stretch; gap: 40px; padding-top: 34px; }
  .cpt-pack { flex-direction: row; align-items: flex-end; gap: 14px; }
  .cpt-objet { flex: none; margin-right: 26px; }
  .cpt-classique { --z: .46; }
  .cpt-special { --z: .46; }
  .cpt-pied { flex: 1 1 0; min-width: 0; padding-bottom: 14px; }
  .cpt-special .cpt-pied { width: auto; }
  .cpt-packs > .cpt-pack:last-child .cpt-pied { padding-bottom: 22px; }
}

/* Ticket : les chances de drop */
.cpt-chances { margin-top: 12px; padding-top: 4px; border-top: 2px dashed rgba(23,21,43,.3); }
.cpt-chances-titre { margin-top: 12px; font-weight: 800; font-size: 14px; }
.cpt-chances-sous { margin-top: 6px; font-size: 12px; color: var(--gris); }
.cpt-chances .cpt-lignes { margin-top: 4px; gap: 4px; font-size: 13px; }
.cpt-chances .pt { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.pt.r1 { background: #8a8fa3; } .pt.r2 { background: #2f7fd6; } .pt.r3 { background: #7a3fd0; } .pt.r4 { background: #c8921a; }

/* Aucun pack prêt : le paquet est flou et éteint, un anneau se remplit jusqu'au prochain */
.cpt-attente { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #fff; text-align: center; pointer-events: none; }
.cpt-objet.vide { filter: none; }
.cpt-objet.vide .cpt-dessin { filter: blur(5px) grayscale(1) brightness(.45); }
.cpt-objet.vide .cpt-sticker { display: none; }
.cpt-objet.vide .cpt-attente { display: flex; }
.cpt-anneau { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(230px * var(--z)); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--jaune) calc(var(--p, 0) * 360deg), rgba(255,255,255,.14) 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 7px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 7px), #000 calc(100% - 6px)); }
.cpt-special .cpt-anneau { background: conic-gradient(#ff9ad5 calc(var(--p, 0) * 360deg), rgba(255,255,255,.14) 0); }
.cpt-attente b, .cpt-attente small { position: relative; max-width: calc(180px * var(--z)); }
.cpt-attente b { font-family: var(--titres); font-weight: 800; font-size: calc(30px * var(--z) + 6px); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cpt-attente small { font-size: 12px; color: #c9cce0; }
.cpt-objet.vide:hover { transform: rotate(-2.5deg); }
.cpt-special .cpt-objet.vide:hover { transform: rotate(2deg); }
/* Ticket plus large : les chances des deux packs côte à côte */
.cpt { grid-template-columns: minmax(0, 1fr) 400px; }
.cpt-chances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media (max-width: 1180px) and (min-width: 901px) { .cpt { grid-template-columns: minmax(0, 1fr) 340px; } .cpt-chances { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .cpt { grid-template-columns: minmax(0, 1fr); } .cpt-ticket { max-width: 520px; } }
@media (max-width: 420px) { .cpt-chances { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================================
   LA PRESSE (Atelier) : poser des cartes, l'aiguille s'arrête sur vert (réussite) ou rouge (tout est perdu)
   ===================================================================================== */
.pr { padding: 26px 28px 28px; border-radius: 10px; background: var(--encre); color: #fff; display: flex; flex-direction: column; gap: 18px; }
.pr-tete p { margin-top: 6px; color: #c9cce0; max-width: 620px; line-height: 1.5; }
.pr-cibles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pr-cible { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 0; border-radius: 6px; text-align: left;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); color: #fff; font: inherit; cursor: pointer; }
.pr-cible b { font-size: 16px; }
.pr-cible small { font-size: 12px; color: #b9bdd3; }
.pr-cible[data-cible="RARE"][aria-pressed="true"] { box-shadow: inset 0 0 0 3px #2f7fd6; background: rgba(47,127,214,.18); }
.pr-cible[data-cible="EPIC"][aria-pressed="true"] { box-shadow: inset 0 0 0 3px #a06bff; background: rgba(122,63,208,.22); }
.pr-cible[data-cible="LEGENDARY"][aria-pressed="true"] { box-shadow: inset 0 0 0 3px #e6b23a; background: rgba(200,146,26,.2); }
.pr-cible:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

.pr-plateau { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: center; }
.pr-etiquette { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.pr-etiquette span { color: var(--jaune); margin-left: 6px; font-variant-numeric: tabular-nums; }
.pr-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pr-slot { position: relative; aspect-ratio: 1; border-radius: 6px; background: rgba(255,255,255,.05) center / cover; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
  display: grid; place-items: center; overflow: hidden; }
.pr-slot.plein { box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.pr-slot-vide { font-size: 26px; color: rgba(255,255,255,.3); }
.pr-slot-titre { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 11px; font-weight: 800; background: rgba(23,21,43,.82);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-retirer { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(23,21,43,.85); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer; }
.pr-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.pr-options label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #c9cce0; min-width: 0; }
.pr-options select { width: 100%; }

.pr-droite { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pr-cadran { position: relative; width: 210px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#2fd27a 0 calc(var(--chance) * 1%), #ff4d6d calc(var(--chance) * 1%) 100%);
  box-shadow: 0 0 0 6px #2c2950, 0 14px 30px rgba(0,0,0,.45); }
.pr-cadran::before { content: ''; position: absolute; inset: 22px; border-radius: 50%; background: repeating-radial-gradient(circle, #1f1d38 0 2px, #17152b 2px 5px); }
.pr-aiguille { position: absolute; left: calc(50% - 2px); top: 6px; width: 4px; height: calc(50% - 6px); border-radius: 2px; background: #fff;
  transform-origin: 50% 100%; transform: rotate(0deg); z-index: 2; box-shadow: 0 0 8px rgba(255,255,255,.6); }
.pr-aiguille::before { content: ''; position: absolute; left: -6px; top: -4px; border: 8px solid transparent; border-bottom: 12px solid #fff; border-top: 0; }
.pr-moyeu { position: absolute; inset: 62px; z-index: 3; border-radius: 50%; background: var(--encre); box-shadow: 0 0 0 3px #2c2950;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pr-moyeu b { font-family: var(--titres); font-weight: 800; font-size: 24px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-moyeu small { font-size: 11px; color: #b9bdd3; }
.pr-go { width: 100%; }
.pr .erreur { color: #ff9aa9; min-height: 0; }

.pr-resultat { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 8px; --zoom: .42; }
.pr-resultat.gagne { background: rgba(47,210,122,.14); box-shadow: inset 0 0 0 2px #2fd27a; }
.pr-resultat.perdu { background: rgba(255,77,109,.12); box-shadow: inset 0 0 0 2px #ff4d6d; }
.pr-resultat-txt { display: flex; flex-direction: column; gap: 4px; }
.pr-resultat-txt b { font-size: 18px; }
.pr-resultat.gagne .pr-resultat-txt b { color: #7dffb6; }
.pr-resultat.perdu .pr-resultat-txt b { color: #ff9aa9; }
.pr-resultat-txt span { color: #e1e3f0; }
.pr-resultat-txt small { color: #b9bdd3; }

.pr-bac-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pr-bac .at-sous-titre { margin: 0; color: #b9bdd3; }
.pr-bac-tete input { max-width: 260px; }
.pr-cartes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px;
  max-height: 340px; overflow-y: auto; }
.pr-carte { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 6px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.06); color: #fff; font: inherit; box-shadow: inset 0 0 0 2px transparent; }
.pr-carte:hover { background: rgba(255,255,255,.12); }
.pr-carte.choisie { box-shadow: inset 0 0 0 2px var(--jaune); background: rgba(255,221,51,.12); }
.pr-carte:focus-visible { outline: 3px solid var(--jaune); outline-offset: 1px; }
.pr-carte-pochette { flex: none; width: 44px; height: 44px; border-radius: 4px; background: #3b3a5c center / cover; }
.pr-carte-txt { display: flex; flex-direction: column; min-width: 0; }
.pr-carte-txt b, .pr-carte-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-carte-txt b { font-size: 14px; }
.pr-carte-txt span { font-size: 12px; color: #c9cce0; }
.pr-carte-txt small { font-size: 11px; color: #9ea2bd; }
.pr .at-vide { color: #b9bdd3; }

@media (max-width: 760px) {
  .pr { padding: 20px 16px; margin: 0 -16px; border-radius: 0; }
  .pr-cibles { grid-template-columns: minmax(0, 1fr); }
  .pr-cible { flex-direction: row; align-items: baseline; gap: 10px; }
  .pr-plateau { grid-template-columns: minmax(0, 1fr); }
  .pr-options { grid-template-columns: minmax(0, 1fr); }
  .pr-slots { gap: 6px; }
  .pr-cadran { width: 190px; }
  .pr-moyeu { inset: 56px; }
}
@media (prefers-reduced-motion: reduce) { .pr-aiguille { transition: none !important; } }

/* =====================================================================================
   PHOTO DE PROFIL (la pochette d'une carte possédée)
   ===================================================================================== */
.avec-photo { background-color: #3b3a5c; background-size: cover; background-position: center; color: transparent; }
.compte-pastille.avec-photo { box-shadow: 0 0 0 2px var(--encre); }
.pv-avatar-choix { position: relative; border: 0; padding: 0; color: #fff; cursor: pointer; font: inherit; font-family: var(--titres); font-weight: 800; }
.pv-avatar-choix.avec-photo { box-shadow: 0 0 0 3px var(--jaune); }
.pv-avatar-choix:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
.pv-avatar-crayon { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--jaune); color: var(--encre); font-family: var(--texte); font-size: 14px; box-shadow: 0 0 0 3px var(--encre); }
.pv-avatar-petit { width: 52px; height: 52px; font-size: 22px; color: #fff; margin-bottom: 6px; }
.pv-avatar-petit.avec-photo { color: transparent; }
.pv-photo { margin-top: 12px; padding: 18px; border-radius: 6px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); display: flex; flex-direction: column; gap: 12px; }
.pv-photo-tete { display: flex; flex-direction: column; gap: 2px; }
.pv-photo-tete span { font-size: 14px; color: var(--gris); }
.pv-photo-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pv-photo-outils input { flex: 1 1 220px; min-width: 0; }
.pv-photo-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; }
.pv-photo-item { display: block; width: 100%; aspect-ratio: 1; border: 0; border-radius: 50%; background: #3b3a5c center / cover; cursor: pointer;
  box-shadow: 0 0 0 2px transparent; transition: transform .15s; }
.pv-photo-item:hover { transform: scale(1.06); }
.pv-photo-item.actif { box-shadow: 0 0 0 3px var(--jaune), 0 0 0 5px var(--encre); }
.pv-photo-item:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* ===== Ouverture de pack plus fluide ===== */
/* La page derrière la scène (opaque, plein écran) n'est plus dessinée pendant l'ouverture */
html.scene-ouverte body > header, html.scene-ouverte body > main { visibility: hidden; }
.scene-pile { contain: layout style; }

/* ===== Ouverture de pack : version sobre (aucun effet en boucle, aucune particule) ===== */
.pq-flotte { animation: none; will-change: auto; }
.pq-incl { transform: none; transition: none; }
.pq-lueur { filter: none; }
.paquet.attend .pq-corps::after { animation: none; }
#scene .face.dos .disque { animation: none; }
.retourne[data-rarete="LEGENDARY"] .face.dos::after { animation: none; opacity: 1; }

/* ===== Collection : Bibliothèque (Étagère / Classeur) et recherche par ID ===== */
.dq-biblio-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: -6px 0 20px; }
.dq-biblio-barre[hidden] { display: none; }
.dq-modes { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(23,21,43,.18); }
.dq-modes button { border: 0; font: inherit; font-weight: 700; font-size: 14px; padding: 8px 18px; border-radius: 999px; background: transparent; color: var(--encre); cursor: pointer; }
.dq-modes button[aria-pressed="true"] { background: var(--encre); color: #fff; }
.dq-modes button:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.dq-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dq-id label { font-weight: 700; font-size: 14px; white-space: nowrap; }
.dq-id input { width: 170px; min-width: 0; padding: 9px 12px; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .06em;
  border: 2px solid rgba(23,21,43,.25); border-radius: 6px; background: var(--panneau); color: var(--encre); }
.dq-id input:focus { outline: none; border-color: var(--encre); }
.dq-idv { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.dq-idv-carte { --zoom: .8; flex: none; margin: 0 auto; }
.dq-idv-carte .carte-wrap { cursor: default; }
.dq-idv-infos { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dq-idv-infos h2 { font-family: var(--titres); font-weight: 800; font-size: 26px; line-height: 1.1; margin: 0; overflow-wrap: anywhere; }
.dq-idv-infos .sous { margin: 0; color: var(--gris); }
.dq-idv-infos .fiche-liste { width: 100%; margin: 10px 0 12px; }
@media (max-width: 560px) {
  .dq-biblio-barre { flex-direction: column; align-items: stretch; }
  .dq-modes { align-self: flex-start; }
  .dq-id label { display: none; }
  .dq-id input { flex: 1; width: auto; }
  .dq-idv-carte { --zoom: .62; }
  .dq-vues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dq-id input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--texte, inherit); }

/* ===== Ouverture de pack : la pochette de vinyle (packs.js) ===== */
#scene > .ov-zone { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; }
.ov-zone > * { grid-area: 1 / 1; }
.ov-paquet[hidden], .ov-etal[hidden] { display: none; }

/* La pochette et son disque : un dessin de 240 x 420 mis à l'échelle (--z) */
.ov-paquet { --z: 1; --lbl: var(--jaune); position: relative; width: calc(240px * var(--z)); height: calc(420px * var(--z));
  touch-action: none; cursor: grab; outline-offset: 8px; -webkit-tap-highlight-color: transparent; user-select: none; }
.ov-paquet:active { cursor: grabbing; }
.ov-paquet.theme { --lbl: #ff9ad5; }
.ov-paquet.gold { --lbl: #ffd54a; }
.ov-echelle { position: absolute; left: 0; top: 0; width: 240px; height: 420px; transform: scale(var(--z)); transform-origin: 0 0; }
.ov-disque { position: absolute; left: 12px; top: 154px; width: 216px; height: 216px; z-index: 1; will-change: transform; }
.ov-galette { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle, #0b0b0b 0 3.5%, var(--lbl) 4% 22%, #0b0b0b 22.5% 23.5%, transparent 24%),
              repeating-radial-gradient(circle, #161616 0 1.5px, #222 1.5px 3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.55), inset 0 0 0 3px #080808; }
.ov-galette::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 16%, rgba(255,255,255,.16) 21%, transparent 27% 66%, rgba(255,255,255,.11) 71%, transparent 77%); }
.ov-galette.tourne { animation: ov-tourne .8s linear infinite; }
@keyframes ov-tourne { to { transform: rotate(360deg); } }
.ov-rond { position: relative; z-index: 1; margin-top: 20%; font-family: var(--titres); font-weight: 900; font-size: 9px; letter-spacing: .12em; color: var(--encre); }
.ov-paquet.gold .ov-galette { box-shadow: 0 0 46px rgba(255,213,74,.85), inset 0 0 0 3px #7a5200; }

.ov-pochette { position: absolute; left: 0; bottom: 0; width: 240px; height: 240px; z-index: 2; overflow: hidden; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding-bottom: 20px;
  background: var(--jaune); color: var(--encre); box-shadow: 0 20px 44px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.3); }
.ov-pochette::before { content: ''; position: absolute; left: 10px; right: 10px; top: 0; height: 7px; border-radius: 0 0 8px 8px; background: rgba(23,21,43,.4); }
.ov-bande { position: absolute; left: -20%; right: -20%; top: 74px; height: 70px; background: var(--rose); transform: rotate(-8deg); }
.ov-titre { position: absolute; left: 0; right: 0; top: 86px; text-align: center; transform: rotate(-8deg);
  font-family: var(--titres); font-weight: 900; font-size: 34px; letter-spacing: .02em; color: #fff; text-shadow: 0 3px 0 rgba(23,21,43,.35); }
.ov-type { position: relative; font-family: var(--titres); font-weight: 800; font-size: 11px; letter-spacing: .14em; }
.ov-sous { position: relative; max-width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--titres); font-weight: 800; font-size: 19px; }
.ov-fleche { position: absolute; left: 0; right: 0; top: 16px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ov-paquet.theme .ov-pochette { background: linear-gradient(135deg, #ff9ad5, #9ae8ff 55%, #fff3a0); }
.ov-paquet.theme .ov-bande { background: var(--encre); }
.ov-paquet.gold .ov-pochette { background: linear-gradient(135deg, #fff3b0, #e0a400 35%, #fff7cf 50%, #b47a00 70%, #ffe27a); }

/* L'éventail : chaque carte est posée au centre puis déplacée par Motion (x, y, rotate) */
.ov-etal { --zoom: .5; --cw: 150px; --ch: 210px; position: relative; width: 100%; height: 100%; }
.ov-carte { position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  perspective: 1000px; cursor: pointer; border-radius: calc(18px * var(--zoom)); -webkit-tap-highlight-color: transparent; will-change: transform; }
.ov-carte:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ov-carte.revelee { cursor: default; }
.ov-carte .face.dos { border-radius: calc(18px * var(--zoom) + 4px); border-width: 2px; }
.ov-carte .face.dos::before { height: max(4px, calc(10px * var(--zoom))); }
.ov-carte .face.dos .dos-nom { bottom: calc(16px * var(--zoom)); font-size: max(11px, calc(17px * var(--zoom))); }
.ov-souhait { position: absolute; z-index: 5; left: 50%; bottom: -10px; translate: -50% 0; white-space: nowrap; padding: 4px 10px; border-radius: 999px;
  background: var(--jaune); color: var(--encre); font-weight: 800; font-size: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.ov-carte.meilleure::after { content: '★ Meilleure carte'; position: absolute; left: 50%; bottom: -12px; translate: -50% 0; white-space: nowrap; padding: 4px 12px;
  border-radius: 12px; background: var(--jaune); color: var(--encre); font-weight: 800; font-size: 12px; z-index: 11; }
.ov-carte.meilleure:has(.ov-souhait)::after { bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .ov-galette.tourne { animation: none; } }
.ov-paquet:focus { outline: none; }

/* ===== Logos : le disque CD-Room (en-tête, favicon) et la pièce de notes (solde) ===== */
.marque-logo { width: 44px; height: 44px; flex: none; transition: transform .25s ease; }
.marque:hover .marque-logo { transform: rotate(-12deg) scale(1.05); }
.solde { align-items: center; }
.note-ico { width: 22px; height: 22px; flex: none; }
@media (prefers-reduced-motion: reduce) { .marque:hover .marque-logo { transform: none; } }
.gp-ed-sous { margin: 14px 0 4px; font-family: var(--titres); font-weight: 800; font-size: 15px; }

/* ===== Notifications (cloche de l'en-tête, notifs.js) ===== */
.notif-zone { position: relative; }
.notif-cloche { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--encre); background: #fff; color: var(--encre);
  display: grid; place-items: center; cursor: pointer; }
.notif-cloche .ic { width: 21px; height: 21px; }
.notif-cloche:hover, .notif-cloche[aria-expanded="true"] { background: var(--jaune); }
.notif-cloche.sonne .ic { animation: cloche-sonne .7s ease; transform-origin: 50% 15%; }
@keyframes cloche-sonne { 20% { transform: rotate(16deg); } 45% { transform: rotate(-12deg); } 70% { transform: rotate(6deg); } }
.notif-badge { position: absolute; top: -5px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--rose); color: #fff;
  font: 800 11px/19px var(--texte); text-align: center; border: 2px solid #fff; }
.notif-panneau { position: absolute; right: 0; top: calc(100% + 10px); width: 340px; max-width: calc(100vw - 24px); max-height: min(70vh, 480px); overflow: auto;
  background: #fff; border: 2px solid var(--encre); border-radius: 8px; box-shadow: 6px 6px 0 var(--encre); z-index: 60; }
.notif-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e6e2d8; position: sticky; top: 0; background: #fff; }
.notif-tete .lien { font-size: 13px; }
.notif-liste { list-style: none; margin: 0; padding: 4px 0; }
.notif-btn { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 14px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.notif-btn:hover { background: #f6f3ec; }
.notif.non-lue .notif-btn { background: #fff8d9; }
.notif.non-lue .notif-btn:hover { background: #fff1b8; }
.notif-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--creme, #f3efe4); display: grid; place-items: center; font-size: 15px; }
.notif-txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; }
.notif-txt small { color: var(--gris); font-size: 12px; }
.notif-vide, .notif-liste .np-aide { padding: 18px 14px; color: var(--gris); font-size: 14px; }
@media (max-width: 700px) {
  .notif-cloche { width: 36px; height: 36px; }
  .notif-panneau { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* ===== Amis : demandes ===== */
.am-recues { border-color: var(--rose); }
.am-h3 { font-size: 14px; margin: 18px 0 6px; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.am-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.am-personne-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.am-personne-txt span { color: var(--gris); font-size: 13px; }

/* ===== La pièce ♪ partout (notes.js) ===== */
.note-mini { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin: 0 .05em; }

/* Presse : remplir au hasard */
.pr-hasard-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.pr-hasard-ligne .btn-fantome { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.pr-hasard-ligne .btn-fantome:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.pr-hasard-ligne .btn-fantome:disabled { opacity: .45; }
.pr-hasard-ligne .lien { color: rgba(255,255,255,.75); }

/* Firefox : backface-visibility ne cache pas toujours le contenu des faces (disque qui tourne, texte),
   on de dos voyait le disque et « CD-Room » en miroir par-dessus les cartes retournées.
   On cache donc aussi la face qui n'est pas visible, pile à mi-retournement (le flip dure 0,34 s). */
.face, .face * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ov-carte:not(.revelee) .face.avant { visibility: hidden; }
.ov-carte.revelee .face.avant { visibility: visible; transition: visibility 0s linear .16s; }
.ov-carte.revelee .face.dos { visibility: hidden; transition: visibility 0s linear .17s; }
.ov-carte.revelee .face.dos .disque { animation: none; }

/* ===== Navigation : 6 rubriques, et des sous-onglets en haut des pages groupées (menu.js) ===== */
.onglet-cache { display: none !important; }
.sous-onglets { display: flex; gap: 4px; width: fit-content; max-width: 100%; overflow-x: auto; margin: 0 0 18px; padding: 4px;
  background: rgba(23,21,43,.06); border-radius: 999px; scrollbar-width: none; }
.sous-onglets::-webkit-scrollbar { display: none; }
.sous-onglet { flex: none; border: 0; background: transparent; color: var(--encre); padding: 8px 18px; border-radius: 999px;
  font: 700 14px/1.2 var(--texte); cursor: pointer; }
.sous-onglet:hover { background: rgba(23,21,43,.08); }
.sous-onglet.actif { background: var(--encre); color: var(--jaune); }
.sous-onglet:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
@media (max-width: 1180px) {
  .sous-onglets { margin-bottom: 14px; }
  .sous-onglet { padding: 8px 14px; font-size: 13px; }
}

/* ===== Le (i) : les explications restent disponibles, mais repliées ===== */
.info { display: inline-block; position: relative; vertical-align: middle; margin-left: 6px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45; }
.info > summary { list-style: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor;
  font: italic 700 13px/1 Georgia, 'Times New Roman', serif; cursor: pointer; opacity: .55; user-select: none; }
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover, .info[open] > summary { opacity: 1; }
.info > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.info-corps { position: absolute; z-index: 70; top: calc(100% + 8px); left: -10px; width: max-content; max-width: min(340px, calc(100vw - 32px));
  padding: 14px 16px; border-radius: 10px; background: #fff; color: var(--encre); border: 2px solid var(--encre); box-shadow: 5px 5px 0 var(--encre);
  font-family: var(--texte); font-size: 14px; font-style: normal; font-weight: 400; text-align: left; white-space: normal; }
.info-corps ol, .info-corps ul { margin: 6px 0 0; padding-left: 18px; }
.info-corps li + li { margin-top: 6px; }
.info-titre { margin: 0 0 8px; font-weight: 800; font-size: 15px; }
.info-note { margin: 10px 0 0; color: var(--gris); font-size: 13px; }
.info-corps .cpt-chances { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 300px; }
.info-corps .cpt-chances-titre { margin: 0 0 4px; font-weight: 800; font-size: 13px; }
.info-corps .cpt-chances-sous { margin: 6px 0 2px; color: var(--gris); font-size: 12px; }
.info-corps .cpt-lignes div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.info-corps .cpt-lignes dd { margin: 0; font-weight: 700; }
/* en bout de ligne (ticket à droite), la bulle s'ouvre vers la gauche */
.cpt-drop { margin: 10px 0 0; display: flex; align-items: center; font-size: 14px; color: rgba(255,255,255,.7); }
.cpt-drop .info { margin-left: 8px; }
.cpt-drop .info-corps { color: var(--encre); }
.sous-onglets { margin-top: 4px; }
.page-titre .info, .titre-section .info { font-size: 14px; }
.page-titre .info > summary { width: 24px; height: 24px; font-size: 14px; }
.pf-deco { display: none; }
@media (max-width: 700px) {
  /* sur téléphone : la bulle devient une carte fixée au-dessus de la barre du bas */
  .info-corps { position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(var(--barre-bas, 64px) + 16px); width: auto; max-width: none; max-height: 65vh; overflow: auto; }
  .info-corps .cpt-chances { min-width: 0; }
}
@media (max-width: 1180px) { .pf-deco { display: inline-block; margin-top: 4px; font-size: 14px; } }
.cpt-sous:empty { display: none; }

/* Studio : le trieur des cartes à poser */
.pr-bac-tete { flex-wrap: wrap; gap: 10px; }
#pr-tri { padding: 9px 10px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); background: #24213f; color: #fff; font: inherit; font-size: 14px; }
.pr-garder { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,.8); cursor: pointer; }
.pr-carte.demandee small { color: #ffd84d; }

/* ===== Fiche d'une carte : l'essentiel, puis 4 actions en tuiles (un seul panneau ouvert) ===== */
.fiche-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 30px; }
.fiche-partager { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--encre); background: transparent; font-size: 18px; font-weight: 800; cursor: pointer; }
.fiche-partager:hover { background: var(--jaune); }
.fiche-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.fiche-puce { padding: 5px 10px; border-radius: 999px; background: rgba(23,21,43,.07); font-size: 13px; font-weight: 700; }
.fiche-puce.r2 { background: #2f7fd6; color: #fff; }
.fiche-puce.r3 { background: #7a3fd0; color: #fff; }
.fiche-puce.r4 { background: #c8921a; color: var(--encre); }
.fiche-puce.wl { background: #fff1a8; }
.fiche-puce.cadre { background: var(--encre); color: var(--jaune); }
.fiche-puce.vente { background: var(--jaune); }
.fiche-details { margin-left: 2px; }
.fiche-details .info-corps { min-width: 280px; }
.fiche-details .fiche-liste { margin: 0; }
.fiche-details .fiche-liste li { font-size: 14px; padding: 7px 0; }
.fiche-details .fiche-liste li:first-child { border-top: 0; }
.fiche-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.fiche-boite .fiche-infos { flex: 1 1 400px; max-width: 440px; }
.fiche-tuile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border: 2px solid transparent; border-radius: 10px;
  background: #fff; color: var(--encre); font: inherit; cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.fiche-tuile:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--encre); }
.fiche-tuile.active { border-color: var(--encre); background: var(--jaune); }
.fiche-tuile:disabled { opacity: .4; cursor: default; }
.fiche-tuile-ic { display: grid; place-items: center; height: 28px; }
.fiche-tuile-ic svg { width: 24px; height: 24px; }
.fiche-tuile b { font-size: 14px; }
.fiche-tuile small { font-size: 11px; color: var(--gris); text-align: center; line-height: 1.2; }
.fiche-panneau { margin-top: 12px; padding: 16px; border-radius: 10px; background: #fff; border: 2px solid var(--encre); }
.fiche-panneau .np-aide { margin: 0 0 10px; }
.fiche-panneau-titre { margin: 0 0 10px; font-weight: 700; font-size: 14px; }
.fiche-cadres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fiche-cadre-choix { padding: 7px 12px; border-radius: 999px; border: 2px solid rgba(23,21,43,.2); background: transparent; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fiche-cadre-choix.actif { border-color: var(--encre); background: var(--encre); color: var(--jaune); }
.fiche-recycler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fiche-recompense { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 10px; border: 2px solid var(--encre);
  background: transparent; font: 800 20px/1.1 var(--titres); cursor: pointer; }
.fiche-recompense small { font: 600 12px/1.3 var(--texte); color: var(--gris); text-align: center; }
.fiche-recompense:hover:not(:disabled) { background: var(--jaune); }
.fiche-panneau .a-confirmer, .fiche-panneau .a-confirmer:hover { background: #e8364f !important; border-color: #e8364f !important; color: #fff !important; font-size: 15px; }
.fiche-recompense.a-confirmer small { color: #fff; }
@media (max-width: 700px) {
  .fiche-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .fiche-tuile { padding: 10px 2px 8px; }
  .fiche-tuile small { display: none; }
}
/* La fiche garde toujours la même mise en page sur grand écran : la carte à gauche, les infos à droite */
@media (min-width: 821px) {
  .fiche-boite { flex-wrap: nowrap; width: min(880px, 100%); box-sizing: border-box; }
  .fiche-boite .fiche-infos { flex: 1 1 auto; max-width: none; min-width: 0; }
}

/* ===== Fenêtre « Partager » (cards.js : window.partager) ===== */
.partage-fond { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(23,21,43,.55); }
.partage-boite { position: relative; width: min(460px, 100%); padding: 24px; border-radius: 10px; background: #fff; color: var(--encre);
  border: 2px solid var(--encre); box-shadow: 6px 6px 0 var(--encre); }
.partage-boite h2 { margin: 0 32px 14px 0; font-family: var(--titres); font-weight: 800; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.partage-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; font-size: 24px; cursor: pointer; }
.partage-ligne { display: flex; gap: 8px; }
.partage-lien { flex: 1; min-width: 0; padding: 10px 12px; border: 2px solid var(--encre); border-radius: 4px; font: inherit; font-size: 14px; background: #f6f6f2; }
.partage-reseaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.partage-reseaux a { text-decoration: none; }
@media (max-width: 480px) { .partage-ligne { flex-direction: column; } }

/* ===== Choix du pack : trois paquets en éventail (Basique · Genre · Album) ===== */
.pk3-zone { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 18px; }
.pk3-eventail { display: flex; justify-content: center; align-items: flex-end; width: 100%; padding: 20px 0 6px; }
.pk3 { --z: .58; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 -4px; padding: 0; border: 0;
  background: none; color: #fff; font: inherit; cursor: pointer; transition: transform .22s cubic-bezier(.3,.7,.3,1.3); -webkit-tap-highlight-color: transparent; }
.pk3-classic { transform: rotate(-8deg) translateY(14px); }
.pk3-genre { transform: translateY(-4px); z-index: 2; }
.pk3-album { transform: rotate(8deg) translateY(14px); }
.pk3:hover:not(:disabled), .pk3:focus-visible { z-index: 3; }
.pk3-classic:hover:not(:disabled), .pk3-classic:focus-visible { transform: rotate(-5deg) translateY(-6px); }
.pk3-genre:hover:not(:disabled), .pk3-genre:focus-visible { transform: translateY(-20px); }
.pk3-album:hover:not(:disabled), .pk3-album:focus-visible { transform: rotate(5deg) translateY(-6px); }
.pk3:active:not(:disabled) { transition-duration: .08s; filter: brightness(.95); }
.pk3:focus-visible { outline: none; }
.pk3:focus-visible .pk3-objet { outline: 3px solid var(--jaune); outline-offset: 6px; border-radius: 12px; }
.pk3:disabled { cursor: default; }
.pk3-objet { position: relative; display: block; width: calc(260px * var(--z)); height: calc(380px * var(--z)); filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
.pk3 .cpt-dessin { border-radius: 12px; overflow: hidden; }
.pk3 .cpt-sticker { left: auto; right: -10px; bottom: auto; top: 14%; font-size: 14px; padding: 5px 10px; transform: rotate(6deg); }
.pk3 .cpt-sticker:empty { display: none; }
.pk3-genre .cpt-sticker { background: #ff9ad5; }
.pk3-album .cpt-sticker { background: #9ae8ff; }
.pk3-nom { font-family: var(--titres); font-weight: 800; font-size: 18px; line-height: 1.1; margin-top: 6px; }
.pk3-sous { font-size: 13px; color: #c9cce0; max-width: calc(260px * var(--z) + 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk3.vide .cpt-dessin { filter: blur(5px) grayscale(1) brightness(.45); }
.pk3.vide .cpt-sticker { display: none; }
.pk3.vide .cpt-attente { display: flex; }
.pk3.bloque .cpt-dessin { filter: grayscale(.85) brightness(.55); }
.pk3-genre .cpt-anneau { background: conic-gradient(#ff9ad5 calc(var(--p, 0) * 360deg), rgba(255,255,255,.14) 0); }
.pk3-album .cpt-anneau { background: conic-gradient(#9ae8ff calc(var(--p, 0) * 360deg), rgba(255,255,255,.14) 0); }
.pk3-stock { margin: 4px 0 0; text-align: center; }
.pk3-stock b { font-size: 18px; }
.pq-face.album { background: linear-gradient(135deg, #9ae8ff, #b9a3ff 50%, #ffd6a0); }
@media (max-width: 900px) {
  .pk3 { --z: .46; }
  .pk3-nom { font-size: 16px; }
}
@media (max-width: 420px) {
  .pk3 { --z: .38; margin: 0 -2px; }
  .pk3 .cpt-sticker { font-size: 11px; padding: 4px 7px; right: -4px; }
  .pk3-sous { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .pk3 { transition: none; } }

/* Le choix d'un genre ou d'un album : fenêtre au centre sur PC, feuille en bas sur téléphone */
.pk-choix { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(10,9,20,.6); }
.pk-choix[hidden] { display: none; }
.pk-choix-boite { position: relative; width: min(560px, 100%); max-height: min(80vh, 640px); overflow: auto; padding: 24px; border-radius: 12px;
  background: #fff; color: var(--encre); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.pk-choix-boite h2 { margin: 0 40px 4px 0; font-family: var(--titres); font-weight: 800; font-size: 24px; }
.pk-choix-aide { margin: 0 0 16px; color: var(--gris); font-size: 14px; }
.pk-choix-aide:empty { display: none; }
.pk-choix-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f0f0ea; font-size: 24px; cursor: pointer; }
.pk-choix-liste.genre { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.pk-genre { min-height: 56px; padding: 10px 12px; border: 2px solid var(--encre); border-radius: 10px; background: #fff; color: var(--encre);
  font: 800 15px/1.2 var(--texte); cursor: pointer; text-align: center; overflow-wrap: anywhere; transition: background .15s, transform .1s; }
.pk-genre:hover, .pk-genre:focus-visible { background: #ff9ad5; }
.pk-genre:active { transform: scale(.97); }
.pk-genre.dernier { background: #ffe1f2; }
.pk-choix-liste.album { display: flex; flex-direction: column; gap: 8px; }
.pk-album { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 2px solid var(--encre);
  border-radius: 10px; background: #fff; color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.pk-album:hover, .pk-album:focus-visible { background: #e3f8ff; }
.pk-album-pochette { width: 52px; height: 52px; border-radius: 6px; background: linear-gradient(135deg, #9ae8ff, #b9a3ff); }
.pk-album-txt { min-width: 0; display: flex; flex-direction: column; }
.pk-album-txt b, .pk-album-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-album-txt span { font-size: 13px; color: var(--gris); }
.pk-album-prog { font-size: 13px; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: #eef1f5; }
.pk-album-recherche { display: block; width: 100%; margin: 0 0 12px; padding: 11px 14px; border: 2px solid var(--encre); border-radius: 10px;
  background: #fff; color: var(--encre); font: 600 15px var(--texte); position: sticky; top: -24px; z-index: 1; box-shadow: 0 6px 10px -6px rgba(0,0,0,.25); }
.pk-album-recherche[hidden] { display: none; }
.pk-album-pochette { overflow: hidden; }
.pk-album-pochette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-album.dernier { background: #eefaff; }
.pk-album-prog.complet { background: #d9f6e4; color: #17603a; }
.pk-album-plus { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--gris); }
.pk-choix-liste.album .pk-album { content-visibility: auto; contain-intrinsic-size: auto 72px; }
@media (max-width: 700px) {
  .pk-choix { place-items: end stretch; padding: 0; }
  .pk-choix-boite { width: 100%; max-height: 78vh; border-radius: 18px 18px 0 0; padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .pk-choix-liste.genre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cpt-packs.pk3-zone { flex-direction: column; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 10px; padding: 14px 0 26px; }
/* Studio : bandeau « Tu améliores… » et suite après une réussite */
.pr-mode { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: rgba(255,221,51,.12); border: 1px solid rgba(255,221,51,.5); color: #f3f0dc; font-size: 14px; line-height: 1.45; }
.pr-mode b { color: var(--jaune); }
.pr-suite { margin: 6px 0 0; font-weight: 700; color: var(--jaune); }

/* ===== Bienvenue (onboarding.js) ===== */
.ob { margin: 6px 0 22px; padding: 22px 24px; border-radius: 10px; background: var(--jaune); color: var(--encre); box-shadow: 5px 5px 0 var(--encre); }
.ob-tete h2 { margin: 0; font-family: var(--titres); font-weight: 800; font-size: 24px; }
.ob-tete p { margin: 4px 0 14px; font-weight: 600; }
.ob-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ob-etape { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: rgba(255,255,255,.65); }
.ob-etape.faite { background: rgba(255,255,255,.3); }
.ob-etape.faite .ob-txt b { text-decoration: line-through; opacity: .7; }
.ob-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: var(--jaune); font-weight: 800; }
.ob-etape.faite .ob-num { background: #2fae62; color: #fff; }
.ob-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-txt span { font-size: 13px; color: #3d3a2b; }
.ob-etape .btn-fantome { flex: none; background: #fff; }
.ob-fin { margin-top: 14px; }
.ob-fin .btn { background: var(--encre); color: var(--jaune); }
@media (max-width: 900px) { .ob-etapes { grid-template-columns: minmax(0, 1fr); } .ob { padding: 18px 16px; } }

/* Proposition des notifications (push.js) */
.push-propose { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 20px; padding: 12px 16px; border-radius: 10px;
  background: #fff; border: 2px solid var(--encre); }
.push-propose[hidden] { display: none; }
.push-propose p { flex: 1 1 260px; margin: 0; font-size: 14px; }
.push-propose-ic { font-size: 22px; }

/* « Ton prochain objectif » (onboarding.js) */
.pk-objectif { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 12px 0 0; padding: 10px 14px; border-radius: 8px;
  border: 1px solid rgba(255,221,51,.5); background: rgba(255,221,51,.1); color: #fff; font: inherit; text-align: left; cursor: pointer; max-width: 100%; }
.pk-objectif[hidden] { display: none; }
.pk-objectif:disabled { cursor: default; }
.pk-objectif:hover:not(:disabled) { background: rgba(255,221,51,.2); }
.pk-objectif-sur { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--jaune); }
.pk-objectif-txt { font-weight: 700; font-size: 15px; }

/* Profil : notifications et retours */
.pf-tete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.pv-notifs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 18px; padding: 14px 18px;
  border-radius: 8px; background: var(--panneau, #eef1f5); }
.pv-notifs-titre { margin: 0; font-family: var(--titres); font-weight: 800; font-size: 17px; }
.pv-notifs .np-aide { margin: 4px 0 0; max-width: 620px; }
.pv-notifs-actions { display: flex; align-items: center; gap: 12px; }
.fb-boite textarea { width: 100%; box-sizing: border-box; padding: 12px; border: 2px solid var(--encre); border-radius: 6px; font: inherit; resize: vertical; }
.fb-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.fb-types label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 2px solid var(--encre); border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 14px; }
.fb-types label:has(input:checked) { background: var(--jaune); }
.fb-types input { margin: 0; }
.fb-boite .btn { margin-top: 4px; }

/* Admin : la bêta en chiffres, les retours */
.gp-beta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; margin: 20px 0; }
@media (max-width: 1000px) { .gp-beta { grid-template-columns: minmax(0, 1fr); } }
.bt-tuiles { margin: 10px 0 16px; }
.bt-jours { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; gap: 4px; height: 130px; margin-bottom: 16px; }
.bt-jour { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; min-width: 0; }
.bt-jour b { font-size: 11px; }
.bt-jour small { font-size: 10px; color: var(--gris); white-space: nowrap; }
.bt-barre { width: 100%; max-width: 26px; border-radius: 3px 3px 0 0; background: var(--encre); }
.bt-jour:last-child .bt-barre { background: var(--rose); }
.bt-parties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bt-parties li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 14px; }
.bt-partie-barre { height: 10px; border-radius: 5px; background: var(--jaune); box-shadow: inset 0 0 0 1px rgba(23,21,43,.2); }
.bt-parties li b { text-align: right; }
.bt-retours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow: auto; }
.bt-retour { padding: 12px 14px; border-radius: 8px; background: #fff; border-left: 4px solid var(--rose); }
.bt-retour.fait { opacity: .55; border-left-color: #2fae62; }
.bt-retour-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.bt-retour-tete small { color: var(--gris); }
.bt-retour-tete .lien { margin-left: auto; }
.bt-retour-txt { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bt-retour-app { display: block; margin-top: 6px; color: var(--gris); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* « Écouter sur » : boutons blancs (le logo Spotify vert n'est autorisé que sur fond blanc ou noir),
   logos officiels non modifiés, avec leur zone de dégagement (≥ moitié de la hauteur de l'icône) */
.ecoute { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.ecoute-titre { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.ecoute-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 14px; border-radius: 8px;
  background: #fff; border: 1px solid rgba(23,21,43,.18); text-decoration: none; color: #000; transition: border-color .15s, box-shadow .15s; }
.ecoute-btn:hover { border-color: rgba(23,21,43,.45); box-shadow: 0 2px 8px rgba(23,21,43,.12); }
.ecoute-btn:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.ecoute-btn { width: 60px; height: 60px; padding: 0; border-radius: 12px; box-sizing: border-box; }
.ecoute-logo { display: block; width: auto; height: 28px; }   /* icônes seules : zone de dégagement ≥ moitié de leur hauteur */
.ecoute-btn.youtube .ecoute-logo { height: 30px; }
.ecoute-nom { font-weight: 800; font-size: 14px; }

/* ===== Cadres « à formes » : SVG posé par-dessus la carte, qui déborde de 16 px (cards.js, CADRES_FORMES) ===== */
.dxo { position: absolute; left: 0; top: 0; width: 332px; height: 452px; transform-origin: 0 0;
  transform: scale(var(--zoom, 1)) translate(-16px, -16px); background: 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 3; }

/* Raretés des cadres (boutique, réserve, fiche) : une couleur par palier, Mythique = édition spéciale */
.bq-niveau.r-COMMUN { background: #5d6273; color: #fff; }
.bq-niveau.r-PEU_COMMUN { background: #2f9e6a; color: #fff; }
.bq-niveau.r-RARE { background: #2f7fd6; color: #fff; }
.bq-niveau.r-EPIQUE { background: #7a3fd0; color: #fff; }
.bq-niveau.r-LEGENDAIRE { background: linear-gradient(135deg, #ffe58a, #c8921a); color: #2a1a00; }
.bq-niveau.r-MYTHIQUE { background: linear-gradient(135deg, #ff7a00, #b2187a 55%, #3a0a5a); color: #fff; box-shadow: 0 0 12px rgba(255,122,0,.55); }
#bq-jour-niveau { display: inline-block; margin: 2px 0 6px; }
.bq-chances li span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: #8a8fa3; vertical-align: 1px; }
.bq-chances li.r-PEU_COMMUN span::before { background: #3fd08a; }
.bq-chances li.r-RARE span::before { background: #4fa0ff; }
.bq-chances li.r-EPIQUE span::before { background: #a970ff; }
.bq-chances li.r-LEGENDAIRE span::before { background: #ffd24a; }
.bq-chances li.r-MYTHIQUE span::before { background: linear-gradient(135deg, #ff7a00, #b2187a); box-shadow: 0 0 6px #ff7a00; }
.bq-chances li.r-MYTHIQUE b { color: #ffb070; }
.fiche-cadre-choix.r-MYTHIQUE, .puce.r-MYTHIQUE { border-color: #ff7a00; }
.fiche-cadre-choix.r-LEGENDAIRE, .puce.r-LEGENDAIRE { border-color: #c8921a; }

/* ===== Collection > Cadres (cadres.js) ===== */
.cx-barre { margin-top: 14px; max-width: 420px; height: 10px; border-radius: 999px; background: rgba(23,21,43,.12); overflow: hidden; }
.cx-barre span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--jaune), #ff7a00); transition: width .6s; }
.cx-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.cx-palier { margin-bottom: 40px; }
.cx-palier-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 18px; }
.cx-palier-tete h2 { font-family: var(--titres); font-size: 26px; font-weight: 800; }
.cx-palier-tete .np-aide { flex-basis: 100%; margin: 0; }
.cx-palier-compte { font-weight: 800; color: var(--gris); font-variant-numeric: tabular-nums; }
.cx-palier.r-MYTHIQUE .cx-palier-tete h2 { background: linear-gradient(90deg, #ff7a00, #b2187a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 30px 20px; }
.cx-tuile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.cx-vis { position: relative; padding: 12px; }
.cx-vis .carte-wrap { --zoom: .46; cursor: default; }
.cx-nom { font-weight: 800; font-size: 16px; margin-top: 4px; }
.cx-desc { font-size: 13px; color: var(--gris); line-height: 1.35; max-width: 200px; }
.cx-etat { font-size: 13px; font-weight: 700; }
.cx-tuile.possede .cx-etat { color: #1f8a5a; }
.cx-tuile.manque .cx-etat { color: var(--gris); }
.cx-tuile.manque .carte-wrap { filter: grayscale(1) brightness(.62) contrast(.9); opacity: .75; }
.cx-tuile.manque .cx-nom { opacity: .7; }
.cx-cadenas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(23,21,43,.82); font-size: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.cx-tuile.possede.r-MYTHIQUE .carte-wrap { filter: drop-shadow(0 0 14px rgba(255,122,0,.45)); }
.cx-aide { margin-top: 10px; }
@media (max-width: 520px) { .cx-grille { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; } .cx-vis .carte-wrap { --zoom: .4; } }

/* ===== La collection entière d'un ami (joueur.js, voirCollection) ===== */
.ca-boite { width: min(1180px, 100%); }
.ca-corps { display: flex; flex-direction: column; gap: 14px; }
.ca-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; padding-right: 44px; }
.ca-titre { font-family: var(--titres); font-weight: 800; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; }
.ca-resume { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-pastille { padding: 5px 12px; border-radius: 999px; background: rgba(23,21,43,.07); font-size: 13px; font-weight: 600; }
.ca-pastille b { font-weight: 800; }
.ca-pastille.r-LEGENDARY { background: linear-gradient(135deg, #ffe58a, #e0a82a); }
.ca-pastille.r-EPIC { background: #e6d8ff; }
.ca-pastille.r-RARE { background: #d6e8ff; }
.ca-outils { display: flex; flex-wrap: wrap; gap: 10px; }
.ca-outils .ca-champ { flex: 1 1 220px; min-width: 0; }
.ca-outils input, .ca-outils select { padding: 10px 12px; border: 2px solid var(--encre); border-radius: 4px; background: #fff; font: inherit; font-size: 15px; }
.ca-compte:empty { display: none; }
.ca-grille { display: flex; flex-wrap: wrap; gap: 26px 18px; justify-content: center; padding: 10px 6px; --zoom: .5; }
.ca-grille .carte-wrap:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; border-radius: 10px; }
.ca-corps > .btn-fantome { align-self: center; }
@media (max-width: 520px) { .ca-grille { --zoom: .44; gap: 18px 10px; } .ca-outils select { flex: 1 1 140px; } }

/* Presse : carte encadrée dans la liste des cartes posables */
.pr-carte.encadree { box-shadow: inset 0 0 0 2px #e2b84a; }

/* Profil › Discord (discord.js) */
.pv-discord .dc-code { width: 9em; padding: 8px 10px; border: 2px solid var(--encre); border-radius: 4px; font: inherit; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pv-discord .erreur:empty { display: none; }
.pv-discord .erreur { flex-basis: 100%; margin: 0; }

/* =====================================================================
   COMPRENDRE LE JEU (guide.js) : pitch de l'écran d'accueil, « Comment jouer ? », bandeau « le but du jeu »
   ===================================================================== */
.guide-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; box-shadow: inset 0 0 0 2px var(--encre);
  font-family: var(--titres); font-weight: 800; font-size: 16px; display: grid; place-items: center; flex: none; }
.guide-btn:hover { background: var(--jaune); }

.guide-boite { max-width: 520px; }
.guide-boite h2 { font-family: var(--titres); font-weight: 800; font-size: 22px; margin-bottom: 6px; padding-right: 30px; }
.guide-sous { color: var(--gris); margin-bottom: 16px; }
.guide-etapes { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.guide-etapes li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: rgba(23,21,43,.05); }
.guide-etapes div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.guide-etapes b { font-size: 15px; }
.guide-etapes span:not(.guide-ic) { color: var(--gris); }
.guide-ic { font-size: 22px; line-height: 1.2; flex: none; }
.guide-rarete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 16px; }
.guide-rarete .pt { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
.guide-rarete .pt:first-child { margin-left: 0; }
.guide-boite #guide-ok { width: 100%; }

.but { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; margin: 6px 0 22px; padding: 16px 20px; border-radius: 10px;
  background: var(--panneau); box-shadow: inset 0 0 0 2px var(--encre), 4px 4px 0 var(--encre); }
.but-txt { flex: 1 1 380px; font-size: 15px; }
.but-txt b { display: block; font-size: 16px; margin-bottom: 2px; }
.but-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.ob-pitch { margin: 6px 0 0 !important; font-weight: 600; }
.ob-pitch + #ob-sous { margin-top: 2px; font-weight: 500; opacity: .85; }

/* Le ticket a disparu : le titre à gauche, les paquets à droite sur leur étagère */
.cpt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "packs"; }
@media (min-width: 901px) {
  .cpt { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); grid-template-areas: "texte packs"; align-items: center; column-gap: 24px; padding-bottom: 0; }
  .cpt-texte { padding-bottom: 30px; }
  .cpt-packs.pk3-zone { align-self: end; margin-top: 0; padding-top: 30px; }
}
.info-titre-2 { margin-top: 14px; }
.info-garanties { margin: 4px 0 6px; padding: 0; border: 0; min-width: 260px; }
.info-garanties .jauge-ligne div.t { font-size: 13px; }
.info-corps .admin-remplir { display: block; margin: 10px 0 0; }

/* L'écran sans compte : le pitch en haut, puis le compte et la Pochette du jour */
.auth-pitch { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px;
  padding: 30px 32px; background: var(--encre); color: #fff; box-shadow: 4px 6px 0 rgba(23,21,43,.3); position: relative; overflow: hidden; }
.auth-marque { display: flex; align-items: center; gap: 10px; font-family: var(--titres); font-weight: 800; font-size: 16px; color: var(--jaune); margin-bottom: 14px !important; }
.auth-pitch h1 { font-family: var(--titres); font-weight: 800; font-size: clamp(28px, 4vw, 42px); line-height: 1.05; letter-spacing: -.02em; }
.auth-pitch-sous { margin: 10px 0 16px !important; color: rgba(255,255,255,.8); font-size: 16px; }
.auth-points { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: pt; display: flex; flex-direction: column; gap: 8px; }
.auth-points li { counter-increment: pt; position: relative; padding-left: 34px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.85); }
.auth-points li::before { content: counter(pt); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--jaune); color: var(--encre);
  font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.auth-points b { color: #fff; }
.auth-exemples { position: relative; height: 300px; }
.auth-exemples .auth-ex { --zoom: .58; position: absolute; top: 20px; left: 50%; margin-left: -87px; transition: transform .3s; }
.auth-exemples .auth-ex-0 { transform: translateX(-62%) rotate(-11deg); }
.auth-exemples .auth-ex-1 { transform: translateY(-10px); z-index: 2; }
.auth-exemples .auth-ex-2 { transform: translateX(62%) rotate(11deg); }
.auth-boite-titre { font-family: var(--titres); font-weight: 800; font-size: 22px; margin-bottom: 16px; }
.auth-contenu { width: min(900px, 100%); padding: 20px 0; }
@media (max-width: 720px) {
  .auth-pitch { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 10px; }
  .auth-exemples { height: 230px; order: -1; margin: 0 0 4px; }
  .auth-exemples .auth-ex { --zoom: .42; margin-left: -63px; top: 22px; }
  .auth-marque { display: none; }
}
@media (max-width: 560px) {
  .but { padding: 14px 16px; }
  .but-actions { width: 100%; justify-content: space-between; }
}
.marque span { white-space: nowrap; }
@media (max-width: 560px) { .guide-btn { width: 30px; height: 30px; font-size: 14px; } }
@media (max-width: 400px) { .marque span { display: none; } }
/* La bulle « Taux et garanties » ne doit plus être coupée par le comptoir : le comptoir ne coupe plus rien,
   et le sillon du disque géant est dessiné dans le comptoir lui-même (masqué en cercle). */
.cpt { overflow: visible; }
.cpt::before { inset: 0; right: 0; top: 0; width: auto; height: auto; border-radius: inherit;
  background: repeating-radial-gradient(circle at calc(100% + 50px) 10px, rgba(255,255,255,.045) 0 1px, transparent 1px 7px);
  -webkit-mask: radial-gradient(circle at calc(100% + 50px) 10px, #000 310px, transparent 311px);
          mask: radial-gradient(circle at calc(100% + 50px) 10px, #000 310px, transparent 311px); }
.cpt-drop .info-corps { z-index: 90; }

/* =====================================================================
   PAGES LÉGALES : liens en pied de page, case à cocher de l'inscription
   ===================================================================== */
.pied-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 40px 0 10px; padding: 16px 0; border-top: 1px solid var(--trait);
  font-size: 13px; color: var(--gris); }
.pied-legal a { color: inherit; }
.auth-cgu { display: flex !important; align-items: flex-start; gap: 10px; margin: 2px 0 12px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45; color: var(--encre) !important; }
.auth-cgu[hidden] { display: none !important; }
.auth-cgu input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--encre); }
.auth-cgu a { color: inherit; font-weight: 700; }
.auth-legal { flex: 1 1 100%; text-align: center; font-size: 13px; color: var(--gris); margin: 4px 0 0; }
.auth-legal a { color: inherit; }
.pv-soutien-cgv { display: block; max-width: 240px; margin-top: 6px; font-size: 12px; line-height: 1.4; opacity: .8; }
.pv-soutien-cgv a { color: inherit; }

/* =====================================================================
   LE DISQUAIRE EN PERSONNE (disquaire.js) et dans « Comment jouer ? »
   ===================================================================== */
.dsq-tete { align-items: center; }
.dsq-perso { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; order: 2; margin-left: auto; }
.dsq-perso-btn { flex: none; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; border-radius: 50%; }
.dsq-perso-btn img { width: 124px; height: auto; transition: transform .2s ease; transform-origin: 50% 90%; }
.dsq-perso-btn:hover img { transform: rotate(-3deg) scale(1.03); }
.dsq-perso-btn:active img { transform: scale(.96); }
.dsq-bulle { position: relative; order: -1; max-width: 220px; padding: 10px 14px; border-radius: 12px; background: #fff; color: var(--encre);
  font-size: 14px; font-weight: 700; line-height: 1.35; box-shadow: 3px 3px 0 var(--encre), inset 0 0 0 2px var(--encre); }
.dsq-bulle::after { content: ''; position: absolute; right: -9px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 9px solid var(--encre); border-right: 0; }
.dsq-titres { order: 1; }
.dsq-infos { order: 3; }
@media (max-width: 720px) {
  .dsq-perso { order: 0; margin-left: 0; width: 100%; }
  .dsq-perso-btn img { width: 84px; }
  .dsq-bulle { order: 1; max-width: none; flex: 1; }
  .dsq-bulle::after { right: auto; left: -9px; border-left: 0; border-right: 9px solid var(--encre); }
}
.guide-perso { float: right; width: 84px; height: auto; margin: -6px 30px 0 8px; }
.auth-pitch-txt { position: relative; z-index: 3; min-width: 0; }
.auth-pitch h1 { font-size: clamp(26px, 3.3vw, 38px); }
.auth-exemples { z-index: 1; }

/* Panel admin : vérification du catalogue */

/* =====================================================================
   CARTES FAVORITES (étoile sur la carte, bouton dans la fiche)
   ===================================================================== */
.carte .carte-favori { position: absolute; left: 50%; top: 40px; z-index: 21; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: #ffdd33; color: #17152b; font-size: 20px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.45); pointer-events: none; }
.fiche-favori { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--encre); background: transparent; color: inherit;
  font-size: 20px; line-height: 1; cursor: pointer; margin-left: auto; }
.fiche-favori:hover { background: var(--jaune); color: #17152b; }
.fiche-favori.on { background: var(--jaune); border-color: #17152b; color: #17152b; }

/* =====================================================================
   ALBUM DES CADRES : ceux qui manquent se voient en entier (petit cadenas dans le coin)
   ===================================================================== */
.cx-tuile.manque .carte-wrap { filter: none; opacity: 1; }
.cx-tuile.manque .cx-nom { opacity: 1; }
.cx-tuile.manque .cx-cadenas { left: auto; right: 2px; top: 2px; transform: none; width: 32px; height: 32px; font-size: 15px; z-index: 5; }
/* La fiche › Cadre : aperçu de tous les cadres, même ceux qu'on n'a pas */
.fiche-cadres-groupe { margin: 10px 0 6px; font-size: 13px; font-weight: 800; color: var(--gris); }
.fiche-cadres.apercu { max-height: 170px; overflow-y: auto; padding: 2px; }
.fiche-cadre-choix.manque { opacity: .8; border-style: dashed; }
.fiche-cadre-choix.manque.actif { opacity: 1; }
.fiche-cadre-info:empty { display: none; }

/* =====================================================================
   SÉLECTION DE PLUSIEURS CARTES (selection.js) : cocher, puis recycler / fondre d'un coup
   ===================================================================== */
.sel-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 12px; }
#cartes.en-selection .carte-wrap { cursor: pointer; }
#cartes.en-selection .carte-wrap::after { content: ''; position: absolute; right: 6px; top: 6px; z-index: 30; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(23,21,43,.6); box-shadow: inset 0 0 0 2px #fff; }
#cartes.en-selection .carte-wrap.sel::after { content: '✓'; display: grid; place-items: center; background: var(--jaune); color: #17152b; font-weight: 800; font-size: 16px;
  box-shadow: 0 0 0 2px #17152b; }
#cartes.en-selection .carte-wrap.sel { outline: 4px solid var(--jaune); outline-offset: 3px; border-radius: 14px; }
#cartes.en-selection .carte-wrap.sel-bloquee { opacity: .45; cursor: not-allowed; }
#cartes.en-selection .carte-wrap.sel-bloquee::after { content: '🔒'; display: grid; place-items: center; font-size: 13px; }
.sel-barre { position: sticky; bottom: 12px; z-index: 60; margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--encre); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.sel-barre[hidden] { display: none; }
.sel-barre-txt b { color: var(--jaune); }
.sel-barre-txt span { color: #c9cce0; font-size: 14px; }
.sel-barre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sel-barre .lien { color: #fff; font-size: 14px; }
.sel-barre .btn { background: var(--jaune); color: #17152b; }
.sel-barre .btn-fantome { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.sel-barre button:disabled { opacity: .45; cursor: not-allowed; }
.sel-ignorees { flex: 1 1 100%; margin: 0; font-size: 13px; color: #ffd1e4; }
@media (max-width: 720px) { .sel-barre { bottom: calc(var(--barre-bas, 64px) + 10px); } }

/* =====================================================================
   COLLECTION › CLASSEUR : la rareté en pastilles (cards.js)
   ===================================================================== */
.rr-filtre { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; }
.rr-titre { font-size: 13px; font-weight: 600; color: var(--gris); }
.rr-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-pastille { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 0; background: transparent;
  box-shadow: inset 0 0 0 2px var(--trait); color: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.rr-pastille:hover { box-shadow: inset 0 0 0 2px var(--encre); }
.rr-pastille .rr-nb { font-weight: 600; font-size: 12px; opacity: .65; }
.rr-points { display: inline-flex; gap: 2px; }
.rr-points i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .5; }
.rr-points i.plein { background: currentColor; opacity: 1; }
.rr-pastille.r1 { --rr: #8a8fa3; } .rr-pastille.r2 { --rr: #2f7fd6; } .rr-pastille.r3 { --rr: #7a3fd0; } .rr-pastille.r4 { --rr: #c8921a; }
.rr-pastille[class*=" r"] .rr-points { color: var(--rr); }
.rr-pastille.on { background: var(--encre); color: var(--argent); box-shadow: none; }
.rr-pastille.on[class*=" r"] { background: var(--rr); color: #fff; }
.rr-pastille.on[class*=" r"] .rr-points { color: #fff; }

/* Gold Pack offert (album Légende) */
.pk3 .cpt-sticker.gold { background: linear-gradient(135deg, #ffe58a, #c8921a); color: #2a1600; }

/* Mes données, résiliation, conditions de vente */
.cp-danger { color: #c62f47; }
.cp-rouge { background: #c62f47; color: #fff; box-shadow: none; }
.cp-rouge:hover:not(:disabled) { background: #a8243a; }
.cp-boite { max-width: 520px; }
.cp-liste { margin: 8px 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cp-lien { display: inline-block; margin-bottom: 14px; font-weight: 700; font-size: 14px; }
.cp-champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.cp-champ input { padding: 10px 12px; border: 2px solid var(--encre); border-radius: 8px; font: inherit; background: #fff; color: var(--encre); }
.cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.pv-soutien-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 8px; }
.pv-resilier-confirm { margin-top: 12px; padding: 14px 16px; border-radius: 8px; background: #fff3f4; box-shadow: inset 0 0 0 2px #c62f47; color: #17152b; }
.pv-resilier-confirm p { margin: 0; font-size: 14px; }
.pv-cgv { display: flex; align-items: flex-start; gap: 8px; max-width: 260px; font-size: 13px; font-weight: 600; text-align: left; }
.pv-cgv input { margin-top: 2px; }
.pv-soutien-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Échanges (echanges.js) ===== */
.ech-regle { margin: 0 0 10px; padding: 10px 14px; border-radius: 6px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--trait); font-size: 14px; }
.ech-offre { gap: 10px; box-shadow: inset 0 0 0 1px var(--trait); }
.ech-offre.fermee { opacity: .8; }
.ech-offre-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ech-offre-tete p { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ech-pastille { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--jaune); color: #17152b; }
.ech-statut { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #eef1f5; color: #3d4156; }
.ech-statut.s-pending { background: #fff3c4; color: #6b5200; }
.ech-statut.s-accepted { background: #d9f6e4; color: #17603a; }
.ech-statut.s-failed, .ech-statut.s-declined { background: #ffe1e5; color: #9a1f33; }
.ech-offre-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; }
.ech-offre-col small { display: block; margin-bottom: 6px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.ech-fleche { align-self: center; font-size: 22px; font-weight: 800; color: var(--gris); }
.ech-tuiles { display: flex; flex-direction: column; gap: 6px; }
.ech-raison { margin: 0; font-size: 13px; color: #9a1f33; }
.ech-histo { margin-top: 12px; }
.ech-histo summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.ech-histo .ech-offre { margin-top: 8px; }
.ech-tuile { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; align-items: center; width: 100%;
  padding: 6px 8px 6px 6px; border: 0; border-radius: 6px; background: #fff; color: var(--encre); font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--trait), inset 4px 0 0 #8a8fa3; transition: box-shadow .12s, transform .12s; }
.ech-tuile.r-rare { box-shadow: inset 0 0 0 1px var(--trait), inset 4px 0 0 #2f7fd6; }
.ech-tuile.r-epic { box-shadow: inset 0 0 0 1px var(--trait), inset 4px 0 0 #7a3fd0; }
.ech-tuile.r-legendary { box-shadow: inset 0 0 0 1px var(--trait), inset 4px 0 0 #c8921a; }
.ech-tuile:hover { transform: translateY(-1px); }
.ech-tuile.choisie { box-shadow: inset 0 0 0 3px var(--encre); background: #fff8d6; }
.ech-tuile.choisie::after { content: '✓'; position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--encre); color: var(--jaune);
  font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.ech-tuile.indispo { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.ech-pochette { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 4px; overflow: hidden; background: linear-gradient(135deg, #9ae8ff, #b9a3ff); }
.ech-pochette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ech-txt { min-width: 0; display: flex; flex-direction: column; font-size: 13px; padding-right: 22px; }
.ech-txt b, .ech-txt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ech-txt > span { color: var(--gris); }
.ech-bas { display: flex; gap: 8px; font-size: 11px; font-weight: 700; color: var(--gris); }
.ech-rarete { text-transform: uppercase; letter-spacing: .03em; }
.r-rare .ech-rarete { color: #2f7fd6; } .r-epic .ech-rarete { color: #7a3fd0; } .r-legendary .ech-rarete { color: #b07d10; }
.ech-badges { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.ech-badge { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #eef1f5; color: #3d4156; }
.ech-badge.wl { background: #ffe1f2; color: #a01d68; }
.ech-badge.manque { background: #e3f8ff; color: #11607a; }
.ech-badge.fav { background: #fff3c4; color: #6b5200; }
.ech-plateau { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.ech-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ech-col-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ech-compteur { font-weight: 800; font-size: 14px; }
.ech-outils { display: flex; flex-direction: column; gap: 8px; }
.ech-outils input { font: inherit; padding: 9px 12px; border: 2px solid var(--trait); border-radius: 6px; background: #fff; color: var(--encre); }
.ech-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.ech-puces .puce[aria-pressed="true"] { background: var(--encre); color: var(--jaune); box-shadow: none; }
.ech-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 460px; overflow-y: auto; padding: 2px; align-content: start; }
.ech-plus { margin: 0; }
.ech-recap { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 8px;
  background: var(--panneau); box-shadow: 0 -8px 20px rgba(0,0,0,.12), inset 0 0 0 2px var(--encre); }
.ech-recap-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.ech-recap-col small { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.ech-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ech-mini-carte { font: inherit; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border: 0; border-radius: 999px; background: #fff; color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--trait), inset 3px 0 0 #8a8fa3; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ech-mini-carte::after { content: ' ×'; color: var(--gris); }
.ech-mini-carte.r-rare { box-shadow: inset 0 0 0 1px var(--trait), inset 3px 0 0 #2f7fd6; }
.ech-mini-carte.r-epic { box-shadow: inset 0 0 0 1px var(--trait), inset 3px 0 0 #7a3fd0; }
.ech-mini-carte.r-legendary { box-shadow: inset 0 0 0 1px var(--trait), inset 3px 0 0 #c8921a; }
.ech-balance { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; }
.ech-balance-barre { flex: 0 1 220px; display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #eef1f5; }
.ech-balance-barre i.donne { background: #ff6b8b; }
.ech-balance-barre i.recoit { background: #2fae62; }
.ech-alerte { margin: 0; font-size: 13px; font-weight: 700; color: #9a1f33; }
.ech-alerte:empty { display: none; }
@media (max-width: 600px) {
  .ech-offre-cols { grid-template-columns: minmax(0, 1fr); }
  .ech-fleche { justify-self: center; transform: rotate(90deg); }
  .ech-grille { grid-template-columns: minmax(0, 1fr); max-height: 380px; }
}

/* WL : albums et artiste */
.wl-tete-groupe { margin-top: 22px; }
.wl-tete-groupe .pack-titre { margin: 0; font-size: 18px; }
.wl-groupe-vide { margin: 6px 0 0; }
.souhait.groupe .wl-prog { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; font-weight: 700; }
.souhait.groupe .wl-prog .piste { flex: 1 1 auto; max-width: 160px; }
.wl-ajouts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dq-wl { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.dq-recompense .dq-wl-artiste { color: #fff; }
.dq-recompense .dq-wl-artiste:disabled, .dq-recompense .dq-tout:disabled { opacity: .75; cursor: default; }

/* Le constructeur d'échange en plein écran */
.am-panneau.ech-modale { position: fixed; inset: 0; z-index: 320; margin: 0; overflow-y: auto; border-radius: 0; padding: 24px max(16px, calc((100vw - 1180px) / 2)) 0;
  background: var(--argent, #d7dbe3); box-shadow: none; outline: none; }
.am-panneau.ech-modale > .am-panneau-tete { position: sticky; top: -24px; z-index: 6; margin: -24px calc(-1 * max(16px, calc((100vw - 1180px) / 2))) 0;
  padding: 16px max(16px, calc((100vw - 1180px) / 2)); background: var(--argent, #d7dbe3); box-shadow: 0 1px 0 var(--trait); }
.am-panneau.ech-modale .ech-grille { max-height: none; }
.am-panneau.ech-modale .ech-recap { margin: 0 0 0; border-radius: 10px 10px 0 0; }
body.ech-ouvert { overflow: hidden; }

/* Boutique : le jeton de presse */
.bq-jeton { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 28px; margin: 0 0 32px; padding: 24px 28px;
  border-radius: 8px; background: var(--encre); color: #fff; box-shadow: 6px 6px 0 var(--jaune); }
.bq-jeton h2 { margin: 2px 0 6px; font-family: var(--titres); font-weight: 800; font-size: 26px; color: var(--jaune); }
.bq-jeton p { margin: 0 0 6px; color: #d4d7e6; max-width: 640px; font-size: 15px; line-height: 1.5; }
.bq-jeton p b { color: #fff; }
.bq-jeton .petit-titre { color: #b9bdd6; }
.bq-jeton-visuel { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd84a 40%, #c8921a 75%, #8a5a00);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.35), inset 0 0 0 10px rgba(138,90,0,.5), 0 8px 18px rgba(0,0,0,.4); }
.bq-jeton-visuel span { font-family: var(--titres); font-weight: 800; font-size: 22px; color: #3a2600; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.bq-jeton-stock { font-weight: 700; }
.bq-jeton-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bq-jeton-actions .lien { color: #fff; }
@media (max-width: 760px) {
  .bq-jeton { grid-template-columns: auto minmax(0, 1fr); }
  .bq-jeton-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; }
  .bq-jeton-visuel { width: 72px; height: 72px; }
}
/* Le Marché, rubrique principale : un petit accent dans le menu */
.onglet-marche .ic { color: inherit; }
/* Presse : l'option jeton */
.pr-jeton { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  border: 1px dashed rgba(255, 216, 74, .55); background: rgba(255, 216, 74, .08); color: #e6e8f2; font-size: 13px; line-height: 1.45; cursor: pointer; }
.pr-jeton input { margin-top: 3px; accent-color: var(--jaune); }
.pr-jeton b { color: var(--jaune); }
.pr-jeton small { display: block; color: #b9bdd6; }
.pr-jeton .lien { color: #fff; font-size: inherit; padding: 0; }
.pr-jeton:has(input:disabled) { opacity: .75; cursor: default; }

/* Vente en lot (selection.js) */
.lv-boite { width: min(680px, 100%); max-height: min(86vh, 760px); }
.lv-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.lv-meme { display: inline-flex; align-items: center; gap: 6px; }
.lv-meme input { width: 90px; font: inherit; padding: 6px 8px; border: 2px solid var(--encre); border-radius: 4px; background: #fff; color: var(--encre); }
.lv-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lv-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait); }
.lv-ligne.exclue { opacity: .6; }
.lv-txt { display: flex; flex-direction: column; min-width: 0; }
.lv-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-txt span { font-size: 13px; color: var(--gris); }
.lv-prix { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 6px; flex: none; font-weight: 700; }
.lv-prix input { width: 96px; font: inherit; padding: 6px 8px; border: 2px solid var(--encre); border-radius: 4px; background: #fff; color: var(--encre); text-align: right; }
.lv-prix input.faux { border-color: #c0123f; background: #fff0f3; }
.lv-prix small { grid-column: 1 / -1; font-weight: 400; font-size: 12px; color: var(--gris); }
.lv-raison { flex: none; font-size: 13px; font-weight: 600; color: var(--gris); }
.lv-total { margin: 12px 0 0; padding-top: 12px; border-top: 2px solid var(--encre); font-weight: 700; }
.lv-actions { position: sticky; bottom: -24px; display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin: 12px -24px -24px; padding: 12px 24px 24px; background: inherit; }
@media (max-width: 560px) {
  .lv-ligne { flex-wrap: wrap; }
  .lv-prix input { width: 80px; }
}

/* Vitrine : agencement direct (vitrine.js) — « + » par place, glisser-déposer, choix par recherche */
.pv-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pv-plus { font-size: 54px; line-height: 1; font-weight: 400; }
.pv-vide small { font-size: 13px; font-weight: 700; }
.pv-place.pleine .pv-carte { cursor: grab; touch-action: pan-y; }
.pv-place.pleine .pv-carte:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; border-radius: 12px; }
.pv-carte.pv-glisse { position: relative; z-index: 20; cursor: grabbing; pointer-events: none; filter: drop-shadow(0 14px 24px rgba(0,0,0,.5)); transition: none; }
.pv-etagere.rangement .pv-place { transition: transform .12s; }
.pv-place.pv-cible { transform: scale(1.04); }
.pv-place.pv-cible .pv-vide, .pv-place.pv-cible .pv-carte { outline: 3px dashed var(--jaune); outline-offset: 6px; border-radius: 12px; }
.pv-etagere.occupee { opacity: .7; pointer-events: none; }
.pv-outils { display: flex; gap: 6px; }
.pv-outil { padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.pv-outil:hover, .pv-outil:focus-visible { background: rgba(255,255,255,.3); }
.pv-astuce { margin: 0; flex-basis: 100%; }
.pv-choix-boite { width: min(720px, 100%); max-height: min(86vh, 760px); }
.pv-choix-q { width: 100%; font: inherit; padding: 10px 12px; border: 2px solid var(--encre); border-radius: 6px; background: #fff; color: var(--encre); margin-bottom: 12px; }
.pv-choix-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pv-vignette { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 8px; background: #f4f4ef; color: var(--encre); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--trait); }
.pv-vignette:hover:not(:disabled), .pv-vignette:focus-visible { box-shadow: inset 0 0 0 2px var(--encre); }
.pv-vignette:disabled { opacity: .45; cursor: not-allowed; }
.pv-vignette.r4 { box-shadow: inset 0 0 0 2px #c8921a; }
.pv-vignette.r3 { box-shadow: inset 0 0 0 2px #7a3fd0; }
.pv-vignette-img { flex: none; width: 56px; height: 56px; border-radius: 4px; object-fit: cover; background: #2a2750; }
.pv-vignette-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pv-vignette-txt b, .pv-vignette-txt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-vignette-txt > span { font-size: 13px; color: var(--gris); }
.pv-vignette-meta { display: flex; align-items: center; gap: 4px; font-size: 12px !important; }
.pv-vignette-meta .pv-rarete { font-size: 11px; }
.pv-choix-plus { grid-column: 1 / -1; }
@media (max-width: 560px) { .pv-choix-grille { grid-template-columns: minmax(0, 1fr); } }

/* ===== Artistes indépendants partenaires (artistes.js, admin-artistes.js) ===== */
/* Le badge « Indé » sur la carte, juste au-dessus du bandeau titre */
.carte .inde-badge { position: absolute; right: 22px; top: 202px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: #18c29c; color: #062a22;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.fiche-inde { display: inline-block; margin-top: 6px; padding: 4px 10px; border: 0; border-radius: 999px; background: #18c29c; color: #062a22; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.fiche-inde:hover { background: #3ad8b3; }

/* Bandeau « Artiste indé de la semaine » en haut des Packs */
.ar-vedette { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 18px; padding: 10px 16px 10px 10px; border: 0; border-radius: 10px;
  background: linear-gradient(90deg, #0f3b33, #17152b 70%); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 4px 5px 0 #18c29c; }
.ar-vedette:hover { filter: brightness(1.1); }
.ar-vedette-photo { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #2a2750; }
.ar-vedette-photo.vide, .ar-tuile-photo.vide, .ar-tete-photo.vide { background: radial-gradient(circle, #18c29c 0 18%, #2a2750 19%); }
.ar-vedette-txt { display: flex; flex-direction: column; min-width: 0; }
.ar-vedette-txt small { color: #7ff0d4; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ar-vedette-txt b { font-family: var(--titres); font-size: 20px; line-height: 1.2; }
.ar-vedette-txt span { font-size: 13px; color: #d4d7e6; }

/* La liste */
.ar-grille { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ar-tuile { width: 100%; height: 100%; display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 0; border-radius: 10px; background: var(--panneau, #fff);
  color: var(--encre); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--trait), 3px 4px 0 rgba(23,21,43,.18); }
.ar-tuile:hover, .ar-tuile:focus-visible { box-shadow: inset 0 0 0 2px var(--encre), 3px 4px 0 rgba(23,21,43,.18); }
.ar-tuile.vedette { box-shadow: inset 0 0 0 2px #18c29c, 4px 5px 0 #18c29c; }
.ar-tuile-photo { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: #2a2750; }
.ar-tuile-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-tuile-txt b { font-family: var(--titres); font-size: 18px; line-height: 1.2; }
.ar-tuile-txt > span { font-size: 13px; color: var(--gris); }
.ar-tuile-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.ar-pastille { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: #18c29c; color: #062a22; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ar-vide { margin: 0 0 24px; }

/* La page d'un artiste */
.ar-retour { margin-bottom: 12px; }
.ar-tete { display: flex; gap: 24px; align-items: flex-start; padding: 24px; margin-bottom: 16px; }
.ar-tete-photo { flex: none; width: 140px; height: 140px; border-radius: 50%; object-fit: cover; background: #2a2750; box-shadow: 0 0 0 4px #18c29c; }
.ar-tete-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ar-tete-txt h2 { margin: 0; font-family: var(--titres); font-weight: 800; font-size: clamp(26px, 4vw, 38px); line-height: 1.1; color: #fff; }
.ar-bio { margin: 0; color: #d4d7e6; max-width: 640px; white-space: pre-line; }
.ar-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-liens a { text-decoration: none; }
.ar-chiffres { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 4px; }
.ar-chiffres div { display: flex; flex-direction: column; }
.ar-chiffres b { font-family: var(--titres); font-size: 24px; color: #7ff0d4; line-height: 1.1; }
.ar-chiffres span { font-size: 13px; color: #b9bdd6; }
.ar-invit { margin-bottom: 20px; padding: 16px 18px; }
.ar-invit p { margin: 2px 0 8px; }
.ar-invit-ligne { display: flex; gap: 8px; }
.ar-invit-ligne input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border: 2px solid var(--encre); border-radius: 4px; background: #fff; color: var(--encre); }
.ar-titres-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.ar-titre { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 8px; background: var(--panneau, #fff); box-shadow: inset 0 0 0 1px var(--trait); }
.ar-titre-img { flex: none; width: 56px; height: 56px; border-radius: 4px; object-fit: cover; background: #2a2750; }
.ar-titre-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ar-titre-txt b, .ar-titre-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-titre-txt span, .ar-titre-txt small { font-size: 13px; color: var(--gris); }
.ar-titre-etat { flex: none; font-size: 12px; font-weight: 800; color: var(--gris); }
.ar-titre.possede .ar-titre-etat { color: #0e8f71; }

/* « Tu es artiste ? » */
.ar-candidature { margin-top: 28px; padding: 20px 22px; }
.ar-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 12px; }
.ar-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.ar-form .ar-large { grid-column: 1 / -1; }
.ar-form input, .ar-form textarea { font: inherit; font-weight: 400; padding: 9px 11px; border: 2px solid var(--encre); border-radius: 4px; background: #fff; color: var(--encre); }
.ar-form button { justify-self: start; }
.ar-form p { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) {
  .ar-tete { flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; }
  .ar-tete-txt { align-items: center; }
  .ar-liens, .ar-chiffres { justify-content: center; }
  .ar-form { grid-template-columns: minmax(0, 1fr); }
  .ar-titres-liste { grid-template-columns: minmax(0, 1fr); }
}

/* Admin › Artistes partenaires */
.ga-bloc { margin-top: 24px; }
.ga-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ga-form { margin: 14px 0 18px; padding: 16px; border-radius: 8px; background: rgba(23,21,43,.04); box-shadow: inset 0 0 0 1px var(--trait); }
.ga-form h3 { margin: 0 0 10px; font-size: 17px; }
.ga-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.ga-champs label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 700; }
.ga-champs .ga-large { grid-column: 1 / -1; }
.ga-champs input, .ga-champs textarea { font: inherit; font-weight: 400; padding: 8px 10px; border: 2px solid var(--encre); border-radius: 4px; background: #fff; color: var(--encre); }
.ga-champs small { font-weight: 400; }
.ga-cases { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; }
.ga-case { flex-direction: row !important; align-items: center; gap: 8px !important; }
.ga-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.ga-danger { color: #c0123f; }
.ga-table-zone { overflow-x: auto; }
.ga-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ga-table th { text-align: left; font-size: 12px; color: var(--gris); font-weight: 700; padding: 6px 8px; border-bottom: 2px solid var(--trait); white-space: nowrap; }
.ga-table td { padding: 8px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.ga-table td b { display: block; }
.ga-table td small { color: var(--gris); font-size: 12px; }
.ga-n { text-align: right; font-variant-numeric: tabular-nums; }
.ga-etat { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; background: rgba(23,21,43,.08); color: var(--gris); }
.ga-etat.on { background: #18c29c; color: #062a22; }
.ga-etat.pret { background: #ffe27a; color: #3a2b00; }
.ga-cand { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ga-demande { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--trait); }
.ga-demande > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ga-demande span { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.ga-demande p { margin: 4px 0 0; }
.ga-demande-actions { display: flex; gap: 6px; flex: none; }
.ga-faites { margin-top: 12px; }
.ga-faites summary { cursor: pointer; font-weight: 700; font-size: 14px; }

/* ===== Bingo de la semaine (bingo.js) ===== */
.bg-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 20px; margin: 8px 0 16px; }
.bg-tete .titre-section { margin: 0; }
.bg-tete .np-aide { margin: 4px 0 0; }
.bg-gains { display: flex; flex-direction: column; align-items: flex-end; }
.bg-gains b { font-family: var(--titres); font-size: 26px; line-height: 1.1; }
.bg-gains span { font-size: 13px; color: var(--gris); }
.bg-zone { display: grid; grid-template-columns: minmax(0, 620px) minmax(220px, 1fr); gap: 24px; align-items: start; }
.bg-grille { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  border-radius: 14px; background: var(--encre); box-shadow: 6px 6px 0 var(--jaune); }
.bg-grille.complete { box-shadow: 6px 6px 0 #2ecc71, 0 0 0 4px var(--jaune); }
.bg-case { aspect-ratio: 1; min-width: 0; }
.bg-case-btn { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  padding: 10px; border: 2px dashed rgba(255,255,255,.35); border-radius: 10px; background: #26233f; color: #fff; font: inherit; text-align: center;
  cursor: pointer; overflow: hidden; transition: transform .12s, border-color .12s; }
.bg-case-btn:hover, .bg-case-btn:focus-visible { transform: translateY(-2px); border-color: var(--jaune); outline: none; }
.bg-case.difficile .bg-case-btn { border-color: rgba(255, 216, 74, .7); background: radial-gradient(120% 90% at 50% 0%, #3a3260, #26233f); }
.bg-crit { position: relative; z-index: 2; font-weight: 800; font-size: clamp(13px, 1.6vw, 16px); line-height: 1.25; }
.bg-aide { font-size: 12px; color: #b9bdd6; line-height: 1.3; }
.bg-etoile { font-size: 11px; font-weight: 800; color: var(--jaune); text-transform: uppercase; letter-spacing: .05em; }
.bg-nb { margin-top: 2px; padding: 2px 10px; border-radius: 999px; background: rgba(46, 204, 113, .2); color: #9ff0bf; font-size: 12px; font-weight: 800; }
.bg-nb.zero { background: rgba(255, 92, 122, .18); color: #ffb3c1; }
/* Case remplie : la pochette en fond */
.bg-case.pleine .bg-case-btn { border: 2px solid rgba(255,255,255,.5); justify-content: space-between; padding: 10px 10px 12px; }
.bg-pochette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #2a2750; }
.bg-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,20,.85) 0%, rgba(10,9,20,.15) 45%, rgba(10,9,20,.88) 100%); }
.bg-case.pleine .bg-crit { font-size: 12px; font-weight: 700; color: #e6e8f2; }
.bg-carte-txt { position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.bg-carte-txt b, .bg-carte-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-carte-txt b { font-size: 14px; }
.bg-carte-txt span { font-size: 12px; color: #d4d7e6; }
.bg-ok { position: absolute; z-index: 3; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #2ecc71; color: #062a14; font-size: 13px; font-weight: 900; }
.bg-case.gagnee .bg-case-btn { border-color: var(--jaune); box-shadow: 0 0 0 2px var(--jaune), 0 0 18px rgba(255, 216, 74, .45); }
.bg-case.gagnee .bg-ok { background: var(--jaune); color: #17152b; }
.bg-case.neuve .bg-case-btn { animation: bg-gagne .9s ease-out 2; }
@keyframes bg-gagne { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bg-case.neuve .bg-case-btn { animation: none; } .bg-case-btn { transition: none; } }
.bg-cote { padding: 18px 20px; }
.bg-cote h3 { margin: 0 0 8px; font-size: 17px; }
.bg-recompenses { margin: 0 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bg-vide { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--trait); }
.bg-vide span { color: var(--gris); font-size: 14px; }
.bg-fen-pied { margin-top: 12px; }
@media (max-width: 860px) {
  .bg-zone { grid-template-columns: minmax(0, 1fr); }
  .bg-grille { padding: 10px; gap: 6px; }
  .bg-aide { display: none; }
  .bg-case-btn { padding: 6px; }
  .bg-crit { font-size: 12px; }
  .bg-nb { font-size: 11px; padding: 2px 6px; }
}
.bg-case.pleine .bg-crit { padding: 0 24px; font-size: 11.5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) {
  .bg-gains { align-items: flex-start; }
  .bg-case.pleine .bg-crit { padding: 0 18px 0 0; font-size: 10.5px; text-align: left; align-self: stretch; }
  .bg-ok { width: 20px; height: 20px; font-size: 11px; top: 4px; right: 4px; }
  .bg-carte-txt b { font-size: 12px; }
  .bg-carte-txt span { font-size: 11px; }
}

/* ===== Catalogue façon média : pages artiste et album (media.js) ===== */
.cat-lien { display: block; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cat-lien:hover, .cat-lien:focus-visible { text-decoration: underline; color: var(--encre); outline: none; }
.c-album.cat-lien { font-size: 14px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-lien { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(23,21,43,.3); text-underline-offset: 3px; }
.fiche-lien:hover { color: var(--encre); text-decoration-color: currentColor; }

#vue-catalogue.media-ouvert > :not(.cat-media):not(.sous-onglets) { display: none !important; }
.cat-media[hidden] { display: none; }
.md-barre { display: flex; gap: 18px; margin: 4px 0 14px; }
.md-chargement { padding: 40px 0; }

/* L'en-tête : la pochette floutée en fond, le portrait (rond) ou la pochette (carrée), le nom en très grand */
.md-tete { position: relative; display: flex; align-items: flex-end; gap: 28px; padding: 36px 32px 30px; border-radius: 14px; overflow: hidden;
  background: #17152b; color: #fff; min-height: 260px; isolation: isolate; }
.md-fond { position: absolute; inset: -40px; z-index: -1; background: #2a2750 center / cover no-repeat; filter: blur(38px) saturate(1.3) brightness(.65); transform: scale(1.1); }
.md-tete::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,21,43,.15), rgba(23,21,43,.85)); }
.md-portrait { flex: none; width: 190px; height: 190px; border-radius: 50%; object-fit: cover; background: #2a2750; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.md-pochette { flex: none; width: 210px; height: 210px; border-radius: 6px; object-fit: cover; background: #2a2750; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.md-tete-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.md-surtitre { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #d4d7e6; }
.md-nom { margin: 0; font-family: var(--titres); font-weight: 800; font-size: clamp(30px, 6vw, 72px); line-height: 1; letter-spacing: -.01em; overflow-wrap: anywhere; color: #fff; }
.md-tete.album .md-nom { font-size: clamp(26px, 4.6vw, 54px); }
.md-stats { margin: 0; font-size: 15px; color: #e6e8f2; }
.md-artiste { font-weight: 800; font-size: 17px; color: #fff; }
.md-lien { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.md-lien:hover, .md-lien:focus-visible { text-decoration: underline; outline: none; }
.md-tete-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.md-tete .md-wl { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.md-tete .md-wl:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.md-wl.fait { color: #ff8fb1 !important; }
.md-inde { padding: 3px 10px; border: 0; border-radius: 999px; background: #18c29c; color: #062a22; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; text-transform: none; letter-spacing: 0; }
.md-album-prog { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; max-width: 360px; margin-top: 4px; }
.md-album-prog b { font-family: var(--titres); font-size: 22px; }
.md-album-prog span:not(.md-progression) { font-size: 13px; color: #d4d7e6; }
.md-album-prog .md-progression { grid-column: 1 / -1; }

.md-section { margin-top: 30px; }
.md-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font-family: var(--titres); font-weight: 800; font-size: 24px; }
.md-h small { font-family: var(--texte); font-weight: 600; font-size: 13px; color: var(--gris); }

/* Liste de titres */
.md-titres { list-style: none; margin: 0; padding: 0; }
.md-titre { display: grid; grid-template-columns: 28px 48px minmax(0, 1fr) auto auto 112px auto; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 6px; }
.md-titre:hover { background: rgba(23,21,43,.06); }
.md-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--gris); font-size: 15px; }
.md-titre-img { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; background: #2a2750; }
.md-titre-txt { display: flex; flex-direction: column; min-width: 0; }
.md-titre-txt b, .md-titre-txt span, .md-titre-txt .md-lien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-titre-txt span, .md-titre-txt .md-lien { font-size: 13px; color: var(--gris); }
.md-tirees { font-size: 13px; color: var(--gris); white-space: nowrap; }
.md-nbwl { font-size: 13px; font-weight: 700; color: #e0457b; min-width: 34px; }
.md-rarete { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: #8a8fa3; white-space: nowrap; }
.md-rarete.r2 { background: #2f7fd6; } .md-rarete.r3 { background: #7a3fd0; } .md-rarete.r4 { background: #c8921a; }
.md-manque { font-size: 12px; color: var(--gris); }
.md-actions { display: flex; align-items: center; gap: 8px; }
.md-ecoute { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--encre); color: var(--jaune); text-decoration: none; font-size: 12px; }
.md-ecoute:hover { transform: scale(1.06); }

/* Albums */
.md-albums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.md-album { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 0; border-radius: 8px; background: none; color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.md-album:hover, .md-album:focus-visible { background: rgba(23,21,43,.06); outline: none; }
.md-album-pochette { position: relative; display: block; aspect-ratio: 1; margin-bottom: 6px; border-radius: 6px; overflow: hidden; background: #2a2750; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.md-album-pochette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-complet { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: #2ecc71; color: #062a14; font-size: 11px; font-weight: 800; }
.md-album b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-album > span:not(.md-album-pochette):not(.md-progression) { font-size: 13px; color: var(--gris); }
.md-progression { display: block; height: 4px; border-radius: 99px; background: rgba(23,21,43,.12); overflow: hidden; margin-top: 4px; }
.md-progression span { display: block; height: 100%; background: #2ecc71; border-radius: 99px; }
.md-progression.grande { height: 6px; background: rgba(255,255,255,.2); }

/* Artistes (similaires, résultats de recherche) */
.md-similaires { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.md-similaire { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 0; border-radius: 8px; background: none; color: var(--encre); font: inherit; text-align: center; cursor: pointer; }
.md-similaire:hover, .md-similaire:focus-visible { background: rgba(23,21,43,.06); outline: none; }
.md-similaire img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: #2a2750; margin-bottom: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.md-similaire b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-similaire span { font-size: 13px; color: var(--gris); }
.cat-artistes { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 4px; }
.cat-artistes[hidden] { display: none; }
.cat-artistes .md-resultat { flex: 0 0 150px; }
.cat-artistes .md-resultat img { width: 84px; height: 84px; }

@media (max-width: 860px) {
  .md-tete { flex-direction: column; align-items: flex-start; padding: 24px 18px 22px; gap: 18px; min-height: 0; }
  .md-portrait { width: 140px; height: 140px; }
  .md-pochette { width: 170px; height: 170px; }
  .md-titre { grid-template-columns: 22px 44px minmax(0, 1fr) auto; gap: 10px; padding: 8px 4px; }
  .md-titre-img { width: 44px; height: 44px; }
  .md-tirees, .md-nbwl { display: none; }
  .md-etat { grid-column: 3; grid-row: 2; }
  .md-actions { grid-column: 4; grid-row: 1 / 3; flex-direction: column; }
  .md-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .md-similaires { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md-similaire img { width: 84px; height: 84px; }
}

/* Admin : l'horloge du serveur */
.gp-horloge { margin: 10px 0 0; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.gp-horloge.ok { background: rgba(46, 204, 113, .14); color: #0e7a4a; }
.gp-horloge.ko { background: rgba(255, 92, 122, .16); color: #b0123f; }

/* Vitrine : 5 lignes de 6 places ; les lignes fermées sont une bande avec un cadenas, de la hauteur d'une ligne */
.pv-etagere:not(.petite) { --pz: .46; display: grid; grid-template-columns: repeat(6, calc(300px * var(--pz))); justify-content: center; gap: 16px 14px; }
.pv-etagere:not(.petite) .pv-place { width: calc(300px * var(--pz)); }
.pv-etagere:not(.petite) .pv-carte { --zoom: var(--pz); }
.pv-etagere:not(.petite) .pv-vide { width: calc(300px * var(--pz)); height: calc(420px * var(--pz)); font-size: 12px; }
.pv-etagere:not(.petite) .pv-prod { font-size: 11px; }
.pv-ligne-fermee { grid-column: 1 / -1; min-height: calc(420px * var(--pz) + 22px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; border: 2px dotted rgba(255, 213, 74, .6); background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 14px, rgba(255,255,255,.08) 14px 28px);
  color: #ffe27a; font: inherit; text-align: center; padding: 12px; cursor: pointer; }
.pv-ligne-fermee b { font-size: 16px; }
.pv-ligne-fermee small { opacity: .9; }
.pv-ligne-fermee.achat { border-style: dashed; border-color: var(--jaune); background: rgba(255, 216, 74, .1); }
.pv-ligne-fermee.achat:hover { background: rgba(255, 216, 74, .18); }
.pv-ligne-fermee:disabled { cursor: default; opacity: .55; min-height: 64px; }
.pv-ligne-fermee:not(.achat):not(:disabled) { min-height: 64px; }
.pv-ligne-fermee.confirmer { border-style: solid; box-shadow: 0 0 0 3px rgba(255,216,74,.45); }
.pv-cadenas { font-size: 26px; line-height: 1; filter: grayscale(.2); }
.pv-vide.confirmer { border-style: solid !important; border-color: var(--jaune) !important; box-shadow: 0 0 0 3px rgba(255,216,74,.4); }
@media (max-width: 1000px) { .pv-etagere:not(.petite) { --pz: .36; gap: 12px 10px; } }
@media (max-width: 700px) {
  .pv-etagere:not(.petite) { --pz: .32; grid-template-columns: repeat(3, calc(300px * var(--pz))); gap: 12px 10px; padding: 16px 8px 20px; }
  .pv-etagere:not(.petite) .pv-vide { font-size: 11px; }
}

/* Paramètres (la roue ⚙ du profil) : sommaire collant + blocs */
.pf-roue { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--encre, #17152b); background: #fff; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.pf-roue svg { transition: transform .4s; }
.pf-roue:hover svg, .pf-roue.actif svg { transform: rotate(90deg); }
.pf-roue.actif { background: var(--jaune); }
.pf-roue:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
.pm { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.pm-nav { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 4px; }
.pm-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: inherit; text-decoration: none; font-weight: 700; }
.pm-nav a span { width: 22px; text-align: center; }
.pm-nav a:hover { background: rgba(0,0,0,.05); }
.pm-nav a.actif { background: var(--jaune); color: #17152b; }
.pm:has(#dc[hidden]) .pm-nav a[data-pm="discord"], .pm-groupe:has(> #dc[hidden]) { display: none; }
.pm-contenu { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.pm-groupe { scroll-margin-top: 90px; display: flex; flex-direction: column; gap: 12px; }
.pm-groupe > .pv-notifs, .pm-groupe > .reg-bloc, .pm-groupe .pv-soutien, .pm-groupe .pv-soutien-actif { margin: 0; }
.pm-titre { margin: 0; font-family: var(--titres); font-size: 20px; font-weight: 800; padding-bottom: 6px; border-bottom: 2px solid rgba(0,0,0,.08); }
.pm-groupe .pv-notifs-titre { font-size: 16px; }
.pm-legal { margin: 4px 0 0; }
.pm-retour { margin-bottom: 12px; font-weight: 700; }
@media (max-width: 800px) {
  .pm { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pm-nav { top: 60px; z-index: 5; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 8px 16px; background: var(--argent); }
  .pm-nav::-webkit-scrollbar { display: none; }
  .pm-nav a { flex: none; white-space: nowrap; padding: 7px 12px; border: 2px solid rgba(0,0,0,.1); border-radius: 999px; }
  .pf-roue span { display: none; }
  .pf-roue { padding: 8px; }
  .pm-groupe { scroll-margin-top: 130px; }
}
#vue-reglages > .page-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#vue-reglages > .page-tete .pf-tete-actions { margin-top: 0; }