/* Styles propres à chaque page. */

/* ---- Comment ça marche : étagère des raretés ---------------------------------------------------- */
/* Planche d'étagère en bois peint pastel sous les cartes. */
.shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; padding: 0 18px 30px; position: relative; }
.shelf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-radius: 6px;
  background: linear-gradient(180deg, var(--kraft-light), var(--kraft)); box-shadow: inset 0 0 0 2px var(--frame), 0 4px 0 var(--drop); }
.shelf-item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shelf-item .card { --w: 100%; }
.shelf-item figcaption { text-align: center; line-height: 1.3; }
.shelf-item figcaption strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.shelf-item figcaption span { font-size: .9rem; color: var(--ink-soft); }

.teaser-patches { display: grid; grid-template-columns: repeat(3, 84px); gap: 6px; }
.teaser-patches svg:nth-child(odd) { transform: rotate(-8deg); }
.teaser-patches svg:nth-child(even) { transform: rotate(6deg) translateY(10px); }
.badge-svg { width: 100%; height: auto; display: block; filter: drop-shadow(2px 3px 0 rgba(58, 44, 64, .2)); }
.badge-svg.locked { filter: none; opacity: .8; }

@media (max-width: 960px) {
  .shelf { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .shelf::after { display: none; }
}
@media (max-width: 480px) {
  .shelf { grid-template-columns: repeat(2, 1fr); padding: 0; }
  .teaser-patches { grid-template-columns: repeat(5, 1fr); }
}

/* ---- Comment ça marche ---------------------------------------------------------------------- */
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 12px; }
.guide-toc a { text-decoration: none; font-weight: 700; font-size: .92rem; color: var(--ink-soft); padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.guide-toc a:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.guide-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px 0;
  border-bottom: 2px dashed var(--line); scroll-margin-top: 16px; }
.guide-step:nth-of-type(even) .guide-visual { order: 2; }
.guide-wide { grid-template-columns: 1fr; gap: 24px; }
.guide-text { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 56ch; }
.guide-text h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.05; }
.guide-num { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-family: var(--font-display); font-size: 1.3rem;
  background: var(--butter); box-shadow: inset 0 0 0 2px var(--ink); transform: rotate(-8deg); flex: none; }
.guide-visual { display: grid; place-items: center; gap: 20px; }
.guide-carton .carton-scene { --W: 260px; --H: 165px; --D: 175px; }
.guide-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
/* Formule de la rareté. */
.guide-formula { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.guide-formula .chip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 16px; border-radius: 16px;
  box-shadow: inset 0 0 0 2px var(--ink), 3px 4px 0 rgba(58, 44, 64, .18); max-width: 150px; }
.guide-formula .chip strong { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.guide-formula .chip small { font-size: .78rem; line-height: 1.25; color: var(--ink-soft); }
.chip-pop { background: var(--sky); } .chip-note { background: var(--mint); } .chip-rare { background: var(--butter); transform: rotate(-3deg); }
.guide-formula .op { font-family: var(--font-display); font-size: 1.6rem; }
/* Exemple de version d'origine. */
.guide-versions { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 18px; justify-content: center; align-items: end; }
.guide-versions figcaption { grid-column: 1 / -1; text-align: center; font-size: .9rem; color: var(--ink-soft); }
.guide-version { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.guide-version .card { --w: 100%; }
.guide-version > span { display: flex; flex-direction: column; line-height: 1.25; }
.guide-version > span strong { font-size: .9rem; }
.guide-version > span small { font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink-soft); }
.guide-version:first-child > span small { color: var(--ink); }
/* Boîtes des consoles. */
.guide-boxes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; align-items: end; }
.guide-box { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.guide-box .card { --w: 100%; }
.guide-box figcaption { font-weight: 800; font-size: .88rem; text-align: center; }
/* Jetons par rareté. */
.guide-tokens { border-collapse: separate; border-spacing: 0 6px; min-width: min(100%, 320px); }
.guide-tokens caption { font-family: var(--font-hand); font-size: 1.2rem; margin-bottom: 4px; }
.guide-tokens th, .guide-tokens td { padding: 8px 14px; background: var(--surface); }
.guide-tokens th { text-align: left; font-weight: 800; border-radius: 12px 0 0 12px; display: flex; align-items: center; gap: 10px; }
.guide-tokens td { text-align: right; font-weight: 800; border-radius: 0 12px 12px 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.guide-tokens td svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; fill: var(--butter); stroke: var(--ink); stroke-width: 1.6; }
/* Jetons par rareté et par état (une colonne par état). */
.guide-tokens--states thead th { display: table-cell; background: none; padding: 2px 8px; text-align: right; font-size: .82rem; color: var(--ink-soft); }
.guide-tokens--states thead td { background: none; }
.guide-tokens--states td { border-radius: 0; padding: 8px 10px; }
.guide-tokens--states td:last-child { border-radius: 0 12px 12px 0; }
.guide-tokens--states td svg { width: 14px; height: 14px; margin-right: 4px; }
/* Téléphone : points de rareté au-dessus du nom, sans pièce devant les nombres (le tableau tient dans l'écran). */
@media (max-width: 480px) {
  .guide-tokens--states { min-width: 0; width: 100%; font-size: .85rem; }
  .guide-tokens--states tbody th { flex-direction: column; align-items: flex-start; gap: 4px; padding: 7px 8px 7px 10px; }
  .guide-tokens--states td { padding: 7px 6px; }
  .guide-tokens--states td svg { display: none; }
  .guide-tokens--states thead th { padding: 2px 6px; font-size: .75rem; }
}
/* État des boîtes : le même jeu dans les quatre états. */
.guide-states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 760px; }
.guide-state { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.guide-state .card { --w: 100%; }
.guide-state .zoom-trigger { width: 100%; }
.guide-state figcaption { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; line-height: 1.3; }
.guide-state figcaption strong { font-size: 1rem; }
.guide-state figcaption small { color: var(--ink-soft); font-weight: 700; }
@media (max-width: 640px) { .guide-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-tokens .pips { gap: 3px; }
.guide-tokens .pips i { width: 8px; height: 8px; box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.guide-tokens .pips i.on { background: var(--ink); box-shadow: none; }
/* À venir. */
.guide-soon { padding: 48px 0 16px; scroll-margin-top: 16px; }
.guide-soon h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 22px; }
.guide-soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.soon-card { position: relative; padding: 28px 24px 24px; border-radius: 20px; background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s);
  display: flex; flex-direction: column; gap: 8px; }
.soon-card svg { width: 44px; height: 44px; fill: none; stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.soon-card circle { fill: var(--ink-soft); stroke: none; }
.soon-card p { color: var(--ink-soft); }
.soon-tape { position: absolute; top: -12px; right: 18px; font-family: var(--font-hand); font-size: 1.1rem; padding: 2px 14px; background: var(--tape);
  transform: rotate(4deg); box-shadow: 0 1px 2px rgba(58, 44, 64, .2); }
@media (max-width: 860px) {
  .guide-step { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .guide-step:nth-of-type(even) .guide-visual { order: 0; }
  .guide-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .guide-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-carton .carton-scene { --W: 200px; --H: 125px; --D: 135px; }
}

/* ---- Accueil : le grenier (voir aussi css/home.css) --------------------------------------------- */
#summary-view[hidden] { display: none; }
#summary-view { width: 100%; }
.open-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; text-align: center; }
.open-note { font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.25; max-width: 38ch; }

.reveal-slot { position: relative; z-index: 2; min-height: 200px; display: grid; place-items: center; cursor: pointer; }
.reveal-slot .card:focus-visible { outline: none; }

/* Jeu non trouvé (js/locked.js missingSlot) : pas cliquable ; bouton cœur de la liste de souhaits (compte connecté). */
.missing-slot { position: relative; cursor: default; }
.wish-btn { position: absolute; z-index: 7; top: -10px; right: -8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; font: 400 1.2rem/1 var(--font-body); color: #F58BB5; background: var(--surface); cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 8px rgba(0, 0, 0, .35); }
.wish-btn:hover, .wish-btn:focus-visible { box-shadow: inset 0 0 0 2px #F58BB5, 0 3px 8px rgba(0, 0, 0, .35); outline: none; }
.wish-btn[aria-pressed="true"] { color: #fff; background: #E0679A; box-shadow: inset 0 0 0 2px #fff, 0 3px 8px rgba(0, 0, 0, .35); }

/* ---- Échanges dans la collection (js/collection.js) ---- */
.card-button { position: relative; }
.trade-flag { position: absolute; z-index: 6; left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 3px 10px; border-radius: 999px; font: 800 .72rem/1.3 var(--font-body); color: #12301F; background: #8FE0B0;
  box-shadow: 0 0 0 2px #12301F; }
.trade-flag.selling { color: #3A2608; background: var(--butter); box-shadow: 0 0 0 2px #3A2608; }
.selecting .card-grid .card-button { cursor: copy; }
.selecting .card-grid .card-button:not(.missing-slot)::after { content: ''; position: absolute; z-index: 7; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.selecting .card-grid .card-button.is-selected::after { content: '✓'; display: grid; place-items: center; color: #12301F; font: 900 .95rem/1 var(--font-body);
  background: #8FE0B0; box-shadow: 0 0 0 2px #12301F; }
.selecting .card-grid .card-button.is-selected .card { outline: 3px solid #8FE0B0; outline-offset: 4px; border-radius: 6px; }
.select-bar { position: fixed; z-index: 50; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px); padding: 10px 14px; border-radius: 18px;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--line), 0 12px 30px rgba(0, 0, 0, .45); }
.select-bar[hidden] { display: none; }
.select-bar span { font-weight: 800; margin-right: 6px; }

/* ---- Page Échanges, profils des joueurs, fenêtre de proposition (js/echanges.js, js/joueur.js, js/trade-ui.js) ---- */
.trade-tabs { max-width: 860px; flex-wrap: wrap; }
.trade-tabs button { white-space: nowrap; }
.trade-h { font-size: 1.4rem; margin: 30px 0 12px; }
.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 18px; align-items: end; }
.trade-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: center; }
.trade-tile .card { --w: 100%; }
/* Grandes listes (boîtes à échanger, souhaits, profils, brocante) : le navigateur ne dessine que les boîtes proches de
   l'écran, les autres au fil du défilement (sinon ~3,5 s pour 230 boîtes en 3D). Taille réservée en attendant. */
.trade-grid > *, .sale-grid > * { content-visibility: auto; contain-intrinsic-size: auto 150px auto 290px; }
button.trade-tile, .trade-open { cursor: pointer; }
.trade-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; border-radius: 12px; }
.trade-open:hover .card, .trade-open:focus-visible .card { transform: translateY(-4px); transition: transform .2s var(--ease); }
.trade-cap { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; max-width: 100%; }
.trade-cap strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.trade-cap small { font-size: .78rem; color: var(--ink-soft); }
/* Loupe « Voir en grand » (js/trade-ui.js boxTile). */
.tile-zoom { position: absolute; z-index: 8; top: -8px; left: -6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  cursor: zoom-in; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 2px var(--line), 0 3px 8px rgba(0, 0, 0, .35); }
.tile-zoom:hover, .tile-zoom:focus-visible { color: var(--ink); background: var(--t-butter); box-shadow: inset 0 0 0 2px var(--frame); outline: none; }
.tile-zoom svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.zoom-note { margin: 0; max-width: 46ch; text-align: center; font-weight: 700; color: rgba(250, 246, 251, .9); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.trade-note { padding: 2px 9px; border-radius: 999px; font: 800 .72rem/1.4 var(--font-body); color: #12301F; background: #8FE0B0; }
.trade-tile.is-selected .card { outline: 3px solid #8FE0B0; outline-offset: 4px; border-radius: 6px; }
.trade-tile.is-selected::after { content: '✓'; position: absolute; z-index: 7; top: -8px; right: 4px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 900 .95rem/1 var(--font-body); color: #12301F; background: #8FE0B0; box-shadow: 0 0 0 2px #12301F; }

.trade-dialog { width: min(980px, 96vw); max-height: 92dvh; overflow: auto; }
.trade-dialog h2 { font-size: 1.6rem; padding-right: 90px; }
.trade-rule { margin: 6px 0 16px; font-size: .92rem; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.trade-cols h3 { font-size: 1.1rem; margin-bottom: 10px; }
.trade-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 12px; align-items: end; max-height: 46dvh;
  overflow: auto; padding: 10px 8px 6px; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--line); }
.trade-search { margin-bottom: 10px; }
.trade-msg { margin-top: 16px; }
.trade-status { min-height: 1.4em; font-weight: 800; margin: 10px 0; }
@media (max-width: 700px) { .trade-cols { grid-template-columns: 1fr; } }

.trade-list { display: flex; flex-direction: column; gap: 16px; }
.trade-card { padding: 18px 20px; border-radius: 20px; background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.trade-card.status-pending { box-shadow: inset 0 0 0 2px var(--butter); }
.trade-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.trade-card-head p { margin: 0; font-weight: 800; }
.trade-card-head time { margin-left: auto; font-size: .85rem; }
.trade-badge { padding: 2px 10px; border-radius: 999px; font: 800 .75rem/1.5 var(--font-body); background: var(--line); }
.status-accepted .trade-badge { color: #12301F; background: #8FE0B0; }
.status-pending .trade-badge { color: #3A2608; background: var(--butter); }
.trade-message { margin: 10px 0 0; font-style: italic; color: var(--ink-soft); }
.trade-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 14px; }
.trade-side h3 { font-size: 1rem; margin-bottom: 8px; }
.trade-side-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 10px; align-items: end; }
.trade-side-grid > p { grid-column: 1 / -1; } /* « n'a pas encore mis de boîte » : sur toute la largeur */
@media (max-width: 480px) { .trade-side-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }
.trade-arrow { font-size: 1.8rem; color: var(--ink-soft); }
@media (max-width: 640px) { .trade-sides { grid-template-columns: 1fr; } .trade-arrow { justify-self: center; transform: rotate(90deg); } }

.player-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.player-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; border-radius: 16px; text-decoration: none;
  color: inherit; background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.player-row:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.player-row strong { font-size: 1.1rem; }
.player-go { margin-left: auto; font-weight: 800; }

/* ---- Échanges négociés (echanges.html « Mes échanges », echange.html, js/echange.js) ---- */
.start-trade { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 22px; }
.start-trade .field { min-width: min(320px, 100%); }
.trade-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 18px; border-radius: 16px; text-decoration: none; color: inherit;
  background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.trade-row:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.trade-row strong { font-size: 1.1rem; }
.trade-row time { margin-left: auto; font-size: .85rem; }
.trade-row.status-open, .trade-row.status-requested { box-shadow: inset 0 0 0 2px var(--butter); }
.trade-turn { font-weight: 700; color: var(--ink-soft); }
.trade-turn.is-mine { color: var(--gold-ink); }
.status-open .trade-badge, .status-requested .trade-badge { color: #3A2608; background: var(--butter); }
.status-cancelled .trade-badge, .status-refused .trade-badge, .status-failed .trade-badge { opacity: .75; }
.trade-badge--big { font-size: .95rem; padding: 6px 14px; align-self: center; }
.player-row .btn { margin-left: auto; }
.player-row a { color: inherit; }

.room-request { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 20px; margin-bottom: 18px; border-radius: 20px;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--butter); }
.room-request p { margin: 0 auto 0 0; font-weight: 700; }
.room-wanted { flex-basis: 100%; max-width: 380px; }
.room-request[hidden], .room-sides[hidden], .room-actions[hidden], .room-help[hidden], .thread-form[hidden] { display: none; }
.room-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
.room-side { padding: 18px; border-radius: 20px; background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: 12px; }
.room-side header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.room-side h2 { font-size: 1.25rem; }
.room-side .btn { align-self: flex-start; }
.room-ok { font-weight: 800; color: var(--ok-ink); }
.room-sides .trade-arrow { align-self: center; }
.room-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 8px; }
.room-actions .trade-status { flex-basis: 100%; margin: 0; }
.room-bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; margin-top: 26px; }
.room-thread h2, .room-help h2 { font-size: 1.25rem; margin-bottom: 10px; }
.room-help h3 { font-size: 1rem; margin: 14px 0 8px; }
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 60dvh; overflow: auto; }
.msg { align-self: flex-start; max-width: 88%; padding: 9px 13px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.msg-me { align-self: flex-end; background: color-mix(in srgb, var(--butter) 14%, var(--surface)); }
.msg-event { display: block; font-weight: 800; font-size: .9rem; color: var(--ink-soft); }
.msg-done { align-self: center; color: #12301F; background: #8FE0B0; box-shadow: none; }
.msg-done .msg-event, .msg-done .msg-time { color: #12301F; }
.msg-who { display: block; font-size: .85rem; }
.msg-body { margin: 2px 0 0; }
.msg-time { display: block; margin-top: 3px; font-size: .72rem; color: var(--ink-soft); }
.thread-form { display: flex; gap: 8px; margin-top: 12px; }
.thread-form input { flex: 1; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); font: 600 1rem var(--font-body); color: var(--ink); background: transparent; }
.trade-pick--wide { max-height: 55dvh; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.offer-dialog { width: min(900px, 96vw); }
.offer-wishes { margin-top: 20px; }
.offer-wishes[hidden] { display: none; }
.offer-wishes h3 { font-size: 1.1rem; margin-bottom: 2px; }
.offer-wishes > p { margin: 0 0 10px; font-size: .9rem; }
.trade-pick--wishes { max-height: 34dvh; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.trade-tile.is-missing { opacity: .45; filter: grayscale(.7); }
.request-dialog { width: min(520px, 96vw); }
@media (max-width: 760px) { .room-sides, .room-bottom { grid-template-columns: 1fr; } .room-sides .trade-arrow { justify-self: center; transform: rotate(90deg); } }

/* ---- Brocante (brocante.html, js/brocante.js) ---- */
/* Résumé d'une vente (clic sur une carte). */
.sale-card { cursor: pointer; }
.sale-card:hover, .sale-card:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); outline: none; }
.sale-dialog { width: min(720px, 96vw); }
.sale-dialog h2 { padding-right: 90px; }
.sale-detail { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 14px; }
.sale-detail-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* (Avant le 2026-10-08 : .sale-facts { grid auto 1fr ; gap 6px 14px }, dt 800 --ink-soft, dd 700 ; titre .bid-h 1,15rem.
   Maintenant : carte « La vente » .ui-group / .ui-rows, et les enchères dans une seconde carte .bid-group.) */
.sale-detail .ui-rows > dd { font-weight: 700; }
.sale-detail .sale-price, .sale-detail .sale-time { display: none; } /* (déjà dans le résumé) */
.bid-group { margin-top: 18px; padding-bottom: 12px; }
.bid-group .bid-h { margin-bottom: 10px; }
.bid-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bid-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 14px; align-items: baseline; padding: 9px 14px; border-radius: 12px;
  background: var(--surface); }
.bid-row.is-best { box-shadow: inset 0 0 0 2px #8FE0B0; }
.bid-row a { color: inherit; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bid-diff { font-weight: 800; color: var(--ok-ink); }
.bid-row time { font-size: .82rem; }
@media (max-width: 560px) { .sale-detail { grid-template-columns: 1fr; } .sale-detail .trade-tile { max-width: 150px; }
  .bid-row { grid-template-columns: 1fr auto; } }
.sale-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sale-head .trade-tabs { margin-bottom: 0; flex: 1; }
#filters[hidden] { display: none; }
/* (Avant : cartes de 260 px minimum, la colonne d'infos trop étroite laissait sortir les boutons.) */
.sale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 18px; margin-top: 16px; }
.sale-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: 20px;
  background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); overflow: hidden; }
.sale-info { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.sale-info p { margin: 0; overflow-wrap: anywhere; }
.sale-info .btn { width: 100%; max-width: 100%; white-space: normal; line-height: 1.2; text-align: center; }
.sale-info .trade-badge { align-self: flex-start; }
.sale-time { font-weight: 800; color: var(--gold-ink); }
.sale-price strong { font-size: 1.15rem; }
.sale-bid { display: flex; gap: 8px; min-width: 0; }
.sale-bid input { flex: 0 0 64px; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--line); font: 700 1rem var(--font-body); color: var(--ink); background: transparent; }
.sale-bid .btn { flex: 1; width: auto; min-width: 0; }
.trade-badge.leading { color: #12301F; background: #8FE0B0; }
.sell-body { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: start; }
.sell-dialog { width: min(620px, 96vw); }
.account-form select { padding: 11px 14px; border-radius: 12px; border: 2px solid var(--line); font: 600 1rem var(--font-body); color: var(--ink); background: var(--surface); }
@media (max-width: 520px) { .sell-body { grid-template-columns: 1fr; } .sell-body .sell-box { max-width: 160px; } }

/* ---- Page « Mon compte » (compte.html, js/compte.js) ---- */
.account-box { max-width: 460px; padding: 24px; border-radius: 22px; background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.account-box[hidden] { display: none; }
.account-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.account-tabs button { flex: 1; padding: 10px 12px; border: 0; border-radius: 999px; font: 800 .95rem var(--font-body); color: var(--ink-soft);
  background: transparent; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; }
.account-tabs button[aria-selected="true"] { color: var(--ink); background: var(--t-butter); box-shadow: inset 0 0 0 2px var(--frame); }
.account-form { display: flex; flex-direction: column; gap: 14px; }
.account-form[hidden] { display: none; }
.account-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; }
.account-form input { padding: 11px 14px; border-radius: 12px; border: 2px solid var(--line); font: 600 1rem var(--font-body);
  color: var(--ink); background: var(--bg, transparent); }
.account-form .muted { margin: 0; font-size: .9rem; }
.account-form--inline { margin: 18px 0 6px; }
/* Groupes de la carte « Mon compte » (2026-10-08). */
.account-box .account-group { margin: 0 0 14px; padding: 4px 16px 14px; gap: 10px; }
.account-box .account-group .ui-group-title { margin-bottom: 4px; }
.account-box .account-group p { margin: 0; }
.text-link { align-self: flex-start; border: 0; padding: 0; background: none; color: var(--ink-soft); font: 700 .9rem var(--font-body);
  text-decoration: underline; cursor: pointer; }
.account-msg { min-height: 1.4em; margin: 14px 0 0; font-weight: 700; }
.account-msg.bad { color: #FF8A8A; }
.account-who { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px; }
.account-who strong { font-family: var(--font-display); font-size: 1.6rem; }
.account-who span { color: var(--ink-soft); }
.account-legal a { color: inherit; }
/* Supprimer son compte : confirmation en tapant son pseudo. */
.delete-confirm { display: flex; flex-direction: column; gap: 6px; font-weight: 800; margin: 12px 0 0; }
.delete-confirm input { padding: 11px 14px; border-radius: 12px; border: 2px solid var(--line); font: 600 1rem var(--font-body); color: var(--ink); background: var(--bg, transparent); }

/* Mentions légales et données personnelles : texte simple, largeur de lecture. */
.legal { max-width: 760px; }
.profile-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
/* ---- Boutique du grenier (accueil, js/ouvrir.js) ---- */
/* Fenêtre (comme la fiche d'une boîte), ouverte par le bouton sous le carton. */
.shop-dialog { width: min(92vw, 640px); }

.shop-title { margin: 0; font-size: 1.5rem; padding-right: 80px; }
.shop-sub { margin: 4px 0 14px; color: var(--ink-soft); font-weight: 700; font-size: .9rem; }
.shop .shop-offer { background: var(--surface-2); }
.shop-btn { margin-top: 8px; }
.shop-btn[hidden] { display: none; }
.shop-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; text-align: left; }
.shop-offer { display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); overflow: hidden; }
.shop-offer.armed { box-shadow: inset 0 0 0 2px var(--butter); grid-column: 1 / -1; }
.shop-pick { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border: 0; background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.shop-pick strong { font-weight: 800; font-size: .95rem; }
.shop-pick b { font: 800 .9rem var(--font-body); color: var(--gold-ink); white-space: nowrap; }
.shop-pick span { grid-column: 1 / -1; font-size: .78rem; color: var(--ink-soft); line-height: 1.3; }
.shop-pick:disabled { opacity: .45; cursor: not-allowed; }
.shop-confirm { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.shop-confirm select { flex: 1; min-width: 150px; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg, transparent);
  color: var(--ink); font: 600 .95rem var(--font-body); }
@media (max-width: 480px) {
  .shop-title { padding-right: 0; }
  .shop-offers { grid-template-columns: 1fr 1fr; }
  .shop-pick { grid-template-columns: 1fr; } /* prix sous le nom : les deux colonnes sont étroites */
  .shop-pick span { display: none; }
  .shop-offer.armed .shop-pick span { display: block; }
}

/* ---- Gestion (gestion.html) : cadeaux aux joueurs ---- */
.gift-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; padding: 22px; border-radius: 22px; background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.gift-form[hidden] { display: none; }
.gift-field { display: flex; flex-direction: column; gap: 6px; font-weight: 800; flex: 1; }
.gift-form :is(input, select) { padding: 11px 14px; border-radius: 12px; border: 2px solid var(--line); font: 600 1rem var(--font-body); color: var(--ink); background: var(--bg, transparent); }
.gift-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gift-boxes { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gift-boxes legend { font-weight: 800; margin-bottom: 6px; }
.gift-results, .gift-chosen, .gift-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gift-result { width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink);
  font: 600 .92rem var(--font-body); cursor: pointer; }
.gift-result:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.gift-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 10px;
  background: rgba(244, 201, 93, .14); font-weight: 700; font-size: .92rem; }
.gift-chip button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.gift-summary { margin: 0; min-height: 1.2em; font-weight: 700; color: var(--gold-ink); }
.gift-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gift-log { max-width: 560px; }
.gift-log-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }

/* ---- Parrainage (parrainage.html) ---- */
.invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px; border-radius: 22px;
  background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); max-width: 760px; }
.invite[hidden] { display: none; }
.invite h2 { font-size: 1.3rem; }
.invite-url { margin: 10px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font: 700 .95rem var(--font-body);
  overflow-wrap: anywhere; user-select: all; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.invite-hint { margin: 14px 0 0; }
.invite-qr { width: 168px; padding: 8px; border-radius: 14px; background: #fff; }
.invite-qr svg { display: block; width: 100%; height: auto; }
.friends { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.friend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px; border-radius: 18px;
  background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.friend-who { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex: 1; }
.friend-name { font: 800 1.05rem var(--font-body); color: var(--ink); }
.friend-bar { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--butter) var(--p), color-mix(in srgb, var(--ink) 9%, transparent) var(--p)); max-width: 240px; }
.friend-done { font-weight: 800; color: var(--ok-ink); }
.invite-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(244, 201, 93, .14); font-weight: 700; font-size: .92rem; }
.invite-note[hidden] { display: none; }
@media (max-width: 560px) { .invite { grid-template-columns: 1fr; } .invite-qr { justify-self: center; } }

/* ---- Quêtes du jour et Premiers pas (accueil, js/ouvrir.js) : des panneaux (css/site.css .panel) ---- */
.quests { --tab: var(--t-mint); }
.quests[hidden] { display: none; }
.quests-head { align-items: baseline; }
.quests-head h2 { font-size: 1.3rem; }
.quests ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.quest { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px 10px; align-items: center; }
.quest-check { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--frame); display: grid; place-items: center; font: 900 .8rem/1 var(--font-body); }
.quest.done .quest-check { background: #8FE0B0; color: #1E3B2C; }
.quest-label { font-weight: 700; }
.quest.done .quest-label { color: var(--ink-soft); text-decoration: line-through; }
.quest-reward { font: 800 .85rem var(--font-body); color: var(--ink); white-space: nowrap; padding: 1px 10px; border-radius: 999px;
  background: var(--t-butter); box-shadow: inset 0 0 0 2px var(--frame); }
.quest-bar { grid-column: 2 / 4; height: 10px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--frame);
  background: linear-gradient(90deg, var(--mint) var(--p), var(--surface-2) var(--p)); }
.dark .quest-bar { background: linear-gradient(90deg, #8DB487 var(--p), var(--surface-2) var(--p)); }
.quest.done .quest-bar { display: none; }
.quests-bonus { margin: 14px 0 0; font-weight: 700; font-size: .92rem; color: var(--ink-soft); }
.quests-bonus.done { color: var(--ok-ink); }

/* Tuto « Premiers pas au grenier » (dépliable). */
.tuto { --tab: var(--t-sky); }
.tuto summary { list-style: none; cursor: pointer; }
.tuto:not([open]) summary { border-bottom: 0; }
.tuto summary::-webkit-details-marker { display: none; }
.tuto summary h2::after { content: ' ▾'; color: var(--ink-soft); font-size: .8em; }
.tuto[open] summary h2::after { content: ' ▴'; }
.tuto-count { font: 800 .9rem var(--font-body); color: var(--ink-soft); }
.tuto-bar { display: block; height: 10px; margin: 0 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--frame);
  background: linear-gradient(90deg, var(--butter) var(--p), var(--surface-2) var(--p)); }
.tuto[hidden] { display: none; }
/* ---- Premiers pas (après le carton de bienvenue, js/ouvrir.js) ---- */
.onboard { max-width: min(92vw, 440px); text-align: center; }
.onboard-step[hidden] { display: none; }
.onboard-icon { width: 64px; height: 64px; margin: 4px auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--butter); color: var(--ink-dark);
  font: 400 2rem/1 var(--font-display); box-shadow: inset 0 0 0 2.5px var(--frame), 0 4px 0 var(--edge); }
.onboard h2 { font-size: 1.35rem; }
.onboard p { margin: 10px 0 0; line-height: 1.5; }
.onboard-dots { display: flex; justify-content: center; gap: 6px; margin: 18px 0 14px; }
.onboard-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.onboard-dots i.on { background: var(--accent); }
.onboard-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* Sections masquées (albums en attente en ligne, js/store.js ALBUMS_ON). */
:is(.profile-section, .guide-step, .soon-card, .guide-toc a, .patch-board, .trade-h)[hidden] { display: none; }
.legal h1 { margin-bottom: 12px; }
.legal h2 { font-size: 1.3rem; margin: 30px 0 8px; }
.legal p, .legal li { line-height: 1.6; }
.legal ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-lead { font-size: 1.1rem; }

/* Effets de révélation façon Cinéclub (js/reveal-fx.js). --fx : couleur de la rareté. */
#reveal-view { position: relative; }
.reveal-burst { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
/* Boîte épique et plus encore de dos : elle pulse, deux anneaux tournent, des étincelles convergent vers elle. */
.reveal-slot.charging { animation: charge-pulse .8s linear infinite alternate; }
/* (Sans la petite rotation de Cinéclub, ±0,7°, pour que la boîte reste droite.) */
@keyframes charge-pulse { from { transform: translateY(0) scale(.97); } to { transform: translateY(-5px) scale(1.025); } }
.charge-fx { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.charge-ring { position: absolute; width: min(420px, 92vw); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--fx); border-right-color: color-mix(in srgb, var(--fx) 45%, transparent);
  filter: drop-shadow(0 0 8px var(--fx)) drop-shadow(0 0 2px var(--fx)); animation: charge-orbit 2s linear infinite; opacity: .95; }
.charge-ring.second { width: min(480px, 100vw); border-width: 2px; opacity: .6; animation-duration: 3s; animation-direction: reverse; }
@keyframes charge-orbit { to { transform: rotate(360deg); } }
.charge-fx i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 2px var(--fx), 0 0 22px var(--fx); animation: charge-spark .8s var(--d) ease-in infinite; }
@keyframes charge-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--dist) + 120px)) scale(.5); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(15px) scale(1.6); }
}
/* Retournement : halo de la rareté derrière la boîte, reflet qui balaie la jaquette. */
.reveal-halo { position: absolute; left: 50%; top: 50%; width: min(760px, 160vw); aspect-ratio: 1; z-index: -1; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%; opacity: 0;
  background: radial-gradient(color-mix(in srgb, var(--fx) 30%, transparent), transparent 66%);
  animation: halo-in .9s ease-out forwards; }
@keyframes halo-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.reveal-sweep { position: absolute; inset: 0; z-index: 7; overflow: hidden; pointer-events: none; display: grid; place-items: center; border-radius: inherit; }
.reveal-sweep i { width: 34%; height: 140%; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); }
@media (prefers-reduced-motion: reduce) { .reveal-slot.charging { animation: none; } .charge-fx { display: none; } }

/* Boîtes épiques et plus encore de dos : au survol, un halo fixe de la couleur de la rareté apparaît derrière la boîte
   (demande de l'utilisateur, 2026-10-01). */
.reveal-slot.charging::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(calc(760px * var(--halo-size, 1)), calc(140vw * var(--halo-size, 1))); aspect-ratio: 1;
  border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(.8); opacity: 0;
  background: radial-gradient(color-mix(in srgb, var(--fx) 70%, transparent) 25%, color-mix(in srgb, var(--fx) 38%, transparent) 42%, color-mix(in srgb, var(--fx) 12%, transparent) 56%, transparent 70%);
  transition: opacity .35s ease, transform .35s ease; }
.reveal-slot.charging:has(.card:hover)::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@keyframes rise { from { transform: translateY(55%) scale(.6); opacity: 0; } }

/* Récapitulatif du carton : « ⬆ Légendaire sur PS2 », le jeu existe en plus rare ailleurs (js/ouvrir.js). */
.rarer-tag { position: absolute; z-index: 6; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 2px 9px; border-radius: 999px; font: 800 .7rem/1.4 var(--font-body); color: #3A2608; background: var(--butter); box-shadow: 0 0 0 2px #3A2608; }
@media (max-width: 480px) { /* noms de console longs (« Game Boy Advance ») : sur deux lignes, sans dépasser de l'écran */
  .rarer-tag { white-space: normal; width: max-content; max-width: 100%; text-align: center; }
}
.summary-grid .card { animation: rise .5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }

/* ---- Collection ---------------------------------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 18px; margin-bottom: 28px; padding: 18px 20px; border-radius: 20px;
  background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.toolbar .field input { min-width: 220px; }
.filters-toggle { display: none; }
/* Téléphone : recherche + bouton « Filtres et tri » ; le reste s'ouvre sur deux colonnes (js/collection.js). */
@media (max-width: 640px) {
  .toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; margin-bottom: 22px; }
  .toolbar > .field-search { grid-column: 1 / -1; }
  .toolbar .field input, .toolbar .field select { min-width: 0; width: 100%; }
  .toolbar .filters-toggle { display: inline-flex; grid-column: 1 / -1; justify-content: center; }
  .toolbar:not(.open) > :not(.field-search, .filters-toggle) { display: none !important; }
  .toolbar .check { min-height: 36px; font-size: .92rem; }
  .toolbar > .btn:not(.filters-toggle) { justify-content: center; }
}
.set-progress { display: flex; flex-direction: column; gap: 8px; min-width: min(100%, 320px); }
.set-progress p { font-weight: 700; }
/* Fiche du jeu v2 (2026-10-08, js/detail.js) : à gauche la boîte et tous les boutons empilés ; à droite le nom, une ligne
   de résumé, la rareté, puis deux onglets (« Ma collection », « Le jeu »).
   (v1 : .detail { grid-template-columns: 240px 1fr; gap: 28px } ; boutons sous la liste, .detail-info h2 { margin: 0 90px 8px 0 },
   dl { margin: 16px 0 } ; téléphone : .detail > .zoom-trigger { width: min(190px, 56vw); margin: 38px auto 0 }.) */
#detail-dialog { width: min(880px, 96vw); max-width: min(880px, 96vw); }
.detail { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; }
.detail .card { --w: 100%; }
.detail-side { display: flex; flex-direction: column; gap: 18px; }
.detail-side > :is(.zoom-trigger, .detail-locked) { width: 100%; }
.detail-side .detail-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin-top: 0; }
.detail-side .detail-actions .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; }
.detail-side .detail-actions p { margin: 2px 0 0; font-size: .88rem; line-height: 1.4; }
.detail-head h2 { margin-right: 140px; } /* (place de l'étoile et de « Fermer ») */
.detail-head .rarity-note { margin-top: 6px; }
.detail-info h2 { margin: 0 0 6px; line-height: 1.1; }
.detail-meta { margin: 0; color: var(--ink-soft); font-weight: 700; font-size: .95rem; }
.detail-rarity { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 4px 12px 4px 10px; border-radius: 999px;
  font-weight: 800; font-size: .9rem; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); }
.detail-rarity .pips { display: inline-flex; gap: 2px; }
.detail-rarity .pips i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.detail-rarity .pips i.on { background: var(--ink); box-shadow: none; }
/* Onglets : soulignés, l'actif marqué par la couleur d'accent. */
.detail-tabs { display: flex; gap: 4px; margin: 18px 0 0; border-bottom: 2px solid var(--line); }
.detail-tabs [role="tab"] { all: unset; box-sizing: border-box; min-height: 44px; padding: 10px 14px; margin-bottom: -2px; cursor: pointer;
  font-weight: 800; color: var(--ink-soft); border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0; }
.detail-tabs [role="tab"]:hover { color: var(--ink); background: var(--surface-2); }
.detail-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.detail-tabs [role="tab"]:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.detail-panel { padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.detail-panel[hidden] { display: none; }
/* Séparation des infos (2026-10-08, demande de l'utilisateur) : colonne de gauche sur un fond teinté (le présentoir) ;
   à droite, les infos rangées en petites cartes (« Mes exemplaires », « Ailleurs dans le grenier », « Fiche technique »)
   sur un fond un peu plus creux, lignes séparées par un filet ; le résumé du jeu dans un encart à trait d'accent.
   (Avant : une seule liste continue, sans fond ni séparation.) */
.detail-side { padding: 14px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); }
.detail .ui-group-title { margin-top: 10px; }
/* (Cartes, petits titres et lignes : composants communs .ui-group / .ui-group-title / .ui-rows de css/site.css.) */
.detail-mine .copy-picker { margin: 4px 0 6px; padding-top: 12px; border-top: 1px dashed var(--line); }
.detail-mine .copy-picker h3 { margin: 0 0 10px; font: 800 .8rem var(--font-body); color: var(--ink-soft); }
.detail-mine .copy-tags { margin: 0 0 8px; padding-top: 12px; border-top: 1px dashed var(--line); }
.detail-panel .desc { margin: 0; padding: 12px 16px; border-left: 4px solid var(--accent); border-radius: 4px 14px 14px 4px;
  background: var(--surface-2); line-height: 1.55; color: var(--ink); }
.detail-panel .desc:empty { display: none; }
.detail-ext { margin: 0; }
.rarity-note { display: block; margin-top: 2px; font-size: .86rem; line-height: 1.35; color: var(--ink-soft); }
.rarity-note:empty { display: none; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dialog-close { position: absolute; top: 12px; right: 12px; }
@media (max-width: 640px) {
  /* Téléphone : boîte plus petite et centrée (sous « Fermer »), boutons dessous, puis le nom et les onglets. */
  .detail { grid-template-columns: 1fr; gap: 18px; }
  .detail .card { --w: min(240px, 70vw); margin: 0 auto; }
  .detail-side > .zoom-trigger, .detail-side > .detail-locked { width: min(170px, 50vw); margin: 38px auto 0; }
  .detail-head h2 { margin-right: 0; }
  .detail-tabs [role="tab"] { flex: 1; text-align: center; }
  /* Ordre : la boîte, le nom et la rareté, les boutons, puis les onglets. */
  .detail-side, .detail-info { display: contents; }
  .detail-side > :is(.zoom-trigger, .detail-locked) { order: 1; }
  .detail-head { order: 2; }
  .detail-side .detail-actions { order: 3; }
  .detail-tabs { order: 4; margin-top: 0; }
  .detail-panel { order: 5; padding-top: 0; }
}

/* ---- Albums -------------------------------------------------------------------------------- */
.album-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
/* Albums : jeu pas encore trouvé, boîte éteinte avec un cadenas. */
.slot-locked { position: relative; align-self: end; }
.detail .slot-locked .card { --w: 100%; }
.detail-locked { cursor: default; align-self: start; }
.card-grid .slot-locked .card { --w: 100%; }
.slot-locked .card { filter: grayscale(1) brightness(.92) contrast(.9); opacity: .78; }
.slot-locked :is(.gb-art, .bb-art) img { filter: blur(1.6cqw) grayscale(1) brightness(.55) !important; transform: scale(1.08); }
.slot-locked .gb-gloss { display: none; }
.slot-lock { position: absolute; z-index: 5; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-4deg);
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.slot-lock svg { width: 46px; height: 46px; padding: 9px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2.5px var(--ink), 2px 3px 0 rgba(58, 44, 64, .35);
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slot-lock span { font-family: var(--font-hand); font-weight: 400; font-size: 1.15rem; letter-spacing: .01em; color: var(--ink); background: var(--tape); padding: 0 10px;
  white-space: nowrap; box-shadow: 0 1px 2px rgba(58, 44, 64, .2); }
/* Téléphone : l'étiquette (« Non débloqué · 3 consoles ») passe sur deux lignes, sans dépasser de la boîte. */
@media (max-width: 480px) {
  .slot-lock { width: 92%; }
  .slot-lock span { white-space: normal; text-align: center; font-size: .95rem; line-height: 1.15; padding: 2px 8px; }
}

/* Catalogue : boîtes pas encore trouvées un peu passées, avec une étiquette « À trouver ». */
.catalogue-count { margin: -12px 0 14px; font-weight: 700; }
.card-grid .card-button { position: relative; }
.card-button.not-owned .card { filter: saturate(.35) brightness(1.04); opacity: .72; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.card-button.not-owned:is(:hover, :focus-visible) .card { filter: none; opacity: 1; }
.to-find { position: absolute; z-index: 5; left: 50%; bottom: -10px; transform: translateX(-50%) rotate(-3deg); white-space: nowrap;
  font-family: var(--font-hand); font-size: 1.05rem; font-weight: 700; color: var(--ink); background: var(--tape); padding: 1px 12px;
  box-shadow: 0 1px 2px rgba(58, 44, 64, .2); pointer-events: none; }
.catalogue-more { display: flex; justify-content: center; margin-top: 36px; }
.album-kind { grid-column: 1 / -1; font-size: 1.35rem; margin-top: 18px; }
.album-kind:first-child { margin-top: 0; }
.album-tile { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; text-decoration: none; padding: 18px;
  border-radius: 22px; background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); transition: box-shadow .2s, transform .2s var(--ease); }
.album-tile:hover { box-shadow: inset 0 0 0 2px var(--ink), 3px 4px 0 var(--peach); transform: translateY(-2px); }
.album-tile h2 { font-size: 1.3rem; margin-bottom: 4px; }
.album-tile p { font-size: .92rem; color: var(--ink-soft); line-height: 1.4; }
.album-meta { display: flex; flex-direction: column; gap: 8px; }
.album-count { font-weight: 800; font-size: .92rem; }
.album-head { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: center; margin: 12px 0 32px; }
.album-head .progress { max-width: 420px; margin-top: 12px; }
.back-link { font-weight: 800; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.back-link:hover { text-decoration: underline; }
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; text-align: center; color: var(--ink-soft); }

/* ---- Profil -------------------------------------------------------------------------------- */
.profile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 8px 0 44px; }
.stat { background: var(--surface); border-radius: 20px; padding: 18px 20px; box-shadow: inset 0 0 0 2px var(--line); }
.stat strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; line-height: 1.1; }
.stat span { color: var(--ink-soft); font-weight: 700; }
.pseudo-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 12px; }
.patch-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 24px 16px; padding: 28px; border-radius: 26px; margin-top: 16px;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 3px, transparent 3px 9px), var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); } /* toile de jean délavée */
.patch { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin: 0; }
.patch .badge-svg { width: 88px; }
.patch figcaption { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.patch.locked figcaption { color: var(--ink-soft); font-weight: 600; }
.danger-zone { margin-top: 48px; padding-top: 24px; border-top: 2px dashed var(--line); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* ---- Profil v2 (js/profil.js, js/profile-card.js ; aussi le profil public, joueur.html) ---- */
.profile-card { position: relative; overflow: hidden; border-radius: var(--radius); margin: 4px 0 34px; background: var(--surface);
  border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow); }
.profile-banner { height: 150px; background:
  radial-gradient(ellipse at 20% 120%, color-mix(in srgb, var(--pc-accent) 55%, transparent), transparent 60%),
  linear-gradient(120deg, color-mix(in srgb, var(--pc-accent) 45%, var(--surface-2)), var(--surface-2)); border-bottom: 2px solid var(--line); }
.profile-banner.has-art { background: linear-gradient(180deg, transparent 30%, var(--surface)), var(--banner) center 30% / cover no-repeat; }
.profile-banner.has-art::after { content: ''; position: absolute; inset: 0 0 auto; height: 150px; backdrop-filter: blur(3px) saturate(1.1);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc-accent) 18%, transparent), transparent); pointer-events: none; }
.profile-body { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 22px; padding: 0 26px; margin-top: -64px; }
.profile-avatar { flex: none; width: 116px; height: 116px; border-radius: 26px; display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--pc-accent) 80%, #fff); box-shadow: 0 0 0 5px var(--surface), 0 0 0 7.5px var(--frame), 0 9px 0 2px var(--drop); }
.profile-avatar.has-box { background: var(--surface-2); padding: 8px 18px; }
.profile-avatar.has-box .card { --w: 70px; }
.profile-initial { font-family: var(--font-display); font-size: 3.4rem; color: var(--ink-dark); }
.profile-who { flex: 1; min-width: 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 6px; }
.profile-name { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; }
.profile-title { padding: 3px 12px; border-radius: 999px; font: 800 .8rem/1.4 var(--font-body); color: var(--ink-dark); background: var(--pc-accent); box-shadow: inset 0 0 0 2px var(--frame); }
.profile-bio { margin: 4px 0 0; font-style: italic; color: var(--ink-soft); }
.profile-fav { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.profile-edit { margin-bottom: 10px; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 22px 26px 24px; }
.profile-stat { padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--pc-accent) 16%, var(--surface)); box-shadow: inset 0 0 0 2px var(--line); }
.profile-stat strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; color: var(--ink); }
.profile-stat span { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }

.profile-section { margin: 0 0 40px; }
.profile-section-head { margin-bottom: 14px; }
.profile-section-head p { margin: 4px 0 0; }
.profile-section-head--row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* Vitrine : une étagère vitrée, un spot sur chaque boîte. */
.showcase { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding: 26px 22px 18px; border-radius: 24px;
  background: var(--surface-2); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow), inset 0 -14px 0 -6px color-mix(in srgb, var(--drop) 70%, transparent); }
.showcase-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-height: 200px;
  padding: 10px 6px 6px; border: 0; border-radius: 16px; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--surface) 80%, transparent), transparent 65%);
  color: inherit; font: inherit; text-align: center; }
button.showcase-slot { cursor: pointer; }
button.showcase-slot:hover, button.showcase-slot:focus-visible { box-shadow: inset 0 0 0 2px var(--pc-accent, var(--butter)); outline: none; }
.showcase-slot .card { --w: min(120px, 100%); }
.showcase-slot.is-empty { border: 2px dashed var(--line); background: none; justify-content: center; }
.showcase-plus { font: 400 2.4rem/1 var(--font-display); color: var(--ink-soft); }
.showcase-cap { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; font-size: .8rem; color: var(--ink-soft); max-width: 100%; }
.showcase-cap strong { color: var(--ink); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 900px) { .showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 12px; } }

/* Écussons compacts (avant : 88 px, cases de 120 px). */
.patch-board--compact { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 16px 10px; padding: 20px; }
.patch-board--compact .patch .badge-svg { width: 52px; }
.patch-board--compact .patch figcaption { font-size: .72rem; line-height: 1.2; }
.patch-board--compact .patch.locked { opacity: .55; }
.patch-board--compact .patch.locked.bronze { opacity: 1; } /* bronze : à moitié gagné, en couleur */
.patch.bronze figcaption { color: #E0A877; }

.wish-item { position: relative; }
/* Grilles dessinées à la demande (content-visibility, qui coupe ce qui dépasse) : cœur et loupe à l'intérieur. */
.trade-grid .wish-btn { top: 4px; right: 4px; }
.trade-grid .tile-zoom, .sale-grid .tile-zoom { top: 2px; left: 2px; }
.custom-dialog { width: min(560px, 96vw); }
.accent-picker { border: 0; padding: 0; margin: 0; }
.accent-picker legend { font-weight: 800; margin-bottom: 6px; }
.accent-picker > div { display: flex; flex-wrap: wrap; gap: 10px; }
.accent-swatch { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--swatch); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.accent-swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.accent-swatch:has(input:checked) { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--swatch); }
.accent-swatch:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.custom-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.custom-pick-label { font-weight: 800; min-width: 70px; }
.pick-extra:empty { display: none; }
.pick-extra { margin: 6px 0 12px; }

@media (max-width: 760px) { .profile-grid { grid-template-columns: repeat(2, 1fr); } .album-head { grid-template-columns: 80px 1fr; gap: 16px; } }

/* ---- Mini-jeux et échanges ------------------------------------------------------------------ */
.game-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.game-tile { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 26px; border-radius: var(--radius); background: var(--surface);
  border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow); }
.game-tile:nth-child(1) { background: linear-gradient(160deg, var(--surface) 55%, var(--t-sky)); }
.game-tile:nth-child(2) { background: linear-gradient(160deg, var(--surface) 55%, var(--t-mint)); }
.game-tile p { color: var(--ink-soft); max-width: 48ch; }
.soon { margin-top: 40px; }

/* ---- Vue agrandie d'une boîte (collection) ------------------------------------------- */
.zoom-trigger { all: unset; display: block; cursor: zoom-in; border-radius: 12px; }
.zoom-trigger:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.detail .zoom-trigger .card { --w: 100%; }
/* Pas de fond : la page derrière est assombrie et floutée, la boîte ressort seule au centre. Le même grenier noir
   dans tous les thèmes (choix de l'utilisateur, 2026-10-03). (.zoom-dialog doublé : plus fort que « dialog ».) */
.zoom-dialog.zoom-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none;
  background: transparent; }
/* Grenier noir, rayon de lumière en éventail aux bords doux venu d'une lucarne, flaque de lumière au sol, poussière
   dans le rayon. */
.zoom-dialog.zoom-dialog::backdrop { background: rgba(4, 3, 3, .95); backdrop-filter: blur(16px) saturate(.4) brightness(.4); -webkit-backdrop-filter: blur(16px) saturate(.4) brightness(.4); }
.zoom-stage { overflow: hidden; }
.zoom-stage::before { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: conic-gradient(from 180deg at 50% -18%,
    rgba(255, 238, 205, .36) 0deg, rgba(255, 234, 198, .26) 11deg, rgba(255, 228, 185, .09) 20deg, transparent 27deg,
    transparent 333deg, rgba(255, 228, 185, .09) 340deg, rgba(255, 234, 198, .26) 349deg, rgba(255, 238, 205, .36) 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .55) 75%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .55) 75%, transparent 98%);
  /* Vieille ampoule : de temps en temps la lumière clignote ou faiblit (--flick, réglé par flickerLight dans js/detail.js). */
  opacity: var(--flick, 1); transition: opacity var(--flick-speed, 50ms) linear; }
.zoom-stage::after, .zoom-dust { opacity: var(--flick, 1); transition: opacity var(--flick-speed, 50ms) linear; }
/* Voile noir sur la boîte quand la lumière est éteinte (allumage, --dark). Un voile plutôt qu'un
   filtre : un filter sur la boîte écraserait sa 3D. */
.zoom-dark { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #030202;
  opacity: var(--dark, 0); transition: opacity var(--flick-speed, 50ms) linear; }
.zoom-stage::after { content: ''; position: absolute; z-index: 0; left: 50%; bottom: 4%; width: min(820px, 110vw); height: 26%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 232, 190, .24), rgba(255, 220, 170, .06) 45%, transparent 70%); pointer-events: none; }
.zoom-stage .card { z-index: 1; }
.zoom-stage .card::before { background: radial-gradient(ellipse, rgba(0, 0, 0, .75), transparent 70%); } /* ombre au sol nette sous la lumière */
.zoom-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 40% 90% at 50% 40%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 40% 90% at 50% 40%, #000 40%, transparent 100%); }

.zoom-dust i { position: absolute; left: var(--x); top: 100%; width: var(--s); height: var(--s); border-radius: 50%;
  background: rgba(255, 244, 222, .85); box-shadow: 0 0 6px rgba(255, 236, 200, .8); opacity: 0;
  animation: dust-rise var(--d) linear var(--delay) infinite; }
@keyframes dust-rise {
  10% { opacity: .9; }
  50% { transform: translate(var(--drift), -55vh); }
  90% { opacity: .6; }
  100% { transform: translate(0, -110vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zoom-stage::before { animation: none; }
  .zoom-dust { display: none; }
}
/* La fiche ouverte derrière s'efface pendant la vue en grand. */
dialog.behind-zoom { opacity: 0; transition: opacity .2s var(--ease); }
.zoom-dialog .zoom-hint { color: rgba(250, 246, 251, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.zoom-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 72px 24px 64px; cursor: zoom-out;
  touch-action: none; } /* au doigt : glisser fait tourner la boîte (js/gamebox.js), sans faire défiler la page */
.zoom-stage .card { --w: min(460px, 82vw, calc((100dvh - 150px) * 5 / 7)); cursor: default; }
.zoom-stage .card.zoom-flippable { cursor: pointer; }
/* Pas de contour de focus sur la boîte en grand (demande de l'utilisateur ; Entrée / Espace la retournent toujours). */
.zoom-stage .card.zoom-flippable:focus-visible { outline: none; }
.zoom-stage .card.gbox--ps1 { --w: min(720px, 88vw, calc((100dvh - 150px) * 142 / 125)); }
.zoom-hint { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: var(--ink-soft); font-family: var(--font-hand); font-size: 1.25rem; padding: 0 16px; pointer-events: none; }
.zoom-close { position: absolute; top: 20px; right: 20px; }
/* Téléphone : l'aide tient sur deux lignes en bas, le bouton de scan au-dessus, la boîte au-dessus des deux. */
@media (max-width: 640px) {
  .zoom-hint { font-size: 1rem; bottom: 12px; line-height: 1.25; }
  .zoom-dialog .zoom-tools { bottom: 62px; }
  .zoom-dialog:has(.zoom-tools:not(:empty)) .zoom-stage { padding-bottom: 130px; }
  .zoom-dialog:has(.zoom-tools:not(:empty)) .zoom-stage .card { --w: min(460px, 78vw, calc((100dvh - 230px) * 5 / 7)); }
  .zoom-dialog:has(.zoom-tools:not(:empty)) .zoom-stage .card.gbox--ps1 { --w: min(720px, 86vw, calc((100dvh - 230px) * 142 / 125)); }
  /* Après un scan : le bilan prend toute la largeur (légende sur plusieurs colonnes) et remplace l'aide. */
  .zoom-dialog .zoom-tools { width: calc(100vw - 24px); gap: 8px; }
  .zoom-dialog .scan-result { font-size: .85rem; padding: 8px 12px; }
  .zoom-dialog .scan-legend { gap: 4px 12px; font-size: .8rem; }
  .zoom-dialog:has(.scan-legend) .zoom-hint { display: none; }
  .zoom-dialog:has(.scan-legend) .zoom-tools { bottom: 12px; }
}

/* ---- Profil : réglages (thème du site, rotation des boîtes) --------------------------------- */
.style-section { margin-top: 48px; }
/* Thème : une carte par thème, avec un aperçu (mur, panneau, bouton). */
.theme-choices { border: 0; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.theme-option { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; cursor: pointer; border-radius: var(--radius);
  background: var(--surface); border: var(--frame-w) solid var(--line); box-shadow: var(--shadow-s); transition: border-color .2s, background-color .2s; }
.theme-option:hover { border-color: var(--frame); }
.theme-option:has(input:checked) { background: var(--t-butter); border-color: var(--frame); box-shadow: var(--shadow); }
.theme-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.theme-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.theme-preview { position: relative; height: 92px; border-radius: 12px; background: var(--pv-wall); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18); overflow: hidden; }
.theme-preview i { position: absolute; left: 14px; right: 30%; top: 14px; bottom: 14px; border-radius: 8px; background: var(--pv-panel); box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.theme-preview b { position: absolute; right: 14px; bottom: 16px; width: 22%; height: 22px; border-radius: 7px; background: var(--pv-accent); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.theme-text strong { display: block; font-weight: 800; }
.theme-text small { color: var(--ink-soft); font-weight: 700; }
.theme-option:has(input:checked) .theme-text strong::after { content: ' ✓'; }
/* Sens de rotation de la boîte en grand : deux choix à gauche, aperçu à faire glisser à droite. */
.turn-setting { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: center; margin-top: 16px; }
.turn-options { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.turn-option { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius); cursor: pointer;
  background: var(--surface); border: var(--frame-w) solid var(--line); box-shadow: var(--shadow-s); transition: border-color .2s, background-color .2s; }
.turn-option:hover { border-color: var(--frame); }
.turn-option:has(input:checked) { background: var(--t-butter); border-color: var(--frame); box-shadow: var(--shadow); }
.turn-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.turn-option input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.turn-option strong { display: block; font-size: 1.05rem; }
.turn-option small { display: block; margin-top: 2px; font-size: .92rem; color: var(--ink-soft); line-height: 1.4; }
.turn-preview { height: 300px; display: grid; place-items: center; border-radius: var(--radius); background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); }
.turn-preview .card { --w: 170px; }
.turn-preview .card.gbox--ps1 { --w: 220px; }
@media (max-width: 640px) { .turn-setting { grid-template-columns: 1fr; } .turn-preview { height: 260px; } }
/* ==== Remballer (remballer.html, 2026-10-07, d'après la page Fusion de Cinéclub) ==================================
   L'établi : le colis à 10 places (5 × 2), une flèche, la boîte promise ; puis les réglages et la grille de choix. */
.remb-back { display: inline-block; margin-bottom: 14px; font-weight: 700; color: var(--ink-soft); }
.remb-bench { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(180px, 220px); align-items: center; gap: 20px; padding: 20px 24px; }
.remb-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.remb-line span { font: 800 .95rem var(--font-body); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.remb-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.remb-slot { position: relative; aspect-ratio: 5 / 7; border-radius: 10px; display: grid; place-items: center;
  border: 2px dashed var(--edge); background: var(--surface-2); }
.remb-slot-n { position: absolute; top: 6px; left: 8px; font: 800 .72rem var(--font-body); color: var(--ink-soft); }
.remb-slot-plus { font: 300 1.8rem/1 var(--font-body); color: var(--ink-soft); opacity: .6; }
.remb-slot.filled { border-style: solid; border-color: transparent; background: none; }
.remb-slot-box { all: unset; position: relative; display: grid; place-items: center; width: 100%; height: 100%; cursor: pointer; border-radius: 10px; }
.remb-slot-box .card { --w: 100%; max-height: 100%; }
.remb-slot-box:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.remb-slot-x { position: absolute; z-index: 8; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink); border: 2px solid var(--frame); font: 900 .9rem/1 var(--font-body);
  opacity: 0; transition: opacity .15s var(--ease); }
.remb-slot-box:hover .remb-slot-x, .remb-slot-box:focus-visible .remb-slot-x { opacity: 1; }
@media (hover: none) { .remb-slot-x { opacity: 1; } }
.remb-arrow { font: 800 2rem/1 var(--font-body); color: var(--ink-soft); }
.remb-target { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
/* Le colis de retour (js/carton.js) : petit, ouvert ; .remb-packing fait rentrer les boîtes, .remb-sending le fait partir. */
.remb-target .remb-carton { --W: 136px; --H: 84px; --D: 92px; margin: -10px 0 24px; }
.remb-carton .inside .card { transition: transform .35s var(--ease), opacity .35s var(--ease); }
.remb-carton.remb-packing .inside .card { transform: translateY(70%) scale(.9); opacity: 0; }
.remb-target .remb-carton { transition: transform .5s var(--ease), opacity .5s var(--ease); }
.remb-target .remb-carton.remb-sending { transform: translate(60px, -10px) rotate(6deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .remb-carton, .remb-carton .inside .card { transition: none; } }
.remb-target-info { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.remb-target-name { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; font: 800 .82rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.remb-target-note { margin: 0; font-weight: 700; font-size: .85rem; }
/* (Points de rareté hors d'une boîte : taille fixe, pas en cqw.) */
.remb-target-name .pips, .remb-result .remb-target-name .pips { gap: 3px; }
.remb-target-name .pips i { width: 8px; height: 8px; box-shadow: inset 0 0 0 1.5px currentColor; }
.remb-target-name .pips i.on { background: currentColor; }
.remb-target-plat { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.remb-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 14px; margin: 20px 0 8px; }
.remb-controls .remb-go { margin-left: auto; min-width: 220px; }
.remb-notes { display: flex; flex-direction: column; gap: 4px; min-height: 1.4em; margin: 0 0 28px; font-weight: 700; font-size: .92rem; }
.remb-notes .ok { color: var(--ok-ink); }
.remb-notes .warn { color: var(--danger-ink); }
.remb-pick-title { font-size: 1.5rem; margin: 0 0 4px; }
.remb-pick-hint { margin: 0 0 14px; }
.remb-filters { margin-bottom: 14px; }
.remb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.remb-tile { position: relative; display: flex; flex-direction: column; gap: 8px; }
.remb-tile .card-button { cursor: copy; }
.remb-tile.is-selected .card-button { cursor: pointer; }
.remb-tile.is-selected .card { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.remb-tile.is-selected::after { content: '✓'; position: absolute; z-index: 7; top: -8px; left: -6px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 900 .95rem/1 var(--font-body); }
.remb-loupe { position: absolute; z-index: 7; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--frame); background: var(--surface); color: var(--ink); cursor: zoom-in; box-shadow: var(--shadow-s); }
.remb-loupe svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.remb-loupe:hover { background: var(--surface-2); }
.remb-loupe:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.remb-cap { display: flex; justify-content: space-between; gap: 6px; margin: 0; font-size: .76rem; }
.remb-tag { font-weight: 800; color: var(--ink-soft); }
.remb-tag.warn { color: var(--danger-ink); }
.remb-plat { color: var(--ink-soft); text-align: right; }
.remb-result-dialog { width: min(96vw, 620px); }
.remb-result { display: grid; grid-template-columns: minmax(0, 210px) 1fr; gap: 24px; align-items: center; }
.remb-result .card { --w: min(210px, 56vw); margin: 0 auto; }
.remb-result h2 { font-size: 1.3rem; margin: 0 0 8px; }
.remb-result h3 { margin: 6px 0; font-size: 1.4rem; }
@media (max-width: 760px) {
  .remb-bench { grid-template-columns: 1fr; padding: 16px; }
  .remb-arrow { justify-self: center; transform: rotate(90deg); }
  .remb-target .remb-carton { --W: 104px; --H: 64px; --D: 72px; margin: -14px 0 18px; }
  .remb-slots { gap: 8px; }
  .remb-controls .remb-go { margin-left: 0; width: 100%; }
  .remb-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 22px 14px; }
  .remb-result { grid-template-columns: 1fr; text-align: center; }
  .remb-result .detail-actions { justify-content: center; }
}

/* ==== Tags et favoris (2026-10-07, js/collection.js) =============================================================
   Étoile du favori en haut à gauche de la boîte, pastilles de couleur des tags en bas à droite ; boutons de tags dans la
   fiche ; fenêtre « Mes tags ». */
/* Favori (séparé des tags) : étoile sur chaque boîte de la grille (toujours visible sur un favori, au survol sinon),
   et en haut à droite de la fiche. */
.coll-tile { position: relative; }
.card-grid .coll-tile > .card-button { display: block; width: 100%; }
.fav-btn { position: absolute; z-index: 7; top: -10px; left: -8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--frame); background: var(--surface); color: var(--ink-soft); cursor: pointer; font: 900 1rem/1 var(--font-body);
  opacity: 0; transition: opacity .15s var(--ease), transform .15s var(--ease); }
.fav-btn.on { opacity: 1; background: #F2C230; color: #3A2608; }
.coll-tile:hover .fav-btn, .fav-btn:focus-visible { opacity: 1; }
.fav-btn:hover { transform: scale(1.1); }
.fav-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .fav-btn { opacity: .85; } }

/* ---- Collection, vue en cases (essai du 2026-10-08, js/collection.js CELLS_KEY) ----------------------------------------
   Chaque jeu dans sa case (fond creux + filet, comme les groupes .ui-group) ; toutes les cases d'une rangée ont la même
   hauteur et la boîte y est posée en bas, quelle que soit sa forme ; nom du jeu et « console · état » dessous.
   Sans la classe .card-grid--cells : la grille libre d'origine. */
.card-grid.card-grid--cells { gap: 14px; }
main .card-grid.card-grid--cells > * { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 0;
  padding: 18px 14px 12px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line);
  transition: box-shadow .15s var(--ease), background .15s var(--ease); }
main .card-grid.card-grid--cells > :hover { box-shadow: inset 0 0 0 2px var(--frame); }
.card-grid.card-grid--cells > .coll-tile > .card-button { margin-top: auto; }
/* (Boîtes un peu plus petites que la case : elles respirent ; les boîtes larges PS1 gardent la largeur.) */
.card-grid--cells .card { --w: 88%; margin: 0 auto; }
.card-grid--cells .card.gbox--ps1 { --w: 100%; }
.card-grid--cells .fav-btn { top: 8px; left: 8px; }
.coll-cap { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; text-align: center; min-width: 0; }
.coll-cap strong { font-size: .86rem; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coll-cap small { font-size: .74rem; color: var(--ink-soft); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Jeu pas encore trouvé : case plus effacée. */
.card-grid--cells > .missing-slot { background: transparent; box-shadow: inset 0 0 0 2px var(--line); border: 0; opacity: .9; }
@media (max-width: 480px) { main .card-grid.card-grid--cells > * { padding: 14px 8px 10px; } .coll-cap strong { font-size: .8rem; } }

/* Même vue en cases pour les grilles de tuiles (.trade-grid, js/trade-ui.js boxTile) : d'abord le Troc (2026-10-08,
   « Sur la table » et « Ils cherchent »). Boîte posée en bas de la case, légende de hauteur fixe dessous, pastille
   (« Vous ne l'avez pas »…) et loupe dans les coins du haut, pour que toutes les boîtes d'une rangée soient alignées. */
main .trade-grid--cells { gap: 14px; align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
@media (max-width: 480px) { main .trade-grid--cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
main .trade-grid--cells > * { display: flex; flex-direction: column; padding: 32px 12px 12px; border-radius: 16px;
  background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .15s var(--ease); }
main .trade-grid--cells > :hover { box-shadow: inset 0 0 0 2px var(--frame); }
.trade-grid--cells .trade-tile { flex: 1; justify-content: flex-end; gap: 0; }
.trade-grid--cells .trade-tile .card { --w: 88%; margin-top: auto; }
.trade-grid--cells .trade-tile .card.gbox--ps1 { --w: 100%; }
.trade-grid--cells .trade-cap { width: 100%; margin-top: 16px; }
.trade-grid--cells .trade-cap strong { min-height: 2.5em; font-size: .86rem; }
.trade-grid--cells .trade-cap small { min-height: 2.5em; font-size: .74rem; line-height: 1.25; }
.trade-grid--cells .trade-note { position: absolute; z-index: 3; top: -26px; right: -4px; max-width: calc(100% - 30px); font-size: .68rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-grid--cells .tile-zoom { top: -28px; left: -6px; width: 28px; height: 28px; }
@media (max-width: 480px) { main .trade-grid--cells > * { padding: 30px 8px 10px; } }
.fav-toggle { position: absolute; z-index: 6; top: 12px; right: 104px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--frame); background: var(--surface-2); color: var(--ink-soft); cursor: pointer; font: 900 1.3rem/1 var(--font-body); }
.fav-toggle.on { background: #F2C230; color: #3A2608; }
.fav-toggle:hover { transform: scale(1.06); }
.fav-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .fav-toggle { top: 10px; right: auto; left: 12px; } }
.tag-dots { position: absolute; z-index: 6; right: -4px; bottom: -6px; display: flex; gap: 3px; padding: 3px 5px; border-radius: 99px;
  background: var(--surface); border: 2px solid var(--frame); pointer-events: none; }
.tag-dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.copy-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin-bottom: 6px; }
.copy-tags-label { width: 100%; font: 800 .8rem var(--font-body); color: var(--ink-soft); }
.tag-chip { --tag: var(--accent); padding: 5px 11px; border-radius: 99px; cursor: pointer; font: 700 .82rem var(--font-body);
  color: var(--ink); background: var(--surface-2); border: 2px solid color-mix(in srgb, var(--tag) 70%, var(--edge)); }
.tag-chip.on { background: var(--tag); color: #1E1722; border-color: var(--tag); }
.tag-chip:focus-visible, .tag-manage:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tag-manage { padding: 5px 8px; border: 0; background: none; cursor: pointer; font: 700 .82rem var(--font-body); color: var(--ink-soft); text-decoration: underline; }
.tags-dialog { width: min(96vw, 520px); }
.tags-dialog h2 { margin: 0 0 6px; }
.tags-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.tag-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; }
.tag-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--frame); cursor: pointer; }
.tag-swatch:disabled { cursor: default; }
.tag-row input { min-width: 0; padding: 7px 10px; border-radius: 10px; border: 2px solid var(--edge); background: var(--surface-2); color: var(--ink); font: 700 .92rem var(--font-body); }
.tag-row input:disabled { opacity: .8; }
.tag-count { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.tag-new { display: flex; gap: 8px; }
.tag-new input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 2px solid var(--edge); background: var(--surface-2); color: var(--ink); font: inherit; }
.sel-tag { display: inline-flex; align-items: center; gap: 6px; }
.sel-tag select { padding: 6px 8px; border-radius: 10px; }
@media (max-width: 480px) { .tag-row { grid-template-columns: auto 1fr auto; } .tag-count { display: none; } }
/* Remballer, filtre Tag : boîtes taguées hors de la liste, et pourquoi. */
.remb-tag-note { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; border: 2px dashed var(--edge); background: var(--surface-2); font-size: .88rem; }
.remb-tag-note-title { margin: 0 0 6px; font-weight: 800; }
.remb-tag-note ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.remb-tag-note .text-link { border: 0; background: none; padding: 0; cursor: pointer; font: 700 .88rem var(--font-body); color: var(--accent); text-decoration: underline; }

/* Barre de filtres des fenêtres de choix de boîtes (2026-10-07, js/box-filters.js) : compacte, sur plusieurs lignes. */
.box-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; margin: 8px 0 6px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface-2); border: 2px solid var(--edge); }
.box-filters .field { font-size: .82rem; gap: 3px; }
.box-filters .field-search { flex: 1 1 180px; }
.box-filters input[type="search"], .box-filters select { min-width: 0; padding: 7px 10px; border-radius: 10px; border: 2px solid var(--edge);
  background: var(--surface); color: var(--ink); font: 600 .88rem var(--font-body); }
.box-filters input[type="search"] { width: 100%; }
.box-filters .check { font-size: .85rem; padding-bottom: 8px; }
.pick-count { margin: 4px 0 10px; font-size: .85rem; }
.pick-more { grid-column: 1 / -1; justify-self: center; margin: 8px 0; }
@media (max-width: 560px) { .box-filters .field { flex: 1 1 140px; } .box-filters select { width: 100%; } }
/* Le Troc (echanges.html, 2026-10-07) : fonctionnement en trois étapes, introduction de chaque onglet, trocs terminés repliés. */
.troc-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.troc-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--surface);
  border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.troc-steps b { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  font: 400 1.1rem/1 var(--font-display); }
.troc-steps strong { display: block; margin-bottom: 2px; }
.troc-steps span { font-size: .88rem; color: var(--ink-soft); }
.troc-intro { margin: 4px 0 14px; }
.troc-intro p { margin: 0 0 6px; }
.troc-mine { font-weight: 700; font-size: .92rem; }
.trade-done summary { cursor: pointer; list-style: none; }
.trade-done.ui-section summary .trade-h { margin: 14px 0 10px; }
.trade-done.ui-section:not([open]) { padding-bottom: 6px; }
/* Sections sur carte (2026-10-08) : marges du système commun plutôt que celles d'origine. */
.ui-section.profile-section, .ui-section.style-section { margin: 0 0 28px; }
.ui-section .trade-h { margin: 14px 0 12px; }
/* Grille vide : le message prend toute la largeur (il était coupé dans une seule colonne). */
.trade-grid > p.muted:only-child { grid-column: 1 / -1; }
.trade-done summary::-webkit-details-marker { display: none; }
.trade-done summary .trade-h { display: inline-flex; align-items: center; gap: 8px; }
.trade-done summary .trade-h::after { content: '▾'; font-size: .9em; transition: transform .2s var(--ease); }
.trade-done:not([open]) summary .trade-h::after { transform: rotate(-90deg); }
@media (max-width: 760px) { .troc-steps { grid-template-columns: 1fr; gap: 8px; } .troc-steps li { padding: 10px 12px; } }

/* Pseudos cliquables (2026-10-07) : tuiles et lignes du Troc entièrement cliquables (bouton ou lien « étiré » dessous),
   le pseudo et la loupe passent par-dessus. */
.player-link { color: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.player-link:hover { color: var(--accent); }
div.trade-open { position: relative; }
.trade-open-hit { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.trade-open-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
div.trade-open:hover .card, div.trade-open:focus-within .card { transform: translateY(-4px); transition: transform .2s var(--ease); }
div.trade-open .player-link { position: relative; z-index: 2; } /* (la loupe est déjà au-dessus : z-index 8) */
div.trade-row { position: relative; cursor: pointer; }
.trade-row-link { position: absolute; inset: 0; z-index: 0; border-radius: 16px; }
.trade-row-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.trade-row .player-link { position: relative; z-index: 1; }

/* ==== Étagères (2026-10-07, js/shelves.js, js/shelf-card.js) ======================================================== */
.album-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.album-tabs a { padding: 9px 16px; border-radius: 99px; border: 2px solid var(--edge); background: var(--surface); color: var(--ink);
  font: 800 .9rem var(--font-body); text-decoration: none; }
.album-tabs a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--frame); }
.album-tabs a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.shelf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 18px; }
.shelf-card { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; text-decoration: none; color: inherit;
  background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); transition: transform .15s var(--ease); }
.shelf-card:hover { transform: translateY(-3px); }
.shelf-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.shelf-card-cover { display: grid; place-items: center; min-height: 110px; }
.shelf-card-cover .card { --w: 88px; }
.shelf-card-empty { font-size: .8rem; color: var(--ink-soft); text-align: center; }
.shelf-card-meta h3 { margin: 0 0 2px; font-size: 1.1rem; line-height: 1.2; }
.shelf-card-owner { margin: 0 0 4px; font-size: .82rem; color: var(--ink-soft); }
.shelf-card-desc { margin: 0 0 6px; font-size: .85rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shelf-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.shelf-card-tags span { padding: 2px 9px; border-radius: 99px; font: 800 .72rem var(--font-body); background: var(--surface-2); border: 1px solid var(--edge); }
.shelf-card-tags .is-ranked { background: var(--t-butter, #F4E3A4); color: #3A2608; }
.shelf-card-tags .is-private { background: var(--surface-2); color: var(--ink-soft); }
.shelf-card-new { grid-template-columns: 1fr; justify-items: center; text-align: center; border-style: dashed; min-height: 140px; gap: 4px; }
.shelf-new-plus { font: 400 2.4rem/1 var(--font-display); color: var(--accent); }
.shelf-manage { margin-top: 4px; }
.shelf-head { display: grid; grid-template-columns: minmax(0, 170px) 1fr; gap: 24px; align-items: center; margin: 10px 0 26px; }
.shelf-head-cover .card { --w: min(170px, 40vw); }
.shelf-head-info h1 { margin: 0 0 4px; }
.shelf-by { margin: 0 0 8px; color: var(--ink-soft); }
.shelf-desc { margin: 0 0 10px; max-width: 60ch; }
.shelf-head-info .detail-actions { margin-top: 12px; }
.shelf-ranked { position: relative; align-self: end; }
.shelf-rank { position: absolute; z-index: 7; top: -12px; left: -10px; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); border: 2px solid var(--frame); font: 400 1.05rem/1 var(--font-display); box-shadow: var(--shadow-s); }
.shelf-form { display: grid; gap: 12px; max-width: 720px; margin: 10px 0 22px; }
.shelf-form input, .shelf-form textarea { padding: 10px 12px; border-radius: 12px; border: 2px solid var(--edge); background: var(--surface-2); color: var(--ink); font: 600 .95rem var(--font-body); resize: vertical; }
.shelf-switches { display: flex; flex-direction: column; gap: 6px; }
.shelf-h { font-size: 1.35rem; margin: 18px 0 4px; }
.shelf-help { margin: 0 0 12px; }
.shelf-picked { list-style: none; margin: 0 0 10px; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 22px 14px;
  min-height: 80px; border-radius: 16px; border: 2px dashed var(--edge); background: var(--surface-2); }
.shelf-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: grab; touch-action: none; user-select: none; }
.shelf-pick-box { width: 100%; display: grid; place-items: end center; min-height: 150px; }
.shelf-pick-box .card { --w: 100%; max-width: 116px; pointer-events: none; }
.shelf-pick-name { font: 700 .76rem/1.2 var(--font-body); text-align: center; display: flex; flex-direction: column; gap: 1px; }
.shelf-pick-name small { font-weight: 600; font-size: .7rem; color: var(--ink-soft); }
.shelf-pick-tools { display: flex; gap: 4px; }
.shelf-tool { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--edge); background: var(--surface); color: var(--ink); cursor: pointer; font: 900 .85rem/1 var(--font-body); }
.shelf-tool:disabled { opacity: .35; cursor: default; }
.shelf-tool:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.shelf-pick.is-cover .shelf-tool.cover { background: #F2C230; color: #3A2608; border-color: var(--frame); }
.shelf-pick.is-cover .shelf-pick-box::after { content: 'Couverture'; position: absolute; top: -10px; right: -4px; z-index: 6; padding: 2px 8px; border-radius: 99px;
  background: #F2C230; color: #3A2608; font: 800 .66rem var(--font-body); border: 2px solid var(--frame); }
.shelf-pick.dragging { opacity: .55; cursor: grabbing; }
.shelf-pick.dragging .shelf-pick-box { outline: 3px dashed var(--accent); outline-offset: 4px; border-radius: 8px; }
.shelf-picked.is-dragging { cursor: grabbing; }
.shelf-picked .shelf-rank { top: -12px; left: -6px; }
.shelf-results { margin-bottom: 20px; }
.shelf-save { position: sticky; bottom: 12px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px;
  border-radius: 16px; background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow); }
.shelf-save .trade-status { margin: 0 auto 0 0; }
@media (max-width: 640px) {
  .shelf-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .shelf-picked { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); padding: 12px 10px; }
  .shelf-pick-box { min-height: 120px; }
  .shelf-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .shelf-card { transition: none; } }
/* Profil d'un joueur : toute sa collection, repliée (2026-10-07). */
.player-coll { margin: 6px 0 10px; padding: 4px 18px 14px; border-radius: 16px; background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.player-coll summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.player-coll summary::-webkit-details-marker { display: none; }
.player-coll summary .trade-h { margin: 12px 0 8px; }
.player-coll-open { padding: 6px 14px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 800 .85rem var(--font-body); }
.player-coll[open] .player-coll-open { background: var(--surface-2); color: var(--ink); }
.player-coll .is-open, .player-coll[open] .is-closed { display: none; }
.player-coll[open] .is-open { display: inline; }

/* ---- Réglages du son (reglages.html, js/reglages.js, 2026-10-07) ------------------------------------------------------ */
/* Volume général en haut, puis les groupes de sons en deux colonnes ; une ligne : nom, Écouter, curseur, valeur. */
.sound-page { max-width: 1080px; }
/* Page Réglages (2026-10-07) : liens vers chaque section, puis Thème, Rotation, Ouverture, Son. */
.settings-page { max-width: 1080px; }
.settings-page .style-section { margin-top: 40px; scroll-margin-top: 16px; }
.settings-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 8px; }
.settings-jump a { padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: .9rem; color: var(--ink); text-decoration: none;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.settings-jump a:hover { box-shadow: inset 0 0 0 2px var(--frame); background: var(--t-butter); }
.settings-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.settings-head p { max-width: 62ch; }
.reveal-options { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.sound-group .panel-head h3 { font-size: 1.2rem; }
.sound-group--master { margin-bottom: 22px; }
.sound-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 22px; align-items: start; }
.sound-groups.is-off { opacity: .6; }
.sound-list { list-style: none; margin: 0; display: grid; gap: 6px; }
.sound-setting { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(96px, 150px) 3.8em; align-items: center; gap: 10px; padding: 4px 0; }
.sound-group--master .sound-setting { grid-template-columns: minmax(0, 1fr) minmax(140px, 360px) 4.2em; }
.sound-name { font-weight: 700; line-height: 1.25; }
.sound-setting.is-muted .sound-name { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sound-setting.is-muted .sound-val { color: var(--ink-soft); }
.sound-play { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--frame); transition: transform .15s var(--ease), background .15s; }
.sound-play:hover { background: var(--t-butter); transform: scale(1.06); }
.sound-play:active { transform: scale(.94); }
.sound-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sound-play svg { width: 16px; height: 16px; fill: currentColor; transform: translateX(1px); }
@media (max-width: 560px) {
  /* Téléphone : le nom sur sa ligne, puis Écouter, curseur et valeur dessous. */
  .sound-setting { grid-template-columns: 36px minmax(0, 1fr) 4.2em; row-gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .sound-setting:last-child { border-bottom: 0; }
  .sound-name { grid-column: 1 / -1; }
  .sound-group--master .sound-setting { grid-template-columns: minmax(0, 1fr) 4.2em; border-bottom: 0; }
}
/* Profil : lien vers les réglages du son. */
.sound-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }

/* ---- L'Atelier (atelier.html, js/atelier.js, 2026-10-08) : objets de réparation et boîtes à restaurer ------------------ */
.atelier-page { max-width: 1180px; }
.atelier-tokens { flex: none; padding: 8px 16px; border-radius: 999px; font-weight: 800; background: var(--surface); box-shadow: inset 0 0 0 2px var(--frame); }
.atelier-steps { margin-bottom: 24px; }
.atelier-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.atelier-item { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); }
.atelier-item-head { display: flex; align-items: center; gap: 12px; }
.atelier-item h3 { font-size: 1.05rem; line-height: 1.2; }
.atelier-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--t-butter); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--frame); }
.atelier-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atelier-owned { display: inline-block; margin-top: 2px; font-size: .85rem; font-weight: 800; color: var(--ink-soft); }
.atelier-desc { margin: 0; font-size: .92rem; }
.atelier-fixes { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.atelier-buy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.atelier-units { margin-top: 18px; }
.atelier-units summary { cursor: pointer; font-weight: 800; }
.atelier-units p { margin: 8px 0; }
.atelier-units ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 18px; }
.atelier-units li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.atelier-rarity { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.atelier-rarity .pips { display: inline-flex; gap: 2px; }
.atelier-rarity .pips i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.atelier-rarity .pips i.on { background: var(--ink); box-shadow: none; }
.atelier-boxes { margin-top: 36px; }

/* ---- Comment ça marche v2 (2026-10-08) : onglets, un sujet par carte -------------------------------------------------
   Onglets en pastilles (actif : fond d'accent) ; chaque sujet sur une carte .ui-section ; texte + visuel côte à côte
   (.guide-step, sans le pointillé de la v1) ; groupes .ui-group en deux colonnes (.guide-groups). */
.guide-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 22px; padding: 8px; border-radius: 18px;
  background: var(--surface); border: var(--frame-w) solid var(--frame); box-shadow: var(--shadow-s); }
.guide-tabs [role="tab"] { min-height: 44px; padding: 8px 16px; border: 0; border-radius: 12px; cursor: pointer; font: 800 .95rem var(--font-body);
  color: var(--ink-soft); background: transparent; transition: background .15s var(--ease), color .15s var(--ease); }
.guide-tabs [role="tab"]:hover { color: var(--ink); background: var(--surface-2); }
.guide-tabs [role="tab"][aria-selected="true"] { color: var(--accent-ink); background: var(--accent); box-shadow: inset 0 0 0 2px var(--frame); }
.guide-tabs [role="tab"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.guide-panel[hidden] { display: none; }
.guide-card { padding: 8px 24px 22px; scroll-margin-top: 16px; }
.guide-card > h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); line-height: 1.1; }
.guide--tabs .guide-step { padding: 16px 0 6px; border-bottom: 0; gap: 32px; }
.guide--tabs .guide-text h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.guide-lead { max-width: 75ch; margin: 6px 0 16px; line-height: 1.55; }
.guide-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; margin: 14px 0 0; }
.guide-card > .ui-group, .guide-card > .troc-steps { margin: 0 0 14px; }
.guide-card > .btn { margin-top: 14px; }
.guide-card .ui-rows > dt { max-width: 18ch; }
.guide-rarity { display: flex; align-items: center; gap: 8px; }
.guide-rarity .pips { display: inline-flex; gap: 2px; }
.guide-rarity .pips i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.guide-rarity .pips i.on { background: var(--ink); box-shadow: none; }
.guide--tabs .guide-soon { padding-top: 20px; }
@media (max-width: 760px) {
  .guide-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .guide-tabs [role="tab"] { flex: none; }
  .guide-card { padding: 4px 14px 16px; }
  .guide--tabs .guide-step { grid-template-columns: 1fr; }
  .guide--tabs .guide-step .guide-visual { order: 0; }
  .guide-card .ui-rows { grid-template-columns: 1fr; }
  .guide-card .ui-rows > dt { max-width: none; padding-bottom: 0; }
  .guide-card .ui-rows > dd { padding-top: 2px; border-top: 0 !important; }
}
/* Lien « Comment ça marche ? » des pages (vers l'onglet du bon sujet). */
.help-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; font-weight: 800; font-size: .9rem;
  color: var(--ink); text-decoration: none; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.help-chip::before { content: '?'; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--font-display);
  background: var(--t-butter); color: var(--ink-dark, var(--ink)); box-shadow: inset 0 0 0 2px var(--frame); }
.help-chip:hover { box-shadow: inset 0 0 0 2px var(--frame); }
.page-head .help-chip { margin-top: 10px; }

/* ---- Page d'un échange v2 (2026-10-08, echange.html) : cartes et groupes du système commun -------------------------
   Les deux offres sont des groupes face à face dans une même carte, avec les boutons d'action en bas de cette carte ;
   Messages et « Chez … » sont deux cartes. (Avant : .room-side cadré à part, actions sur le fond.) */
.room-page .page-head .help-chip { margin-top: 10px; }
.room-page .page-head #lead[hidden] { display: none; }
.room-page .room-request { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; margin: 0 0 22px; border-radius: 18px; }
.room-deal { padding: 18px 20px; }
.room-deal .room-side { padding: 4px 14px 14px; border: 0; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); }
.room-deal .room-side header { align-items: center; }
.room-deal .room-side .ui-group-title { margin: 10px 0 4px; }
.room-deal .room-actions { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); }
.room-page .room-bottom { margin-top: 0; align-items: start; }
.room-page .room-bottom > .ui-section { margin: 0; }
.room-page .room-thread h2, .room-page .room-help > h2 { font-size: 1.25rem; margin: 14px 0 12px; }
.room-page .room-help .ui-group + .ui-group { margin-top: 12px; }
.room-page .room-help .ui-group { padding-bottom: 14px; }
.room-page .msg { background: var(--surface-2); }
.room-page .msg-me { background: color-mix(in srgb, var(--butter) 16%, var(--surface-2)); }
/* Boîte posée directement dans la grille (sans bouton autour) : loupe et pastille dans les coins de la case elle-même. */
.trade-grid--cells > .trade-tile > .tile-zoom { top: 6px; left: 6px; }
.trade-grid--cells > .trade-tile > .trade-note { top: 8px; right: 8px; }
.room-page .room-help h3.ui-group-title { font-size: .74rem; margin: 10px 0 8px; }
/* Petites grilles (offres, « Chez … ») en vue en cases : cases plus étroites. */
main .trade-side-grid.trade-grid--cells { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 480px) { main .trade-side-grid.trade-grid--cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }