/*
 * GGalerie — DA « Vitrine ».
 * Source : le design system GGalerie Vitrine (tokens clair / sombre, typo
 * Bodoni Moda + Manrope, composants). Chaque couleur a un sens :
 *   plateforme = identité du boîtier · jaune = prix · vert / rouge = valeur.
 * Toutes les pages chargent ce fichier ; leurs styles propres ne font que
 * la mise en page.
 */

:root {
  --bg: #f5f2ec;            /* le mur de la galerie */
  --surface: #ffffff;       /* panneaux, champs, toujours bordés de --line */
  --surface-active: #eae4d9;
  --line: #e2dcd1;
  --ink: #1c1a17;
  --muted: #6a645a;
  --on-ink: #f5f2ec;
  --deal: #ffd23f;          /* prix, bonne affaire : jamais décoratif */
  --on-deal: #1c1a17;
  --up: #1d7448;
  --up-soft: #e1f0e7;
  --down: #b3261e;
  --down-soft: #f7e3df;
  --platform-other: #6a645a;
  --screw: #d9d9d6;
  --dash: #b9b0a2;

  --font-display: "Bodoni Moda", Didot, "Bodoni 72", "Times New Roman", serif;
  --font-sans: Manrope, "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-cover: 0 6px 14px -6px rgba(0,0,0,.45);
  --shadow-cover-hero: 0 22px 34px -14px rgba(0,0,0,.55);
  --shadow-float: 0 10px 20px -8px rgba(0,0,0,.5);

  /* anciens noms, pour les pages pas encore réécrites */
  --paper: var(--bg);
  --tag: var(--deal);

  color-scheme: light;
}
/*
 * Thème clair par défaut, quel que soit le réglage de l'appareil : on vérifie
 * d'abord la lisibilité de Bodoni Moda en sombre. Le thème sombre reste
 * disponible avec <html data-theme="dark">. Pour suivre à nouveau l'appareil,
 * remettre ici le bloc @media (prefers-color-scheme: dark) qui reprend les
 * mêmes valeurs que :root[data-theme="dark"].
 */
:root[data-theme="dark"] {
  --bg: #14120f; --surface: #1f1c18; --surface-active: #2a2620; --line: #38332b;
  --ink: #f3eee6; --muted: #aba393; --on-ink: #14120f;
  --up: #6bd69a; --up-soft: rgba(107,214,154,.14);
  --down: #f08a7e; --down-soft: rgba(240,138,126,.14);
  --dash: #5a5246;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
/*
 * Bodoni Moda est une police à taille optique : le navigateur choisit seul la
 * version « affiche » (opsz 96) dès 80px, dont les déliés deviennent des fils
 * presque invisibles. On fige la version texte (opsz 11), aux déliés plus
 * épais : même dessin, bien plus lisible en grand comme en petit.
 */
.serif, .wordmark { font-optical-sizing: none; font-variation-settings: "opsz" 11; }
.serif { font-family: var(--font-display); font-weight: 500; font-variant-numeric: lining-nums; }
/* Titres (étagères, fiche, sections) : un cran plus gras que les grands
   chiffres. Entre 20 et 30px, la graisse 500 garde des déliés trop fins. */
h1.serif, h2.serif, h3.serif { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- logotype provisoire ---------- */
.wordmark { font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
.wordmark em { font-style: italic; font-weight: 500; }

/* ---------- bandeau « Version test » (bêta) ---------- */
.beta { position: relative; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 10px; padding: 7px 48px; background: var(--ink); color: var(--on-ink);
  font-size: 12.5px; line-height: 18px; font-weight: 600; text-align: center; }
.beta-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: var(--radius-pill); padding: 0 8px; }
.beta a { color: inherit; text-underline-offset: 3px; }
.beta-close { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; font-size: 20px; line-height: 1; opacity: .75; }
.beta-close:hover { opacity: 1; }
@media (max-width: 480px) { .beta-text { display: none; } }

/* ---------- textes ---------- */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.meta { font-size: 12.5px; color: var(--muted); }
.caption { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ---------- boutons ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink);
  font-size: 15px; font-weight: 700; text-decoration: none; text-align: center; }
.btn.ghost, .btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn:disabled { opacity: .55; cursor: default; }
.btn + .btn { margin-top: 10px; }
.btn-icon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 26px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 22px; text-decoration: none; }
.link { font-weight: 700; color: var(--ink); }
/* Vide un champ date : sur mobile, le sélecteur natif ne permet pas toujours de l'effacer. */
.date-clear { margin-top: 6px; font-size: 13px; color: var(--muted); }

/* ---------- contrôle segmenté et pastilles ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
  border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); }
.seg > button { height: 36px; padding: 0 4px; border-radius: var(--radius-pill); font-size: 13px;
  font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg > button[aria-pressed="true"], .seg > button[aria-selected="true"], .seg > button[aria-checked="true"] {
  background: var(--ink); color: var(--on-ink); font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 36px; padding: 0 13px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* ---------- étiquettes ---------- */
.deal { display: inline-block; padding: 4px 7px; border-radius: var(--radius-xs); background: var(--deal);
  color: var(--on-deal); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-float); }
.delta { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.up { background: var(--up-soft); color: var(--up); }
.delta.down { background: var(--down-soft); color: var(--down); }
.pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; }
.pill.up { background: var(--up-soft); color: var(--up); border-color: transparent; font-weight: 700; }
.plat { display: inline-block; padding: 2px 6px; border-radius: 4px; color: #fff; font-size: 11px;
  font-weight: 700; letter-spacing: .04em; }

/* ---------- panneaux et champs ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.field { margin-bottom: 14px; }
.field > label, .field > .label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.field input, .field select { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 46px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg);
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); }
.field input:focus, .field select:focus { outline: none; border: 2px solid var(--ink); padding: 0 13px; }
.field input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field .meta { margin: 6px 0 0; }

/* Date d'achat à trois modes (ui.js, dateField) : seuls les champs du mode choisi s'affichent. */
.date-field .seg { margin-bottom: 10px; }
.date-field .seg > button { font-size: 12px; }
.date-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.date-field[data-mode="day"] select, .date-field:not([data-mode="day"]) input[type="date"],
.date-field[data-mode="year"] [data-part="month"] { display: none; }
.date-field[data-mode="day"] input[type="date"], .date-field[data-mode="year"] [data-part="year"] { grid-column: 1 / -1; }
.date-field .date-note { margin: 8px 0 0; }
.date-field .date-note:empty { display: none; }

/* ---------- messages ---------- */
.msg { padding: 12px 14px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.5; }
.msg.ok { background: var(--up-soft); color: var(--up); }
.msg.ko { background: var(--down-soft); color: var(--down); }
.msg.info { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }

/* ---------- jaquette ----------
   La hauteur est fixée par le contexte, la largeur suit la vraie boîte
   (--case, posée par caseAspect() de spines.js) : une boîte Switch est plus
   étroite qu'une boîte DVD. Les petites vignettes fixent aussi la largeur,
   pour rester alignées. */
.cover { position: relative; display: block; flex: 0 0 auto; height: 112px; width: auto;
  aspect-ratio: var(--case, 79 / 112);
  border-radius: var(--radius-xs); overflow: hidden; background: var(--platform-color, var(--platform-other));
  box-shadow: var(--shadow-cover); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 1;
  background: var(--platform-color, var(--platform-other)); }
/* Scan de boîte gardé chez nous : le bandeau de plateforme est déjà sur l'image. */
.cover[data-box]::before { display: none; }
.cover .fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px 7px 22px; font-size: 9px; line-height: 1.15; font-weight: 800; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* ---------- étagère acrylique ---------- */
.ledge { position: absolute; height: 34px; border-radius: var(--radius-sm);
  background: var(--glass, rgba(106,100,90,.5)); border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none;
  box-shadow: 0 12px 22px -14px var(--platform-color, transparent); }
.ledge::before, .ledge::after { content: ""; position: absolute; top: 12px; width: 9px; height: 9px;
  border-radius: 5px; background: var(--screw); box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }
.ledge::before { left: 12px; }
.ledge::after { right: 12px; }

/* ---------- pied de page ---------- */
.credits { padding: 28px 20px 36px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.7; }
.credits a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- tranches (vue Tranches, public/spines.js) ---------- */
.spine-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.spine-scroll::-webkit-scrollbar { display: none; }
.spine-track { position: relative; display: inline-flex; vertical-align: top; min-width: 100%; gap: 1px;
  align-items: flex-end; padding: 22px 20px 20px; }
.spine-track .ledge { left: 8px; right: 0; bottom: 6px; height: 22px; z-index: 2; }
.sp { position: relative; z-index: 1; flex: 0 0 auto; width: var(--w); height: var(--h); padding: 0; overflow: hidden;
  border-radius: 2px 2px 1px 1px; background: var(--sc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  transition: transform .18s ease; }
/* Reflet du plastique : un dégradé, pas d'ombre floutée. */
.sp::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 22%, rgba(255,255,255,.16) 48%, rgba(0,0,0,0) 72%, rgba(0,0,0,.32)); }
.sp.out, .sp:focus-visible { transform: translateY(-12px); }
.sp-band { position: absolute; left: 0; right: 0; top: 0; height: var(--band); display: flex; align-items: center;
  justify-content: center; background: var(--pc); }
.sp-band span, .sp-title { writing-mode: vertical-rl; transform: rotate(180deg); }
.sp-band span { font-size: 8px; font-weight: 800; letter-spacing: .04em; color: var(--pt); line-height: 1; }
.sp-title { position: absolute; left: 0; right: 0; top: calc(var(--band) + 6px); bottom: 6px; display: flex; align-items: center;
  justify-content: flex-start; margin: 0 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--fs); font-weight: 700; line-height: 1.1; color: var(--st); }
.sp-carton .sp-title { white-space: normal; text-align: center; justify-content: center; }
/* Boîtier transparent : la jaquette pliée, bordée de noir. */
.sp-jewel { background: linear-gradient(90deg, #0b0b0d 0 12%, var(--sc) 12% 88%, #0b0b0d 88%); }
.sp-side .sp-band { right: auto; bottom: 0; width: 28%; height: auto; }
.sp-side .sp-band span { display: none; }
.sp-side .sp-title { left: 28%; top: 6px; }
/* Scan de la vraie tranche : il remplace le dessin, le reflet du plastique reste par-dessus. */
.sp-scan { background: #111; }
/* Tout le scan, logo du haut et du bas compris : il est à 6 % près aux proportions
   de la tranche (42 × 680 pour 14 × 213), un rognage coupait le logo Switch. */
.sp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* Jeu recherché : la place qu'il prendra, en pointillés. */
.sp-wish { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dash); }
.sp-wish::after { display: none; }
.sp-wish .sp-band { background: transparent; border-bottom: 1.5px dashed var(--dash); }
.sp-wish .sp-band span, .sp-wish .sp-title { color: var(--muted); }
.sp-tip { position: absolute; z-index: 30; display: flex; gap: 10px; align-items: center; max-width: 260px; padding: 6px 10px 6px 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-float);
  pointer-events: none; }
.sp-tip .cover { height: 65px; }
.sp-tip .cover .fallback { font-size: 0; }
.sp-tip-t { min-width: 0; }
.sp-tip-t b { display: block; font-size: 13px; line-height: 1.25; }
.sp-tip-t span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }