/* Design « Brocante Ciné » (2026-10-09) : actif quand js/theme.js pose la classe « brocante » sur <html> (constante DESIGN) ;
   sans elle, l'ancien design « cozy » (css/site.css) revient. Ce fichier est désormais la SOURCE (à retoucher directement).
   Il a été assemblé le 2026-10-09 à partir des feuilles de l'exploration du design (css/v2-test.css, css/explore*.css,
   css/brocante-pages.css) par scripts/build-brocante.mjs : tout cela est rangé dans _archive/exploration-design-2026-10/
   (avec les pages test), hors de la publication. Les sections « depuis css/… » ci-dessous gardent la trace de leur origine. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Space+Mono:wght@400;700&display=swap');

/* ======== coins nets (relevés dans css/site.css, pages.css, home.css, wear.css) ======== */
:root.brocante :is(.theme-menu) { border-radius: 4px; }
:root.brocante :is(.theme-menu button) { border-radius: 4px; }
:root.brocante :is(.sound-more) { border-radius: 4px; }
:root.brocante :is(.btn) { border-radius: 4px; }
:root.brocante :is(.toast) { border-radius: 4px; }
:root.brocante :is(.site-nav) { border-radius: 4px; }
:root.brocante :is(.ui-section) { border-radius: 4px; }
:root.brocante :is(.ui-group) { border-radius: 4px; }
:root.brocante :is(.guide-formula .chip) { border-radius: 4px; }
:root.brocante :is(.guide-tokens th) { border-radius: 4px 0 0 4px; }
:root.brocante :is(.guide-tokens td) { border-radius: 0 4px 4px 0; }
:root.brocante :is(.guide-tokens--states td:last-child) { border-radius: 0 4px 4px 0; }
:root.brocante :is(.soon-card) { border-radius: 4px; }
:root.brocante :is(.select-bar) { border-radius: 4px; }
:root.brocante :is(.trade-open) { border-radius: 4px; }
:root.brocante :is(.trade-pick) { border-radius: 4px; }
:root.brocante :is(.trade-card) { border-radius: 4px; }
:root.brocante :is(.player-row) { border-radius: 4px; }
:root.brocante :is(.trade-row) { border-radius: 4px; }
:root.brocante :is(.room-request) { border-radius: 4px; }
:root.brocante :is(.room-side) { border-radius: 4px; }
:root.brocante :is(.msg) { border-radius: 4px; }
:root.brocante :is(.thread-form input) { border-radius: 4px; }
:root.brocante :is(.bid-row) { border-radius: 4px; }
:root.brocante :is(.sale-card) { border-radius: 4px; }
:root.brocante :is(.sale-bid input) { border-radius: 4px; }
:root.brocante :is(.account-form select) { border-radius: 4px; }
:root.brocante :is(.account-box) { border-radius: 4px; }
:root.brocante :is(.account-form input) { border-radius: 4px; }
:root.brocante :is(.delete-confirm input) { border-radius: 4px; }
:root.brocante :is(.shop-offer) { border-radius: 4px; }
:root.brocante :is(.shop-confirm select) { border-radius: 4px; }
:root.brocante :is(.gift-form) { border-radius: 4px; }
:root.brocante :is(.gift-form :is(input, select)) { border-radius: 4px; }
:root.brocante :is(.gift-result) { border-radius: 4px; }
:root.brocante :is(.gift-chip) { border-radius: 4px; }
:root.brocante :is(.gift-log-item) { border-radius: 4px; }
:root.brocante :is(.invite) { border-radius: 4px; }
:root.brocante :is(.invite-url) { border-radius: 4px; }
:root.brocante :is(.invite-qr) { border-radius: 4px; }
:root.brocante :is(.friend) { border-radius: 4px; }
:root.brocante :is(.invite-note) { border-radius: 4px; }
:root.brocante :is(.toolbar) { border-radius: 4px; }
:root.brocante :is(.detail-tabs [role="tab"]) { border-radius: 4px 4px 0 0; }
:root.brocante :is(.detail-side) { border-radius: 4px; }
:root.brocante :is(.detail-panel .desc) { border-radius: 4px 4px 4px 4px; }
:root.brocante :is(.album-tile) { border-radius: 4px; }
:root.brocante :is(.stat) { border-radius: 4px; }
:root.brocante :is(.patch-board) { border-radius: 4px; }
:root.brocante :is(.profile-stat) { border-radius: 4px; }
:root.brocante :is(.showcase) { border-radius: 4px; }
:root.brocante :is(.showcase-slot) { border-radius: 4px; }
:root.brocante :is(.theme-preview) { border-radius: 4px; }
:root.brocante :is(.remb-slot) { border-radius: 4px; }
:root.brocante :is(.remb-slot-box) { border-radius: 4px; }
:root.brocante :is(main .trade-grid--cells > *) { border-radius: 4px; }
:root.brocante :is(.tag-row input) { border-radius: 4px; }
:root.brocante :is(.tag-new input) { border-radius: 4px; }
:root.brocante :is(.sel-tag select) { border-radius: 4px; }
:root.brocante :is(.remb-tag-note) { border-radius: 4px; }
:root.brocante :is(.box-filters) { border-radius: 4px; }
:root.brocante :is(.box-filters input[type="search"], .box-filters select) { border-radius: 4px; }
:root.brocante :is(.troc-steps li) { border-radius: 4px; }
:root.brocante :is(.trade-open-hit) { border-radius: 4px; }
:root.brocante :is(.trade-row-link) { border-radius: 4px; }
:root.brocante :is(.shelf-card) { border-radius: 4px; }
:root.brocante :is(.shelf-form input, .shelf-form textarea) { border-radius: 4px; }
:root.brocante :is(.shelf-picked) { border-radius: 4px; }
:root.brocante :is(.shelf-save) { border-radius: 4px; }
:root.brocante :is(.player-coll) { border-radius: 4px; }
:root.brocante :is(.atelier-icon) { border-radius: 4px; }
:root.brocante :is(.guide-tabs) { border-radius: 4px; }
:root.brocante :is(.guide-tabs [role="tab"]) { border-radius: 4px; }
:root.brocante :is(.room-page .room-request) { border-radius: 4px; }
:root.brocante :is(.room-deal .room-side) { border-radius: 4px; }
:root.brocante :is(.reveal-mode) { border-radius: 4px; }
:root.brocante :is(.copy-list button) { border-radius: 4px; }
:root.brocante :is(.repair-panel) { border-radius: 4px; }

/* ======== depuis css/v2-test.css ======== */
/* PAGES TEST du design v2 (2026-10-08) : test-collection.html et test-accueil.html (body.v2), js/v2-test.js.
   Même esprit « cozy » (thèmes, cadres, ombre pleine, Bagel Fat One) mais une hiérarchie plus travaillée :
   - un style « étiquette » (petites capitales espacées) pour les libellés, des chiffres en grand ;
   - 3 niveaux de profondeur : le mur (lumière douce), les panneaux (cadre + ombre pleine), les objets posés (socle,
     ils se soulèvent au survol) ;
   - la couleur de rareté enfin visible (étiquette sous la boîte), l'accent gardé pour l'action principale.
   Rien ici ne touche les vraies pages : toutes les règles sont sous body.v2. */
.v2 {
  --label-font: 800 .72rem/1.2 var(--font-body);
  --label-track: .14em;
  --spring: var(--ease-spring); /* (le ressort du site, css/site.css : boutons « jouets ») */
  --lift-dur: .22s;
}
/* ---- Fond : une lumière douce qui tombe du haut, l'ombre au pied du mur (Tweak « Fond : Uni » pour comparer) --- */
:root.v2:not(.v2-flat) body {
  background:
    radial-gradient(90% 55% at 50% -5%, color-mix(in srgb, var(--surface) 55%, transparent), transparent 70%),
    radial-gradient(120% 60% at 50% 110%, color-mix(in srgb, var(--drop) 55%, transparent), transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 13px, color-mix(in srgb, var(--wall-2) 35%, transparent) 13px 14px),
    repeating-linear-gradient(-45deg, transparent 0 13px, color-mix(in srgb, var(--wall-2) 35%, transparent) 13px 14px),
    var(--wall);
  background-attachment: fixed;
}
/* Libellé « étiquette ». */
.v2-eyebrow { margin: 0; font: var(--label-font); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-soft); }
/* ==== Collection =================================================================================================== */
/* ---- Bandeau : le titre en grand, les chiffres de la collection, l'avancement du set ---------------------------- */
.v2-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); grid-template-areas: "title set" "stats stats";
  gap: 22px 32px; align-items: end; margin: 20px 0 26px;
}
.v2-hero-title { grid-area: title; }
.v2-hero h1 { margin-top: 6px; font-size: clamp(2.9rem, 7.5vw, 5rem); line-height: .92; letter-spacing: -.005em;
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 75%, transparent); }
.v2-stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
.v2-stat {
  --dot: var(--t-mint);
  position: relative; display: flex; flex-direction: column-reverse; gap: 4px; padding: 14px 18px 14px;
  background: var(--surface); border: var(--frame-w) solid var(--frame); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-s);
}
.v2-stat:nth-child(2) { --dot: var(--t-butter); }
.v2-stat:nth-child(3) { --dot: var(--t-sky); }
.v2-stat:nth-child(4) { --dot: var(--t-lilac); }
/* Pastille de couleur dans le coin : chaque chiffre a sa couleur (comme les onglets des panneaux). */
.v2-stat::after { content: ''; position: absolute; top: 14px; right: 14px; width: 14px; height: 14px; border-radius: 5px;
  background: var(--dot); box-shadow: inset 0 0 0 2px var(--frame); }
.v2-stat dt { font: var(--label-font); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-soft); }
.v2-stat dd { margin: 0; font: 400 clamp(1.9rem, 3.6vw, 2.6rem)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.v2-set { grid-area: set; padding: 16px 18px 14px; background: var(--surface); border: var(--frame-w) solid var(--frame);
  border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-s); }
.v2-set-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.v2-set-top strong { font: 400 1.9rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.v2-gauge { height: 18px; }
.v2-set-count { margin-top: 8px; font-size: .86rem; font-weight: 700; color: var(--ink-soft); }
/* ---- Barre d'outils : recherche et tri, puis les filtres en pastilles ; les actions à part, à droite ------------- */
.v2-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 12px; margin-bottom: 26px; padding: 14px 16px;
  background: var(--surface); border: var(--frame-w) solid var(--frame); border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow);
}
.v2-tools { display: contents; }
.v2-tools-main { flex: 1 1 460px; display: flex; gap: 10px; min-width: 0; }
.v2-actions { order: 2; flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.v2-chips { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 2px dashed var(--line); }
/* Recherche : un grand champ arrondi avec sa loupe. */
.v2-search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.v2-search svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%);
  fill: none; stroke: var(--ink-soft); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.v2 .v2-search input { width: 100%; min-height: 48px; padding-left: 46px; border-radius: 999px; font-weight: 700; }
.v2 .v2-search input::placeholder { color: var(--ink-soft); opacity: .8; }
.v2-sort { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.v2-sort > span { font: var(--label-font); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-soft); }
.v2 .v2-sort select { min-height: 48px; border-radius: 999px; padding: 8px 16px; font-weight: 700; }
/* Filtres en pastilles : le libellé en petites capitales, la valeur à côté ; pleine quand le filtre est actif. */
.v2-chip,
.v2-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; border-radius: 999px;
  background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); color: var(--ink);
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.v2-chip { padding: 0 0 0 14px; }
.v2-chip > span { font: var(--label-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.v2 .v2-chip select {
  appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 32px 0 4px; border: 0; border-radius: 999px;
  background: transparent; box-shadow: none; font: 800 .92rem var(--font-body); color: var(--ink); cursor: pointer;
}
/* (2026-10-09, retour de l'utilisateur : un ovale rouge apparaissait autour de la liste cachée dans le filtre au clic.
   Le contour de focus va sur le filtre entier, à sa forme ; avant : outline 3px sur le select arrondi à 999px.) */
.v2 .v2-chip select:focus-visible { outline: none; }
.v2 .v2-chip:has(select:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.v2-chip::after { content: ''; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; margin-top: -6px; pointer-events: none;
  border-right: 2.5px solid var(--ink-soft); border-bottom: 2.5px solid var(--ink-soft); transform: rotate(45deg); }
.v2-chip:hover,
.v2-toggle:hover { box-shadow: inset 0 0 0 2px var(--frame); }
.v2-chip.is-set { background: var(--t-butter); box-shadow: inset 0 0 0 2px var(--frame); }
.v2-chip.is-set > span { color: var(--ink); }
.v2-chips-sep { width: 2px; height: 26px; margin: 0 4px; background: var(--line); border-radius: 2px; }
/* Interrupteurs (cases à cocher et « Voir les non trouvées ») : pastille qui se remplit, avec sa coche. */
.v2-toggle { padding: 0 16px; font: 800 .92rem var(--font-body); cursor: pointer; }
.v2-toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.v2-toggle:has(input:focus-visible),
.v2-toggle--btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.v2-toggle span::before,
.v2-toggle--btn::before { content: ''; display: inline-block; width: 0; }
.v2-toggle:has(input:checked),
.v2-toggle--btn[aria-pressed="true"] { background: var(--t-mint); box-shadow: inset 0 0 0 2px var(--frame); }
.v2-toggle:has(input:checked) span::before,
.v2-toggle--btn[aria-pressed="true"]::before { content: '✓'; width: 1.1em; font-weight: 900; }
.v2-toggle--btn { border: 0; }
.v2-filters-toggle { display: none; }
/* Actions : une seule pleine (Sélectionner), les autres douces. */
.v2-actions .btn { min-height: 44px; }
/* ---- Cases : la boîte posée sur un socle, et son étiquette de boutique dessous ------------------------------------ */
.v2 .card-grid.card-grid--cells { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 18px; }
.v2 main .card-grid.card-grid--cells > .coll-tile {
  padding: 22px 16px 0; overflow: clip; border-radius: var(--radius);
  background:
    radial-gradient(75% 55% at 50% 40%, color-mix(in srgb, var(--surface) 70%, transparent), transparent 75%),
    var(--surface-2);
  border: 2px solid var(--frame); box-shadow: 0 4px 0 var(--drop);
  transition: transform var(--lift-dur) var(--spring), box-shadow var(--lift-dur) var(--ease);
}
.v2 main .card-grid.card-grid--cells > .coll-tile:hover { box-shadow: 0 6px 0 var(--drop); transform: translateY(-2px); }
/* Socle : l'ombre ovale sous la boîte, qui s'étire quand la boîte se soulève. */
.v2 .coll-tile > .card-button { position: relative; transition: transform var(--lift-dur) var(--spring); }
.v2 .coll-tile > .card-button::before { content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -9px; height: 16px;
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--drop) 90%, transparent), transparent);
  transition: transform var(--lift-dur) var(--spring), opacity var(--lift-dur); }
.v2 .coll-tile { isolation: isolate; }
.v2 .coll-tile:hover > .card-button { transform: translateY(-7px) rotate(-1.2deg); }
.v2 .coll-tile:hover > .card-button::before { transform: translateY(7px) scale(.82); opacity: .7; }
/* Étiquette : bande pleine largeur, teintée par la rareté, filet du cadre au-dessus. */
.v2 .coll-cap {
  gap: 4px; margin: 20px -16px 0; padding: 10px 12px 12px; text-align: left;
  background: var(--r); color: var(--ink-dark); border-top: 2px solid var(--frame);
}
.v2 .coll-cap strong { min-height: 2.5em; font-size: .9rem; font-weight: 800; color: var(--ink-dark); }
.v2-cap-top { display: flex; align-items: center; gap: 8px; font: var(--label-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dark-soft); }
.v2-cap-top .pips { display: inline-flex; gap: 3px; }
.v2-cap-top .pips i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-dark); }
.v2-cap-top .pips i.on { background: var(--ink-dark); }
.v2-cap-top .pips--culte i { background: #F2C230; box-shadow: inset 0 0 0 1.5px #6B4D0C; }
/* L'état en pastille au bout de la ligne de rareté ; la console en petit texte sous le nom (même hauteur partout). */
.v2-cap-top .v2-mini { margin-left: auto; flex: none; letter-spacing: 0; text-transform: none; }
/* (Le nom de la rareté ne tient pas à côté de l'état dans une case : les 6 points et la couleur la disent déjà.) */
.v2-cap-top > span:not(.pips):not(.v2-mini) { display: none; }
.v2 .coll-cap .v2-cap-platform { font-size: .74rem; font-weight: 700; color: var(--ink-dark-soft); }
.v2-mini { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 800 .7rem/1.4 var(--font-body); white-space: nowrap;
  color: var(--ink-dark); background: color-mix(in srgb, #fff 55%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink-dark) 35%, transparent); }
.v2-mini[data-kind="mint"] { background: #DDF3E3; box-shadow: inset 0 0 0 1.5px #2F7A4E; color: #1F5536; }
.v2-mini[data-kind="sealed"] { background: #EADFF7; box-shadow: inset 0 0 0 1.5px #6A4FA0; color: #452F70; }
.v2-mini[data-kind="bad"] { background: #F8D9DC; box-shadow: inset 0 0 0 1.5px #A23A48; color: #6E1F2A; }
.v2-mini[data-kind="unknown"] { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink-dark) 30%, transparent); color: var(--ink-dark-soft); }
/* Tweak « Étiquettes : Sobres » : la case reste neutre, seuls les points portent la rareté. */
/* Boîtes non trouvées : case en creux, sans étiquette. */
.v2 main .card-grid.card-grid--cells > .missing-slot { border: 2px dashed var(--line); background: transparent; box-shadow: none; }
/* Tweak « Densité : Compacte ». */
/* Arrivée en cascade des cases (30 ms d'écart, 24 au plus), coupée par « Mouvement : Non » ou le réglage du système. */
@keyframes v2-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.v2:not(.v2-still) .card-grid--cells > * { animation: v2-rise .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
/* ==== Accueil ====================================================================================================== */
/* Panneaux : le titre devient un onglet de classeur posé sur le filet (au lieu de la bande colorée pleine largeur). */
.v2 .panel-head { background: var(--surface); align-items: flex-end; padding: 0 18px; border-bottom: var(--frame-w) solid var(--frame); }
.v2 .panel-head > h2,
.v2 .panel-head > summary > h2,
.v2 .quests-head > h2 {
  margin: 12px 0 calc(-1 * var(--frame-w)); padding: 8px 16px 7px; font-size: 1.2rem;
  background: var(--tab); border: var(--frame-w) solid var(--frame); border-bottom: 0; border-radius: 12px 12px 0 0;
}
.v2 .panel-head > small,
.v2 .panel-head > .text-btn { margin-bottom: 9px; }
.v2 .panel-head small { font: var(--label-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
/* Le grenier : en-tête en grand, une flaque de lumière chaude sur le carton, le plancher en perspective. */
.v2-home .attic > .panel-head { padding: 16px 22px 14px; align-items: center; background: var(--surface); }
.v2-home #attic-title { margin: 4px 0 0; padding: 0; border: 0; background: none; font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 75%, transparent); }
.v2-home .attic-room {
  background:
    radial-gradient(42% 48% at 50% 46%, color-mix(in srgb, var(--butter) 34%, transparent), transparent 72%),
    radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--surface) 40%, transparent), transparent 75%),
    var(--surface-2);
}
:root.dark.v2-home .attic-room { background:
    radial-gradient(42% 48% at 50% 46%, color-mix(in srgb, var(--butter) 16%, transparent), transparent 72%),
    var(--surface-2); }
/* Plancher : lattes fuyantes vers le fond (perspective), plus de profondeur que le quadrillage. */
.v2-home .attic-floor {
  height: 32%; transform-origin: 50% 100%; transform: perspective(500px) rotateX(38deg) scaleX(1.5);
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, color-mix(in srgb, var(--drop) 55%, transparent) 58px 60px),
    linear-gradient(180deg, color-mix(in srgb, var(--t-peach) 30%, var(--surface-2)), color-mix(in srgb, var(--t-peach) 55%, var(--surface-2)));
  border-top: 0; box-shadow: inset 0 14px 18px -10px color-mix(in srgb, var(--drop) 80%, transparent);
}
.v2-home .attic .open-actions { flex-direction: column; align-items: center; }
/* Bouton « Ouvrir le colis » : plus gros, avec un halo qui respire doucement. */
.v2-home .attic #open-btn { position: relative; font-size: 1.2rem; padding: 15px 38px; border-radius: 16px; }
.v2-home:not(.v2-still) .attic #open-btn:not([disabled])::after {
  content: ''; position: absolute; inset: -8px; border-radius: 22px; border: 2px solid var(--accent); opacity: 0; pointer-events: none;
  animation: v2-breathe 2.6s var(--ease) infinite;
}
@keyframes v2-breathe { 0% { opacity: .7; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.1); } }
/* ==== Panneau Tweaks (en bas à droite, caché quand il est fermé) =================================================== */
.v2-seg--wide { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
/* ==== Téléphone ==================================================================================================== */
@media (max-width: 860px) {
.v2-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "stats" "set"; gap: 16px; }
.v2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 760px) {
.v2-bar { padding: 12px; gap: 12px; }
.v2-tools-main { flex-basis: 100%; flex-wrap: wrap; }
.v2-search { flex-basis: 100%; }
.v2-filters-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 100%; min-height: 44px; border-radius: 999px; cursor: pointer;
    font: 800 .95rem var(--font-body); color: var(--ink); background: var(--surface-2); border: 2px solid var(--line); }
.v2-tools:not(.open) .v2-sort,
.v2-tools:not(.open) .v2-chips { display: none; }
.v2-sort { flex: 1 1 100%; }
.v2 .v2-sort select { flex: 1; min-width: 0; }
.v2-chips-sep { display: none; }
/* Actions : une rangée qui défile sous le doigt plutôt que trois lignes de boutons. */
.v2-actions { flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    margin: 0 -12px; padding: 2px 12px 6px; scroll-padding-inline: 12px; }
.v2-actions::-webkit-scrollbar { display: none; }
.v2-actions .btn { flex: none; padding: 8px 14px; }
.v2 .card-grid.card-grid--cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v2 main .card-grid.card-grid--cells > .coll-tile { padding: 16px 10px 0; }
.v2 .coll-cap { margin: 16px -10px 0; padding: 8px 10px 10px; }
.v2-stat { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
.v2 .card-grid--cells > * { animation: none !important; }
.v2-home .attic #open-btn::after { animation: none !important; display: none; }
.v2 .coll-tile:hover > .card-button { transform: none; }
}

/* ======== depuis css/explore.css ======== */
/* EXPLORATION de directions de design (2026-10-08) : pages test seulement (test-collection.html, test-accueil.html),
   choisies dans le panneau « Tweaks » (js/v2-test.js → classe dir-… sur <body>). Même concept (grenier cozy,
   collection rétro), mais polices, couleurs, formes et lumière différentes. Chaque direction redéfinit les jetons du
   site sur <body> (elle ignore donc le thème choisi par le joueur) puis ajuste quelques composants.
   - dir-zine    « Brocante imprimée » : catalogue de vide-grenier en risographie (papier, encre, rouge et bleu décalés).
   - dir-veillee « Veillée au grenier » : la nuit, sous la lampe ; bois sombre, lumière ambrée, serif élégant.
   - dir-console « Magazine 16-bit »  : la chambre d'ado des années 90, couleurs primaires, gros contours, pixels. */
/* ================================================================================================================== */
/* ==== A. Brocante imprimée (zine, risographie) ==================================================================== */
:root.dir-zine body {
  color-scheme: light;
  --wall: #EFE6D2; --wall-2: #E2D5B9; --surface: #FBF6EA; --surface-2: #F4ECDA;
  --ink: #1E1B2C; --ink-soft: #57516A; --line: #CDBF9F; --frame: #1E1B2C; --drop: #E8453C; --edge: #1E1B2C;
  --accent: #CC3329; --accent-ink: #FFF8EC; --bar: #FBF6EA; /* (#CC3329 : 4,9:1 avec le texte du bouton ; le rouge vif #E8453C reste pour les ombres) */ --bar-ink: #1E1B2C; --scrim: rgba(30, 27, 44, .5);
  --t-peach: #F7B9A6; --t-mint: #BFDCC4; --t-sky: #B9CDEB; --t-lilac: #D4C8E8; --t-rose: #F3B8C2; --t-butter: #F4C542;
  --danger-bg: #F8D2CC; --danger-ink: #8A1C14; --gold-ink: #8A5D0C; --ok-ink: #2F7A4E;
  --riso-blue: #2F5DA8;
  --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'Bricolage Grotesque', sans-serif; --font-hand: 'Space Mono', monospace;
  --radius: 4px; --radius-s: 3px; --frame-w: 1.5px;
  --shadow: 4px 4px 0 var(--drop); --shadow-s: 3px 3px 0 var(--drop);
  --label-font: 700 .7rem/1.2 'Space Mono', monospace; --label-track: .06em;
}
/* Papier : une trame de points (demi-teinte), sans lumière. */
:root.v2.dir-zine body { background: radial-gradient(circle at 1px 1px, rgba(30, 27, 44, .09) 1px, transparent 1.6px) 0 0 / 7px 7px, var(--wall); }
:root.dir-zine body::after { opacity: .1; mix-blend-mode: multiply; }
.dir-zine h1,
.dir-zine h2,
.dir-zine h3 { font-weight: 800; letter-spacing: -.03em; }
/* Encre décalée : le bleu imprimé un peu à côté du noir. */
.dir-zine .v2-hero h1 { font-size: clamp(3.2rem, 9vw, 6.2rem); line-height: .86; text-transform: uppercase;
  text-shadow: 4px 3px 0 color-mix(in srgb, var(--riso-blue) 70%, transparent); }
.dir-zine .logo-word { font-weight: 800; letter-spacing: -.04em; text-shadow: 2px 2px 0 color-mix(in srgb, var(--riso-blue) 70%, transparent); }
.dir-zine .logo-sub { font-family: 'Space Mono', monospace; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
/* En-tête : un double filet, comme une page imprimée. */
.dir-zine .site-header { border-bottom: 1.5px solid var(--ink); box-shadow: 0 3px 0 var(--wall), 0 4.5px 0 var(--ink); }
.dir-zine .site-nav a[aria-current="page"] { border-radius: 3px; }
.dir-zine .btn { border-radius: 3px; box-shadow: 3px 3px 0 var(--ink); font: 700 .82rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.dir-zine .btn:hover { box-shadow: 4px 4px 0 var(--ink); }
.dir-zine .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* Chiffres : des étiquettes de prix, avec leur trou. */
.dir-zine .v2-stat { border-style: solid; padding-top: 18px; }
.dir-zine .v2-stat::after { width: 11px; height: 11px; border-radius: 50%; background: var(--wall); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dir-zine .v2-stat dd,
.dir-zine .v2-set-top strong { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -.04em; }
.dir-zine .v2-stat:nth-child(odd) { rotate: -.6deg; }
.dir-zine .v2-stat:nth-child(even) { rotate: .5deg; }
.dir-zine .v2-gauge > span { background: repeating-linear-gradient(-45deg, var(--riso-blue) 0 4px, color-mix(in srgb, var(--riso-blue) 70%, #fff) 4px 8px); }
.dir-zine .v2-chip,
.dir-zine .v2-toggle,
.dir-zine .v2-search input,
.dir-zine .v2-sort select { border-radius: 3px; }
.dir-zine .v2-chip.is-set,
.dir-zine .v2-toggle:has(input:checked),
.dir-zine .v2-toggle--btn[aria-pressed="true"] { background: var(--t-butter); }
.dir-zine .v2-chips { border-top-style: dotted; }
/* Cases : des fiches de catalogue posées un peu de travers, qui se redressent au survol. */
.dir-zine main .card-grid.card-grid--cells > .coll-tile { border-radius: 3px; border-width: 1.5px; background: var(--surface); box-shadow: 4px 4px 0 var(--drop); }
.dir-zine main .card-grid.card-grid--cells > .coll-tile:nth-child(3n+1) { rotate: -.7deg; }
.dir-zine main .card-grid.card-grid--cells > .coll-tile:nth-child(3n+2) { rotate: .5deg; }
.dir-zine main .card-grid.card-grid--cells > .coll-tile:hover { rotate: 0deg; box-shadow: 6px 6px 0 var(--riso-blue); }
.dir-zine .coll-cap { border-top: 1.5px dashed var(--ink); }
.dir-zine .coll-cap strong { font-weight: 700; letter-spacing: -.01em; }
.dir-zine .v2-cap-platform { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.dir-zine .v2-mini { border-radius: 2px; font-family: 'Space Mono', monospace; }
/* Panneaux (accueil) : onglet en capitales tapées à la machine. */
.dir-zine .panel-head > h2,
.dir-zine .panel-head > summary > h2,
.dir-zine .quests-head > h2 { border-radius: 3px 3px 0 0; font: 700 .9rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.dir-zine #attic-title { font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; text-shadow: 3px 2px 0 color-mix(in srgb, var(--riso-blue) 70%, transparent); }
.dir-zine .v2-home .attic-room,
:root.dir-zine.v2-home .attic-room { background: radial-gradient(circle at 1px 1px, rgba(30, 27, 44, .1) 1px, transparent 1.6px) 0 0 / 7px 7px, var(--surface-2); }
.dir-zine .delivery-tag { border-width: 1.5px; border-radius: 2px; }
/* ================================================================================================================== */
/* ==== B. Veillée au grenier (nuit, lampe, bois) =================================================================== */
/* La lampe en haut à gauche, la pièce qui s'assombrit vers le bas, et la poussière qui flotte dans la lumière. */
@keyframes v2-dust { to { transform: translate(14px, -22px); } }
/* Chiffres : en grand serif, sans boîte, séparés par un filet. */
/* Cases : la boîte éclairée par la lampe, posée sur une planche d'étagère en bois ; la rareté en points lumineux. */
/* Panneaux (accueil) : titre serif en italique, sans onglet. */
/* ================================================================================================================== */
/* ==== C. Magazine 16-bit (chambre d'ado années 90) ================================================================ */
/* Fond : un damier pâle, comme une moquette de chambre. */
/* Chiffres : des blocs pleins de couleur, comme les encadrés d'un magazine. */
/* Jauge : des blocs, comme une barre de vie. */
/* Cases : cartouches blanches à gros contour ; l'étiquette de rareté en couleur vive, texte en pixels. */
/* Panneaux (accueil) : bande de titre en pixels. */

/* ======== depuis css/explore-2.css ======== */
/* EXPLORATION, 2ᵉ vague (2026-10-08, skills taste-skill + better-colors) : pages test seulement (Tweaks de js/v2-test.js).
   1. Modes clair / sombre des trois premières directions (css/explore.css) : body.mode-dark / body.mode-light.
   2. Trois directions plus audacieuses, chacune en clair et en sombre :
      - dir-cabinet « Cabinet de curiosités » : la collection exposée comme au musée (vert bouteille, os, ambre).
      - dir-scrap   « Tableau de liège »      : la collection punaisée au mur (photos instantanées, scotch, feutre).
      - dir-os      « Le PC familial »        : le vieil ordinateur retrouvé au grenier (fenêtres, reliefs, pixels). */
/* ==== 1. Modes des trois premières directions ===================================================================== */
/* Brocante, la nuit : imprimé à l'encre claire sur papier noir ; le rouge reste le même. */
:root.dir-zine.mode-dark body {
  color-scheme: dark;
  --wall: #17161F; --wall-2: #201F2A; --surface: #1F1E29; --surface-2: #191823;
  --ink: #F2EBDD; --ink-soft: #B9B1A2; --line: #3A3848; --frame: #F2EBDD; --edge: #F2EBDD; --drop: #E8453C;
  --accent: #FF5A4E; --accent-ink: #1A0A08; --bar: #1F1E29; --bar-ink: #F2EBDD;
  --t-peach: #6A3527; --t-mint: #2D4A36; --t-sky: #2B3F63; --t-lilac: #463C63; --t-rose: #5E2B37; --t-butter: #5C4A14;
  --riso-blue: #6E95E0; --danger-bg: #5A2A31; --danger-ink: #F8CDD3; --gold-ink: #F5D88C; --ok-ink: #8FE0B0;
}
:root.v2.dir-zine.mode-dark body { background: radial-gradient(circle at 1px 1px, rgba(242, 235, 221, .07) 1px, transparent 1.6px) 0 0 / 7px 7px, var(--wall); }
:root.dir-zine.mode-dark body::after { mix-blend-mode: soft-light; opacity: .25; }
:root.dir-zine.mode-dark.v2-home .attic-room { background: radial-gradient(circle at 1px 1px, rgba(242, 235, 221, .07) 1px, transparent 1.6px) 0 0 / 7px 7px, var(--surface-2); }
/* Veillée, le matin : la même pièce au lever du jour (lin pâle, bois clair, l'ambre devient l'accent). */
/* 16-bit, la nuit : l'écran de la télé dans la chambre ; contours clairs, couleurs foncées sous le texte. */
/* ==== 2.D Cabinet de curiosités =================================================================================== */
/* Vert bouteille et os, un seul accent ambre. Les pièces maîtresses (Mythique, Culte) prennent une vitrine double. */
/* Chiffres : une plaque de velours, d'un seul tenant, chiffres en grand. */
/* Vitrines : chaque boîte sur velours, éclairée d'en haut, avec son cartel (petite fiche crème) dessous. */
/* Panneaux (accueil) : titres Syne, filet fin ; l'onglet devient un soulignement ambre. */
/* ==== 2.E Tableau de liège ======================================================================================== */
/* Liège, photos instantanées scotchées, notes autocollantes, écriture au feutre ; accent bleu stylo-bille.
   Les objets posés (photos, notes, titre) restent en papier clair même en mode sombre : seule la pièce s'assombrit. */
/* Le titre : une bande de papier scotchée de travers. */
/* Chiffres : des notes autocollantes, un peu de travers. */
/* Les boîtes : photos instantanées (cadre blanc), nom écrit au feutre, un bout de scotch de la couleur de la rareté. */
/* Panneaux (accueil) : feuilles de papier, titre au feutre sur un morceau de scotch. */
/* ==== 2.F Le PC familial ========================================================================================== */
/* Fenêtres à barre de titre, boutons en relief, police pixel pour les titres ; bureau sarcelle, gris platine. */
/* Relief : clair en haut à gauche, sombre en bas à droite ; enfoncé = l'inverse. */
/* (Bouton principal : le cadre épais et le pointillé de focus des vieux systèmes, au lieu de la couleur.) */
/* Fenêtres : barre de titre bleue sur le titre, l'avancement, la barre d'outils et les panneaux. */
/* Les boîtes : petites fenêtres, barre de titre à la couleur de la rareté, barre d'état en bas. */
/* Panneaux (accueil) : la barre de titre de la fenêtre. */
/* ---- Commun aux modes sombres : les pastilles posées sur un pastel gardent une encre foncée. -------------------- */
:root.mode-dark:not(.dir-cozy) .card-count,
:root.mode-dark:not(.dir-cozy) .card-new { color: #3A2C30; }
/* ---- Liège : la vraie texture (assets/textures/liege.jpg, « Cork 001 » d'ambientCG, CC0), assombrie la nuit. ----- */
/* (Le liège réel est plus clair et plus rouge que l'ancien dégradé : une ombre portée plus marquée sous les papiers.) */

/* ======== depuis css/explore-5.css ======== */
/* EXPLORATION, finale à trois (2026-10-08) : Brocante (dir-zine), Papeterie (dir-washi, sur dir-carnet), Grenier cozy
   (dir-grenier). Retouches demandées par l'utilisateur :
   - modes sombres refaits : chauds (papier kraft foncé, cuir, bois) au lieu de noir et contours clairs, qui faisaient
     « futuriste » ; les pastels restent clairs, avec une encre foncée dessus (comme sur les vraies pages) ;
   - accueils de Brocante et Papeterie plus vivants (autant de couleur que la Collection) ;
   - Grenier cozy : cases d'inventaire toutes de la même taille, la boîte posée en bas (avant : hauteurs variables).
   Les versions précédentes restent dans css/explore.css, explore-2.css, explore-3.css et explore-4.css. */
/* ==== Brocante, mode sombre : papier kraft foncé, encre crème, pastels gardés ====================================== */
:root.dir-zine.mode-dark body {
  --wall: #2B2521; --wall-2: #332C27; --surface: #3A322C; --surface-2: #312A25;
  --ink: #F3E9DA; --ink-soft: #CBBFAE; --line: #4E443C; --frame: #8C7D6C; --edge: #1A1512; --drop: #7A2E25;
  --accent: #E0685A; --accent-ink: #2A1210; --bar: #3A322C; --bar-ink: #F3E9DA;
  --t-peach: #E3B49C; --t-mint: #A9CDB0; --t-sky: #A6BEDD; --t-lilac: #C2B5DA; --t-rose: #DDA9B3; --t-butter: #E3CB78;
  --riso-blue: #7FA3D8; --on-pastel: #2A2420;
}
:root.v2.dir-zine.mode-dark body { background: radial-gradient(circle at 1px 1px, rgba(243, 233, 218, .06) 1px, transparent 1.6px) 0 0 / 7px 7px, var(--wall); }
:root.dir-zine.mode-dark body::after { mix-blend-mode: soft-light; opacity: .18; }
.dir-zine.mode-dark .btn { box-shadow: 3px 3px 0 var(--edge); }
.dir-zine.mode-dark .btn:hover { box-shadow: 4px 4px 0 var(--edge); }
/* ==== Papeterie, mode sombre : carnet en cuir le soir (brun chaud, points clairs, couleurs poudrées gardées) ======= */
/* Pastels clairs en mode sombre : l'encre posée dessus reste foncée. */
:is(.dir-zine).mode-dark :is(.v2-chip.is-set, .v2-toggle:has(input:checked), .v2-toggle--btn[aria-pressed="true"]),
:is(.dir-zine).mode-dark :is(.v2-chip.is-set > span, .v2-chip.is-set select),
:is(.dir-zine).mode-dark :is(.panel-head > h2, .panel-head > summary > h2, .quests-head > h2),
:is(.dir-zine).mode-dark .site-nav a[aria-current="page"] { color: var(--on-pastel); }
/* ==== Accueils plus vivants : Brocante et Papeterie ================================================================ */
/* Le grenier : une trame de couleur, un plancher rayé pastel. */
:root.dir-zine.v2-home .attic-room,
:root.dir-zine.mode-dark.v2-home .attic-room { background:
  radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--riso-blue) 22%, transparent) 1.2px, transparent 1.8px) 0 0 / 8px 8px,
  radial-gradient(55% 60% at 50% 40%, color-mix(in srgb, var(--t-butter) 45%, transparent), transparent 72%), var(--surface-2); }
:root.dir-zine.v2-home .attic-floor { transform: none; height: 28%; border-top: var(--frame-w) solid var(--frame); box-shadow: none;
  background: repeating-linear-gradient(90deg, var(--t-rose) 0 44px, var(--t-butter) 44px 88px, var(--t-sky) 88px 132px, var(--t-mint) 132px 176px); }
/* Panneaux : bande de titre pastel pleine largeur (comme les étiquettes de la Collection), posés un peu de travers. */
.dir-zine.v2-home .panel-head { background: color-mix(in srgb, var(--tab) 45%, var(--surface)); }
.dir-zine.v2-home .home-side > .panel:nth-child(odd),
.dir-zine.v2-home .home-more > .panel:nth-child(even) { rotate: -.5deg; }
.dir-zine.v2-home .home-side > .panel:nth-child(even),
.dir-zine.v2-home .home-more > .panel:nth-child(odd) { rotate: .4deg; }
/* Derniers arrivages : de petites fiches de catalogue à la couleur de leur rareté. */
:is(.dir-zine).v2-home .w-shelf { gap: 14px; }
:is(.dir-zine).v2-home .w-arrival { position: relative; padding: 12px 10px 8px; background: color-mix(in srgb, var(--r, #E6DED6) 55%, var(--surface)); }
.dir-zine.v2-home .w-arrival { border: var(--frame-w) solid var(--frame); border-radius: 3px; box-shadow: 3px 3px 0 var(--drop); }
.dir-zine.v2-home .w-arrival:nth-child(odd) { rotate: -1.2deg; }
.dir-zine.v2-home .w-arrival:nth-child(even) { rotate: 1deg; }
:is(.dir-zine).v2-home .w-arrival figcaption { color: var(--ink-dark); font-weight: 700; }
/* Quêtes : chaque quête sur son ticket. */
:is(.dir-zine).v2-home .quest { padding: 8px 10px; background: var(--surface-2); }
.dir-zine.v2-home .quest { border: 1.5px dashed var(--line); border-radius: 3px; }
:is(.dir-zine).v2-home .quest.done { background: color-mix(in srgb, var(--t-mint) 50%, var(--surface)); }
:is(.dir-zine).v2-home .quest.done .quest-label { color: var(--ink); }
/* Semaine : les jours passés en pastilles de couleur. */
:is(.dir-zine).v2-home .week-days li.on .wd-dot { background: var(--t-mint); }
/* Papeterie : chaque panneau sur un papier de couleur poudrée, un bout de washi en coin ; grenier en papier à points. */
/* Le titre du grenier sur une large bande de washi. */
.dir-zine.v2-home #attic-title { display: inline-block; padding: 0 8px; background: var(--t-butter); color: #1E1B2C; rotate: -1deg; }
/* ==== Grenier cozy : cases d'inventaire régulières ================================================================= */
/* Toutes les cases ont la même forme ; la boîte est posée en bas, centrée, à 74 % de la largeur (88 % pour les boîtes
   larges PS1), donc elle ne déborde jamais. */
/* (Badges ×2, Scellée… restent dans le coin de la case.) */
/* Grenier cozy, mode sombre : le grenier en bois le soir (bruns chauds, lanterne orangée), au lieu du prune. */
/* (Pastilles posées sur un pastel, mode sombre : récompenses des quêtes, bouton d'aide, quête finie.) */
:is(.dir-zine).mode-dark :is(.quest-reward, .help-link, .theme-btn[aria-expanded="true"]) { color: var(--on-pastel); }
:is(.dir-zine).mode-dark .v2-home .quest.done,
:is(.dir-zine).mode-dark.v2-home .quest.done,
:is(.dir-zine).mode-dark.v2-home .quest.done .quest-label { color: var(--on-pastel); }
/* (Papeterie : le grenier garde son cadre ; le plancher reste à plat, dans le panneau.) */
:is(.dir-zine).mode-dark.v2-home .attic .open-note { color: var(--on-pastel); font-weight: 700; }

/* ======== depuis css/explore-6.css ======== */
/* EXPLORATION, retouches de la finale (2026-10-08, retours de l'utilisateur) :
   - accueil, toutes directions : plus d'effet « pièce » ni de plancher dans le grenier, case resserrée ; plus d'air
     entre les panneaux de droite (Ma semaine, Premiers pas, Quêtes du jour) ;
   - Brocante : étiquettes sous les boîtes neutres, la rareté en trait de couleur (au lieu de tout le bas teinté) ;
   - Papeterie : étiquettes neutres (le washi en haut porte déjà la rareté) ; titres de panneaux lisibles en sombre ;
   - Grenier cozy : la case d'inventaire ne déborde plus de sa case (box-sizing) et la boîte est centrée. */
/* ==== Accueil : le grenier sans pièce ni plancher =================================================================== */
:root.v2.v2-home .attic-floor { display: none; }
:root.v2.v2-home .attic-room { min-height: 0; padding: 26px 18px 24px; background: var(--surface-2) !important; box-shadow: none; }
/* (!important : chaque direction avait son décor de pièce) */
:root.v2.v2-home .attic .attic-stage { gap: 4px; }
@media (min-width: 961px) {
:root.v2.v2-home.v2-home .home--window .attic-room { min-height: 0; }
}
/* Les panneaux de droite respirent. */
:root.v2.v2-home .home--window .home-side { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 28px; }
:root.v2.v2-home .home-more { gap: 28px; }
/* ==== Brocante : étiquette neutre, rareté en trait de couleur ======================================================= */
.dir-zine:not(.dir-riso) .coll-cap { background: var(--surface); color: var(--ink); border-top: 1.5px dashed var(--line);
  box-shadow: inset 0 5px 0 var(--r); padding-top: 14px; }
.dir-zine:not(.dir-riso) .coll-cap strong { color: var(--ink); }
.dir-zine:not(.dir-riso) .v2-cap-top { color: var(--ink-soft); }
.dir-zine:not(.dir-riso) .v2-cap-top .pips i { box-shadow: inset 0 0 0 1.5px var(--r-edge, var(--ink)); }
.dir-zine:not(.dir-riso) .v2-cap-top .pips i.on { background: var(--r-edge, var(--ink)); }
.dir-zine:not(.dir-riso) .coll-cap .v2-cap-platform { color: var(--ink-soft); }
/* (Pastilles d'état : sur fond neutre, celles sans couleur à elles prennent le papier.) */
.dir-zine:not(.dir-riso) .v2-mini:not([data-kind="mint"]):not([data-kind="sealed"]):not([data-kind="bad"]) { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
/* Tweak « Étiquettes : Sobres » : même sans le trait. */
/* ==== Papeterie : étiquettes neutres, titres lisibles ============================================================== */
/* Titres des panneaux en sombre : un aplat de la couleur, rayures à peine visibles. */
/* ==== Grenier cozy : case d'inventaire contenue et boîte centrée ==================================================== */

/* ======== depuis css/explore-7.css ======== */
/* EXPLORATION, variantes du mode sombre (2026-10-08) : Tweaks « Sombre : palette » (js/v2-test.js → body.nuit-…),
   valables pour les trois directions (Brocante, Papeterie, Grenier cozy) quand le mode est sombre.
   Inspirations (palettes sombres connues pour leur douceur, et conseils « sombre chaud ») :
   - nuit-rose      : Rosé Pine (variante « Moon », rosepinetheme.com) : prune doux, pastels rosés et dorés.
   - nuit-macchiato : Catppuccin Macchiato (catppuccin.com) : bleu-gris doux, pastels lumineux.
   - nuit-gruvbox   : Gruvbox (thème rétro) : brun-gris chaud, couleurs de terre.
   - nuit-foret     : Everforest : vert sauge sombre, crème, comme une cabane en forêt.
   - nuit-pierre    : « pierre chaude » (charbon brun #1c1917, crème) avec des pastels éteints, le plus sobre.
   Règles appliquées : jamais de noir pur ni de blanc pur ; texte crème ; accents désaturés ; les pastels gardent une
   encre foncée (--on-pastel). Contrastes mesurés (texte ≥ 4,5:1). */
/* ---- Palettes --------------------------------------------------------------------------------------------------- */
:root.mode-dark.nuit-rose body {
  --wall: #232136; --wall-2: #2A273F; --surface: #2A273F; --surface-2: #26233A;
  --ink: #E0DEF4; --ink-soft: #A9A5C6; --line: #393552; --frame: #56526E; --drop: #17151F; --edge: #17151F;
  --accent: #EA9A97; --accent-ink: #232136; --bar: #2A273F; --bar-ink: #E0DEF4; --scrim: rgba(12, 10, 20, .6);
  --t-peach: #F2B8A0; --t-mint: #B5D6C3; --t-sky: #9CCFD8; --t-lilac: #C4A7E7; --t-rose: #EA9A97; --t-butter: #F6C177;
  --on-pastel: #232136; --riso-blue: #9CCFD8; --grid-line: rgba(224, 222, 244, .09); --stamp-blue: #9CCFD8; --stamp-red: #EB6F92;
  --slot: #232136; --slot-in: rgba(0, 0, 0, .45); --sun: rgba(246, 193, 119, .12);
}
:root.mode-dark.nuit-pierre body {
  --wall: #1C1917; --wall-2: #231F1D; --surface: #292524; --surface-2: #231F1D;
  --ink: #E7E1DA; --ink-soft: #A8A29E; --line: #3A3431; --frame: #57534E; --drop: #0F0D0C; --edge: #0F0D0C;
  --accent: #E07A4A; --accent-ink: #1C1917; --bar: #1C1917; --bar-ink: #E7E1DA; --scrim: rgba(8, 6, 5, .6);
  --t-peach: #E8B9A0; --t-mint: #B9CDB5; --t-sky: #B3C4D6; --t-lilac: #C9BEDB; --t-rose: #DDB3B6; --t-butter: #E3D0A0;
  --on-pastel: #1C1917; --riso-blue: #B3C4D6; --grid-line: rgba(231, 225, 218, .07); --stamp-blue: #B3C4D6; --stamp-red: #E08A80;
  --slot: #1F1B19; --slot-in: rgba(0, 0, 0, .4); --sun: rgba(224, 122, 74, .08);
}
/* ---- Communs à ces variantes ------------------------------------------------------------------------------------ */
/* Fond : la couleur unie de la palette, avec la texture propre à chaque direction (trame, points, rayons). */
:root.v2.mode-dark:is(.nuit-rose, .nuit-pierre).dir-zine body {
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.6px) 0 0 / 7px 7px, var(--wall); }
/* Les pastels (pastilles, onglets, filtres actifs, quêtes finies…) restent clairs, avec l'encre foncée, partout. */
:root.mode-dark:is(.nuit-rose, .nuit-pierre) :is(.v2-chip.is-set, .v2-chip.is-set > span, .v2-chip.is-set select, .v2-toggle:has(input:checked), .v2-toggle--btn[aria-pressed="true"], .panel-head > h2, .panel-head > summary > h2, .quests-head > h2, .site-nav a[aria-current="page"], .quest-reward, .help-link) { color: var(--on-pastel); }
/* Ombres pleines : un ton plus sombre que le fond (et non plus le rouge de Brocante, trop vif la nuit). */
:root.mode-dark:is(.nuit-rose, .nuit-pierre).dir-zine .btn { box-shadow: 3px 3px 0 var(--drop); }
:root.mode-dark:is(.nuit-rose, .nuit-pierre).dir-zine main .card-grid.card-grid--cells > .coll-tile { box-shadow: 4px 4px 0 var(--drop); }
/* Bord des cases de Brocante : le filet de la palette au lieu de la crème. */
:root.mode-dark:is(.nuit-rose, .nuit-pierre).dir-zine main .card-grid.card-grid--cells > .coll-tile { border-color: var(--frame); }
/* (Sans plancher, la note sous le colis est de nouveau sur le fond sombre : encre claire.) */
:root.mode-dark.v2-home .attic .open-note { color: var(--ink-soft); }

/* ======== depuis css/explore-8.css ======== */
/* EXPLORATION (2026-10-08, skill impeccable « layout ») : pages test seulement.
   1. Accueil, toutes directions : la case du colis devient une scène carrée, avec à côté une colonne d'infos
      (étiquette de livraison, puis les boutons). Priorité de lecture : le colis, puis « Ouvrir le colis », puis le reste ;
      la case a la même hauteur que la colonne de droite (avant : un grand rectangle presque vide).
      Seul l'écran « colis livré » change (#closed-view) ; l'ouverture et le bilan gardent leur mise en page.
   2. Brocante en sombre (Rosé, Pierre) : l'ombre décalée des boîtes et des cartes reprend une couleur (rose, terre cuite)
      au lieu de se fondre dans le fond. */
/* ==== 1. La case du colis ========================================================================================== */
:root.v2.v2-home .attic-room { padding: 18px; background: var(--surface) !important; }
:root.v2.v2-home #closed-view:not([hidden]) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage tag" "stage actions";
  grid-template-rows: auto 1fr; gap: 14px 22px; align-items: start; text-align: left;
}
/* (Le conteneur du colis s'efface : le colis et son étiquette se placent chacun dans la grille.) */
:root.v2.v2-home #closed-view .carton-spot { display: contents; }
/* La scène : un carré, le colis posé au centre, une lumière douce et la texture de la direction. */
:root.v2.v2-home #closed-view .attic-carton {
  grid-area: stage; position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%;
  border-radius: var(--radius-s); box-shadow: inset 0 0 0 var(--frame-w) var(--line);
  background: radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--t-butter) 45%, transparent), transparent 75%), var(--surface-2);
}
:root.v2.v2-home .attic .attic-carton .carton-scene { --W: 220px; --H: 139px; --D: 147px; }
/* L'étiquette de livraison : en tête de la colonne d'infos, droite, comme un ticket. */
:root.v2.v2-home #closed-view .delivery-tag { grid-area: tag; position: relative; left: auto; top: auto; width: auto; max-width: none; margin: 10px 0 0; transform: rotate(-1deg); }
:root.v2.v2-home #closed-view .delivery-tag:empty { display: none; }
/* Les actions : « Ouvrir le colis » pleine largeur, puis les deux actions secondaires côte à côte, puis la note. */
:root.v2.v2-home #closed-view .open-actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; align-self: start; }
:root.v2.v2-home #closed-view #open-btn { grid-column: 1 / -1; width: 100%; }
:root.v2.v2-home #closed-view .open-actions .btn-small { width: 100%; padding-inline: 10px; }
:root.v2.v2-home #closed-view .open-actions .btn-small[hidden] { display: none; }
:root.v2.v2-home #closed-view .open-note { grid-column: 1 / -1; margin: 4px 0 0; text-align: left; font-size: 1rem; }
/* (Quand une seule action secondaire est affichée, elle prend toute la ligne.) */
:root.v2.v2-home #closed-view .open-actions .btn-small:not([hidden]):only-of-type,
:root.v2.v2-home #closed-view .open-actions:not(:has(#open-all-btn:not([hidden]))) #shop-btn { grid-column: 1 / -1; }
/* Textures de la scène, par direction. */
:root.v2.v2-home.dir-zine #closed-view .attic-carton { background:
  radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--riso-blue) 20%, transparent) 1.2px, transparent 1.8px) 0 0 / 8px 8px,
  radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--t-butter) 55%, transparent), transparent 75%), var(--surface-2);
  box-shadow: inset 0 0 0 var(--frame-w) var(--frame); }
/* Téléphone : la scène, puis l'étiquette, puis les actions, les unes sous les autres. */
@media (max-width: 760px) {
:root.v2.v2-home #closed-view:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "tag" "actions"; }
:root.v2.v2-home #closed-view .attic-carton { max-width: 340px; justify-self: center; }
:root.v2.v2-home .attic .attic-carton .carton-scene { --W: 200px; --H: 126px; --D: 134px; }
}
/* ==== 2. Brocante en sombre : l'ombre décalée garde une couleur ===================================================== */
:root.mode-dark.nuit-rose.dir-zine body { --drop: #B4637A; }
:root.mode-dark.nuit-pierre.dir-zine body { --drop: #A8553A; }
:root.mode-dark:is(.nuit-rose, .nuit-pierre).dir-zine :is(.v2-stat, .v2-set, .v2-bar, .panel) { box-shadow: 4px 4px 0 var(--drop); }
:root.mode-dark:is(.nuit-rose, .nuit-pierre).dir-zine main .card-grid.card-grid--cells > .coll-tile { box-shadow: 4px 4px 0 var(--drop); }
:root.mode-dark:is(.nuit-rose, .nuit-pierre).dir-zine main .card-grid.card-grid--cells > .coll-tile:hover { box-shadow: 6px 6px 0 var(--drop); }
:root.mode-dark:is(.nuit-rose, .nuit-pierre).dir-zine.v2-home .w-arrival { box-shadow: 3px 3px 0 var(--drop); }
/* Retouches après inspection : le colis (vu de trois quarts, il penche à gauche) recentré optiquement dans son carré ;
   les deux actions secondaires l'une sous l'autre (côte à côte, leur texte passait sur trois lignes). */
:root.v2.v2-home #closed-view .attic-carton .carton-scene { translate: 14px -16px; }
:root.v2.v2-home #closed-view .open-actions { grid-template-columns: minmax(0, 1fr); }
:root.v2.v2-home #closed-view .open-actions .btn-small { min-height: 40px; }
/* (Note sous les boutons, en sombre : encre claire ; l'ancienne règle visait le plancher pastel, retiré.) */
:root.v2.v2-home.mode-dark #closed-view .open-note { color: var(--ink-soft); font-weight: 600; }
/* ---- Haut à droite de la case du colis (js/v2-test.js) : stock en jauge + Boutique, dans l'en-tête ---------------- */
:root.v2.v2-home .attic > .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.v2-attic-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
#attic:has(#closed-view[hidden]) .v2-attic-tools { display: none; }
.v2-stock { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 12px; border-radius: 999px;
  font: 700 .9rem var(--font-body); color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.v2-stock[hidden] { display: none; }
.v2-stock-gauge { display: inline-flex; gap: 3px; }
.v2-stock-gauge i { width: 9px; height: 13px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--frame); }
.v2-stock-gauge i.on { background: var(--accent); }
:root.v2.v2-home .v2-attic-tools #shop-btn { min-height: 40px; }
/* La note d'origine n'est plus répétée sous les boutons quand le stock est dans l'en-tête. */
:root.v2.v2-home #closed-view .open-note.v2-note-moved { display: none; }
/* La colonne à côté du colis : livraison puis boutons, centrés verticalement sur le carré. */
:root.v2.v2-home #closed-view:not([hidden]) { grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "stage ." "stage tag" "stage actions" "stage ."; }
:root.v2.v2-home #closed-view .delivery-tag { margin: 0; }
@media (max-width: 760px) {
:root.v2.v2-home #closed-view:not([hidden]) { grid-template-rows: auto; grid-template-areas: "stage" "tag" "actions"; }
.v2-attic-tools { justify-content: flex-start; }
}
:root.v2.v2-home .attic > .panel-head { flex-wrap: nowrap; }
:root.v2.v2-home .attic > .panel-head > div:first-child { flex: 0 1 auto; min-width: 0; }
.v2-attic-tools { margin-left: auto; flex-wrap: nowrap; }
@media (max-width: 760px) {
:root.v2.v2-home .attic > .panel-head { flex-wrap: wrap; }
.v2-attic-tools { margin-left: 0; flex-wrap: wrap; }
}
/* (Place dans l'en-tête : sans le petit libellé au-dessus du titre, et rien ne passe à la ligne.) */
:root.v2.v2-home .attic > .panel-head .v2-eyebrow { display: none; }
:root.v2.v2-home #attic-title,
.v2-stock > span:last-child,
:root.v2.v2-home .v2-attic-tools #shop-btn { white-space: nowrap; }
.v2-stock-gauge i { width: 7px; height: 12px; }

/* ======== depuis css/explore-9.css ======== */
/* EXPLORATION (2026-10-08, retours de l'utilisateur) : pages test seulement.
   1. Brocante et Papeterie en sombre : plus de grands aplats pastel (bandes de titre, fonds de panneaux, notes,
      fiches des arrivages) qui juraient avec le fond et gênaient la lecture. Les panneaux prennent la surface de la
      palette ; la couleur ne reste qu'en petites touches (trait sous les titres, washi, pastilles).
   2. Case du grenier : plus d'air entre le titre et le stock ; le stock devient un petit colis dessiné + le nombre +
      la jauge, la phrase entière en bulle au survol et au focus (js/v2-test.js). */
/* ==== 1. Sombres calmes =========================================================================================== */
:is(.dir-zine).mode-dark.v2-home .panel-head,
:is(.dir-zine).mode-dark .panel-head { background: var(--surface); }
:is(.dir-zine).mode-dark :is(.panel-head > h2, .panel-head > summary > h2, .quests-head > h2) {
  color: var(--ink) !important; background: none !important; border: 0; border-radius: 0; padding: 0 0 4px; margin: 12px 0 0; rotate: 0deg;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--tab) 80%, transparent); }
:is(.dir-zine).mode-dark .panel-head > summary > h2 .tuto-count { color: var(--ink-soft) !important; }
:is(.dir-zine).mode-dark #attic-title { color: var(--ink) !important; background: none !important; padding: 0; rotate: 0deg; }
:is(.dir-zine).mode-dark.v2-home .w-arrival { background: color-mix(in srgb, var(--r, #E6DED6) 14%, var(--surface-2)); }
:is(.dir-zine).mode-dark.v2-home .w-arrival figcaption { color: var(--ink-soft); }
:is(.dir-zine).mode-dark.v2-home .quest.done { background: color-mix(in srgb, var(--t-mint) 16%, var(--surface-2)); }
:is(.dir-zine).mode-dark.v2-home .quest.done .quest-label { color: var(--ink-soft) !important; }
/* Collection, Papeterie sombre : les notes de chiffres sur la surface, le washi garde la couleur. */
/* La scène du colis : sans halo pastel, juste la texture. */
:root.v2.v2-home.mode-dark.dir-zine #closed-view .attic-carton { background:
  radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 9%, transparent) 1.2px, transparent 1.8px) 0 0 / 8px 8px, var(--surface-2); box-shadow: inset 0 0 0 var(--frame-w) var(--line); }
/* ==== 2. En-tête de la case du grenier ============================================================================= */
:root.v2.v2-home .attic > .panel-head { gap: 12px 28px; }
.v2-stock { position: relative; gap: 8px; padding: 5px 12px 5px 8px; cursor: default; }
.v2-stock strong { font: 800 1rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.v2-stock-icon svg { display: block; width: 24px; height: 24px; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.v2-stock-icon .t { fill: #DDBE92; }
.v2-stock-icon .f { fill: #C9A374; }
.v2-stock-icon .s { fill: #A8834F; }
.v2-stock-icon .tape { fill: none; stroke: #F2EAD0; stroke-width: 2.4; }
/* La bulle : la phrase entière, sous le stock, au survol et au focus clavier. */
.v2-stock[data-tip]::after { content: attr(data-tip); position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: max-content; max-width: 260px;
  padding: 8px 12px; border-radius: 10px; font: 600 .85rem/1.35 var(--font-body); color: var(--surface); background: var(--ink);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); opacity: 0; translate: 0 -4px; pointer-events: none; transition: opacity .15s var(--ease), translate .15s var(--ease); }
.v2-stock[data-tip]:hover::after,
.v2-stock[data-tip]:focus-visible::after { opacity: 1; translate: 0 0; }
.v2-stock:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) {
.v2-stock[data-tip]::after { right: auto; left: 0; }
}

/* ======== depuis css/explore-10.css ======== */
/* EXPLORATION « Brocante Ciné » (2026-10-08) : la mise en page de Cinéclub (cineclub-tcg.fr, étudiée dans Chrome)
   habillée en Brocante (dir-zine, gardée dessous via BASE dans js/v2-test.js). Pages test seulement.
   - Barre latérale fixe à gauche : logo, menu en colonne avec icônes, et en bas l'aide, le thème, le compte, les jetons
     (comme la carte du joueur de Cinéclub). Sous 1000 px : l'en-tête habituel revient.
   - Accueil en grille de 12 colonnes : la case du colis (8) et la boîte du jour en vedette (4) côte à côte, comme le
     choix du paquet et la carte vedette de Cinéclub ; puis les derniers arrivages sur toute la largeur ; puis les
     panneaux (semaine, quêtes, premiers pas) en trois colonnes, etc. */
@media (min-width: 1000px) {
/* ==== Barre latérale =========================================================================================== */
:root.dir-cine body { padding-left: 236px; }
.dir-cine .site-header {
    position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: 236px; margin: 0; padding: 20px 14px 16px;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; overflow-y: auto;
    border-bottom: 0; border-right: 1.5px solid var(--frame); box-shadow: 4px 0 0 var(--drop);
  }
.dir-cine .logo { margin: 0 0 18px; padding: 0 8px; }
.dir-cine .menu-toggle { display: none; }
.dir-cine .site-nav { order: 2; display: flex !important; flex-direction: column; flex-wrap: nowrap; gap: 2px; width: 100%; padding: 0; background: none; box-shadow: none; }
.dir-cine .site-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 3px; color: var(--ink-soft); font-weight: 700; }
.dir-cine .site-nav a:hover { color: var(--ink); background: var(--surface-2); }
.dir-cine .site-nav a[aria-current="page"] { color: var(--ink); background: var(--t-butter); box-shadow: inset 0 0 0 1.5px var(--frame), 3px 3px 0 var(--drop); }
.dir-cine.mode-dark .site-nav a[aria-current="page"] { color: var(--on-pastel, #1E1B2C); }
/* Icônes du menu (traits fins, couleur du texte). */
.dir-cine .site-nav a::before { content: ''; flex: none; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.dir-cine .site-nav a[href="index.html"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-4.5L21 8v9l-9 4.5L3 17z'/%3E%3Cpath d='M3 8l9 4.5L21 8M12 12.5v9'/%3E%3C/svg%3E"); }
.dir-cine .site-nav a[href="collection.html"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.dir-cine .site-nav a[href="albums.html"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 1 6.5 18H20v3H6.5'/%3E%3C/svg%3E"); }
.dir-cine .site-nav a[href="echanges.html"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3.5-3.5M20 16H6l3.5 3.5'/%3E%3C/svg%3E"); }
.dir-cine .site-nav a[href="brocante.html"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5V4.5a1 1 0 0 1 1-1h8l8 8-9 9z'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3C/svg%3E"); }
.dir-cine .site-nav a[href="mini-jeux.html"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='11' rx='5'/%3E%3Cpath d='M7.5 10.5v4M5.5 12.5h4'/%3E%3Ccircle cx='16' cy='11.5' r='.9' fill='%23000'/%3E%3Ccircle cx='18' cy='13.8' r='.9' fill='%23000'/%3E%3C/svg%3E"); }
.dir-cine .site-nav a[href="profil.html"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-4 4-6 7.5-6s6.3 2 7.5 6'/%3E%3C/svg%3E"); }
.dir-cine .site-nav a:is([href="admin.html"], [href="rappels.html"]) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 6h14M5 12h14M5 18h9'/%3E%3C/svg%3E"); }
/* Le bas de la barre : aide et thème côte à côte, puis le compte et les jetons sur toute la largeur. */
.dir-cine .help-link { order: 3; margin-top: auto; }
.dir-cine .theme-pick { order: 3; margin-top: -46px; margin-left: 50px; }
.dir-cine .theme-menu { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; }
.dir-cine .account-link { order: 4; display: flex; justify-content: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: 3px; }
.dir-cine .tokens { order: 5; justify-content: flex-start; padding: 10px 12px; border-radius: 3px; }
.dir-cine .site-footer { margin-top: 32px; }
/* ==== Accueil en grille ======================================================================================== */
.dir-cine.v2-home main.home--window { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; padding-top: 28px; }
.dir-cine.v2-home .home-side,
.dir-cine.v2-home .home-more { display: contents; }
.dir-cine.v2-home .home--window > * { grid-column: span 12; }
.dir-cine.v2-home #attic { grid-column: span 8; order: 1; align-self: stretch; }
.dir-cine.v2-home #w-daily { grid-column: span 4; order: 2; align-self: stretch; }
.dir-cine.v2-home #w-arrivals { grid-column: span 12; order: 3; }
.dir-cine.v2-home #w-week { grid-column: span 4; order: 4; }
.dir-cine.v2-home #quests { grid-column: span 4; order: 5; }
.dir-cine.v2-home #tuto { grid-column: span 4; order: 6; }
.dir-cine.v2-home #w-trades { grid-column: span 4; order: 7; }
.dir-cine.v2-home #w-coll { grid-column: span 7; order: 8; }
.dir-cine.v2-home #w-market { grid-column: span 5; order: 9; }
.dir-cine.v2-home #w-feed { grid-column: span 12; order: 10; }
.dir-cine.v2-home .home--window > .panel { rotate: 0deg !important; }
/* La boîte du jour en vedette : la boîte en grand, ses infos dessous (comme la carte vedette de Cinéclub). */
.dir-cine.v2-home #w-daily .panel-body { height: calc(100% - 52px); }
.dir-cine.v2-home .w-daily-body { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; height: 100%; align-content: center; text-align: center; }
.dir-cine.v2-home .w-daily-body .w-box--big { width: min(170px, 70%); }
.dir-cine.v2-home .w-daily-info { align-items: center; }
}
/* Écrans moyens et petits : l'en-tête habituel ; l'accueil en une colonne, colis puis boîte du jour. */
@media (max-width: 999px) {
.dir-cine.v2-home main.home--window { display: flex; flex-direction: column; }
}
@media (min-width: 1000px) {
/* (Plus fort que la colonne de droite d'explore-6 : les panneaux passent tous dans la grille de l'accueil.) */
:root.v2.dir-cine.v2-home .home--window :is(.home-side, .home-more) { display: contents; }
/* Icône par défaut pour les autres liens du menu (Gestion…). */
.dir-cine .site-nav a:not([href="index.html"], [href="collection.html"], [href="albums.html"], [href="echanges.html"], [href="brocante.html"], [href="mini-jeux.html"], [href="profil.html"]) {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 6h14M5 12h14M5 18h9'/%3E%3C/svg%3E"); }
}
/* ---- Plus près du site (retour de l'utilisateur : « l'impression d'être éloigné ») -------------------------------
   Le contenu prend toute la largeur à côté de la barre (avant : 1200 px au plus, centré, avec de larges marges), et
   tout grandit d'un cran : texte, menu, boîtes, colis, boîte du jour. */
@media (min-width: 1000px) {
.dir-cine main { max-width: 1680px; padding: 22px 28px 56px; }
.dir-cine .site-footer { padding-inline: 28px; }
:root.dir-cine body { font-size: 1.0625rem; }
/* Menu : liens plus hauts, texte plus grand. */
.dir-cine .site-header { width: 252px; padding: 22px 16px 18px; }
:root.dir-cine body { padding-left: 252px; }
.dir-cine .logo-word { font-size: 2.2rem; }
.dir-cine .site-nav a { padding: 12px 14px; font-size: 1.02rem; }
.dir-cine .site-nav a::before { width: 20px; height: 20px; }
/* Collection : titre et chiffres plus présents, boîtes plus grandes. */
.dir-cine .v2-hero { margin: 8px 0 22px; }
.dir-cine .v2-stat dd { font-size: clamp(2.4rem, 3.4vw, 3.2rem); }
.dir-cine .card-grid.card-grid--cells { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 22px; }
.dir-cine .coll-cap strong { font-size: 1rem; }
/* Accueil : le colis et la boîte du jour en plus grand, les arrivages aussi. */
.dir-cine.v2-home main.home--window { gap: 26px; padding-top: 22px; }
:root.v2.dir-cine.v2-home .attic .attic-carton .carton-scene { --W: 280px; --H: 177px; --D: 187px; }
.dir-cine.v2-home #closed-view .delivery-tag { font-size: 1.2rem; }
.dir-cine.v2-home #closed-view #open-btn { font-size: 1.25rem; min-height: 60px; }
.dir-cine.v2-home .w-daily-body .w-box--big { width: min(220px, 74%); }
.dir-cine.v2-home .w-daily-name { font-size: 1.6rem; }
.dir-cine.v2-home .w-shelf { gap: 18px; }
.dir-cine .panel-head > h2,
.dir-cine .panel-head > summary > h2,
.dir-cine .quests-head > h2 { font-size: 1rem; }
}
@media (min-width: 1000px) {
/* (Le colis tient dans son carré : un peu plus de place pour la scène, colis un peu moins grand.) */
:root.v2.dir-cine.v2-home #closed-view:not([hidden]) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
:root.v2.dir-cine.v2-home .attic .attic-carton .carton-scene { --W: 244px; --H: 154px; --D: 163px; }
}

/* ======== depuis css/explore-11.css ======== */
/* EXPLORATION, variantes de la case du colis (2026-10-08) : Tweaks « Case du colis » (js/v2-test.js → body.colis-…).
   Toutes directions, clair et sombre. Seul l'écran « colis livré » (#closed-view) change.
   - colis-carre : carré du colis + colonne livraison/boutons (version précédente, css/explore-8.css).
   - colis-scene : une scène pleine largeur, comme une affiche ; l'étiquette épinglée en haut à gauche, les boutons
                   posés en bas au centre, sur la scène.
   - colis-bon   : le colis à gauche ; à droite un bon de livraison en papier (numéro, stock en petits colis,
                   boutons), avec une ligne prédécoupée.
   - colis-pile  : tout centré et compact : le colis, l'étiquette posée dessus, la rangée de petits colis du stock,
                   les deux boutons côte à côte. */
/* Rangée de petits colis du stock (créée par js/v2-test.js) : cachée sauf pour « Bon » et « Pile ». */
.v2-stock-row { display: none; }
.v2-stock-row { align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font: 700 .9rem var(--font-body); color: inherit; }
.v2-stock-parcels { display: inline-flex; gap: 2px; }
.v2-stock-parcels svg { width: 20px; height: 20px; stroke-width: 1.2; stroke-linejoin: round; stroke: currentColor; opacity: .35; }
.v2-stock-parcels svg .t,
.v2-stock-parcels svg .f,
.v2-stock-parcels svg .s { fill: none; }
.v2-stock-parcels svg.on { opacity: 1; stroke: #5A4630; }
.v2-stock-parcels svg.on .t { fill: #DDBE92; }
.v2-stock-parcels svg.on .f { fill: #C9A374; }
.v2-stock-parcels svg.on .s { fill: #A8834F; }
/* (Le stock est alors dans la case : l'en-tête ne garde que la Boutique.) */
/* ==== Scène ======================================================================================================= */
:root.v2.v2-home.colis-scene #closed-view:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "stage"; }
:root.v2.v2-home.colis-scene #closed-view .attic-carton { grid-area: stage; aspect-ratio: auto; height: clamp(340px, 34vw, 430px); }
:root.v2.v2-home.colis-scene #closed-view .attic-carton .carton-scene { translate: 0 -34px; }
:root.v2.v2-home.colis-scene #closed-view .delivery-tag { grid-area: stage; z-index: 3; align-self: start; justify-self: start; margin: 18px 0 0 18px; max-width: 260px; transform: rotate(-3deg); }
:root.v2.v2-home.colis-scene #closed-view .open-actions { grid-area: stage; z-index: 3; align-self: end; justify-self: center; margin-bottom: 18px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
:root.v2.v2-home.colis-scene #closed-view #open-btn { width: auto; padding-inline: 36px; }
:root.v2.v2-home.colis-scene #closed-view .open-actions .btn-small { width: auto; }
/* ==== Bon de livraison ============================================================================================ */
/* Le bon : trois morceaux d'un même papier (en-tête, stock, actions), une ligne prédécoupée sous l'en-tête. */
/* ==== Pile ======================================================================================================== */
/* L'étiquette posée en travers, en haut à droite du colis. */
/* Téléphone : « Bon » repasse en colonne (colis, puis le bon) ; « Scène » et « Pile » gardent leur forme, en plus petit. */
@media (max-width: 760px) {
:root.v2.v2-home.colis-scene #closed-view .attic-carton { height: 360px; }
:root.v2.v2-home.colis-scene #closed-view .delivery-tag { max-width: 200px; font-size: .9rem; }
}
/* (Scène : un peu plus haute, le colis remonté pour laisser la place aux boutons.) */
:root.v2.v2-home.colis-scene #closed-view .attic-carton { height: clamp(380px, 36vw, 460px); }
:root.v2.v2-home.colis-scene #closed-view .attic-carton .carton-scene { translate: 0 -62px; }

/* ======== depuis css/explore-12.css ======== */
/* EXPLORATION, case du colis, 2ᵉ tour (2026-10-09) : Tweaks « Case du colis ». Toutes directions, clair et sombre.
   Retours : garder Scène et Pile, enlever le halo jaune, moins de vide, des éléments en plus pour rendre la case
   attrayante. Éléments ajoutés (js/v2-test.js), tous tirés de vraies données :
   - .v2-colis-info : compte à rebours du prochain colis (ou « stock plein »), prime du jour, colis bonus/achetés ;
   - .v2-colis-rar  : « 5 boîtes par colis, de Commune à Mythique » avec les couleurs de rareté ;
   - .v2-stock-row  : le stock en petits colis (en rangée, ou en pile).
   Variantes : scene, pile (retravaillées), etagere, affiche, empile (nouvelles). */
/* ==== Communs ===================================================================================================== */
/* Plus de halo jaune : la scène garde seulement la texture de la direction. */
:root.v2.v2-home #closed-view .attic-carton { background: var(--surface-2); }
:root.v2.v2-home.dir-zine #closed-view .attic-carton { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 9%, transparent) 1.2px, transparent 1.8px) 0 0 / 8px 8px, var(--surface-2); }
.v2-colis-info,
.v2-colis-rar { display: none; margin: 0; }
.v2-colis-info { list-style: none; padding: 0; flex-direction: column; gap: 6px; }
.v2-colis-info li { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px; border-radius: 999px;
  font: 600 .88rem/1.25 var(--font-body); color: var(--ink); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: inset 0 0 0 1.5px var(--line); }
.v2-colis-info li strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.v2-colis-info svg,
.v2-colis-rar svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-colis-rar { align-items: center; flex-wrap: wrap; gap: 6px; font: 700 .86rem var(--font-body); color: var(--ink-soft); }
.v2-colis-rar i { width: 13px; height: 13px; border-radius: 50%; background: var(--r); box-shadow: inset 0 0 0 1.5px var(--r-edge, var(--frame)); }
/* Quand la case porte le stock, l'en-tête ne garde que la Boutique. */
:root.v2.v2-home:is(.colis-scene) .v2-stock { display: none; }
:root.v2.v2-home:is(.colis-scene) #closed-view .v2-stock-row:not([hidden]) { display: flex; }
/* Pile de petits colis (Étagère, Empilés) : seuls les colis présents, empilés en pyramide, le nombre dessous. */
/* ==== Scène (retravaillée) : l'étiquette en haut à gauche, le stock en haut à droite, en bas les infos et les boutons */
:root.v2.v2-home.colis-scene #closed-view:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "stage" "foot"; row-gap: 12px; }
:root.v2.v2-home.colis-scene #closed-view .attic-carton { grid-area: stage; aspect-ratio: auto; height: clamp(380px, 34vw, 440px); }
:root.v2.v2-home.colis-scene #closed-view .attic-carton .carton-scene { translate: 0 -40px; }
:root.v2.v2-home.colis-scene #closed-view .delivery-tag { grid-area: stage; align-self: start; justify-self: start; margin: 16px 0 0 16px; }
:root.v2.v2-home.colis-scene #closed-view .v2-stock-row { grid-area: stage; z-index: 3; align-self: start; justify-self: end; margin: 16px 16px 0 0; padding: 6px 12px;
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: inset 0 0 0 1.5px var(--line); }
:root.v2.v2-home.colis-scene #closed-view .v2-stock-parcels svg { width: 18px; height: 18px; }
:root.v2.v2-home.colis-scene #closed-view .v2-colis-info:not([hidden]) { display: flex; grid-area: stage; z-index: 3; align-self: end; justify-self: start; margin: 0 0 16px 16px; }
:root.v2.v2-home.colis-scene #closed-view .open-actions { grid-area: stage; align-self: end; justify-self: end; margin: 0 16px 16px 0; }
:root.v2.v2-home.colis-scene #closed-view .v2-colis-rar { display: flex; grid-area: foot; justify-content: center; }
/* ==== Pile (retravaillée) : centré et serré ; sous le colis, une seule ligne stock + boutons, puis les infos ======= */
/* ==== Étagère : le colis posé sur une planche, le stock empilé à côté, l'étiquette épinglée au mur ================= */
/* ==== Affiche : le numéro de livraison en gros titre au-dessus du colis, les raretés en légende ===================== */
/* ==== Empilés : le colis à ouvrir devant, la pile du stock juste à côté, sur le sol ================================ */
/* Boutons des variantes en ligne : largeur naturelle. */
:root.v2.v2-home:is(.colis-scene) #closed-view #open-btn { width: auto; padding-inline: 34px; grid-column: auto; }
:root.v2.v2-home:is(.colis-scene) #closed-view .open-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
:root.v2.v2-home:is(.colis-scene) #closed-view .open-actions .btn-small { width: auto; }
/* Téléphone : tout en colonne, centré ; la pile et les infos sous le colis. */
@media (max-width: 760px) {
:root.v2.v2-home:is(.colis-scene) #closed-view:not([hidden]) {
    grid-template-areas: "stage" "stock" "info" "foot" "act"; justify-items: center; row-gap: 12px; }
:root.v2.v2-home:is(.colis-scene) #closed-view .attic-carton { height: 320px; }
:root.v2.v2-home:is(.colis-scene) #closed-view .v2-stock-row { grid-area: stock; translate: none; margin: 0; justify-self: center; }
:root.v2.v2-home:is(.colis-scene) #closed-view .v2-colis-info:not([hidden]) { grid-area: info; justify-self: center; align-items: center; margin: 0; }
:root.v2.v2-home:is(.colis-scene) #closed-view .open-actions { grid-area: act; justify-self: center; justify-content: center; margin: 0; }
}
/* ---- Scène, après inspection : le colis un peu plus petit et plus haut, les boutons au centre sous le colis ;
   les infos passent sous la scène, à gauche, et la ligne des raretés à droite (elles chevauchaient le colis). */
:root.v2.v2-home.colis-scene .attic .attic-carton .carton-scene { --W: 214px; --H: 135px; --D: 143px; }
:root.v2.v2-home.colis-scene #closed-view .attic-carton .carton-scene { translate: 0 -54px; }
:root.v2.v2-home.colis-scene #closed-view .open-actions { justify-self: center; margin: 0 0 18px; }
:root.v2.v2-home.colis-scene #closed-view .v2-colis-info:not([hidden]) { grid-area: foot; flex-direction: row; flex-wrap: wrap; margin: 0; align-self: center; }
:root.v2.v2-home.colis-scene #closed-view .v2-colis-rar { justify-self: end; align-self: center; }
/* Même gabarit de colis pour Étagère et Empilés (la planche et la pile ont besoin de place). */
/* (Scène : la ligne des raretés sur sa propre ligne, centrée, sous les infos. Étagère : étiquette moins large, les
   boutons sur une seule ligne.) */
:root.v2.v2-home.colis-scene #closed-view:not([hidden]) { grid-template-rows: auto auto auto; grid-template-areas: "stage" "foot" "rar"; }
:root.v2.v2-home.colis-scene #closed-view .v2-colis-rar { grid-area: rar; justify-self: center; }
:root.v2.v2-home.colis-scene #closed-view .v2-colis-info:not([hidden]) { justify-self: center; justify-content: center; }
/* ---- Scène : le colis, élément principal de la page, grandit avec l'écran (2026-10-09) ------------------------------
   Taille liée à la largeur de la fenêtre (20 % de la largeur, entre 220 et 400 px de face), proportions du colis
   gardées ; la scène grandit avec lui. Avant : 214 px quelle que soit la taille de l'écran. */
:root.v2.v2-home.colis-scene .attic .attic-carton .carton-scene { --W: clamp(220px, 20vw, 400px); --H: calc(var(--W) * .632); --D: calc(var(--W) * .668); }
:root.v2.v2-home.colis-scene #closed-view .attic-carton { height: clamp(400px, 37vw, 640px); }
:root.v2.v2-home.colis-scene #closed-view .attic-carton .carton-scene { translate: 0 calc(-1 * clamp(40px, 4.4vw, 84px)); }
:root.v2.v2-home.colis-scene #closed-view #open-btn { font-size: clamp(1.15rem, 1.1vw, 1.4rem); min-height: clamp(54px, 4vw, 66px); padding-inline: clamp(34px, 3vw, 52px); }
:root.v2.v2-home.colis-scene #closed-view .delivery-tag { font-size: clamp(1.05rem, 1vw, 1.3rem); max-width: clamp(220px, 18vw, 320px); }
@media (max-width: 760px) {
:root.v2.v2-home.colis-scene .attic .attic-carton .carton-scene { --W: 210px; }
}
/* (Après inspection en 1920 px : colis un peu moins large, remonté, et étiquette moins large, pour qu'ils ne
   chevauchent ni l'étiquette ni les boutons.) */
:root.v2.v2-home.colis-scene .attic .attic-carton .carton-scene { --W: clamp(220px, 17vw, 340px); }
:root.v2.v2-home.colis-scene #closed-view .attic-carton { height: clamp(400px, 36vw, 620px); }
:root.v2.v2-home.colis-scene #closed-view .attic-carton .carton-scene { translate: 0 calc(-1 * clamp(44px, 5.2vw, 104px)); }
:root.v2.v2-home.colis-scene #closed-view .delivery-tag { max-width: clamp(210px, 14vw, 260px); }

/* ======== depuis css/brocante-pages.css ======== */
/* Design « Brocante Ciné », les pages une à une (2026-10-09). Écrit à la main ; fondu dans css/brocante.css par
   scripts/build-brocante.mjs (relancer le script après une retouche). Tout est sous :root.brocante : sans le design
   Brocante (js/theme.js, DESIGN = 'cozy'), rien ici ne s'applique.
   1. Socle commun à toutes les pages : titres de page, lien « Comment ça marche ? », barres de filtres (.toolbar),
      onglets, cartes de section (.ui-section / .ui-group), cases de boîtes (.trade-grid--cells), pastilles.
   2. Le Troc (echanges.html). 3. La fiche du jeu (js/detail.js). */
/* ==== 1. Socle commun ============================================================================================= */
/* Titre de page : comme « Ma collection » (capitales grasses, encre bleue décalée). */
:root.brocante .page-head { margin: 6px 0 22px; align-items: flex-end; }
:root.brocante .page-head h1 { font: 800 clamp(2.8rem, 5.4vw, 4.8rem)/.92 var(--font-display); letter-spacing: -.04em; text-transform: uppercase;
  text-shadow: 4px 3px 0 color-mix(in srgb, var(--riso-blue) 70%, transparent); }
:root.brocante .page-head p { color: var(--ink-soft); }
/* « Comment ça marche ? » : une petite étiquette tapée à la machine. */
:root.brocante .help-chip { gap: 8px; padding: 5px 12px 5px 5px; border-radius: 3px; font: 700 .76rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--frame), 3px 3px 0 var(--drop); }
:root.brocante .help-chip::before { border-radius: 2px; font: 800 .9rem/1 var(--font-display); color: var(--accent-ink); background: var(--accent); }
:root.brocante .help-chip:hover { box-shadow: inset 0 0 0 1.5px var(--frame), 4px 4px 0 var(--drop); }
/* Barres de recherche et de filtres : une carte encadrée, ombre décalée, libellés à la machine. */
:root.brocante .toolbar { padding: 16px 18px; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--frame), 4px 4px 0 var(--drop); }
:root.brocante .toolbar .field { font: 700 .7rem/1.2 'Space Mono', monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
:root.brocante .toolbar :is(input, select) { border-radius: 3px; border-width: 1.5px; font: 600 .95rem var(--font-body); text-transform: none; letter-spacing: 0; }
:root.brocante .toolbar .check { font-weight: 700; }
/* Onglets : des intercalaires de classeur posés sur un filet. */
:root.brocante .account-tabs { gap: 4px; margin-bottom: 22px; border-bottom: 1.5px solid var(--frame); }
:root.brocante .account-tabs button { flex: 0 1 auto; padding: 10px 18px 9px; border-radius: 3px 3px 0 0; font: 700 .8rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); background: transparent; box-shadow: none; }
:root.brocante .account-tabs button:hover { color: var(--ink); background: var(--surface-2); }
:root.brocante .account-tabs button[aria-selected="true"] { color: var(--ink); background: var(--surface); margin-bottom: -1.5px;
  box-shadow: inset 0 0 0 1.5px var(--frame), inset 0 3px 0 var(--accent); clip-path: inset(-4px -4px 1.5px -4px); }
/* Cartes de section et groupes. */
:root.brocante .ui-section { border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--frame), 4px 4px 0 var(--drop); }
:root.brocante .ui-section .trade-h,
:root.brocante .ui-section > h2 { font: 800 1.35rem/1.1 var(--font-display); letter-spacing: -.02em; }
:root.brocante .ui-group { border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
:root.brocante .ui-group-title { font: 700 .7rem 'Space Mono', monospace; letter-spacing: .06em; }
/* Cases de boîtes (Troc, profil d'un joueur, choix d'une boîte…) : comme les cases de la Collection. */
:root.brocante main .trade-grid--cells { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
:root.brocante main .trade-grid--cells > * { padding: 34px 12px 0; border-radius: 3px; background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--frame), 4px 4px 0 var(--drop); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
:root.brocante main .trade-grid--cells > :hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--frame), 6px 6px 0 var(--drop); }
:root.brocante .trade-grid--cells .trade-cap { margin: 16px -12px 0; padding: 12px 12px 12px; text-align: left; border-top: 1.5px dashed var(--line);
  box-shadow: inset 0 5px 0 var(--r, var(--line)); }
:root.brocante .trade-grid--cells .trade-cap strong { min-height: 2.5em; font-size: .92rem; font-weight: 700; }
:root.brocante .trade-grid--cells .trade-cap small { min-height: 2.5em; font-size: .76rem; }
/* Pastille « Vous ne l'avez pas », « Souhaitée »… : un tampon. */
:root.brocante .trade-note { border-radius: 2px; padding: 2px 7px; font: 700 .62rem/1.5 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .03em;
  color: #1E1B2C; background: var(--t-mint); box-shadow: inset 0 0 0 1.5px #1E1B2C; }
:root.brocante .tile-zoom { border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--frame); }
:root.brocante .tile-zoom:hover,
:root.brocante .tile-zoom:focus-visible { background: var(--t-butter); color: #1E1B2C; }
/* Case choisie (choix de boîtes pour un troc…). */
:root.brocante .trade-grid--cells > .trade-tile.is-selected { box-shadow: inset 0 0 0 3px var(--accent), 4px 4px 0 var(--drop); }
/* États vides. */
:root.brocante .empty { border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--frame), 4px 4px 0 var(--drop); }
:root.brocante .empty h2 { font-weight: 800; letter-spacing: -.02em; }
/* ==== 2. Le Troc ================================================================================================== */
:root.brocante .troc-intro { margin: 0 0 14px; }
:root.brocante .troc-mine { font: 700 .78rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
:root.brocante [data-panel] > .muted { font: 700 .75rem 'Space Mono', monospace; letter-spacing: .03em; text-transform: uppercase; margin: 18px 0 14px; }
:root.brocante .trade-list { gap: 14px; }
@media (min-width: 1000px) {
:root.brocante.dir-cine main .trade-grid--cells { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 22px; }
}
/* Sombre : la page en cours dans la barre latérale n'est plus un aplat pastel (retour de l'utilisateur sur les
   pastels qui jurent la nuit) mais un fond teinté d'accent. */
@media (min-width: 1000px) {
:root.brocante.mode-dark.dir-cine .site-nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
}
/* ==== 3. Fenêtres et fiche du jeu ================================================================================= */
/* Toutes les fenêtres : coins nets, cadre et ombre décalée. */
:root.brocante dialog { border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--frame), 6px 6px 0 var(--drop); }
:root.brocante .dialog-close { border-radius: 3px; }
/* Fiche du jeu (js/detail.js), sans toucher au code : le nom passe en en-tête sur toute la largeur (.detail-info devient
   transparent pour la grille), la boîte et ses boutons à gauche, les onglets à droite ; dans « Ma collection », les
   groupes se rangent côte à côte au lieu de s'empiler (retour de l'utilisateur : « tout est en ligne à droite »). */
:root.brocante #detail-dialog { width: min(1080px, 94vw); max-width: min(1080px, 94vw); padding: 26px 28px 28px; }
@media (min-width: 761px) {
:root.brocante .detail { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "head head" "side tabs" "side panel"; gap: 0 32px; }
:root.brocante .detail-panel { align-self: start; }
:root.brocante .detail-info { display: contents; }
:root.brocante .detail-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 22px; padding: 0 150px 18px 0;
    border-bottom: 1.5px dashed var(--line); }
:root.brocante .detail-side { grid-area: side; align-self: start; }
:root.brocante .detail-tabs { grid-area: tabs; margin: 0; }
:root.brocante .detail-panel { grid-area: panel; }
:root.brocante .detail-panel[data-tab="coll"]:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}
:root.brocante .detail-head h2 { flex: 1 1 100%; margin: 0; font: 800 clamp(2rem, 3vw, 2.7rem)/1 var(--font-display); letter-spacing: -.035em; }
:root.brocante .detail-meta { font: 700 .78rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
:root.brocante .detail-rarity { margin: 0; border-radius: 3px; font: 700 .78rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em;
  color: #1E1B2C; background: var(--r, var(--surface-2)); box-shadow: inset 0 0 0 1.5px #1E1B2C; }
:root.brocante .detail-rarity .pips i { box-shadow: inset 0 0 0 1.5px #1E1B2C; }
:root.brocante .detail-rarity .pips i.on { background: #1E1B2C; }
:root.brocante .detail-head .rarity-note { flex: 1 1 100%; margin: 0; }
/* La colonne de la boîte : une fiche en creux, boutons en clair (pas de capitales à la machine : ils passaient sur
   trois lignes). */
:root.brocante .detail-side { padding: 16px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
:root.brocante .detail-side .detail-actions .btn { font: 700 .95rem/1.25 var(--font-body); text-transform: none; letter-spacing: 0; min-height: 46px; }
:root.brocante .detail-side .detail-actions p { color: var(--ink-soft); }
/* Onglets : les mêmes intercalaires que le reste du site. */
:root.brocante .detail-tabs { gap: 4px; border-bottom: 1.5px solid var(--frame); }
:root.brocante .detail-tabs [role="tab"] { padding: 10px 16px 9px; margin-bottom: -1.5px; border: 0; border-radius: 3px 3px 0 0; font: 700 .8rem 'Space Mono', monospace;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
:root.brocante .detail-tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--frame), inset 0 3px 0 var(--accent);
  clip-path: inset(-4px -4px 1.5px -4px); }
:root.brocante .detail-panel { padding-top: 18px; gap: 16px; }
/* Description du jeu : un encadré en creux (au lieu du trait de couleur sur le côté). */
:root.brocante .detail-panel .desc { border: 0; border-radius: 3px; padding: 14px 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
/* Étoile du favori et « Fermer » en haut à droite, au carré. */
:root.brocante .fav-toggle { border-radius: 3px; top: 26px; right: 118px; }
:root.brocante #detail-dialog .dialog-close { top: 26px; right: 28px; }
@media (max-width: 760px) {
/* (Téléphone : l'étoile et « Fermer » sur la même ligne, en haut.) */
:root.brocante .fav-toggle { top: 16px; right: auto; left: 16px; }
:root.brocante #detail-dialog .dialog-close { top: 16px; right: 16px; }
:root.brocante #detail-dialog { padding: 20px 16px; }
}
/* ==== 4. Page d'un échange (echange.html) et pastilles d'état des trocs ============================================ */
/* Les grilles des côtés d'un échange et de l'encart « À l'échange / Ses souhaits » gardent de petites cases (la règle
   des grandes cases du Troc les faisait passer à une boîte géante par ligne). */
:root.brocante main .trade-side-grid.trade-grid--cells { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
:root.brocante.room-page main .room-help .trade-side-grid.trade-grid--cells,
:root.brocante main.room-page .room-help .trade-side-grid.trade-grid--cells { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
:root.brocante main .trade-side-grid.trade-grid--cells > * { padding-top: 30px; }
:root.brocante .room-page .page-head h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
:root.brocante .remb-back { font: 700 .78rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
/* Pastilles d'état (En négociation, Accepté…) : des tampons. */
:root.brocante .trade-badge { border-radius: 2px; padding: 2px 8px; font: 700 .7rem/1.5 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em;
  color: #1E1B2C; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px currentColor; }
:root.brocante .trade-badge--big { font-size: .82rem; padding: 6px 12px; }
:root.brocante:is(.mode-dark) .trade-badge:not(.leading) { color: var(--ink); }
:root.brocante .status-accepted .trade-badge,
:root.brocante .trade-badge.leading { color: #12301F; background: #BFE6CB; }
:root.brocante :is(.status-pending, .status-open, .status-requested) .trade-badge,
:root.brocante .room-page #status { color: #3A2608; background: #F6E3A0; }
/* Fil des messages et champ d'écriture. */
:root.brocante .thread-form input { border-radius: 3px; border-width: 1.5px; }
:root.brocante .thread li { border-radius: 3px; }
/* ==== 5. La Brocante (brocante.html, js/brocante.js) =============================================================== */
/* Les ventes : des fiches de marché encadrées, prix en grand, compte à rebours à la machine. */
:root.brocante .sale-card { border-radius: 3px; border-width: 1.5px; box-shadow: 4px 4px 0 var(--drop); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
:root.brocante .sale-card:hover,
:root.brocante .sale-card:focus-visible { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--drop); }
:root.brocante .sale-price strong { font: 800 1.5rem/1 var(--font-display); letter-spacing: -.03em; }
:root.brocante .sale-time { font: 700 .78rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .03em; }
:root.brocante .sale-bid input,
:root.brocante .account-form select { border-radius: 3px; border-width: 1.5px; }
:root.brocante .sale-head { margin-bottom: 18px; align-items: flex-end; }
:root.brocante .sale-head .trade-tabs { margin-bottom: 0; }
/* Enchères dans la fiche d'une vente. */
:root.brocante .bid-row { border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--line); }
:root.brocante .bid-row.is-best { box-shadow: inset 0 0 0 2px var(--ok-ink); }
:root.brocante .sale-dialog { width: min(820px, 94vw); }
/* Page vide : un message encadré au lieu d'une ligne grise. */
:root.brocante #grid > p.muted:only-child,
:root.brocante .sale-grid > p.muted:only-child { grid-column: 1 / -1; padding: 22px; border-radius: 3px; text-align: center;
  font: 700 .8rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em; border: 1.5px dashed var(--line); }
/* ==== 6. Autres onglets du site : Albums (liens) et page « ? » ===================================================== */
:root.brocante .album-tabs,
:root.brocante .guide-tabs { gap: 4px; margin: 0 0 22px; padding: 0; border-radius: 0; background: none; box-shadow: none; border-bottom: 1.5px solid var(--frame); }
:root.brocante .album-tabs a,
:root.brocante .guide-tabs [role="tab"] { min-height: 0; padding: 10px 16px 9px; border: 0; border-radius: 3px 3px 0 0; font: 700 .8rem 'Space Mono', monospace;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); background: transparent; box-shadow: none; text-decoration: none; }
:root.brocante .album-tabs a:hover,
:root.brocante .guide-tabs [role="tab"]:hover { color: var(--ink); background: var(--surface-2); }
:root.brocante .album-tabs a[aria-current="true"],
:root.brocante .guide-tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--surface); margin-bottom: -1.5px;
  box-shadow: inset 0 0 0 1.5px var(--frame), inset 0 3px 0 var(--accent); clip-path: inset(-4px -4px 1.5px -4px); }
/* ==== 7. Ouverture d'un colis et bilan (accueil, js/ouvrir.js) ===================================================== */
/* Pendant l'ouverture, le grenier prend toute la largeur et les autres panneaux s'effacent (comme avant la grille
   Ciné : la grille rendait la boîte du jour et les arrivages visibles à côté). */
:root.brocante.v2-home main.home.opening { display: flex; }
:root.brocante.v2-home main.home.opening :is(.home-side, .home-more) { display: none !important; }
:root.brocante.v2-home main.home.opening #attic { width: 100%; }
/* Révélation : les infos de la boîte en encre Brocante, l'interrupteur Animée / Rapide au carré. */
:root.brocante .reveal-mode { border-radius: 3px; }
:root.brocante .reveal-mode button { border-radius: 2px; font: 700 .76rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .03em; }
:root.brocante .reveal-counter { font: 700 .8rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
:root.brocante .reveal-info h2,
:root.brocante .reveal-info h3 { font-weight: 800; letter-spacing: -.035em; }
:root.brocante .bilan-head h2 { font-weight: 800; letter-spacing: -.035em; text-transform: uppercase; }
/* Plateau de la révélation : la trame Brocante au lieu du halo jaune (retiré aussi de la case du colis). */
:root.brocante .reveal-stage { border-radius: 3px; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 8%, transparent) 1.2px, transparent 1.8px) 0 0 / 8px 8px, var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--line); }
/* ==== 8. Contrastes relevés par l'audit (2026-10-09, toutes les pages, trois thèmes) =============================== */
/* Sombre : les états « choisi » ne sont plus des aplats pastel sous un texte clair, mais un fond teinté d'accent. */
:root.brocante.mode-dark .account-link[aria-current="page"],
:root.brocante.mode-dark .account-link:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--ink); }
:root.brocante.mode-dark .theme-option:has(input:checked) { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
:root.brocante.mode-dark .reveal-tag.is-new { color: var(--on-pastel, #1E1B2C); }
/* L'initiale de l'avatar (fond clair de la couleur du joueur) garde une encre foncée. */
:root.brocante .profile-initial { color: #1E1B2C; }
/* Écusson bronze : une encre bronze plus foncée sur fond clair (l'ancienne était faite pour le sombre). */
:root.brocante:not(.mode-dark) .patch.bronze figcaption { color: #8A4F22; }
:root.brocante.mode-dark .turn-option:has(input:checked) { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
:root.brocante.mode-dark .reveal-mode button[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
/* ==== 9. Téléphone (vérification du 2026-10-09) ==================================================================== */
@media (max-width: 760px) {
/* Accueil, case « Scène » : une seule colonne, l'étiquette sous le colis à taille normale, les infos centrées. */
:root.brocante.v2-home.colis-scene #closed-view:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
    grid-template-areas: "stage" "tag" "stock" "info" "act" "rar"; justify-items: center; row-gap: 12px; }
:root.brocante.v2-home.colis-scene #closed-view .attic-carton { height: 300px; }
:root.brocante.v2-home.colis-scene #closed-view .attic-carton .carton-scene { translate: 0 -10px; }
:root.brocante.v2-home.colis-scene #closed-view .delivery-tag { grid-area: tag; justify-self: center; align-self: auto; margin: 0; max-width: 300px; font-size: 1rem; transform: rotate(-1deg); }
:root.brocante.v2-home.colis-scene #closed-view .v2-stock-row { grid-area: stock; justify-self: center; margin: 0; }
:root.brocante.v2-home.colis-scene #closed-view .v2-colis-info:not([hidden]) { grid-area: info; justify-self: stretch; flex-direction: column; align-items: center; margin: 0; }
:root.brocante.v2-home.colis-scene #closed-view .open-actions { grid-area: act; justify-self: center; justify-content: center; margin: 0; }
:root.brocante.v2-home.colis-scene #closed-view .v2-colis-rar { grid-area: rar; justify-content: center; }
:root.brocante.v2-home.colis-scene #closed-view #open-btn { font-size: 1.1rem; min-height: 52px; }
/* Cases de boîtes : deux par ligne (une seule boîte géante par ligne avant). */
:root.brocante main .trade-grid--cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:root.brocante main .trade-grid--cells > * { padding: 30px 8px 0; }
:root.brocante .trade-grid--cells .trade-cap { margin: 12px -8px 0; padding: 10px 8px; }
/* Titres de page un peu moins grands. */
:root.brocante .page-head h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
}
@media (max-width: 760px) {
/* (Le colis tient dans la scène sur téléphone.) */
:root.brocante.v2-home.colis-scene .attic .attic-carton .carton-scene { --W: 186px; }
}

/* ---- Accueil : Ma semaine et les quêtes à droite du colis (demande de l'utilisateur, 2026-10-09) -------------------
   Avant : la boîte du jour à droite du colis, Ma semaine / Premiers pas / Quêtes en ligne sous les arrivages.
   Maintenant : la colonne .home-side (Ma semaine, Échanges en attente, Premiers pas, Quêtes du jour) à droite du colis,
   la boîte du jour descend sur la ligne de Ma collection en bref et de la Brocante. Sans aucune fenêtre dans la colonne
   (joueur non connecté), la boîte du jour reprend sa place à côté du colis. */
@media (min-width: 1000px) {
:root.v2.dir-cine.v2-home .home--window .home-side { display: flex; flex-direction: column; gap: 26px; grid-column: span 4; order: 2; align-self: start; min-width: 0; }
:root.v2.dir-cine.v2-home .home--window .home-side:not(:has(> :not([hidden]))) { display: none; }
/* La boîte du jour à gauche sur deux lignes ; Ma collection en bref puis la Brocante à côté d'elle. */
:root.v2.dir-cine.v2-home #w-daily { order: 4; grid-column: span 4; grid-row: span 2; }
:root.v2.dir-cine.v2-home #w-coll { order: 5; grid-column: span 8; }
:root.v2.dir-cine.v2-home #w-market { order: 6; grid-column: span 8; align-self: stretch; }
:root.v2.dir-cine.v2-home #w-feed { order: 7; }
:root.v2.dir-cine.v2-home .home--window:not(:has(.home-side > :not([hidden]))) #w-daily { order: 2; }
}

/* ==== 10. Albums et étagères (2026-10-09, retour de l'utilisateur : « les éléments flottent, ça manque de couleur ») ====
   Un album et une étagère ont l'en-tête de la Collection (.v2-hero : grand titre, avancement, chiffres en étiquettes) et
   leurs boîtes en cases (js/cell-tile.js) dans une carte ; la création d'étagère est rangée en trois cartes. */
:root.brocante .album-hero,
:root.brocante .shelf-hero { margin: 6px 0 26px; }
:root.brocante .album-hero-title,
:root.brocante .shelf-hero-title { display: flex; align-items: center; gap: 24px; min-width: 0; }
:root.brocante .album-hero-title > div:last-child,
:root.brocante .shelf-hero-title > .shelf-head-info { min-width: 0; }
:root.brocante .album-hero-badge { flex: none; width: clamp(96px, 11vw, 136px); }
:root.brocante .album-hero-badge svg { width: 100%; height: auto; display: block; }
:root.brocante :is(.album-hero, .shelf-hero) h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); overflow-wrap: anywhere; }
:root.brocante .album-hero-desc,
:root.brocante .shelf-hero .shelf-desc { margin: 10px 0 0; max-width: 60ch; color: var(--ink-soft); font-weight: 600; }
:root.brocante .shelf-hero .shelf-head-cover { flex: none; width: clamp(110px, 12vw, 150px); rotate: -2deg; }
:root.brocante .shelf-hero .shelf-head-cover .card { --w: 100%; }
:root.brocante .shelf-hero .detail-actions { margin-top: 14px; }
:root.brocante .shelf-hero .v2-eyebrow .player-link { color: var(--ink); }
:root.brocante .shelf-head { display: block; margin: 0; }
/* Les chiffres en mots (« Publique », « Or ») un peu plus petits que les nombres. */
:root.brocante .v2-stat dd:not(:empty) { overflow-wrap: anywhere; }
:root.brocante #album-level,
:root.brocante .shelf-hero .v2-stat:last-child dd { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
/* Cases : une boîte pas trouvée est une case en creux, son étiquette éteinte. */
:root.brocante main .card-grid.card-grid--cells > .coll-tile.is-missing { background: transparent; border-style: dashed; border-color: var(--line); box-shadow: none; }
:root.brocante main .card-grid.card-grid--cells > .coll-tile.is-missing .coll-cap { background: transparent; }
:root.brocante .coll-tile.is-missing .coll-cap :is(strong, .v2-cap-platform) { color: var(--ink-soft); }
:root.brocante .coll-tile.is-missing .missing-slot { background: none; border: 0; box-shadow: none; }
:root.brocante .coll-tile .slot-lock span { font-size: .72rem; }
/* Étagère classée : le numéro en tampon dans le coin de la case. */
:root.brocante .cell-rank { position: absolute; z-index: 6; top: 10px; left: 10px; min-width: 38px; height: 38px; padding: 0 8px; display: grid; place-items: center;
  border-radius: 3px; font: 800 1.2rem/1 var(--font-display); letter-spacing: -.03em; color: #1E1B2C; background: var(--t-butter);
  box-shadow: inset 0 0 0 1.5px #1E1B2C, 2px 2px 0 var(--drop); rotate: -4deg; }
:root.brocante .coll-tile:has(.cell-rank) { padding-top: 40px; }
/* Création d'étagère : les trois cartes, la sélection sur un fond en creux, le catalogue en cases (plus de défilement). */
:root.brocante #shelf-edit > h1 { font: 800 clamp(2.2rem, 4.6vw, 3.8rem)/.95 var(--font-display); letter-spacing: -.04em; margin: 6px 0 22px; }
:root.brocante .shelf-edit-card .shelf-form { margin-bottom: 4px; }
:root.brocante .ui-section .shelf-h { margin: 14px 0 6px; }
:root.brocante .shelf-picked { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); border: 0; }
:root.brocante .shelf-results { max-height: none; overflow: visible; margin-bottom: 4px; }
:root.brocante .shelf-results > .pick-more { grid-column: 1 / -1; justify-self: center; }
:root.brocante .trade-grid--cells > .trade-tile.is-missing > .card,
:root.brocante .trade-grid--cells > .trade-tile.is-missing > :first-child { opacity: .55; filter: grayscale(.7); }
:root.brocante #shelf-edit .shelf-save { border-radius: 4px; }
@media (max-width: 760px) {
:root.brocante .album-hero-title,
:root.brocante .shelf-hero-title { flex-direction: column; align-items: flex-start; gap: 14px; }
:root.brocante .album-hero-badge { width: 92px; }
:root.brocante .shelf-hero .shelf-head-cover { width: 110px; }
:root.brocante .shelf-head { text-align: left; justify-items: stretch; }
}
/* (Dans une case, l'étiquette dit déjà « Non trouvée » : le cadenas seul sur la boîte.) */
:root.brocante .cell-tile .slot-lock span { display: none; }
/* Formulaire de l'étagère : les champs à gauche, les deux réglages dans un groupe à droite (pas tout en une colonne). */
@media (min-width: 900px) {
:root.brocante .shelf-edit-card .shelf-form { max-width: none; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 28px; align-items: start; }
:root.brocante .shelf-edit-card .shelf-form > .field { grid-column: 1; }
:root.brocante .shelf-edit-card .shelf-switches { grid-column: 2; grid-row: 1 / span 2; }
}
:root.brocante .shelf-edit-card .shelf-switches { gap: 12px; padding: 14px 16px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
:root.brocante .shelf-edit-card .shelf-form :is(input, textarea) { border-radius: 3px; }
/* Le catalogue : des cases plus petites que dans les pages (on en parcourt beaucoup). */
:root.brocante main .shelf-results.trade-grid--cells { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
:root.brocante main .shelf-results.trade-grid--cells > * { padding-top: 26px; }

/* ==== 11. Premiers pas (2026-10-09) : le tuto en chapitres ===========================================================
   Page premiers-pas.html : en-tête comme la Collection, puis une carte par chapitre (bande de couleur en haut, étapes
   cochées, la prochaine mise en avant avec « Y aller », récompense en tampon). Accueil : résumé de taille fixe. */
:root.brocante .tuto-hero { margin: 6px 0 26px; }
:root.brocante .tuto-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
:root.brocante .tuto-hero-lead { margin: 10px 0 12px; max-width: 56ch; color: var(--ink-soft); font-weight: 600; }
/* (Deux colonnes remplies l'une après l'autre : les chapitres n'ont pas la même hauteur, pas de trous.) */
:root.brocante .tuto-chapters { columns: 2 440px; column-gap: 24px; }
:root.brocante .tuto-chapters > .tuto-chapter { break-inside: avoid; margin-bottom: 24px; }
:root.brocante .tuto-chapter { --tab-c: var(--t-mint); margin: 0 0 24px; padding-top: 10px; scroll-margin-top: 20px;
  box-shadow: inset 0 0 0 1.5px var(--frame), inset 0 10px 0 var(--tab-c), 4px 4px 0 var(--drop); }
:root.brocante .tuto-chapter[data-tab="peach"] { --tab-c: var(--t-peach); }
:root.brocante .tuto-chapter[data-tab="butter"] { --tab-c: var(--t-butter); }
:root.brocante .tuto-chapter[data-tab="sky"] { --tab-c: var(--t-sky); }
:root.brocante .tuto-chapter[data-tab="lilac"] { --tab-c: var(--t-lilac); }
:root.brocante .tuto-chapter[data-tab="rose"] { --tab-c: var(--t-rose); }
:root.brocante .tuto-chapter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 4px; }
:root.brocante .tuto-chapter-head h2 { margin: 0; font: 800 1.45rem/1.1 var(--font-display); letter-spacing: -.02em; }
:root.brocante .tuto-chip { flex: none; padding: 3px 10px; border-radius: 2px; font: 700 .74rem/1.4 'Space Mono', monospace; letter-spacing: .03em;
  color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--frame); }
:root.brocante .tuto-chip.is-done { color: #1E1B2C; background: var(--t-mint); box-shadow: inset 0 0 0 1.5px #1E1B2C; rotate: -3deg; text-transform: uppercase; }
:root.brocante .tuto-chapter-lead { margin: 0 0 14px; color: var(--ink-soft); font-weight: 600; }
/* Les étapes : une ligne chacune (case, texte, bouton), filet pointillé entre elles. */
:root.brocante .tuto-steps { list-style: none; margin: 0; padding: 0; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
:root.brocante .tuto-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; }
:root.brocante .tuto-step + .tuto-step { border-top: 1.5px dashed var(--line); }
:root.brocante .tuto-check { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 3px; font-weight: 900;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--frame); }
:root.brocante .tuto-step.is-done .tuto-check { color: #1E1B2C; background: var(--t-mint); box-shadow: inset 0 0 0 1.5px #1E1B2C; }
:root.brocante .tuto-step-body { display: grid; gap: 3px; min-width: 0; }
:root.brocante .tuto-step-body strong { font-weight: 800; }
:root.brocante .tuto-step-body small { color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }
:root.brocante .tuto-progress { font: 700 .8rem 'Space Mono', monospace; color: var(--ink-soft); }
:root.brocante .tuto-step.is-done .tuto-step-body strong { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* La prochaine étape : surlignée, son bouton en avant (les autres « Y aller » restent discrets). */
:root.brocante .tuto-step.is-next { background: var(--surface); }
:root.brocante .tuto-step.is-next .tuto-check { box-shadow: inset 0 0 0 2px var(--accent); }
:root.brocante .tuto-step:not(.is-next) .tuto-go { opacity: .75; }
:root.brocante .tuto-go { white-space: nowrap; }
:root.brocante .tuto-chapter-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; }
:root.brocante .tuto-reward { display: grid; gap: 2px; margin: 0; }
:root.brocante .tuto-reward strong { font: 800 1.1rem var(--font-display); letter-spacing: -.01em; }
:root.brocante .tuto-chapter.is-done { box-shadow: inset 0 0 0 1.5px var(--line), inset 0 10px 0 var(--tab-c), 4px 4px 0 var(--drop); }
:root.brocante .tuto-chapter.is-done .tuto-steps { opacity: .8; }
@media (max-width: 520px) {
:root.brocante .tuto-step { grid-template-columns: 26px minmax(0, 1fr); }
:root.brocante .tuto-go { grid-column: 2; justify-self: start; }
}
/* Accueil : le résumé (taille fixe ; avant, un panneau dépliable qui grandissait). */
:root.brocante #tuto .tuto-bar { margin-bottom: 14px; }
:root.brocante .quests .tuto-stamps { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
:root.brocante .tuto-stamp { display: inline-block; padding: 4px 9px 4px 11px; border-radius: 2px; font: 700 .76rem/1.4 var(--font-body); text-decoration: none;
  color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--frame); }
/* (Pastille de couleur du chapitre devant le nom, comme les onglets.) */
:root.brocante .tuto-stamp::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; vertical-align: 0;
  background: var(--tab-c, var(--t-mint)); box-shadow: inset 0 0 0 1.5px var(--frame); }
:root.brocante .tuto-stamp[data-tab="peach"] { --tab-c: var(--t-peach); }
:root.brocante .tuto-stamp[data-tab="butter"] { --tab-c: var(--t-butter); }
:root.brocante .tuto-stamp[data-tab="sky"] { --tab-c: var(--t-sky); }
:root.brocante .tuto-stamp[data-tab="lilac"] { --tab-c: var(--t-lilac); }
:root.brocante .tuto-stamp[data-tab="rose"] { --tab-c: var(--t-rose); }
:root.brocante .tuto-stamp:hover { background: var(--surface-2); }
:root.brocante .tuto-stamp.is-done { color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--line); }
:root.brocante .tuto-next { margin: 14px 0 0; font-size: .88rem; color: var(--ink-soft); }
:root.brocante .tuto-next a { font-weight: 800; color: var(--ink); }
/* Premiers pas sur l'accueil : une bande pleine largeur sous le colis et la colonne de droite (la case du grenier ne
   s'allonge plus pour suivre la colonne) ; dedans, l'avancement, les tampons des chapitres puis la prochaine étape. */
@media (min-width: 1000px) {
:root.v2.dir-cine.v2-home .home--window > #tuto { grid-column: span 12; order: 3; }
:root.brocante #tuto .panel-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 34%); gap: 12px 28px; align-items: center; }
:root.brocante #tuto .tuto-bar { grid-column: 1 / -1; margin: 0; }
:root.brocante #tuto .tuto-next { margin: 0; }
}

/* ==== 12. Profil : le haut de la carte (2026-10-09, retour de l'utilisateur : « pas fan du dégradé ni du halo ») =====
   Carte cadrée comme les autres (filet + ombre décalée), bannière = l'image du jeu choisi, nette et cadrée par le joueur
   (js/crop.js), sans dégradé ni flou ; sans bannière, un aplat de la couleur du joueur avec la trame du site. Avatar en
   tampon carré qui déborde sur la bannière, nom en grand, chiffres en étiquettes de prix (.v2-stat).
   (Avant, css/pages.css : bannière en dégradé + halo radial, image floutée sous un voile, avatar arrondi.) */
:root.brocante .profile-card { border: 0; border-radius: 4px; background: var(--surface); overflow: visible;
  box-shadow: inset 0 0 0 1.5px var(--frame), 4px 4px 0 var(--drop); }
:root.brocante .profile-banner { position: relative; height: clamp(130px, 16vw, 210px); overflow: hidden; border-radius: 4px 4px 0 0;
  border-bottom: 1.5px solid var(--frame);
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 18%, transparent) 1px, transparent 1.6px) 0 0 / 7px 7px,
    color-mix(in srgb, var(--pc-accent) 70%, var(--surface)); }
:root.brocante .profile-banner.has-art { background: var(--surface-2); }
:root.brocante .profile-banner.has-art::after { content: none; }
:root.brocante .crop-img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
:root.brocante .profile-body { align-items: flex-end; gap: 14px 24px; padding: 0 26px; margin-top: -58px; }
:root.brocante .profile-avatar { position: relative; z-index: 1; width: 128px; height: 128px; border-radius: 3px; overflow: hidden; rotate: -2.5deg;
  background: color-mix(in srgb, var(--pc-accent) 80%, var(--surface)); padding: 0;
  box-shadow: 0 0 0 5px var(--surface), 0 0 0 6.5px var(--frame), 6px 6px 0 2px var(--drop); }
:root.brocante .profile-avatar.has-art { background: var(--surface-2); }
:root.brocante .profile-initial { font: 800 3.6rem/1 var(--font-display); }
:root.brocante .profile-who { gap: 6px; padding: 66px 0 4px; } /* (le nom ne monte jamais sur la bannière) */
:root.brocante .profile-name { font: 800 clamp(2.2rem, 4.6vw, 3.6rem)/.92 var(--font-display); letter-spacing: -.04em; text-transform: uppercase;
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--pc-accent) 80%, transparent); overflow-wrap: anywhere; }
:root.brocante .profile-title { border-radius: 2px; padding: 2px 9px; font: 700 .72rem/1.5 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em;
  color: #1E1B2C; background: var(--pc-accent); box-shadow: inset 0 0 0 1.5px #1E1B2C; rotate: -1.5deg; }
:root.brocante .profile-bio { font-weight: 600; }
:root.brocante .profile-fav { font: 700 .74rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
:root.brocante .profile-actions { align-self: flex-end; padding-bottom: 6px; }
:root.brocante .profile-card .profile-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 24px 26px 26px; margin: 0; }
@media (max-width: 760px) {
:root.brocante .profile-body { padding: 0 16px; margin-top: -46px; }
:root.brocante .profile-avatar { width: 96px; height: 96px; }
:root.brocante .profile-who { flex-basis: 100%; padding-top: 0; } /* (sous l'avatar : pas besoin de l'écarter de la bannière) */
:root.brocante .profile-actions { flex-direction: row; padding-bottom: 0; }
:root.brocante .profile-card .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 16px 18px; gap: 10px; }
}
/* Personnaliser : aperçu cadré de la bannière et de l'avatar à côté de leur nom. */
:root.brocante .custom-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
:root.brocante .custom-pick-thumb { grid-row: span 2; width: 56px; height: 56px; overflow: hidden; border-radius: 3px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--frame); }
:root.brocante .custom-pick-thumb--banner { width: 112px; height: 40px; }
:root.brocante .custom-pick-thumb:empty { background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--line) 5px 6px), var(--surface-2); }
:root.brocante .custom-pick-text { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
:root.brocante .custom-pick-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Fenêtre « Recadrer ». */
:root.brocante .crop-dialog { width: min(640px, 94vw); }
:root.brocante .crop-frame { position: relative; overflow: hidden; margin: 14px auto 16px; cursor: grab; touch-action: none; border-radius: 3px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--frame), 4px 4px 0 var(--drop); }
:root.brocante .crop-frame.is-dragging { cursor: grabbing; }
:root.brocante .crop-frame[data-shape="square"] { width: min(300px, 70vw); aspect-ratio: 1; }
:root.brocante .crop-frame[data-shape="banner"] { width: 100%; aspect-ratio: 5 / 1; }
:root.brocante .crop-frame:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Repères des tiers par-dessus l'image, pour cadrer. */
:root.brocante .crop-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
:root.brocante .crop-zoom { display: flex; align-items: center; gap: 12px; font: 700 .74rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
:root.brocante .crop-zoom input { flex: 1; accent-color: var(--accent); }
:root.brocante .crop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
:root.brocante .crop-gap { flex: 1; }