/* =====================================================================================
   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-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; }
.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: var(--jaune); 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 30px rgba(255,221,51,.18); 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 */
.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); }
.dq-tranche.or { color: var(--encre); background: linear-gradient(90deg, #8a5a00, #f7e08a 30%, #e5c04d 55%, #9a6b00); }
.dq-tranche.platine { color: var(--encre); background: linear-gradient(90deg, #8f96a3, #f4f6fa 35%, #c9ced8 60%, #7d8491); }
.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.or .dq-tranche-texte, .dq-tranche.platine .dq-tranche-texte { text-shadow: none; }
.dq-tranche-texte b { font-size: 13px; font-weight: 800; }
.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); }
.dq-tranche.or .dq-jauge span, .dq-tranche.platine .dq-jauge span { background: var(--encre); }
.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-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="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="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(5, 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 { display: none; }
  .menu .onglet[data-principal], .menu .onglet-plus { display: flex; }
  .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; 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); }