/* ChaseTCG : mobile d'abord. Tablette dès 768 px, desktop dès 1024 px (contenu de 1120 px).
   Une seule famille, Rubik (400, 500, 600), en casse de phrase partout ; chiffres tabulaires pour les prix et les comptes. */

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Fond marine, encre crème, accent ambre. Le texte secondaire est chaud (sable), pas gris-bleu. */
  --bg: #141c2e;
  --bg-deep: #0f1524;
  --raised: #1a2337;
  --surface: #1b2538;
  --surface-2: #243049;
  --bar: #36435e;
  --text: #f4eee2;
  --muted: #b3ac9e;
  --faint: #8d887c;
  --accent: #f2a33a;
  --on-accent: #141c2e;
  --up: #3ddc97;
  --down: #ff7b6b;
  --line: rgba(244, 238, 226, 0.08);
  --rule: rgba(244, 238, 226, 0.16);
  --line-strong: rgba(244, 238, 226, 0.45);
  --hover: rgba(244, 238, 226, 0.035);
  /* Un repère de couleur par jeu, posé sur les codes d'édition et les pastilles */
  --pk: #f6c945;
  --op: #ef5b4f;
  --rb: #3cc6b4;
  /* Papier : ce qui est « imprimé » (étiquettes de rayon, billet de sortie, carnet du collectionneur) */
  --paper: #f3ecdf;
  --paper-2: #e8dfcd;
  --ink: #18202f;
  --ink-muted: #59544a;
  --ink-line: rgba(24, 32, 47, 0.14);
  --accent-ink: #9c5300;
  --pk-ink: #866500;
  --op-ink: #b0302a;
  --rb-ink: #0d7a6d;
  --up-ink: #0c7446;
  --down-ink: #b2392b;
  --holo: linear-gradient(120deg, #5be3ff, #ff6ad5, #ffb347);
  --holo-shine: linear-gradient(115deg, #5be3ff 0%, #ff6ad5 33%, #ffb347 66%, #5be3ff 100%);
  --shadow: 0 10px 28px rgba(4, 8, 18, 0.35);
  --shadow-photo: 0 6px 16px rgba(0, 0, 0, 0.25);
  --r-field: 10px;
  --r-card: 12px;
  --r-pill: 10px;
  --r-tag: 5px;
  --pad-x: 20px;
  --width: 720px;
  --h1: 36px;
  --gap-section: 48px;
  --main-gap: 24px;
  --top-h: 56px;
  --consent-h: 0px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 Rubik, 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(242, 163, 58, 0.35); }

/* Une seule largeur pour la barre, le contenu et le pied de page : les bords sont alignés. */
.wrap { width: 100%; max-width: calc(var(--width) + 2 * var(--pad-x)); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ---------- Barre du haut : logo à gauche, onglets (ou Retour) à droite ---------- */
header.top { flex: none; position: relative; z-index: 8; border-bottom: 1px solid var(--line); background: var(--bg); }
.top-in { height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; flex: none; border-radius: 6px; }
.logo img { display: block; height: 38px; width: auto; }
.nav { display: flex; align-self: stretch; margin-right: -10px; font-size: 15px; font-weight: 500; }
/* Mobile : logo seul sur la première ligne, les onglets se partagent toute la largeur en dessous */
@media (max-width: 767px) {
  .top-in:has(> .nav) { height: auto; flex-wrap: wrap; gap: 0; }
  .top-in:has(> .nav) .logo { height: 56px; }
  .top-in > .nav { flex: 0 0 calc(100% + 2 * var(--pad-x)); height: 46px; margin: 0 calc(-1 * var(--pad-x)); padding: 0 calc(var(--pad-x) - 10px); border-top: 1px solid var(--line); }
  .top-in > .nav a { flex: 1 1 auto; justify-content: center; }
}
.nav a { position: relative; display: flex; align-items: center; padding: 0 10px; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 150ms; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.nav a:focus-visible { outline-offset: -10px; border-radius: 12px; }
.back:focus-visible { outline-offset: -4px; border-radius: 12px; }
.nav .nav-aide { display: none; }
.back { display: flex; align-items: center; gap: 6px; align-self: stretch; margin-right: -10px; padding: 0 10px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--text); }
.back svg { width: 16px; height: 16px; }

/* ---------- Contenu ---------- */
main { position: relative; flex: 1 0 auto; padding-top: 24px; padding-bottom: 40px; display: flex; flex-direction: column; gap: var(--main-gap); }
.split { display: flex; flex-direction: column; gap: 32px; }
.side { display: flex; flex-direction: column; gap: 24px; }

/* Échelle : 13 · 14 · 15 · 17 · 22 · 28 · 36 · 56. Titres en 600, texte en 400 et 500. */
h1 { position: relative; margin: 0; font-weight: 600; font-size: var(--h1); line-height: 1.08; letter-spacing: 0; text-wrap: balance; }
.accent { color: var(--accent); }
h2 { margin: 0; font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: 0; text-wrap: balance; }
h3 { margin: 0; font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: 0; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { position: relative; font-size: 13px; color: var(--muted); }
.lead { position: relative; color: var(--muted); font-size: 17px; line-height: 1.5; max-width: 34em; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-16 { position: relative; display: flex; flex-direction: column; gap: 16px; }
.center { text-align: center; }
/* Surtitre du h1 : les mots-clés, en petit et en casse de phrase */
.kicker { display: block; margin-bottom: 12px; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--muted); text-wrap: pretty; }

/* ---------- Recherche avec suggestions ---------- */
.label { font-size: 15px; font-weight: 500; color: var(--text); }
.search-row { position: relative; display: flex; gap: 10px; }
/* La liste de suggestions s'étend sur toute la ligne champ + bouton (.search-row la positionne). */
.search { position: static; flex: 1; min-width: 0; }
.search > svg { position: absolute; left: 15px; top: 16px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.field {
  width: 100%; height: 52px; border: 0; border-radius: var(--r-field); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line); padding: 0 14px; font-size: 16px; color: var(--text); appearance: none;
}
.field:focus-visible { outline-offset: 0; }
.search .field { padding-left: 46px; text-overflow: ellipsis; }
.field::placeholder { color: rgba(179, 172, 158, 0.8); }
.field::-webkit-search-cancel-button { display: none; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: 6px 0; list-style: none;
  max-height: min(340px, 50vh); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-field); box-shadow: var(--shadow);
}
.suggest li { padding: 10px 14px; cursor: pointer; }
.suggest li small { display: block; font-size: 12px; color: var(--muted); }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--surface-2); }

/* ---------- Pilules ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--surface-2); font-size: 14px; color: var(--text); text-decoration: none; transition: background 150ms;
}
.pill:hover { background: var(--bar); }

/* ---------- Boutons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; padding: 0 24px;
  border: 0; border-radius: var(--r-field); background: var(--accent); color: var(--on-accent);
  font-weight: 600; font-size: 16px; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter 150ms;
}
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: 0.7; cursor: default; }
.btn-inline { display: none; }
/* Collé en bas sur mobile et tablette, au-dessus du bandeau cookies s'il est affiché */
.cta { position: sticky; bottom: var(--consent-h); z-index: 3; flex: none; background: var(--bg); border-top: 1px solid var(--rule); padding-top: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.micro { font-size: 13px; color: var(--muted); }
.micro strong { color: var(--text); font-weight: 500; }

/* ---------- Cartes produit ---------- */
.card {
  display: block; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none;
}
a.card:hover, a.holo-frame:hover .card { background: #1f2a40; }
.holo-frame { display: block; padding: 1px; border-radius: var(--r-card); background: var(--holo); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
.holo-frame .card { border: 0; border-radius: 13px; box-shadow: none; }
.product { display: flex; gap: 16px; align-items: center; }
.product-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kind { font-size: 13px; color: var(--muted); }
.name { font-weight: 500; font-size: 16px; line-height: 1.3; }
.instock { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: var(--up); }
.instock::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 4px; background: currentColor; }
.price, .link-card .value, .calendar, .row { font-variant-numeric: tabular-nums; }
.price { font-weight: 700; font-size: 24px; line-height: 1.2; }
.updated { font-size: 12px; color: var(--muted); }

/* Cadre photo : packshot détouré posé sur la surface, éclairé par le haut ; vide = surface unie */
.photo { position: relative; flex: none; width: 72px; height: 72px; border-radius: 12px; background: var(--surface-2); box-shadow: var(--shadow-photo); }
.photo:has(img) { background: radial-gradient(120% 90% at 50% 25%, var(--bar), var(--surface-2) 70%); }
.photo.big { width: 96px; height: 96px; }
.photo.small { width: 56px; height: 56px; border-radius: 10px; }
.photo.slim { width: 40px; height: 56px; border-radius: 6px; }
.photo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
/* Cartes à l'unité (cote) : scan plein cadre, sans éclairage ni ombre */
.photo.slim:has(img) { background: var(--surface-2); }
.photo.slim img { padding: 0; object-fit: cover; border-radius: inherit; filter: none; }
/* Étiquette posée sur le bord bas du cadre : elle ne masque plus la boîte */
.tag {
  position: absolute; left: 50%; bottom: -7px; z-index: 1; transform: translateX(-50%); padding: 1px 6px; border-radius: var(--r-tag);
  background: var(--bg); box-shadow: 0 0 0 1px var(--line);
  font-weight: 500; font-size: 11px; line-height: 1.6; color: var(--muted); white-space: nowrap;
}

/* ---------- Préco : choix d'une sortie ---------- */
.releases { display: flex; flex-direction: column; gap: 12px; }
.release {
  display: flex; gap: 14px; align-items: center; width: 100%; padding: 14px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow);
  cursor: pointer; transition: border-color 200ms, background 200ms;
}
/* Pastille de choix : une seule sortie sélectionnée à la fois */
.release::after { content: ''; flex: none; margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bar); transition: border-color 200ms; }
.release:hover { border-color: rgba(244, 238, 226, 0.25); background: #1f2a40; }
.release[aria-pressed="true"] { border-color: var(--line-strong); }
.release[aria-pressed="true"]::after { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 5px, transparent 5.5px); }

/* ---------- Carte de la page Cote : inclinaison et reflet holo ---------- */
.tilt-zone { display: flex; justify-content: center; padding: 8px 0; perspective: 1000px; touch-action: pan-y; }
.tilt {
  position: relative; width: 190px; aspect-ratio: 63 / 88; border-radius: 10px; overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 200ms ease;
}
/* Sans photo : dos de carte sobre (icône du logo) au lieu d'un rectangle vide */
.tilt:not(:has(img)) { background: var(--surface-2) url(logo/chasetcg-icone-sombre.png) center / 34% no-repeat; }
.tilt.live { transition: transform 60ms linear; }
.tilt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tilt .shine, .tilt .glare { position: absolute; inset: 0; pointer-events: none; transition: opacity 200ms; }
.tilt .shine { background: var(--holo-shine); background-size: 300% 300%; background-position: var(--px, 50%) var(--py, 50%); mix-blend-mode: color-dodge; opacity: 0.12; }
.tilt .glare { background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%); mix-blend-mode: overlay; opacity: 0; }
.tilt.live .shine { opacity: 0.45; }
.tilt.live .glare { opacity: 0.5; }

/* ---------- Sections de contenu sous le premier écran ---------- */
/* Trait de séparation à égale distance du bloc précédent et du titre de la section */
.band { display: flex; flex-direction: column; gap: 20px; margin-top: calc(var(--gap-section) - var(--main-gap)); padding-top: var(--gap-section); border-top: 1px solid var(--line); }
.band-head { display: flex; flex-direction: column; gap: 6px; max-width: 46em; }
.band-head p, .band > p, .band .prose p { color: var(--muted); }
.band > p, .band .prose p { max-width: 46em; }
.prose { display: flex; flex-direction: column; gap: 12px; }
.prose p strong { color: var(--text); font-weight: 500; }
.grid, .links, .calendar { margin: 0; padding: 0; list-style: none; }
.grid { display: grid; gap: 12px; }
.steps { counter-reset: step; }
.step { position: relative; padding: 16px 16px 16px 60px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.step::before {
  counter-increment: step; content: counter(step); position: absolute; left: 16px; top: 16px;
  width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent); font-weight: 700; font-size: 15px;
}
.def { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.def dt, .def h3 { font-weight: 600; font-size: 15px; line-height: 1.35; }
.def dd { margin: 0; }
.step p, .def p, .def dd { margin-top: 4px; color: var(--muted); font-size: 14px; }
.compare { display: grid; gap: 12px; }
.compare > div { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.compare .paid { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--holo) border-box; }
.compare h3 + .small { margin-top: 2px; }
.checks { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.checks li { position: relative; padding-left: 22px; }
.checks li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px; border-left: 2px solid var(--up); border-bottom: 2px solid var(--up); transform: rotate(-45deg); }
.paid .checks li::before { border-color: var(--accent); }
.links { display: grid; gap: 8px; }
.link-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); text-decoration: none; transition: border-color 150ms, background 150ms; }
.link-card:hover { border-color: rgba(244, 238, 226, 0.25); background: #1f2a40; }
.link-card span:first-child { min-width: 0; font-weight: 500; }
.link-card small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.link-card .value { flex: none; text-align: right; font-size: 13px; color: var(--muted); }
.link-card .value b { display: block; color: var(--text); font-weight: 600; font-size: 14px; }
.calendar { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.calendar li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.calendar li:last-child { border-bottom: 0; }
.calendar li > :nth-child(3) { grid-column: 2; }
.calendar time { font-weight: 600; color: var(--accent); font-size: 14px; }
.calendar small { display: block; font-size: 12px; color: var(--muted); }

/* ---------- Tunnel ---------- */
.recap { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.recap .name { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.trend { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.trend svg { width: 16px; height: 16px; }
.trend.up { color: var(--up); }
.trend.down { color: var(--down); }
.trend.flat { color: var(--muted); }

/* Tableau flouté : texte factice uniquement, rien de vrai dans le DOM */
.teaser { position: relative; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.teaser-rows { filter: blur(6px); user-select: none; pointer-events: none; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 80px 70px; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.row.head { padding: 12px 16px; font-size: 13px; color: var(--muted); }
.row:last-child { border-bottom: 0; }
.row > * { min-width: 0; white-space: nowrap; overflow: hidden; }
.row > :not(:first-child) { text-align: right; }
.teaser.cote .row { grid-template-columns: minmax(0, 1fr) 110px; }
.teaser.preco .row { grid-template-columns: minmax(0, 1fr) auto 44px; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 4px; background: var(--up); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.bars span { flex: 1 1 0; border-radius: 3px; background: var(--bar); }
.teaser-cta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.teaser-cta .btn { width: auto; box-shadow: var(--shadow); }

/* Paywall */
.perks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.perks li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.form { display: flex; flex-direction: column; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-field label { font-size: 14px; color: var(--muted); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field:user-invalid { box-shadow: inset 0 0 0 1px var(--down); }

/* Confirmation */
.lead-strong { font-size: 16px; }
.home-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.home-link svg { width: 16px; height: 16px; }

/* ---------- FAQ, mentions : titre puis contenu (deux colonnes sur desktop) ---------- */
/* Mobile : la tête se fond dans main. Le bloc d'aide reste sous le titre, comme dans le DOM :
   l'ordre de tabulation suit l'ordre affiché, à toutes les largeurs. */
.doc-head { display: contents; }
.doc-body { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 16px; transition: color 150ms; }
@media (hover: hover) { .faq summary:hover { color: var(--accent); } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform 200ms; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin: 0 0 16px; color: var(--muted); max-width: 40em; }
.toc { margin: 0; padding: 0; list-style: none; display: none; flex-direction: column; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--text); border-left-color: var(--accent); }
.help { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.help a { font-weight: 500; text-underline-offset: 3px; }
.legal { display: flex; flex-direction: column; gap: 28px; }
.legal section { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: calc(var(--top-h) + 24px); }
.legal p { color: var(--muted); max-width: 46em; }
.read { max-width: 760px; }

/* ---------- Pied de page : fond plus profond, liens en grille (mobile) puis en ligne (desktop) ---------- */
.foot { flex: none; background: var(--bg-deep); border-top: 1px solid var(--line); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 28px; padding-bottom: 28px; font-size: 14px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot .logo { justify-self: start; }
.foot .logo img { height: 30px; opacity: 0.9; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.foot-links a { display: flex; align-items: center; min-height: 44px; line-height: 1.3; }
.foot-note { font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.foot-links + .foot-note { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Bandeau de consentement (GA4 / Google Ads) : carte bien visible, deux boutons de même poids ---------- */
body:has(> .consent) { padding-bottom: var(--consent-h); }
.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 10; display: grid; gap: 14px; padding: 16px;
  background: var(--surface-2); border: 1px solid rgba(242, 163, 58, 0.55); border-radius: var(--r-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); font-size: 14px;
}
.consent-text { margin: 0; color: var(--text); line-height: 1.5; }
.consent-text b { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 600; }
.consent-text a { color: var(--muted); text-underline-offset: 3px; white-space: nowrap; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent button {
  height: 46px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--text); color: var(--bg);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.consent button:hover { filter: brightness(0.9); }
@media (min-width: 768px) {
  .consent { left: auto; right: 24px; bottom: 24px; width: 420px; padding: 20px; }
}

/* ---------- Tablette ---------- */
@media (min-width: 768px) {
  :root { --pad-x: 32px; --h1: 44px; }
  /* Barre collée en haut dès la tablette : on change d'outil sans remonter */
  header.top { position: sticky; top: 0; background: var(--bg); }
  /* Ancres (#formats, #etat, #calendrier) : le titre de section ne passe pas sous la barre collée */
  .band { scroll-margin-top: var(--top-h); }
  .nav .nav-aide { display: flex; margin-left: 13px; }
  .nav .nav-aide::before { content: ''; position: absolute; left: -7px; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: var(--bar); }
  .grid.cols-3, .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { padding: 60px 16px 16px; }
  .compare, .grid.cols-2, .grid.cols-4, .links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar li { grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; }
  .calendar li > :nth-child(3) { grid-column: auto; text-align: right; }
}

/* ---------- Desktop : grille de 1200 px ---------- */
@media (min-width: 1024px) {
  :root { --pad-x: 40px; --width: 1120px; --h1: clamp(48px, 4.2vw, 58px); --gap-section: 56px; --main-gap: 32px; --top-h: 72px; }
  .logo img { height: 42px; }
  .nav { margin-right: -14px; font-size: 15px; }
  .nav a { padding: 0 14px; }
  .nav a[aria-current="page"]::after { left: 14px; right: 14px; }
  .nav .nav-aide { margin-left: 17px; }
  .back { font-size: 15px; }

  main { padding-top: 56px; padding-bottom: 88px; }
  /* Pages d'entrée : 7 colonnes pour le titre et la recherche, 5 pour l'aperçu */
  .split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: start; }
  .split > .side { padding-top: 8px; }
  /* z-index : la liste de suggestions passe au-dessus des sections qui suivent */
  main:not(.tunnel) .split > .stack-16 { position: sticky; top: calc(var(--top-h) + 32px); z-index: 2; }
  .halo { left: -80px; top: -40px; width: 560px; height: 340px; }
  .lead { font-size: 17px; }
  .cta { display: none; }
  .btn-inline { display: flex; width: auto; flex: none; }
  .hero-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 8px; }
  .photo.big { width: 112px; height: 112px; }
  .tilt { width: 260px; }
  .tilt-zone { padding-top: 0; }

  /* Sections : titre au-dessus, grilles alignées sur les 1120 px */
  .band { gap: 24px; }
  .band h2 { font-size: 26px; }
  .band-head p { font-size: 16px; }
  .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { gap: 16px; }
  .step { padding: 64px 20px 20px; }
  .step::before { left: 20px; top: 20px; }
  .links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .link-card { padding: 14px 16px; }
  .compare { gap: 16px; }
  .compare > div { padding: 24px; }
  .calendar li { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 14px 20px; }
  /* Section en deux colonnes : titre et intro à gauche (5), contenu à droite (7) */
  .band.aside { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 64px; align-items: start; }

  /* Tunnel : composition centrée dans la hauteur, colonnes égales, alignées en haut */
  main.tunnel { justify-content: center; padding-top: 48px; padding-bottom: 72px; }
  .tunnel .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .tunnel h1 { font-size: clamp(36px, 3.4vw, 44px); }
  .pay-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); }
  .pay-card .btn-inline { width: 100%; }
  .pay-card .perks { margin-top: 12px; }

  /* FAQ, mentions : titre collant à gauche (5), contenu à droite (7), alignés sur la barre */
  .doc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
  .doc-head { position: sticky; top: calc(var(--top-h) + 32px); display: flex; flex-direction: column; gap: 24px; }
  .toc { display: flex; }
  .doc h1 { font-size: clamp(40px, 3.2vw, 46px); }
  .doc .faq summary { font-size: 17px; padding: 20px 0; }

  /* Pied de page : logo à gauche, liens à droite, mentions en dessous sur toute la largeur */
  .foot-in { grid-template-columns: 200px minmax(0, 1fr); column-gap: 48px; row-gap: 6px; padding-top: 36px; padding-bottom: 36px; }
  .foot .logo { grid-row: 1; align-self: start; padding-top: 6px; }
  .foot-links { display: flex; flex-wrap: wrap; column-gap: 28px; }
  .foot-note, .foot-in > .foot-links:first-child { grid-column: 1 / -1; }
  .foot-links + .foot-note { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tilt, .tilt .shine, .tilt .glare, .release, .release::after, .faq summary, .faq summary svg, .pill, .btn, .link-card, .nav a { transition: none; }
}

/* ---------- Contenu, SEO et CRO ---------- */
.band-foot { color: var(--muted); }
.band-foot a, .lead a, .band-head a { color: var(--text); text-underline-offset: 3px; }

/* Tableau flouté : en-têtes et légende lisibles, seules les valeurs factices sont floutées */
.teaser { min-height: 248px; }
.teaser-rows { filter: none; }
.teaser-rows .row:not(.head):not(.note), .teaser-rows .bars { filter: blur(6px); }
.row.note { color: var(--muted); font-size: 13px; }
.dot.off { background: var(--bar); }
.recap:empty { visibility: hidden; min-height: 82px; }
.recap .free { font-size: 13px; color: var(--muted); }

/* Recherche non reconnue : pas de tableau ni de paiement, des pistes à la place */
.nomatch { display: flex; flex-direction: column; gap: 12px; }
.nomatch .links { grid-template-columns: 1fr; }
.suggest li.empty { cursor: default; color: var(--muted); font-size: 14px; }
.suggest li.empty:hover { background: none; }

/* Paywall : erreurs tutoyées sous chaque champ, bouton du formulaire visible aussi sur mobile */
.err { color: var(--down); font-size: 13px; }
.field[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--down); }
.form-field .micro { margin-top: 2px; }
[data-page="debloquer"] .pay-card .btn-inline { display: flex; width: 100%; }
[data-page="debloquer"] .pay-card .faq { margin-top: 20px; }
[data-page="debloquer"] .pay-card .faq summary { font-size: 15px; padding: 12px 0; }
.perks strong { font-weight: 600; }
body.cta-off .cta { display: none; }

/* Confirmation : réassurance en clair, une question en un tap */
.lead-strong { font-size: 16px; color: var(--text); }
.home-link { padding: 10px 0; }
/* Choix en un tap : cibles de 44 px bien séparées (un choix est définitif) */
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choices .pill { height: 44px; padding: 0 16px; border: 0; cursor: pointer; font: inherit; font-size: 14px; }
.choices + .small { margin-top: 8px; }
.choices .pill[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.choices .pill:disabled { cursor: default; }
.pay-card h2 + .choices, .pay-card h2 + .perks { margin-top: 12px; }
.pay-card h2 { font-size: 18px; }
.pay-card .perks + h2, .choices + .small + h2 { margin-top: 24px; }

/* Bandeau cookies : texte court sur mobile, complet dès la tablette */

/* ---------- Correctifs QA mobile et tablette ---------- */
/* Légende du tableau flouté : une seule cellule sur toute la largeur, jamais coupée
   (passe après .teaser.cote .row et .teaser.preco .row) */
.teaser-rows .row.note { grid-template-columns: minmax(0, 1fr); }
.teaser-rows .row.note > * { white-space: normal; overflow: visible; }
.teaser-rows .row.note > :empty { display: none; }
/* Titre du tunnel : un mot très long (texte collé) passe à la ligne au lieu d'élargir la page */
.tunnel h1 { overflow-wrap: anywhere; }
/* Champ de recherche remonté en haut de l'écran au focus (app.js) : un peu d'air au-dessus */
.search .field { scroll-margin-top: 12px; }
/* Clavier ouvert : le bandeau cookies s'efface le temps de la saisie (il cachait le champ actif) */
@media (max-width: 767px) { body.typing .consent, body:has(.search .field:focus) .consent { visibility: hidden; } }
/* Calendrier : toute la ligne est cliquable (le lien seul faisait 18 px de haut) */
.calendar li { position: relative; }
.calendar li a::after { content: ''; position: absolute; inset: 0; }

/* ---------- Sections (refonte) ---------- */
/* Pages d'entrée (/, /cote/, /preco/) : tout reste dans le marine. Pas de boîte par défaut, pas de petits widgets :
   des filets, de l'espace, la typographie (Rubik en casse de phrase) et les vraies images (boîtes, cartes).
   Deux ou trois informations par ligne au plus ; un chiffre seul suffit. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Pilules restantes (collections, choix de /merci) : fond et filet intérieur, visibles même sans bordure */
.pill { height: 40px; border: 0; background: var(--raised); box-shadow: inset 0 0 0 1px var(--bar); border-radius: 8px; font-weight: 500; }
.pill:hover { background: var(--surface-2); }
.nowrap { white-space: nowrap; }

/* ---------- Repères partagés ---------- */
/* Code d'édition : du texte, pas une étiquette */
.code { font-weight: 500; letter-spacing: 0; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Jeu : le nom lui-même porte la couleur, sans pastille */
.g { white-space: nowrap; }
.g.pk { color: #ecc95e; }
.g.op { color: #f3958b; }
.g.rb { color: #72d4c6; }
.ok { color: var(--up); font-weight: 500; white-space: nowrap; }
.ago { color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.big-num { font-weight: 600; font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Photos détourées : le produit posé tel quel, sans boîte, ombre de contact ---------- */
.photo, .photo:has(img), .photo.slim:has(img) { display: flex; align-items: flex-end; justify-content: center; border-radius: 0; background: none; box-shadow: none; }
.photo img { width: auto; height: auto; max-width: 100%; max-height: 100%; padding: 0; border-radius: 4px; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.38)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.photo:not(:has(img))::before { content: ''; position: absolute; inset: 20%; background: url(logo/chasetcg-icone-sombre.png) center / contain no-repeat; opacity: 0.3; }
.photo { width: 84px; height: 84px; }
.photo.big { width: 104px; height: 104px; }
.photo.small { width: 64px; height: 64px; }
.photo .tag { bottom: -10px; }
.photo.slim img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 4px; filter: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.35); }
/* Vignettes des listes et tableaux */
.thumb { flex: none; display: flex; align-items: flex-end; justify-content: center; width: 52px; height: 52px; }
.thumb img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 3px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4)); }
.thumb.card { width: 40px; height: 56px; padding: 0; border: 0; background: none; box-shadow: none; }
.thumb.card img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; filter: none; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); }
.thumb:not(:has(img))::before { content: ''; width: 60%; height: 60%; margin: auto; background: url(logo/chasetcg-icone-sombre.png) center / contain no-repeat; opacity: 0.25; }

/* ---------- Mise en page des pages d'entrée ---------- */
main.tool { gap: 64px; }
.hero { gap: 40px; }
.access { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 40em; }
.access b { font-weight: 500; color: var(--text); }
.board { display: grid; gap: 64px; }
.board > * { min-width: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin-bottom: 16px; }
.sec-note { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sec-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -10px 0; font-weight: 500; font-size: 15px; color: var(--accent); text-decoration: none; }
.sec-link::after { content: '→'; transition: transform 150ms; }
.sec-link:hover::after { transform: translateX(3px); }
/* Lien qui couvre toute sa ligne */
.row-link { color: var(--text); font-weight: 500; text-decoration: none; }
.row-link::after { content: ''; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.cell-prod { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cell-prod > span { min-width: 0; }
.cell-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

/* ---------- Recherches rapides : la vignette et le nom, rien d'autre ---------- */
.picks { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 150ms; }
.pick:hover { color: var(--text); }
.pick .thumb { width: 34px; height: 34px; }
.pick .thumb.card { width: 24px; height: 34px; }

/* ---------- Accueil : dernières détections, les boîtes posées sur une ligne ---------- */
.feed { min-width: 0; }
.feed .sec-head { margin-bottom: 8px; }
.shelf {
  --plank: 132px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); column-gap: 18px;
  margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }
.shelf li { position: relative; display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; }
.shelf-pic { display: flex; align-items: flex-end; justify-content: center; height: var(--plank); padding-bottom: 1px; border-bottom: 1px solid var(--rule); }
.shelf-pic img { display: block; max-width: 100%; max-height: calc(var(--plank) - 10px); filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.5)); transition: transform 200ms ease; }
.shelf li:hover .shelf-pic img { transform: translateY(-4px); }
.stub { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
.stub .row-link { font-size: 14px; line-height: 1.3; color: var(--muted); }
.stub-price { font-weight: 600; font-size: 21px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stub .ok { font-size: 13px; }
.shelf li:hover .row-link { color: var(--text); }
.feed-empty { padding: 16px 0; color: var(--muted); }
/* Annonce reconnue : « C'est celui-ci ? » */
[data-ad] { margin: 0 0 24px; }
.split > .stack-16 > [data-ad] { margin: 0; }
.ad-title { margin-bottom: 8px; font-weight: 600; font-size: 17px; color: var(--accent); }
.adcard {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 12px 16px 12px 12px;
  border-radius: var(--r-card); background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--text); text-decoration: none;
}
.adcard .photo { grid-row: span 3; width: 84px; height: 84px; }
.adcard .name { font-weight: 600; font-size: 17px; line-height: 1.25; }
.adcard .big-num { font-size: 21px; }
.adcard .ok { font-size: 14px; }
.adcard:hover .name { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tableaux ---------- */
.table-wrap { min-width: 0; }
.data { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.data th, .data td { padding: 14px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.data th:first-child, .data td:first-child { padding-left: 0; }
.data th:last-child, .data td:last-child { padding-right: 0; }
.data thead th { padding-top: 0; padding-bottom: 10px; font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); border-bottom-color: var(--rule); white-space: nowrap; }
.data .num { text-align: right; }
.data tbody tr { position: relative; transition: background 120ms; }
.data tbody tr:hover { background: var(--hover); }
.data tbody tr:hover .row-link, .agenda-list li:hover .row-link, .cal-item:hover .row-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(244, 238, 226, 0.45); }
/* Tri : bouton dans l'en-tête, aria-sort sur la cellule */
.sort { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; min-width: 44px; margin: -12px 0 -10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sort::after { content: '↕'; font-size: 12px; opacity: 0.45; }
.sort:hover { color: var(--text); }
th[aria-sort="ascending"] .sort, th[aria-sort="descending"] .sort { color: var(--text); }
th[aria-sort="ascending"] .sort::after { content: '↑'; opacity: 1; color: var(--accent); }
th[aria-sort="descending"] .sort::after { content: '↓'; opacity: 1; color: var(--accent); }
.num .sort { justify-content: flex-end; }
.num .sort::after { order: -1; }
/* Mobile : colonnes secondaires masquées */
.c-trend { display: none; }
.trend { white-space: nowrap; }
.trend svg { width: 15px; height: 15px; }
.price-cell { font-weight: 600; font-size: 17px; white-space: nowrap; }
.shops-cell { font-weight: 500; font-size: 17px; }
.stock-table .row-link, .cote-table .row-link { font-size: 15px; line-height: 1.3; }
.cote-table .range { font-weight: 600; font-size: 17px; white-space: nowrap; }
.m-trend { margin-top: 4px; font-weight: 400; }
.range .trend { justify-content: flex-end; }
@media (min-width: 768px) { .m-trend { display: none; } }

/* ---------- Accueil : sorties à venir, en agenda ---------- */
.agenda-list, .ed-list, .wall-cards, .cal-list { margin: 0; padding: 0; list-style: none; }
.agenda-list li { position: relative; display: grid; grid-template-columns: 46px 48px minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.agenda-list li:first-child { padding-top: 2px; }
.date { display: flex; flex-direction: column; align-items: center; line-height: 1; font-variant-numeric: tabular-nums; }
.date b { font-weight: 600; font-size: 28px; }
.date span { margin-top: 4px; font-size: 13px; color: var(--muted); }
.agenda-list .thumb { width: 48px; height: 48px; }
.agenda-list .row-link { display: block; font-size: 15px; line-height: 1.3; }
.ag-when { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Graphiques floutés : formes factices, aucune vraie valeur dans la page ---------- */
.plots { display: grid; gap: 16px; }
.plot { position: relative; padding: 18px 18px 16px; border-radius: var(--r-card); background: var(--raised); }
.plot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.plot-name { min-width: 0; font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--muted); }
.plot-free { flex: none; font-weight: 600; font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plot-area { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.plot-y { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; user-select: none; }
.plot svg { display: block; width: 100%; height: 132px; filter: blur(3px); }
.plot .p-grid { stroke: rgba(244, 238, 226, 0.12); stroke-dasharray: 2 5; }
.plot .p-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.plot-cta {
  position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: var(--r-field); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--accent), 0 8px 24px rgba(0, 0, 0, 0.4);
  color: var(--text); font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.plot-cta::after { content: '→'; color: var(--accent); }
.plot-cta:hover { background: var(--surface); }
#evolution .plots { grid-template-columns: minmax(0, 1fr); }

/* ---------- Cote : la carte inclinable et son cartel ---------- */
.tilt-zone { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.tilt { width: 210px; border-radius: 4.5% / 3.2%; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35); }
.cartel { position: relative; width: min(100%, 290px); }
.cartel .row-link { display: block; font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--muted); }
.cartel-range { display: block; margin-top: 6px; font-weight: 600; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cartel .trend { margin-top: 6px; font-size: 14px; }
.cartel:hover .row-link { color: var(--text); }

/* ---------- Cote : le mur des cartes (vraies illustrations, chacune mène à sa cote) ---------- */
.wall-cards {
  display: grid; grid-auto-flow: column; grid-auto-columns: 124px; gap: 16px; margin: 0 calc(-1 * var(--pad-x)); padding: 6px var(--pad-x) 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad-x); scrollbar-width: none;
}
.wall-cards::-webkit-scrollbar { display: none; }
.wall-cards li { min-width: 0; scroll-snap-align: start; }
.wall-cards a { display: flex; flex-direction: column; gap: 10px; color: var(--text); text-decoration: none; }
.wall-cards img {
  display: block; width: 100%; height: auto; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4.5% / 3.2%;
  background: var(--raised) url(logo/chasetcg-icone-sombre.png) center / 30% no-repeat; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.wall-cards a:hover img, .wall-cards a:focus-visible img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5); }
.wall-cards a:focus-visible { outline: none; }
.wall-cards a:focus-visible img { outline: 2px solid var(--accent); outline-offset: 3px; }
.wall-cap { display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.wall-cap b { font-weight: 500; }
.wall-cap span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wall-foot { margin-top: 12px; font-size: 14px; color: var(--muted); }
.wall-foot a { color: var(--text); text-underline-offset: 3px; }

/* ---------- Cote : parcourir par édition, un onglet par jeu ---------- */
.tabs { display: flex; gap: 24px; margin-bottom: 4px; box-shadow: inset 0 -1px 0 var(--rule); }
.tab { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 500; font-size: 15px; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.tab:focus-visible { outline-offset: -2px; border-radius: 6px; }
.tab .g { color: inherit; }
.ed-cols { display: grid; gap: 24px; }
.ed-col h3 { margin-bottom: 4px; font-size: 16px; }
.ed-list a { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 46px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 15px; }
.ed-list .code { grid-column: 1; font-size: 14px; }
.ed-name { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-count { grid-column: 3; color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ed-list a:hover .ed-name { color: var(--accent); }
.more-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--muted); text-underline-offset: 3px; }
.more-link:hover { color: var(--text); }

/* ---------- Préco : la prochaine sortie, en grand ---------- */
.next { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 20px; align-items: center; }
.split > .side.next { padding-top: 0; gap: 6px 20px; }
.next h2 { grid-column: 1 / -1; margin-bottom: 10px; font-weight: 500; font-size: 15px; color: var(--accent); }
.next .photo { grid-row: span 4; align-self: center; width: 112px; height: 112px; }
.next .row-link { font-weight: 600; font-size: 19px; line-height: 1.25; }
.next-date { font-size: 15px; color: var(--muted); }
.next-count { margin-top: 6px; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.next-count b { font-weight: 600; font-size: 34px; line-height: 1; color: var(--text); }
.next-count > span:not(.sr) { margin-right: 6px; white-space: nowrap; }
.next-meta { font-size: 14px; color: var(--muted); }
.next-meta b { font-weight: 500; color: var(--up); }
.next:hover .row-link { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Préco : calendrier en agenda de magazine, mois par mois ---------- */
.filters { display: flex; flex-wrap: nowrap; gap: 0 24px; margin: 0 calc(-1 * var(--pad-x)) 4px; padding: 0 var(--pad-x); box-shadow: inset 0 -1px 0 var(--rule); overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 46px; min-width: 44px; justify-content: center; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 500; font-size: 15px; cursor: pointer; }
.filters button:hover { color: var(--text); }
.filters button[aria-pressed="true"] { color: var(--text); }
.filters button[aria-pressed="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.filters .g { color: inherit; }
.cal-month { padding-top: 26px; }
.cal-mname { margin-bottom: 4px; font-weight: 600; font-size: 28px; line-height: 1.1; }
.cal-mname span { font-weight: 400; color: var(--faint); }
.cal-item { position: relative; display: grid; grid-template-columns: 50px 64px minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cal-day { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; font-variant-numeric: tabular-nums; }
.cal-day span { font-size: 13px; color: var(--muted); }
.cal-day b { margin-top: 3px; font-weight: 600; font-size: 34px; }
.cal-item .thumb { width: 64px; height: 64px; }
.cal-text { min-width: 0; }
.cal-text .row-link { display: block; font-size: 16px; line-height: 1.3; }
.countdown { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-item.is-next .cal-day b { color: var(--accent); }
.cal-empty { padding: 20px 0; color: var(--muted); }
.cal-foot { margin-top: 18px; font-size: 14px; color: var(--muted); }
.cal-foot a { color: var(--text); text-underline-offset: 3px; }

/* ---------- Le carnet du collectionneur (guide SEO) : même fond, mise en page de livre ---------- */
.guide { position: relative; margin-top: 16px; }
.guide a { color: var(--text); text-decoration-color: rgba(242, 163, 58, 0.7); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.guide a:hover { color: var(--accent); }
.guide-label { padding-bottom: 12px; border-bottom: 2px solid var(--text); font-weight: 500; font-size: 14px; color: var(--text); }
.guide-sec { display: grid; gap: 18px; padding: 32px 0 36px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--top-h) + 16px); }
.guide-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.gi { display: flex; flex-direction: column; gap: 10px; }
.gi h2 { font-size: 24px; }
.gi p { font-size: 16px; color: var(--muted); max-width: 34em; }
.gb { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.gb > p, .gb li p, .gb dd, .gb td { color: var(--muted); }
.guide-sec h3 { font-size: 16px; }
.guide-foot { font-size: 15px; color: var(--muted); }
/* Tableaux du carnet : filets, pas de survol */
.guide .data th, .guide .data td { vertical-align: top; }
.guide .data tbody tr:hover { background: none; }
.guide .data tbody th { font-weight: 600; color: var(--text); }
.guide .data td { line-height: 1.5; }
.guide .data small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.fmt-table th[scope="row"] { width: 38%; padding-right: 14px; }
.fmt { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 14px; align-items: center; }
.fmt img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4)); }
.fmt-table .code { color: var(--text); }
/* Où acheter : trois circuits, puis le pense-bête */
.channels { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.channels li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.channels p { color: var(--muted); }
.memo { padding: 4px 0 4px 18px; border-left: 2px solid var(--accent); }
.memo ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.memo li { position: relative; padding-left: 18px; color: var(--muted); }
.memo li::before { content: '–'; position: absolute; left: 0; color: var(--accent); }
/* Cote : cinq repères, terme dans la marge */
.marks { display: grid; margin: 0; border-top: 1px solid var(--line); }
.marks > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.marks dt { font-weight: 600; }
.marks dd { margin: 0; }
.fx-ref, .fx-up, .fx-down { font-weight: 500; }
.fx-ref { color: var(--text); }
.fx-up { color: var(--up); }
.fx-down { color: var(--down); }
.fx-ref::before { content: '= '; }
.fx-up::before { content: '↑ '; }
.fx-down::before { content: '↓ '; }
.num-ex { font-weight: 600; font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.num-ex.pk { color: #ecc95e; }
.num-ex.op { color: #f3958b; }
.num-ex.rb { color: #72d4c6; }
/* Préco : le déroulé, numéros dans la marge */
.numbered { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; border-top: 1px solid var(--line); }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.numbered li::before { content: counter(n) '.'; grid-row: span 2; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.numbered li.key::before, .numbered li.key h3 { color: var(--accent); }
.numbered p { margin-top: 3px; color: var(--muted); }
.key-note { margin-left: 4px; font-weight: 400; font-size: 14px; color: var(--muted); }
/* Préco : vocabulaire en dictionnaire, entrée en gras puis définition à la suite */
.dict { margin: 0; display: grid; gap: 12px; }
.dict > div { break-inside: avoid; padding-bottom: 12px; border-bottom: 1px solid var(--line); line-height: 1.55; }
.dict dt, .dict dd { display: inline; margin: 0; }
.dict dt { font-weight: 600; font-size: 16px; }
.dict .pos { margin: 0 6px 0 4px; font-size: 13px; color: var(--faint); }
.dict dd { color: var(--muted); }

/* ---------- Mobile : rangées qui défilent au doigt ; tableaux du carnet en fiches ---------- */
@media (max-width: 767px) {
  .picks { flex-wrap: nowrap; margin: 0 calc(-1 * var(--pad-x)); padding: 0 var(--pad-x); overflow-x: auto; scrollbar-width: none; }
  .picks::-webkit-scrollbar { display: none; }
  .pick { flex: none; }
  .guide .data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .guide .data, .guide .data tbody { display: block; }
  .guide .data tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h x" "d d"; column-gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .guide .data th, .guide .data td { width: auto; padding: 0; border: 0; }
  .guide .data tbody th { grid-area: h; }
  .guide .fmt-table td { grid-area: d; margin-top: 8px; padding-left: 70px; }
  .guide-table.state td:nth-child(2), .guide-table.nums td:nth-child(3) { grid-area: d; margin-top: 6px; }
  .guide-table.state td:nth-child(3) { grid-area: x; max-width: 11em; text-align: right; }
  .guide-table.nums td:nth-child(2) { grid-area: x; }
  .stock-table .thumb { width: 44px; height: 44px; }
  .d-only { display: none; }
  .stock-table th, .stock-table td { padding-left: 6px; padding-right: 6px; }
  .stock-table .cell-prod { gap: 12px; }
}
/* Une colonne : la carte inclinable et son cartel côte à côte */
@media (max-width: 1023px) {
  .tilt-zone { flex-direction: row; align-items: center; justify-content: flex-start; gap: 22px; padding: 0; }
  .tilt { flex: none; width: 140px; }
  .cartel { flex: 1; min-width: 0; width: auto; }
}

/* ---------- Tablette ---------- */
@media (min-width: 768px) {
  .c-trend { display: table-cell; }
  .plots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf { --plank: 150px; }
  .wall-cards { grid-auto-columns: 136px; }
  .channels li { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
  .marks > div { grid-template-columns: 210px minmax(0, 1fr); gap: 20px; }
  .dict { display: block; columns: 2; column-gap: 40px; }
  .dict > div { margin-bottom: 12px; }
  .cal-item { grid-template-columns: 60px 80px minmax(0, 1fr) auto; padding: 18px 0; }
  .cal-item .thumb { width: 80px; height: 80px; }
  .cal-day b { font-size: 40px; }
  .cal-text { display: contents; }
  .cal-text .row-link { grid-column: 3; }
  .countdown { grid-column: 4; margin: 0; text-align: right; font-size: 17px; font-weight: 500; color: var(--text); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  h2 { font-size: 28px; }
  main.tool { gap: 88px; }
  .hero { align-items: center; }
  .hero > .side { padding-top: 0; }
  .preco .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filters { margin: 0 0 4px; padding: 0; }
  .sec-head { margin-bottom: 18px; }
  .board { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 64px; row-gap: 80px; align-items: start; }
  .board-main { grid-column: 1; }
  .board-side { grid-column: 2; grid-row: 1 / span 2; }
  .board-full { grid-column: 1 / -1; }
  .board-side .sec-head h2 { font-size: 24px; }
  .shelf { --plank: 170px; grid-auto-columns: minmax(124px, 1fr); column-gap: 24px; }
  .stub-price { font-size: 23px; }
  .tilt { width: 270px; }
  .cartel { width: 270px; }
  /* Mur : grille dense de 8 colonnes, plus de défilement */
  .wall-cards { grid-auto-flow: row; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 28px 18px; margin: 0; padding: 0; overflow: visible; }
  #evolution .plot svg { height: 200px; }
  .next { grid-template-columns: 168px minmax(0, 1fr); column-gap: 28px; }
  .next .photo { width: 168px; height: 168px; }
  .next .row-link { font-size: 22px; }
  .next-count b { font-size: 44px; }
  /* Calendrier : le mois en grand dans la marge, les sorties à droite */
  .cal-month { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; padding-top: 32px; }
  .cal-mname { position: sticky; top: calc(var(--top-h) + 24px); align-self: start; padding-top: 12px; font-size: 40px; }
  .cal-mname span { display: block; margin-top: 4px; font-size: 18px; }
  .cal-item { grid-template-columns: 72px 96px minmax(0, 1fr) auto; column-gap: 24px; padding: 20px 0; }
  .cal-item .thumb { width: 96px; height: 96px; }
  .cal-day b { font-size: 48px; }
  .cal-text .row-link { font-size: 20px; }
  /* Carnet : le titre de chaque chapitre dans la marge, le contenu à droite */
  .guide-sec { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; padding: 48px 0 52px; }
  .gi { position: sticky; top: calc(var(--top-h) + 24px); align-self: start; }
  .gi h2 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .data tbody tr, .pick, .sec-link::after, .shelf-pic img, .wall-cards img { transition: none; }
  .shelf li:hover .shelf-pic img, .wall-cards a:hover img, .wall-cards a:focus-visible img { transform: none; }
}
/* ---------- Fin sections (refonte) ---------- */

/* ---------- Vignettes des cartes : suggestions de recherche et tunnel ---------- */
.suggest li:not(.empty) { display: flex; align-items: center; gap: 12px; }
.sug-thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.sug-thumb.is-card { width: 34px; height: 47px; }
.sug-thumb img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.sug-thumb.is-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; filter: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.sug-text { min-width: 0; }
.recap .photo.slim { width: 56px; height: 78px; }
/* Grande carte sous le titre du résultat, sur desktop où la colonne a la place */
.result-card { display: none; margin: 0; }
@media (min-width: 1024px) {
  .result-card { display: block; width: 260px; }
  .result-card img { display: block; width: 100%; height: auto; border-radius: 4.8% / 3.4%; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); }
  .recap.with-card .photo { display: none; }
}

/* ---------- Tunnel : conditions sous le bouton du paywall, graphique flouté du résultat ---------- */
.terms { font-size: 12px; line-height: 1.55; color: var(--muted); }
.terms a { color: var(--text); text-underline-offset: 2px; }
.teaser-rows .chart { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.chart-title { color: var(--text); font-weight: 600; }
.chart svg { display: block; width: 100%; height: 112px; overflow: visible; }
.chart .grid { stroke: var(--line-strong); stroke-opacity: 0.25; stroke-dasharray: 3 4; }
.chart .curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); }
/* Flou : la courbe se devine, les valeurs restent cachées ; le titre du graphique reste lisible. */
.teaser-rows .chart svg { filter: blur(2.5px); }
.teaser-rows .chart-delta, .teaser-rows .chart-axis { filter: blur(4px); }
/* Paywall : produit en grand dans le rappel, avantages mis en avant (celui de la recherche en premier) */
[data-page="debloquer"] .recap { gap: 16px; padding: 16px; }
[data-page="debloquer"] .recap .photo.small { width: 104px; height: 104px; }
[data-page="debloquer"] .recap .photo.slim { width: 84px; height: 117px; }
.pay-perks { display: flex; flex-direction: column; gap: 10px; }
.pay-perks-title { font-size: 16px; font-weight: 600; color: var(--text); }
.pay-perks .perks { display: grid; gap: 8px; border: 0; }
.pay-perks .perks li {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 48px;
  border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface);
}
.pay-perks .perks li::before {
  content: ''; position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141c2e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.pay-perks .perks b { font-size: 15px; font-weight: 600; color: var(--text); }
.pay-perks .perks span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.pay-perks .perks li.is-match { padding-right: 100px; border-color: rgba(242, 163, 58, 0.6); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.pay-perks .perks li.is-match::after { content: 'Ta recherche'; position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 600; color: var(--accent); }
@media (min-width: 1024px) {
  [data-page="debloquer"] .recap .photo.small { width: 140px; height: 140px; }
  [data-page="debloquer"] .recap .photo.slim { width: 110px; height: 154px; }
  .pay-perks .perks li { padding-top: 14px; padding-bottom: 14px; }
}
/* Paywall : mention SSL, cartes acceptées et réassurance sous le bouton */
.pay-secure { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pay-secure-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--up); }
.pay-secure-label svg { width: 16px; height: 16px; }
.pay-logos { display: inline-flex; gap: 6px; }
.pay-logo { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 28px; padding: 0 7px; border-radius: 5px; background: #fff; }
.pay-logo img { display: block; width: auto; height: auto; max-height: 15px; }
.pay-logo:last-child img { max-height: 19px; }
.pay-logo-cb { min-width: 0; padding: 0; overflow: hidden; background: none; }
.pay-logo-cb img { height: 28px; max-height: none; }
.pay-reassure { display: grid; gap: 8px; margin: 2px 0 4px; padding: 0; list-style: none; font-size: 13px; color: var(--text); }
.pay-reassure li { display: flex; align-items: center; gap: 10px; }
.pay-reassure svg { flex: none; width: 18px; height: 18px; color: var(--up); }

/* ---------- Visionneuse de cartes ---------- */
/* <dialog> plein écran créé par app.js (cardViewer). Ici le zoom seul, qui sert aussi à la grande carte de
   /resultat ; la galerie de /collections (flèches, fiche, reflet holo) est dans collections.css. */
html:has(.cv[open]) { overflow: hidden; }
.cv {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #090d17; color: var(--text); overflow: hidden; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "stage";
}
.cv:not([open]) { display: none; }
.cv::backdrop { background: rgba(9, 13, 23, 0.6); }
.cv[open] { animation: cv-in 160ms ease-out; }
@keyframes cv-in { from { opacity: 0; } }
.cv-stage { grid-area: stage; position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.cv.is-zoomed .cv-stage { cursor: grab; }
.cv.is-dragging .cv-stage { cursor: grabbing; }
.cv-card { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; will-change: transform; }
.cv-card.cv-anim { transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.cv-tilt { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 4.6% / 3.3%; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35); }
.cv-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.cv-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(244, 238, 226, 0.14); border-radius: 50%; background: rgba(27, 37, 56, 0.86); color: var(--text);
  cursor: pointer; transition: background 150ms, opacity 150ms;
}
.cv-btn:hover { background: var(--surface-2); }
.cv-btn svg { width: 20px; height: 20px; }
.cv-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.cv-close { position: absolute; top: 8px; right: 8px; z-index: 3; }
/* Zoom : colonne + / taille / − en bas à droite, dans la marge à côté de la carte */
.cv-zoombar {
  grid-area: stage; align-self: end; justify-self: end; z-index: 2; display: none; flex-direction: column-reverse; align-items: center; gap: 2px;
  margin: 0 24px 24px 0; padding: 3px; border: 1px solid rgba(244, 238, 226, 0.14); border-radius: 26px; background: rgba(27, 37, 56, 0.86);
}
.cv-zoombar .cv-btn { border: 0; background: transparent; }
.cv-zoombar .cv-btn:hover { background: var(--surface-2); }
.cv-zoomval { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: none; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.cv-zoomval:hover { color: var(--text); }
.cv-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .cv-zoombar { display: flex; }
  .cv-close { top: 16px; right: 16px; }
}
/* Grande carte de /resultat : elle s'ouvre en grand au clic */
.result-card img[role="button"] { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) {
  .cv[open] { animation: none; }
  .cv-card.cv-anim, .cv-btn { transition: none; }
}

/* ---------- Petits écrans : tout tient dans la largeur, aucune rangée à faire défiler ---------- */
@media (max-width: 767px) {
  .picks { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; gap: 8px 18px; }
  .shelf { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; overflow: visible; }
  .wall-cards { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; margin: 0; padding: 0; overflow: visible; }
  .wall-cards .wall-cap { font-size: 12px; }
  .filters { flex-wrap: wrap; gap: 0 20px; margin: 0 0 4px; padding: 0; overflow: visible; }
}
@media (max-width: 374px) {
  .top-in > .nav { padding: 0 4px; }
  .top-in > .nav a { padding: 0 6px; font-size: 13px; }
  .stock-table th, .stock-table td { padding-left: 3px; padding-right: 3px; }
  .stock-table .thumb { width: 36px; height: 36px; }
  .stock-table .cell-prod { gap: 8px; }
  .wall-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Accueil : tableau du stock limité à 8 lignes, avec un fondu ; le bouton déplie le reste */
.table-wrap.is-collapsed { position: relative; }
.table-wrap.is-collapsed tbody tr:nth-child(n + 9) { display: none; }
.table-wrap.is-collapsed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, rgba(20, 28, 46, 0), var(--bg)); pointer-events: none; }
.more-rows {
  display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-field);
  background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.more-rows:hover { background: var(--surface); }