/* ═══════════════════════════════════════════════
   DESIGN SYSTEM TCG PRO — LE LANGAGE VISUEL

   Un seul accent, quatre couleurs fonctionnelles, une palette réservée
   aux graphiques. Toute couleur écrite ailleurs qu'ici est un bug : elle
   ne suivrait pas le thème clair et briserait la grammaire visuelle.

   Les noms historiques (--gold, --acc2, --blu…) restent définis comme
   alias : 7 900 lignes de CSS et 14 modules les utilisent, et renommer
   d'un coup aurait cassé plus de choses que cela n'en aurait clarifié.
   Le nom sémantique est la source, l'alias suit.
═══════════════════════════════════════════════ */
/* ═══ TYPOGRAPHIE — Geist (Vercel, SIL OFL) auto-hébergée ═══
   Auto-hébergée et non chargée depuis le CDN Google : pas de transmission
   d'IP à un tiers (RGPD/CNIL), et rendu identique sur tous les OS —
   les prix ne dépendent plus de la police mono du système. */
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/GeistSans.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Display + body fonts */
  --font-display: 'Geist', 'Space Grotesk', -apple-system, sans-serif;
  --font-body: 'Geist', 'Inter', -apple-system, 'SF Pro Text', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ═══ ÉCHELLE TYPOGRAPHIQUE ═══════════════════════════════════════
     Sept rôles, pas plus. « Data » existe séparément de « Body » parce
     que 12 458,20 € ne se lit pas comme une phrase : chiffres tabulaires
     pour que les colonnes s'alignent, et un cran de graisse en plus. */
  --fs-display: clamp(30px, 7vw, 40px);
  --fs-h1:      22px;
  --fs-h2:      17px;
  --fs-h3:      14.5px;
  --fs-body:    14px;
  --fs-caption: 12px;
  --fs-micro:   11px;
  --fs-data:    15px;

  --lh-display: 1.05;
  --lh-title:   1.25;
  --lh-body:    1.5;

  --fw-display: 800;
  --fw-title:   700;
  --fw-medium:  600;
  --fw-body:    400;

  --ls-display: -.03em;
  --ls-title:   -.015em;
  --ls-caps:    .06em;

  /* ═══ ESPACEMENT ══════════════════════════════════════════════════
     Base 4 px. Une valeur hors échelle est une décision non prise. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ═══ ÉLÉVATION ═══════════════════════════════════════════════════
     En sombre l'ombre ne se voit pas : la profondeur vient de la
     surface et de la bordure. Trois niveaux suffisent. */
  --sh-1: 0 1px 2px rgba(0,0,0,.20);
  --sh-2: 0 4px 12px rgba(0,0,0,.28);
  --sh-3: 0 12px 32px rgba(0,0,0,.36);

  /* ═══ ACCENT UNIQUE ═══════════════════════════════════════════════
     Une seule teinte — indigo — porte les actions principales, les
     liens, l'état actif, le focus et la sélection, dans les deux
     thèmes : l'identité doit rester reconnaissable en passant de l'un
     à l'autre.

     Deux déclinaisons, parce qu'une couleur d'accent sert à deux choses
     dont les contraintes de contraste sont opposées :
     — --accent : posé SUR le fond de page (texte, icône, bordure).
       Il doit donc être clair en thème sombre. #818CF8 sur #0B0F1A = 6,4:1.
     — --accent-fill : le fond d'un bouton, dont le libellé est blanc.
       Il doit donc être soutenu. #5B5BE8 sous du blanc = 5,1:1.
     Une valeur unique aurait échoué d'un côté ou de l'autre : #6366F1
     ne donnait que 4,3:1 comme texte et 4,47:1 comme fond. */
  --accent:        #818CF8;
  --accent-hover:  #A5B4FC;
  --accent-press:  #6366F1;
  --accent-fill:       #5B5BE8;
  --accent-fill-hover: #6366F1;
  --accent-fill-press: #4F46E5;
  --accent-soft:   rgba(99,102,241,.12);
  --accent-line:   rgba(99,102,241,.30);
  --on-accent:     #FFFFFF;
  /* Libellé posé sur un aplat fonctionnel. En thème sombre ces couleurs
     sont claires (émeraude, ambre, ciel) : le texte doit être sombre.
     En thème clair elles sont soutenues : le texte devient blanc. */
  --on-fill:       #0B0F1A;

  /* ═══ COULEURS FONCTIONNELLES ═════════════════════════════════════
     Jamais employées comme décor. Toujours accompagnées d'un signe ou
     d'un mot : la couleur seule ne transmet aucune information. */
  --success:      #10B981;
  --success-soft: rgba(16,185,129,.13);
  --success-line: rgba(16,185,129,.30);

  --warning:      #F59E0B;
  --warning-soft: rgba(245,158,11,.14);
  --warning-line: rgba(245,158,11,.30);

  /* Rose plutôt que rouge franc : #F43F5E tombait à 4,41:1 sur une carte
     et 3,84:1 sur une surface profonde. Une perte doit se lire partout,
     pas seulement sur le fond de page. */
  --danger:       #FB7185;
  --danger-soft:  rgba(251,113,133,.13);
  --danger-line:  rgba(251,113,133,.30);

  --info:         #38BDF8;
  --info-soft:    rgba(56,189,248,.12);
  --info-line:    rgba(56,189,248,.30);

  /* Palier intermédiaire — « correct sans être bon ». Sans lui, un
     score de 65/100 devait choisir entre le vert et l'orange. */
  --mid:          #A3E635;
  --mid-soft:     rgba(163,230,53,.12);

  --neutral:      #94A3B8;
  --neutral-soft: rgba(148,163,184,.12);

  /* ═══ PALETTE GRAPHIQUES ══════════════════════════════════════════
     Six teintes pour les répartitions et les séries. Ce n'est pas une
     réserve d'accents : rien d'interactif ne les utilise. L'ordre est
     fixe, donc « Cartes » garde sa couleur d'un écran à l'autre. */
  --dv-1: #6366F1;
  --dv-2: #06B6D4;
  --dv-3: #A855F7;
  --dv-4: #F97316;
  --dv-5: #14B8A6;
  --dv-6: #EC4899;
  /* Grille et axes : discrets, jamais lus, seulement suivis du regard */
  --dv-grid: rgba(248,250,252,.07);
  --dv-axis: rgba(248,250,252,.30);

  /* ═══ POLYCHROME ÉQUILIBRÉ — Glass + textures + multi-couleurs ═══ */

  /* Backgrounds — Deep navy layered */
  --bg:     #0B0F1A;
  --bg1:    #131826;
  --bg2:    #1A2032;
  --bg3:    #232B3F;
  --bg4:    #2E374D;
  --bg5:    #3A4560;

  /* Text */
  --t1:     #F8FAFC;
  --t2:     rgba(248,250,252,.68);
  --t3:     rgba(248,250,252,.42);
  --t4:     rgba(248,250,252,.20);

  --sep:    rgba(255,255,255,.06);
  --sep2:   rgba(255,255,255,.03);

  /* ── Alias historiques ──────────────────────────────────────────────
     Un seul jeu de valeurs, deux vocabulaires. Modifier une couleur se
     fait toujours au-dessus, jamais ici. */
  --gold:     var(--accent);
  --gold-lt:  var(--accent-hover);
  --gold-dk:  var(--accent-press);
  --gold-bg:  var(--accent-soft);
  --gold-bd:  var(--accent-line);

  --acc2:     var(--dv-5);
  --acc2-lt:  #2DD4BF;
  --acc2-bg:  rgba(20,184,166,.12);
  --acc2-bd:  rgba(20,184,166,.30);

  --premium:    var(--warning);
  --premium-bg: var(--warning-soft);
  --premium-bd: var(--warning-line);

  --up:       var(--success);
  --up-lt:    #34D399;
  --up-bg:    var(--success-soft);
  --up-bd:    var(--success-line);

  --dn:       var(--danger);
  --dn-lt:    #FB7185;
  --dn-bg:    var(--danger-soft);
  --dn-bd:    var(--danger-line);

  /* Anciennes « couleurs de soutien » : elles concurrençaient l'accent.
     Elles ne sont plus qu'une vue sur la palette des graphiques. */
  --blu:      var(--info);
  --blu-bg:   var(--info-soft);
  --pur:      var(--dv-3);
  --pur-bg:   rgba(168,85,247,.12);
  --ora:      var(--dv-4);
  --ora-bg:   rgba(249,115,22,.12);
  --tl:       var(--dv-2);
  --tl-bg:    rgba(6,182,212,.12);
  --pink:     var(--dv-6);
  --pink-bg:  rgba(236,72,153,.12);

  /* Glass textures */
  --glass-bg: rgba(255,255,255,.04);
  --glass-bd: rgba(255,255,255,.08);
  --glass-blur: blur(20px) saturate(180%);

  /* Safe areas */
  --sat: env(safe-area-inset-top, 44px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* Layout */
  --nav-h:  44px;
  --tab-h:  58px;
  --r:      12px;
  --r-lg:   16px;
  --r-xl:   24px;
}

/* ════════════════════════════════════════════
   ════ LIGHT MODE — Premium clean theme ════
   ════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* LIGHT MODE Linear/Stripe — blanc/violet sharp */
  --bg:     #FAFAFA;
  --bg1:    #FFFFFF;
  --bg2:    #F4F4F5;
  --bg3:    #E4E4E7;
  --bg4:    #D4D4D8;
  --bg5:    #A1A1AA;

  --t1:     #0A0A0F;
  --t2:     rgba(10,10,15,.65);
  --t3:     rgba(10,10,15,.40);
  --t4:     rgba(10,10,15,.18);

  --sep:    rgba(10,10,15,.08);
  --sep2:   rgba(10,10,15,.04);

  /* Accent : même teinte indigo, assombrie pour tenir 4,5:1 sur blanc.
     Passer du violet à l'indigo entre les deux thèmes donnait
     l'impression de changer de produit, pas d'environnement. */
  /* Sur blanc, le rapport s'inverse : c'est le texte qui doit être
     soutenu (#4338CA = 7,6:1) et le fond de bouton un cran plus clair
     (#4F46E5 sous du blanc = 6,3:1). */
  --accent:        #4338CA;
  --accent-hover:  #3730A3;
  --accent-press:  #312E81;
  --accent-fill:       #4F46E5;
  --accent-fill-hover: #4338CA;
  --accent-fill-press: #3730A3;
  --accent-soft:   rgba(79,70,229,.10);
  --accent-line:   rgba(79,70,229,.28);
  --on-accent:     #FFFFFF;
  --on-fill:       #FFFFFF;

  /* Fonctionnelles assombries : sur blanc, l'émeraude et l'ambre du
     thème sombre tombent sous 3:1 et deviennent illisibles. Les valeurs
     tiennent 4,5:1 sur les QUATRE niveaux de surface, pas seulement sur
     le fond de page — un chiffre posé dans une puce grise doit rester
     lisible autant qu'un titre sur fond blanc. */
  --success:      #065F46;
  --success-soft: rgba(6,95,70,.10);
  --success-line: rgba(6,95,70,.28);

  --warning:      #92400E;
  --warning-soft: rgba(146,64,14,.10);
  --warning-line: rgba(146,64,14,.28);

  --danger:       #B91C1C;
  --danger-soft:  rgba(185,28,28,.10);
  --danger-line:  rgba(185,28,28,.28);

  --info:         #075985;
  --info-soft:    rgba(7,89,133,.10);
  --info-line:    rgba(7,89,133,.28);

  --mid:          #3F6212;
  --mid-soft:     rgba(63,98,18,.10);

  --neutral:      #4B5563;
  --neutral-soft: rgba(75,85,99,.10);

  --dv-1: #4F46E5;
  --dv-2: #0E7490;
  --dv-3: #9333EA;
  --dv-4: #C2410C;
  --dv-5: #0D9488;
  --dv-6: #BE185D;
  --dv-grid: rgba(10,10,15,.08);
  --dv-axis: rgba(10,10,15,.35);

  --sh-1: 0 1px 2px rgba(10,10,15,.06);
  --sh-2: 0 4px 12px rgba(10,10,15,.08);
  --sh-3: 0 12px 32px rgba(10,10,15,.12);

  /* Alias : seules les valeurs qui ne dérivent pas d'un token sémantique
     ont besoin d'être redéfinies ici — le reste suit tout seul. */
  --acc2-lt:  #0F766E;
  --acc2-bg:  rgba(13,148,136,.10);
  --acc2-bd:  rgba(13,148,136,.30);
  /* Les variantes « claires » du thème sombre deviennent des variantes
     SOMBRES ici : sur blanc, #EF4444 ne donne que 3,76:1. */
  --up-lt:    #047857;
  --dn-lt:    #991B1B;
  --pur-bg:   rgba(147,51,234,.10);
  --ora-bg:   rgba(194,65,12,.10);
  --tl-bg:    rgba(14,116,144,.10);
  --pink-bg:  rgba(190,24,93,.10);
}

/* ═══════════════════════════════════════════════
   BACKGROUNDS CONTEXTUELS PAR VUE
   Mesh gradient anime lent + per-view tints
═══════════════════════════════════════════════ */
@keyframes meshShift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
  50% { background-position: 30% 20%, 70% 80%, 60% 40%; }
}
body {
  position: relative;
}
/* Mesh gradient overlay global — anime lent 30s */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(124,58,237,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 100%, rgba(6,182,212,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(168,85,247,.05) 0%, transparent 70%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: meshShift 40s ease-in-out infinite;
  opacity: 1;
  transition: opacity .4s, background .6s;
}

/* Dashboard reseller — warm orange mesh subtle */
:root[data-mode="reseller"] body::before {
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(249,115,22,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 100%, rgba(251,191,36,.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(124,58,237,.04) 0%, transparent 70%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
}

/* Collector dashboard — cosmic violet+cyan */
:root[data-mode="collector"] body::before {
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(124,58,237,.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(6,182,212,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(168,85,247,.06) 0%, transparent 70%);
}

/* Pendant set explorer modal — atténue mesh */
body:has(.cl-set-explorer.open) body::before,
body:has(.card3d-modal.open) body::before {
  opacity: 0.4;
}

/* Per-view tint via :has() */
:root:has(#v-stock.on) body::before {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(20,184,166,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 100%, rgba(124,58,237,.06) 0%, transparent 60%);
}
:root:has(#v-sets.on) body::before {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(6,182,212,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 100%, rgba(124,58,237,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(59,130,246,.06) 0%, transparent 70%);
}
:root:has(#v-tx.on) body::before {
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(16,185,129,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 100%, rgba(244,63,94,.05) 0%, transparent 60%);
}

/* Z-index pour app au-dessus du mesh */
.app { position: relative; z-index: 1; }

/* ════ ONBOARDING 3 STEPS ════ */
.onboard {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(11,15,26,.92);
  backdrop-filter: blur(20px);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .35s ease-out;
}
.onboard.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.onboard-card {
  max-width: 480px; width: 100%;
  background: linear-gradient(135deg, var(--bg2), var(--bg1));
  border: 1px solid var(--gold-bd);
  border-radius: 28px;
  padding: 36px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 120px rgba(99,102,241,.2);
  position: relative;
}
.onboard-progress {
  display: flex; gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}
.onboard-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg4);
  transition: all .3s;
}
.onboard-dot.active {
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  width: 24px; border-radius: 4px;
}
.onboard-step { display: none; animation: onboardSlideIn .4s cubic-bezier(.18,.89,.32,1.28); }
.onboard-step.active { display: block; }
@keyframes onboardSlideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.onboard-emoji { font-size: 56px; text-align: center; margin-bottom: 12px; }
.onboard-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--t1);
  margin-bottom: 8px;
}
.onboard-desc {
  text-align: center;
  color: var(--t2);
  font-size: 15px;
  margin-bottom: 24px;
  line-height: 1.5;
}
.onboard-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 420px) { .onboard-choices { grid-template-columns: 1fr; } }
.onboard-choice {
  padding: 22px 16px;
  background: var(--bg3);
  border: 1px solid var(--glass-bd);
  border-radius: 18px;
  cursor: pointer;
  text-align: center;
  transition: all .2s var(--ease);
  color: var(--t1);
  font-family: inherit;
}
.onboard-choice:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(99,102,241,.25);
}
.onboard-choice-emoji { font-size: 36px; margin-bottom: 10px; }
.onboard-choice-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}
.onboard-choice-desc {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.4;
}

.onboard-demo {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3);
  padding: 18px;
  border-radius: 18px;
  margin-bottom: 20px;
}
.onboard-demo-card {
  width: 70px; aspect-ratio: 0.716;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(99,102,241,.3);
}
.onboard-demo-card img { width: 100%; height: 100%; object-fit: cover; }
.onboard-demo-arrow {
  font-size: 24px;
  color: var(--gold);
}
.onboard-demo-result { flex: 1; }
.onboard-demo-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.onboard-demo-set { font-size: 11px; color: var(--t3); margin: 2px 0; }
.onboard-demo-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 4px 0;
}
.onboard-demo-tag {
  font-size: 11px;
  color: var(--up);
  font-weight: 600;
}

.onboard-tips {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 24px;
}
.onboard-tip {
  padding: 12px 14px;
  background: var(--bg3);
  border-radius: 12px;
  font-size: 13px;
  color: var(--t2);
}

.onboard-cta {
  width: 100%;
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--glass-bd);
  border-radius: 14px;
  color: var(--t1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all .2s;
}
.onboard-cta.primary {
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  border: none;
  color: var(--on-accent);
  box-shadow: 0 8px 24px rgba(99,102,241,.4);
}
.onboard-cta:hover { transform: translateY(-2px); }
.onboard-skip {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: none;
  color: var(--t3);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  padding: 6px;
}

/* ════ QUICK SHEET (long-press FAB) — Fitts + Hick ════ */
.quick-sheet {
  position: fixed; inset: 0; z-index: 9990;
  display: none;
  animation: fadeIn .25s ease-out;
}
.quick-sheet.open { display: block; }
.quick-sheet-bd {
  position: absolute; inset: 0;
  background: rgba(11,15,26,.85);
  backdrop-filter: blur(8px);
}
.quick-sheet-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, var(--bg1), var(--bg));
  border-top: 1px solid var(--glass-bd);
  border-radius: 24px 24px 0 0;
  padding: 12px 20px 30px;
  padding-bottom: calc(30px + var(--sab));
  animation: slideUp .35s cubic-bezier(.18,.89,.32,1.28);
  max-height: 80vh; overflow-y: auto;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.quick-sheet-handle {
  width: 44px; height: 4px;
  background: var(--bg4);
  border-radius: 2px;
  margin: 6px auto 18px;
}
.quick-sheet-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--t1);
  margin-bottom: 18px;
  text-align: center;
}
.quick-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 380px) { .quick-sheet-grid { grid-template-columns: repeat(2, 1fr); } }
.quick-action {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 18px 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s, background .2s, border-color .2s;
  color: var(--t1);
}
.quick-action:active { transform: scale(.94); }
.quick-action:hover { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.30); }
.quick-action-ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 4px;
}
.quick-action-lbl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}
.quick-action-sub {
  font-size: 11px;
  color: var(--t3);
}

/* ════ SPOTLIGHT INTERACTIF — suit curseur souris ════ */
.cursor-spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(99,102,241,.10),
    rgba(20,184,166,.05) 30%,
    transparent 60%
  );
  transition: background .4s ease-out;
  mix-blend-mode: screen;
}

/* ════ CLICK RIPPLE ════ */
.click-ripple {
  position: fixed;
  width: 0; height: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(circle, rgba(99,102,241,.4) 0%, rgba(20,184,166,.2) 40%, transparent 70%);
  animation: rippleExpand .8s ease-out forwards;
}
@keyframes rippleExpand {
  0% { width: 0; height: 0; opacity: .8; }
  100% { width: 400px; height: 400px; opacity: 0; }
}

/* ════ GLASS TEXTURES partout ════ */
.grp, .w, .cell, .modal, .sheet {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.grp {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-bd) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 8px 24px rgba(0,0,0,.4) !important;
}

/* Surfaces avec subtle noise texture overlay */
.grp::after, .w::after, .modal::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .6;
  border-radius: inherit;
  z-index: 0;
  mix-blend-mode: overlay;
}
.grp, .w, .modal { position: relative; }
.grp > *, .w > *, .modal > * { position: relative; z-index: 1; }

/* Subtle hover glow on cards */
.w:hover, .grp:hover {
  border-color: rgba(99,102,241,.20) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 12px 36px rgba(99,102,241,.15),
    0 0 0 1px rgba(99,102,241,.15) !important;
  transition: all .25s cubic-bezier(.18,.89,.32,1.28);
}

/* Scan btn ON state (mode bulk actif) */
.scan-btn-on {
  background: linear-gradient(135deg, var(--accent-fill), var(--warning)) !important;
  color: var(--on-accent) !important;
  border-color: var(--gold) !important;
  font-weight: 700 !important;
}

/* Bulk scan queue list */
.bulk-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 50vh; overflow-y: auto;
  padding: 4px 0;
}
.bulk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
}
.bulk-item img { width: 36px; height: 50px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.bulk-info { flex: 1; min-width: 0; }
.bulk-name { font-size: 13px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-meta { font-size: 11px; color: var(--t3); }
.bulk-price {
  width: 80px; padding: 8px 10px;
  background: var(--bg3); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; color: var(--t1);
  font-size: 14px; font-weight: 700; text-align: right;
  font-family: inherit;
}
.bulk-price:focus { border-color: var(--gold); outline: none; }
.bulk-rm {
  background: none; border: none; color: var(--t3);
  font-size: 18px; cursor: pointer; padding: 4px 6px;
}
.bulk-rm:hover { color: var(--dn); }

/* Form collapse toggle (advanced fields) */
.f-collapse-toggle {
  width: calc(100% - 32px);
  margin: 12px 16px 4px;
  padding: 12px 16px;
  background: rgba(124,58,237,.06);
  border: 1px dashed rgba(124,58,237,.25);
  border-radius: 14px;
  color: var(--gold);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-family: inherit;
  transition: all .15s ease;
}
.f-collapse-toggle:hover, .f-collapse-toggle:active {
  background: rgba(124,58,237,.1);
  border-color: var(--gold);
}
.f-collapse-chev {
  font-size: 18px; transition: transform .25s ease;
}
.f-collapse-toggle.open .f-collapse-chev { transform: rotate(90deg); }

/* Pull-to-refresh indicator */
.ptr-indicator {
  position: absolute; top: -50px; left: 50%;
  transform: translateX(-50%) translateY(0);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 50%;
  z-index: 100;
  transition: transform .3s ease, opacity .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.ptr-spin {
  width: 18px; height: 18px;
  border: 2px solid rgba(124,58,237,.2);
  border-top-color: var(--gold);
  border-radius: 50%;
}
.ptr-indicator.ptr-ready .ptr-spin { background: var(--accent-fill); border-color: var(--gold); }
.ptr-indicator.ptr-loading .ptr-spin { animation: ptrSpin .8s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* Auto-pricing suggestion badge sur stock item */
.sk-suggest {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 8px;
  margin-top:4px;
  background:linear-gradient(135deg, rgba(0,165,96,.10), rgba(124,58,237,.06));
  border:1px solid rgba(0,165,96,.25);
  border-radius:8px;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.sk-suggest:hover, .sk-suggest:active {
  border-color:var(--up); transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,165,96,.2);
}
.sk-suggest-lbl { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.sk-suggest-val { font-size:12px; font-weight:800; color:var(--up); font-variant-numeric:tabular-nums; }
.sk-suggest-roi { font-size:10px; color:var(--gold); font-weight:700; }

/* Stock card image thumbnail */
.sk-card-img {
  width: 44px; height: 60px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  background: var(--bg3);
}

/* Apple-style swipe actions on stock items (mobile only) */
.sk-swipe {
  position: relative;
  transform: translateX(0);
  will-change: transform;
  touch-action: pan-y;
  z-index: 1;
  overflow: hidden;  /* HIDE actions until swipe */
  border-radius: 12px;
}
.sk-swipe-action {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  width: 110px;  /* Largeur fixe action */
}
.sk-swipe-action-left {
  /* Action "Vendre" révélée par swipe DROITE */
  left: 0;
  background: linear-gradient(90deg, var(--up) 0%, #00a560 100%);
}
.sk-swipe-action-right {
  /* Action "Supprimer" révélée par swipe GAUCHE */
  right: 0;
  background: linear-gradient(90deg, #d04848 0%, var(--dn) 100%);
}
/* Desktop : disable swipe actions (no touch) */
@media (hover: hover) and (pointer: fine) {
  .sk-swipe-action { display: none; }
  .sk-swipe { overflow: visible; }
}
.sk-swipe-action-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
  transform: scale(0.85);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sk-swipe-action-content .sk-action-ico {
  font-size: 22px;
  display: inline-block;
  transform: scale(1);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sk-swipe.sw-threshold-left .sk-swipe-action-left .sk-swipe-action-content { transform: scale(1); }
.sk-swipe.sw-threshold-left .sk-swipe-action-left .sk-action-ico { transform: scale(1.25); }
.sk-swipe.sw-threshold-right .sk-swipe-action-right .sk-swipe-action-content { transform: scale(1); }
.sk-swipe.sw-threshold-right .sk-swipe-action-right .sk-action-ico { transform: scale(1.25); }

/* Le row main slide au-dessus des actions */
.sk-swipe-row {
  position: relative;
  background: var(--bg2) !important;
  z-index: 2;
  transition: transform .35s cubic-bezier(.18, .89, .32, 1.28);
  will-change: transform;
}
:root[data-theme="light"] .sk-swipe-row { background: #fff !important; }
.sk-swipe[data-dragging="1"] .sk-swipe-row { transition: none; }
.sk-swipe.sw-left .sk-swipe-row { transform: translateX(-110px); }
.sk-swipe.sw-right .sk-swipe-row { transform: translateX(110px); }
.sk-swipe.sw-commit-left .sk-swipe-row { transform: translateX(-100%); }
.sk-swipe.sw-commit-right .sk-swipe-row { transform: translateX(100%); }

/* Light mode : adjustments spécifiques */
:root[data-theme="light"] .navbar { background: rgba(247,247,249,.92); }
:root[data-theme="light"] .tabbar { background: rgba(247,247,249,.92); }
:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] .grp { box-shadow: 0 1px 3px rgba(0,0,0,.04); }
:root[data-theme="light"] .w { box-shadow: 0 1px 3px rgba(0,0,0,.04); }
:root[data-theme="light"] .lvl-card { box-shadow: 0 2px 8px rgba(139,92,246,.08); }
:root[data-theme="light"] #v-dash .w.wide {
  box-shadow: 0 4px 20px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.02) inset !important;
}

/* Mode visibility : mode-only classes */
:root[data-mode="reseller"] .mode-collector-only { display: none !important; }
:root[data-mode="collector"] .mode-reseller-only { display: none !important; }

/* Collector Dashboard */
.col-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px 16px 0;
}
@media (min-width: 600px) {
  .col-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Tuiles compactes en ligne : icône · chiffre · libellé sur une seule
   hauteur — même info, moitié moins d'écran. */
.col-stat {
  background: var(--bg2);
  border: .5px solid var(--bg4);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; flex-direction: row; align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .15s, border-color .2s;
}
.col-stat:active { transform: scale(.97); }
.col-stat-ico { font-size: 17px; line-height: 1; }
.col-stat-val { font-size: 17px; font-weight: 800; color: var(--t1); letter-spacing: -.4px; }
.col-stat-lbl { font-size: 10px; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; line-height: 1.15; }

.cl-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
  padding: 12px;
}
.cl-card-thumb {
  position: relative;
  aspect-ratio: 63/88;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg3);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.18,.89,.32,1.28), box-shadow .2s;
}
.cl-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-card-thumb:active { transform: scale(.94); }
.cl-card-thumb:hover { box-shadow: 0 6px 20px rgba(124,58,237,.25); transform: translateY(-2px); }
.cl-card-thumb-fallback {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 9px; color: var(--t3); padding: 4px; text-align: center;
}
.cl-card-thumb-num {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
}

.cl-top-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: .5px solid var(--sep);
  cursor: pointer;
  transition: background .15s;
}
.cl-top-row:last-child { border-bottom: none; }
.cl-top-row:hover { background: var(--bg2); }
.cl-top-rank {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--gold);
}
.cl-top-rank.r1 { background: linear-gradient(135deg, #FFD700, #D4AF37); color: #1A1200; }
.cl-top-rank.r2 { background: linear-gradient(135deg, #C0C0C8, #9A9AA4); color: #1A1A20; }
.cl-top-rank.r3 { background: linear-gradient(135deg, #A05A22, #6B3410); color: #FFFFFF; }
.cl-top-img { width: 38px; height: 53px; flex-shrink: 0; border-radius: 4px; object-fit: cover; background: var(--bg3); }
.cl-top-info { flex: 1; min-width: 0; }
.cl-top-name { font-size: 14px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-top-meta { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.cl-top-val { font-size: 15px; font-weight: 700; color: var(--gold); white-space: nowrap; }

/* Serie accordion list Pokeitem-style */
.cl-serie-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg2);
  border: .5px solid var(--bg4);
  border-radius: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background .15s, border-color .2s;
}
.cl-serie-row:active { transform: scale(.99); }
.cl-serie-row:hover { background: var(--bg3); }
.cl-serie-logo {
  width: 64px; height: 40px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.2);
  border-radius: 8px;
  overflow: hidden;
}
.cl-serie-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-serie-logo-fallback { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--gold); text-align: center; }
.cl-serie-info { flex: 1; min-width: 0; }
.cl-serie-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--t1); }
.cl-serie-meta { font-size: 12px; color: var(--t3); margin-top: 2px; }
.cl-serie-chev { color: var(--t3); font-size: 18px; transition: transform .25s; }
.cl-serie-row.open .cl-serie-chev { transform: rotate(90deg); }

.cl-serie-sets {
  display: none;
  padding: 4px 0 12px 12px;
  margin-top: -4px;
}
.cl-serie-row.open + .cl-serie-sets { display: block; }
.cl-set-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg1);
  border: .5px solid var(--bg3);
  border-radius: 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background .15s;
}
.cl-set-row:hover { background: var(--bg2); }
.cl-set-row-logo {
  width: 56px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.15);
  border-radius: 6px;
  overflow: hidden;
}
.cl-set-row-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-set-row-info { flex: 1; min-width: 0; }
.cl-set-row-name { font-size: 14px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-set-row-progress { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cl-set-row-bar {
  flex: 1; height: 3px;
  background: var(--bg4);
  border-radius: 2px;
  overflow: hidden;
}
.cl-set-row-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-fill), var(--accent-fill-hover));
  transition: width .4s ease-out;
}
.cl-set-row-pct { font-size: 11px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.cl-set-row-count { font-size: 11px; color: var(--t3); white-space: nowrap; }
.cl-set-row-chev { color: var(--t3); font-size: 16px; }
.cl-set-row-badge {
  width: 56px !important; height: 40px !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 8px !important;
  padding: 4px;
}
.cl-set-row-badge img { max-width:100%; max-height:100%; object-fit:contain; }

/* ─── Master Set toggle (Pokécardex-style) ─── */
.cl-master-set-row { padding: 8px 14px 12px; }
.cl-master-set-toggle {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
  font-size: 13px; color: var(--t1);
}
.cl-master-set-toggle input { display: none; }
.cl-master-slider {
  position: relative;
  width: 38px; height: 22px;
  background: var(--bg3);
  border-radius: 11px;
  transition: background .2s;
  flex-shrink: 0;
}
.cl-master-slider::after {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  background: var(--t1);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform .2s;
}
.cl-master-set-toggle input:checked + .cl-master-slider { background: var(--accent-fill); }
.cl-master-set-toggle input:checked + .cl-master-slider::after { transform: translateX(16px); }
.cl-master-label { font-weight: 600; }
.cl-master-hint { color: var(--t3); font-weight: 400; font-size: 11px; margin-left: 4px; }

/* ─── Cartes set : wrapper + actions + edition label (Pokécardex) ─── */
.cl-card-wrap {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 4px;
}
.cl-card-actions {
  display: flex; gap: 6px; justify-content: center;
  padding: 2px 0;
}
.cl-card-actions button {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 13px; color: var(--t1);
  cursor: pointer;
  transition: background .15s;
}
.cl-card-actions button:hover { background: rgba(255,255,255,.12); }
.cl-card-actions .cl-card-fav.on { color: var(--danger); }
.cl-card-edition {
  text-align: center;
  font-size: 10px; color: var(--t3);
  background: rgba(255,255,255,.04);
  border-radius: 5px;
  padding: 3px 6px;
  font-weight: 500;
  letter-spacing: .02em;
}
.cl-grid-small .cl-card-edition { font-size: 9px; padding: 2px 4px; }
.cl-grid-small .cl-card-actions button { padding: 2px 4px; font-size: 11px; }

/* ─── Variantes façon Pokécardex ───
   « Reverse » sous une carte = la version existe ; en vue Master Set les
   puces deviennent des coches cliquables, une par version. */
.cl-var-tag {
  display: inline-block; margin-left: 4px;
  padding: 1px 5px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .03em;
  color: var(--dv-3); background: rgba(124,58,237,.16);
  border: .5px solid rgba(124,58,237,.35);
  vertical-align: 1px;
}
.cl-var-tag.on { color: var(--success); background: rgba(16,224,144,.12); border-color: rgba(16,224,144,.35); }
.cl-card-variantes {
  display: flex; gap: 4px;
}
.cl-var-chip {
  flex: 1; min-width: 0;
  padding: 4px 2px; border-radius: 6px;
  font-size: 10px; font-weight: 600; font-family: inherit;
  letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--t3); background: rgba(255,255,255,.04);
  border: .5px solid var(--bg4);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cl-var-chip.on { color: var(--success); background: rgba(16,224,144,.1); border-color: rgba(16,224,144,.4); }
.cl-var-chip.rev:not(.on) { color: var(--dv-3); border-color: rgba(124,58,237,.35); }
.cl-var-chip:active { transform: scale(.95); }
.cl-grid-small .cl-var-chip { font-size: 8.5px; padding: 3px 1px; }

/* Sélecteur de version dans la fiche carte */
.card3d-variantes {
  display: flex; gap: 6px; justify-content: center;
  margin-top: 10px;
}
.card3d-var-btn {
  padding: 6px 16px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  color: var(--t3); background: rgba(255,255,255,.05);
  border: .5px solid rgba(255,255,255,.12);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.card3d-var-btn.on { color: #fff; background: rgba(124,58,237,.35); border-color: rgba(124,58,237,.7); }
.card3d-var-btn.rev.on { background: linear-gradient(135deg, rgba(124,58,237,.45), rgba(6,182,212,.3)); }
.card3d-avg30-rev { border-color: rgba(124,58,237,.5); }

/* Interrupteur « reverse » du formulaire d'ajout */
.a-rev-switch {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  margin-left: auto;
}
.a-rev-switch input { display: none; }
.a-rev-slider {
  position: relative; width: 40px; height: 24px; flex-shrink: 0;
  background: var(--bg4); border-radius: 12px;
  transition: background .2s;
}
.a-rev-slider::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: left .2s;
}
.a-rev-switch input:checked + .a-rev-slider { background: var(--acc, var(--dv-1)); }
.a-rev-switch input:checked + .a-rev-slider::after { left: 19px; }
.a-rev-lbl { font-size: 12px; color: var(--t3); }
.a-rev-switch input:checked ~ .a-rev-lbl { color: var(--dv-3); font-weight: 600; }
/* Heart button repositioning: was absolute on card, now in actions row */
.cl-card-wrap .cl-set-explorer-card .cl-card-fav { display: none; }
.cl-set-badge-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--t1);
  text-align: center;
  letter-spacing: .02em;
}
.cl-set-row-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  min-width: 80px;
}
.cl-set-row-counts {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
}
.cl-set-row-counts .cl-set-row-count { color: var(--t1); font-weight: 600; }
.cl-set-row-counts .cl-set-row-pct { color: var(--t1); font-weight: 700; }
.cl-set-row-total {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  font-family: var(--font-display);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.cl-set-row-price {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  margin-top: 4px;
  font-family: var(--font-display);
  letter-spacing: -.02em;
  white-space: nowrap;
  opacity: .85;
}
.cl-serie-price {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-bg);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--gold-bd);
  font-family: var(--font-display);
  letter-spacing: -.01em;
  white-space: nowrap;
  margin-right: 8px;
}

/* Set explorer Pokeitem-style additions */
.cl-set-progress-global {
  padding: 14px 16px 8px;
  background: var(--bg1);
  border-bottom: .5px solid var(--bg3);
}
.cl-set-progress-text {
  font-size: 13px; color: var(--t2);
  margin-bottom: 8px;
  font-weight: 500;
}
.cl-set-progress-bar {
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
}
.cl-set-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-fill), var(--accent-fill-hover));
  transition: width .4s ease-out;
}
.cl-set-explorer-sizebar {
  display: flex; gap: 8px;
  padding: 10px 16px;
  background: var(--bg1);
  border-bottom: .5px solid var(--bg3);
}
.cl-size-chip {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg2);
  border: .5px solid var(--bg4);
  border-radius: 10px;
  color: var(--t2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.cl-size-chip.active {
  background: var(--accent-fill);
  border-color: var(--gold);
  color: var(--on-accent);
}
.cl-set-explorer-search {
  display: flex; gap: 8px;
  padding: 10px 16px;
  background: var(--bg1);
  border-bottom: .5px solid var(--bg3);
}
.cl-set-explorer-search input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg2);
  border: .5px solid var(--bg4);
  border-radius: 10px;
  color: var(--t1);
  font-family: inherit;
  font-size: 13px;
}
.cl-set-explorer-search input::placeholder { color: var(--t3); }
.cl-set-explorer-search input:focus { outline: none; border-color: var(--gold); }
.cl-set-explorer-sort {
  padding: 10px 14px;
  background: var(--bg2);
  border: .5px solid var(--bg4);
  border-radius: 10px;
  color: var(--t1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* Grid 3 tailles : Petit / Moyen / Grand */
.cl-set-explorer-grid.cl-grid-small  { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important; gap: 8px !important; }
.cl-set-explorer-grid.cl-grid-medium { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; gap: 12px !important; }
.cl-set-explorer-grid.cl-grid-large  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 14px !important; }
@media (min-width: 600px) {
  .cl-set-explorer-grid.cl-grid-medium { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }
  .cl-set-explorer-grid.cl-grid-large  { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
}

/* ════════════════════════════════════════════
 * LOT TRACKER - Achat/revente lots bulk
 * ════════════════════════════════════════════ */
.lot-create-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  color: var(--on-accent);
  border: none;
  border-radius: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(99,102,241,.3);
  transition: transform .15s, box-shadow .25s;
}
.lot-create-btn:active { transform: scale(.97); }
.lot-create-btn:hover { box-shadow: 0 12px 32px rgba(99,102,241,.45); }

#lots-summary {
  display: none;
}
#lots-summary.active { display: block; }
.lots-summary-card {
  padding: 20px;
  background: linear-gradient(135deg, var(--glass-bg), var(--bg2));
  border: 1px solid var(--glass-bd);
  border-radius: 18px;
  backdrop-filter: var(--glass-blur);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 600px) { .lots-summary-card { grid-template-columns: repeat(2, 1fr); } }
.lots-summary-stat {
  text-align: center;
}
.lots-summary-stat-val {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--gold);
  letter-spacing: -.02em;
}
.lots-summary-stat-lbl {
  font-size: 10px; color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin-top: 4px;
}

.lot-card {
  background: linear-gradient(135deg, var(--bg2), var(--bg1));
  border: 1px solid var(--glass-bd);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .25s cubic-bezier(.18,.89,.32,1.28);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur);
}
.lot-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(99,102,241,.2);
  border-color: var(--gold-bd);
}
.lot-card-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.lot-card-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(99,102,241,.3);
}
.lot-card-info { flex: 1; min-width: 0; }
.lot-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--t1);
}
.lot-card-meta {
  font-size: 12px;
  color: var(--t3);
  margin-top: 3px;
}
.lot-status {
  font-size: 10px; font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
}
.lot-status.profitable { background: var(--up-bg); color: var(--up); }
.lot-status.breakeven { background: var(--premium-bg); color: var(--premium); }
.lot-status.loss { background: var(--dn-bg); color: var(--dn); }
.lot-status.pending { background: var(--bg3); color: var(--t3); }

.lot-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.lot-card-stat {
  text-align: center;
}
.lot-card-stat-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.lot-card-stat-lbl {
  font-size: 10px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lot-card-progress {
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.lot-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--up), var(--accent-fill));
  transition: width .6s cubic-bezier(.18,.89,.32,1.28);
  border-radius: 3px;
}
.lot-card-progress-text {
  font-size: 11px;
  color: var(--t3);
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
}

/* Detail overlay */
.lot-detail {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9997;
  display: flex;
  flex-direction: column;
  animation: lotSlideIn .35s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes lotSlideIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.lot-detail-hdr {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--bg1);
  border-bottom: 1px solid var(--glass-bd);
  backdrop-filter: var(--glass-blur);
}
.lot-back {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg3);
  border: none;
  color: var(--t1);
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.lot-detail-info { flex: 1; min-width: 0; }
.lot-name-edit {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--t1);
  padding: 4px 0;
  outline: none;
}
.lot-name-edit:focus { color: var(--gold); }
.lot-detail-meta {
  font-size: 12px;
  color: var(--t3);
  margin-top: 2px;
}
.lot-delete {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg3);
  border: none;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.lot-delete:hover { background: var(--dn-bg); }

.lot-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.lot-stats-hero {
  background: linear-gradient(135deg, var(--gold-bg), var(--acc2-bg));
  border: 1px solid var(--gold-bd);
  border-radius: 22px;
  padding: 24px 20px;
  margin-bottom: 18px;
  backdrop-filter: var(--glass-blur);
}
.lot-roi-big {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 700;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.lot-roi-lbl {
  font-size: 12px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
  font-weight: 600;
}
.lot-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.lot-stat-mini {
  background: rgba(0,0,0,.2);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.lot-stat-mini-val { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--t1); }
.lot-stat-mini-lbl { font-size: 10px; color: var(--t3); text-transform: uppercase; margin-top: 3px; }

.lot-breakeven {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(0,0,0,.2);
  border-radius: 12px;
}
.lot-breakeven-hdr {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.lot-breakeven-lbl { font-size: 13px; color: var(--t2); }
.lot-breakeven-val { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--gold); }
.lot-breakeven-bar {
  height: 8px;
  background: var(--bg4);
  border-radius: 4px;
  overflow: hidden;
}
.lot-breakeven-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dn), var(--premium), var(--up));
  transition: width .8s cubic-bezier(.18,.89,.32,1.28);
}

.lot-section { margin-top: 24px; }
.lot-section-title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--t2);
  margin-bottom: 12px;
}

.lot-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.lot-card-thumb {
  position: relative;
  aspect-ratio: 0.716;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg2);
  cursor: pointer;
  transition: transform .15s;
}
.lot-card-thumb:hover { transform: scale(1.04); }
.lot-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lot-card-thumb-status {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}
.lot-card-thumb-status.sold { background: var(--up); }
.lot-card-thumb-status.stock { background: var(--accent-fill); }
.lot-card-thumb-price {
  position: absolute;
  bottom: 4px; left: 4px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: var(--font-display);
}

.lot-add-fab {
  position: fixed;
  bottom: 100px; right: 24px;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  color: var(--on-accent);
  border: none;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(99,102,241,.4);
  z-index: 100;
  transition: transform .15s;
}
.lot-add-fab:active { transform: scale(.95); }

/* ════════════════════════════════════════════
 * CLASSEURS - Album virtuel cartes Pokémon
 * ════════════════════════════════════════════ */
.binder-card {
  display: flex; gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, var(--bg2), var(--bg1));
  border: 1px solid var(--gold-bd);
  border-radius: 18px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .2s cubic-bezier(.18,.89,.32,1.28);
  position: relative;
  overflow: hidden;
}
.binder-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,.08), transparent);
  opacity: 0;
  transition: opacity .25s;
}
.binder-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 32px rgba(124,58,237,.2);
  border-color: var(--gold);
}
.binder-card:hover::before { opacity: 1; }
.binder-card-cover {
  width: 64px; height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 14px rgba(124,58,237,.3);
}
.binder-card-info {
  flex: 1; min-width: 0;
  position: relative; z-index: 1;
}
.binder-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--t1);
  margin-bottom: 4px;
}
.binder-card-stats {
  font-size: 12px;
  color: var(--t3);
}
.binder-card-chev {
  color: var(--gold);
  font-size: 18px;
  align-self: center;
}

/* Binder Detail full-screen */
.binder-detail {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9997;
  display: flex;
  flex-direction: column;
  animation: binderSlideIn .35s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes binderSlideIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.binder-detail-hdr {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--bg1);
  border-bottom: 1px solid var(--bg3);
}
.binder-back {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg3);
  border: none;
  color: var(--t1);
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.binder-detail-info { flex: 1; min-width: 0; }
.binder-name-edit {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--t1);
  padding: 4px 0;
  outline: none;
}
.binder-name-edit:focus { color: var(--gold); }
.binder-detail-stats {
  font-size: 12px;
  color: var(--t3);
  margin-top: 2px;
}
.binder-delete {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg3);
  border: none;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.binder-delete:hover { background: rgba(251,69,112,.2); }

.binder-pages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background:
    radial-gradient(ellipse at top, rgba(124,58,237,.06), transparent 60%),
    var(--bg);
}
.binder-page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 600px;
  margin: 0 auto 24px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(0,0,0,.4));
  border-radius: 16px;
  box-shadow:
    0 8px 24px rgba(0,0,0,.4),
    inset 0 0 30px rgba(255,255,255,.02);
  border: 1px solid rgba(124,58,237,.2);
  position: relative;
}
.binder-page-num {
  position: absolute;
  top: -10px; right: 12px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: .05em;
}
.binder-slot {
  aspect-ratio: 0.716;
  background: rgba(0,0,0,.4);
  border: 1px dashed rgba(124,58,237,.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.binder-slot:hover { border-color: var(--gold); background: rgba(124,58,237,.08); }
.binder-slot-empty { color: rgba(255,255,255,.15); font-size: 24px; }
.binder-slot img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 6px;
  transition: transform .2s;
}
.binder-slot:hover img { transform: scale(1.05); }
.binder-slot-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  z-index: 2;
}
.binder-slot:hover .binder-slot-remove { opacity: 1; }

.binder-add-fab {
  position: fixed;
  bottom: 100px; right: 24px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  color: var(--on-accent);
  border: none;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(124,58,237,.4);
  z-index: 100;
  transition: transform .15s;
}
.binder-add-fab:active { transform: scale(.95); }

/* ════════════════════════════════════════════
 * CARTE 3D MODAL - Click carte = vue immersive 3D
 * ════════════════════════════════════════════ */
.card3d-modal {
  position: fixed; inset: 0; z-index: 99998;
  background: radial-gradient(ellipse at center, rgba(8,8,20,.95) 0%, rgba(0,0,0,.98) 100%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 20px;
  overflow-y: auto;
  backdrop-filter: blur(20px);
  perspective: 1800px;
  animation: card3dFadeIn .3s ease-out;
}
.card3d-modal.open { display: flex; }
@keyframes card3dFadeIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(20px); }
}
.card3d-close {
  position: fixed; top: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 24px;
  cursor: pointer;
  z-index: 10;
  transition: transform .15s, background .2s;
}
.card3d-close:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }
.card3d-stage {
  margin: 0 auto;
  width: 320px; height: 450px;
  position: relative;
  perspective: 2000px;
  transform-style: preserve-3d;
}
@media (max-width: 600px) {
  .card3d-stage { width: 260px; height: 365px; }
}
.card3d-frame {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: card3dEnter .6s cubic-bezier(.18,.89,.32,1.28);
  will-change: transform;
}
@keyframes card3dEnter {
  from { transform: rotateY(180deg) scale(.6); opacity: 0; }
  to { transform: rotateY(0) scale(1); opacity: 1; }
}
.card3d-card {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .08s ease-out;
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.7),
    0 0 0 1px rgba(124,58,237,.3),
    0 0 120px rgba(124,58,237,.4);
}
.card3d-front {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 18px;
  overflow: hidden;
}
.card3d-front img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.card3d-holo {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.3) 45%, rgba(255,0,255,.2) 50%, rgba(0,255,255,.2) 55%, rgba(255,255,255,.3) 60%, transparent 75%),
    linear-gradient(50deg, transparent 20%, rgba(255,255,255,.18) 35%, rgba(255,200,0,.15) 50%, rgba(255,255,255,.18) 65%, transparent 80%);
  background-size: 200% 200%, 200% 200%;
  background-position: 0 0;
  mix-blend-mode: color-dodge;
  pointer-events: none;
  opacity: .6;
  transition: background-position .1s ease-out;
}
.card3d-shine {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4) 0%, transparent 50%);
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: .5;
  transition: background .1s ease-out;
}
.card3d-info {
  margin-top: 30px;
  max-width: 540px;
  width: 100%;
  text-align: center;
  color: #fff;
  animation: card3dInfoUp .5s .3s both cubic-bezier(.18,.89,.32,1.28);
}
@keyframes card3dInfoUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Vignette d'un scellé sans visuel : icône de famille plutôt qu'un cadre
   vide. Ne concerne plus que les rares produits absents du CDN Cardmarket —
   les autres ont leur photo rapatriée dans Supabase Storage. */
.cs-img-scelle {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: linear-gradient(140deg, var(--bg2), var(--bg3));
  border-radius: 6px;
}
/* Photo produit : PNG détourés (fond transparent) — contain pour ne pas
   tronquer les boîtes. Les rares JPG pas encore détourés gardent leur
   fond blanc d'origine, sans cadre ajouté. */
.cs-img-produit { object-fit: contain; background: transparent; }

/* Onglet « Scellés » d'un set : grille de packshots, même grammaire que
   les cartes mais cases carrées (les boîtes ne sont pas au ratio carte). */
.cl-prod-wrap { cursor: pointer; }
.cl-prod-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  /* PNG détourés : fond sombre doux, plus de pavé blanc */
  background: linear-gradient(140deg, var(--bg2), var(--bg3));
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  transition: transform .2s cubic-bezier(.18,.89,.32,1.28), box-shadow .2s;
}
.cl-prod-wrap:hover .cl-prod-card { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.cl-prod-card img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; box-sizing: border-box; }
.cl-prod-ico {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  background: linear-gradient(140deg, var(--bg2), var(--bg3));
}
.cl-prod-prix {
  position: absolute;
  bottom: 6px; right: 6px;
  padding: 3px 8px;
  background: linear-gradient(135deg, var(--accent-fill), var(--accent-fill-press));
  color: var(--on-accent);
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 8px;
  font-family: var(--font-display);
  box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  white-space: nowrap;
}
.cl-prod-nom {
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  margin-top: 6px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cl-prod-des { font-size: 10.5px; color: var(--t3); margin-top: 2px; }

/* ── Dashboard épuré (façon Collectr) ────────────────────────────────
   La carte-courbe EST le hero du collectionneur : valeur en gros,
   plus-value vs coût, répartition — tout y est déjà. Le hero « Valeur
   de ma collec » et le widget Stock répétaient ces mêmes chiffres :
   masqués en mode collectionneur, aucune info perdue. Le revendeur
   garde son hero (capital net = cash + stock, une autre métrique). */
[data-mode="collector"] #d-hero-wrap,
[data-mode="collector"] .widgets-2 { display: none; }

/* Sélecteur Cartes / Scellés de la section Sets */
.cl-mode-seg { display: flex; gap: 6px; padding: 8px 16px 0; }
.cl-mode-seg-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  background: var(--bg2);
  border: .5px solid var(--bg4);
  color: var(--t2);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.cl-mode-seg-btn.on {
  background: linear-gradient(135deg, var(--dv-1), var(--dv-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(124,58,237,.35);
}

/* Moyenne des ventes 30 jours (Cardmarket avg30) : le repère le plus honnête
   pour savoir ce qu'une carte s'échange réellement, par opposition au trend
   qui est une projection. */
.card3d-avg30 {
  margin-top: 8px; text-align: center;
  font-size: 11.5px; color: rgba(255,255,255,.55);
}
.card3d-avg30 b { color: rgba(255,255,255,.9); font-weight: 700; }
.card3d-avg30 span {
  display: inline-block; margin-left: 4px; padding: 1px 5px;
  border-radius: 4px; background: rgba(124,58,237,.18); color: var(--dv-3);
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
}

/* Traduction française sous un nom japonais / chinois : sans ce repère on ne
   sait pas quelle carte on regarde. Discret, il ne concurrence pas le titre. */
.card3d-info-trad {
  margin-top: -2px; margin-bottom: 2px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.52);
  letter-spacing: .01em;
}
.card3d-info-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #fff, var(--dv-1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.card3d-info-meta {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin-bottom: 18px;
}
.card3d-info-meta b { color: var(--gold); }
.card3d-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px auto;
  max-width: 460px;
}
.card3d-price-cell {
  padding: 14px 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 12px;
}
.card3d-price-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  margin-bottom: 4px;
}
.card3d-price-val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
}
.card3d-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
  max-width: 540px;
  width: 100%;
  animation: card3dInfoUp .5s .5s both cubic-bezier(.18,.89,.32,1.28);
}
@media (max-width: 500px) {
  .card3d-actions { grid-template-columns: 1fr; }
  .card3d-price-grid { grid-template-columns: repeat(3, 1fr); }
}
.card3d-action {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(6,182,212,.10));
  border: 1px solid rgba(124,58,237,.4);
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  transition: all .2s cubic-bezier(.18,.89,.32,1.28);
  text-align: left;
}
.card3d-action:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(124,58,237,.3);
}
.card3d-action .ico {
  font-size: 28px;
  flex-shrink: 0;
}
.card3d-action .lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}
.card3d-action .sub {
  font-size: 12px;
  color: rgba(255,255,255,.6);
}
.card3d-action-cm { background: linear-gradient(135deg, rgba(200,164,92,.18), rgba(124,58,237,.10)); }
.card3d-action-eb { background: linear-gradient(135deg, rgba(56,189,248,.15), rgba(124,58,237,.10)); }

/* ════ CARTE 3D PRICE CHART ════ */
.card3d-chart-wrap {
  max-width: 540px;
  width: 100%;
  margin: 20px auto 0;
  padding: 18px;
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(0,0,0,.4));
  border: 1px solid rgba(124,58,237,.25);
  border-radius: 16px;
  animation: card3dInfoUp .5s .4s both cubic-bezier(.18,.89,.32,1.28);
}
.card3d-chart-hdr {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.card3d-chart-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
.card3d-chart-delta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 8px;
}
.card3d-chart-delta.up { background: rgba(16,224,144,.15); color: var(--success); }
.card3d-chart-delta.down { background: rgba(251,69,112,.15); color: var(--danger); }
.card3d-chart-delta.flat { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
.card3d-chart-svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: visible;
}
.card3d-chart-svg .grid-line {
  stroke: rgba(124,58,237,.08);
  stroke-width: 1;
  stroke-dasharray: 2,3;
}
.card3d-chart-svg .price-line {
  fill: none;
  stroke: url(#chartGradient);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card3d-chart-svg .price-area {
  fill: url(#chartAreaGradient);
}
.card3d-chart-svg .price-dot-last {
  fill: var(--warning);
  stroke: #0A0A0A;
  stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(124,58,237,.9));
  animation: chartDotPulse 2s ease-in-out infinite;
}
@keyframes chartDotPulse {
  0%, 100% { r: 4.5; }
  50% { r: 6.5; }
}
.card3d-chart-svg .price-label-axis {
  font-family: var(--font-body);
  font-size: 10px;
  fill: rgba(245,241,232,.45);
  font-weight: 500;
}
.card3d-chart-svg .price-tip-price {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  fill: var(--warning);
}
.card3d-chart-svg .price-tip-date {
  font-family: var(--font-body);
  font-size: 9px;
  fill: rgba(245,241,232,.6);
}
.card3d-chart-svg .hit-area {
  cursor: pointer;
}
#chart-hover { transition: opacity .15s ease-out; }
.card3d-chart-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.card3d-chart-stat {
  text-align: center;
}
.card3d-chart-stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  margin-bottom: 3px;
}
.card3d-chart-stat-val {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}
.card3d-chart-empty {
  padding: 30px 16px;
  text-align: center;
  color: rgba(255,255,255,.4);
  font-size: 13px;
}
.card3d-chart-empty b { color: var(--gold); }

/* Price badge bottom-right card */
.cl-set-explorer-card-price {
  position: absolute;
  bottom: 6px; right: 6px;
  padding: 3px 8px;
  background: linear-gradient(135deg, var(--accent-fill), var(--accent-fill-press));
  color: var(--on-accent);
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.25);
  z-index: 2;
  font-family: var(--font-display);
  letter-spacing: -.01em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.cl-grid-small .cl-set-explorer-card-price { font-size: 10px; padding: 2px 6px; }
.cl-grid-large .cl-set-explorer-card-price { font-size: 13px; padding: 4px 10px; }

/* Heart favorite top-left card */
.cl-card-fav {
  position: absolute;
  top: 6px; left: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.8);
  font-size: 13px;
  cursor: pointer;
  z-index: 3;
  border: none;
  transition: transform .15s, background .15s, color .15s;
}
.cl-card-fav:active { transform: scale(.85); }
.cl-card-fav:hover { background: rgba(0,0,0,.8); }
.cl-card-fav.on {
  background: rgba(244,114,182,.85);
  color: #fff;
  box-shadow: 0 0 12px rgba(244,114,182,.4);
}

/* Sets grid */
/* Sets grid Pokecardex-style : logos centrés */
.cl-sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 14px;
}
.cl-set-card {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
  border: .5px solid var(--bg4);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.18,.89,.32,1.28), border-color .2s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.cl-set-card:active { transform: scale(.96); }
.cl-set-card:hover { border-color: var(--gold-bd); box-shadow: 0 8px 24px rgba(124,58,237,.10); transform: translateY(-2px); }
.cl-set-cover {
  aspect-ratio: 16/9;
  background:
    radial-gradient(circle at 30% 30%, rgba(124,58,237,.15), transparent 60%),
    linear-gradient(135deg, #1a1a30 0%, #0f0f20 100%);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  overflow: hidden;
}
.cl-set-cover img {
  max-width: 88%; max-height: 88%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(124,58,237,.15));
  transition: transform .35s cubic-bezier(.18,.89,.32,1.28);
}
.cl-set-card:hover .cl-set-cover img { transform: scale(1.06); }
.cl-set-cover-empty {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(124,58,237,.35), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(6,182,212,.25), transparent 50%),
    linear-gradient(135deg, #1a1530 0%, #0f0f25 100%);
  color: var(--t1);
  font-family: var(--font-display);
  text-align: center;
  padding: 8px;
  position: relative;
}
.cl-set-cover-empty::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px);
}
.cl-set-cover-empty-init {
  font-size: 32px; font-weight: 700; letter-spacing: -.04em;
  background: linear-gradient(135deg, #fff 0%, var(--dv-3) 50%, var(--dv-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}
.cl-set-cover-empty-sub {
  font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--t3); margin-top: 4px;
  z-index: 1;
}
.cl-set-info { padding: 10px 12px 12px; }
.cl-set-name {
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700; letter-spacing: -.02em;
  color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-set-serie {
  font-size: 10.5px; color: var(--t3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-set-meta {
  font-size: 11px; color: var(--t2); margin-top: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.cl-set-progress {
  height: 5px; background: var(--bg4); border-radius: 3px; margin-top: 8px; overflow: hidden;
}
.cl-set-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-fill), var(--acc2));
  transition: width .6s cubic-bezier(.18,.89,.32,1.28);
  border-radius: 3px;
}
.cl-set-pct {
  color: var(--gold); font-weight: 700;
  font-family: var(--font-display);
  font-size: 12px;
}
.cl-set-date {
  font-size: 10px; color: var(--t3); font-weight: 500;
}

/* Toolbar filtres sets */
.cl-sets-toolbar {
  display: flex; gap: 8px; padding: 4px 14px 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cl-sets-toolbar::-webkit-scrollbar { display: none; }
.cl-sets-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--bg2);
  border: .5px solid var(--bg4);
  border-radius: 14px;
  color: var(--t2);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  font-family: var(--font-display);
}
.cl-sets-chip.active {
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 4px 14px rgba(124,58,237,.3);
}
.cl-sets-chip:not(.active):active { transform: scale(.95); }

/* News */
/* ─── Watchlist alertes prix ─── */
.cl-watch-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: 12px;
}
.cl-watch-row .cl-flux-img,
.cl-watch-row .cl-flux-img-fb { width: 48px; height: 66px; }
.cl-watch-info { flex: 1; min-width: 0; }
.cl-watch-name { font-size: 14px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-watch-meta { font-size: 12px; color: var(--t3); margin-top: 4px; }
.cl-watch-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.cl-watch-badge.up { background: rgba(16,224,144,.12); color: var(--success); }
.cl-watch-badge.down { background: rgba(239,68,68,.12); color: var(--danger); }
.cl-watch-badge.flat { background: rgba(99,102,241,.12); color: var(--gold); }
.cl-watch-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.cl-watch-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 14px; cursor: pointer;
  transition: background .15s;
}
.cl-watch-btn:hover { background: rgba(255,255,255,.12); }

/* ─── Fluctuations marché (Top hausse / baisse) ─── */
.cl-flux-period-row {
  display: flex; gap: 6px;
  padding: 0 var(--sp-4) 8px;
}
.cl-flux-period-row .cl-sets-chip {
  flex: 1; max-width: 120px;
}
/* Filtre de langue : 4 puces, plus compactes que les périodes */
.cl-flux-lang-row { padding-top: 0; }
.cl-flux-lang-row .cl-sets-chip {
  max-width: 100px;
  font-size: 11px;
}
.cl-flux-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  /* 16 px, comme toute la colonne : à 14 px ces blocs sortaient de deux
     pixels du rang et donnaient un bord droit en dents de scie. */
  padding: 0 var(--sp-4);
}
@media (max-width: 480px){ .cl-flux-grid { grid-template-columns: 1fr; } }
.cl-flux-col {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: 14px;
  overflow: hidden;
}
.cl-flux-up { border-color: rgba(16,224,144,.25); }
.cl-flux-down { border-color: rgba(239,68,68,.25); }
.cl-flux-hd {
  padding: 10px 14px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--bg3);
}
.cl-flux-up .cl-flux-hd { color: var(--success); background: rgba(16,224,144,.06); }
.cl-flux-down .cl-flux-hd { color: var(--danger); background: rgba(239,68,68,.06); }
.cl-flux-ico { margin-right: 6px; }
.cl-flux-list { display: flex; flex-direction: column; }
.cl-flux-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .15s;
}
.cl-flux-row:hover { background: var(--bg2); }
.cl-flux-row:last-child { border-bottom: none; }
.cl-flux-img {
  width: 32px; height: 44px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(0,0,0,.2);
}
.cl-flux-img-fb {
  width: 32px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  flex-shrink: 0;
}
.cl-flux-info { flex: 1; min-width: 0; }
.cl-flux-name {
  font-size: 12.5px; font-weight: 600; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-flux-meta {
  font-size: 10.5px; color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
/* ─── Carte sans scan TCGdex (sets récents JP/CN surtout) ─── */
.cl-card-noscan {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; padding: 8px 6px;
  text-align: center;
  background: linear-gradient(160deg, var(--bg2), var(--bg3));
  border-radius: inherit;
}
.cl-card-noscan-nom {
  font-size: 11px; font-weight: 700; line-height: 1.2;
  color: var(--t2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cl-card-noscan-lat { font-size: 9.5px; color: var(--t3); }
.cl-card-noscan-tag {
  margin-top: 2px; font-size: 8px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--t4, var(--t3)); opacity: .75;
}
.cl-noscan-banner {
  grid-column: 1 / -1;
  margin-bottom: 4px; padding: 10px 12px;
  border: 1px solid rgba(255,210,63,.25);
  background: rgba(255,210,63,.07);
  border-radius: 10px;
  font-size: 11.5px; line-height: 1.45; color: var(--t2);
}

/* Nom latinisé d'une carte japonaise / chinoise */
.cl-flux-alt {
  font-weight: 500; color: var(--t3); font-size: 11px;
}
/* Origine de la variation : mesurée chez nous, ou estimée par Cardmarket */
.cl-flux-src {
  display: inline-block;
  margin-left: 4px; padding: 0 4px;
  border-radius: 4px;
  font-size: 9px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  vertical-align: 1px;
}
.cl-flux-src.hist { color: var(--success); background: rgba(16,224,144,.12); }
.cl-flux-src.est  { color: var(--t3); background: rgba(255,255,255,.06); }
.cl-flux-right { text-align: right; flex-shrink: 0; }
.cl-flux-price {
  font-size: 12px; font-weight: 700; color: var(--t1);
  font-family: var(--font-display);
}
.cl-flux-pct {
  font-size: 11px; font-weight: 700;
  margin-top: 2px;
}
.cl-flux-pct.up { color: var(--success); }
.cl-flux-pct.down { color: var(--danger); }

.cl-news-row {
  display: flex; gap: 10px; padding: 12px 14px;
  border-bottom: .5px solid var(--sep);
  cursor: pointer;
  transition: background .15s;
}
.cl-news-row:last-child { border-bottom: none; }
.cl-news-row:hover { background: var(--bg2); }
.cl-news-cat {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--gold-bg);
}
.cl-news-body { flex: 1; min-width: 0; }
.cl-news-title { font-size: 13.5px; font-weight: 600; color: var(--t1); line-height: 1.35; }
.cl-news-meta { font-size: 11px; color: var(--t3); margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.cl-news-src { color: var(--gold); font-weight: 600; }

/* Achievements */
.cl-ach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (min-width: 600px) { .cl-ach-grid { grid-template-columns: repeat(6, 1fr); } }
.cl-ach {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 6px;
  background: var(--bg2); border: .5px solid var(--bg4); border-radius: 10px;
  text-align: center;
  transition: transform .15s, opacity .2s;
}
.cl-ach.locked { opacity: .35; filter: grayscale(.8); }
.cl-ach.unlocked { background: linear-gradient(135deg, rgba(124,58,237,.07), var(--bg2)); border-color: var(--gold-bd); }
.cl-ach-ico { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.cl-ach-lbl { font-size: 10px; color: var(--t2); font-weight: 600; line-height: 1.2; }

/* Set explorer modal */
/* ════════════════════════════════════════════
 * THEMES POKEMON MODERNES — Mode collectionneur
 * Chaque theme a son ambiance unique (pas un Pokedex retro generique)
 * ════════════════════════════════════════════ */

/* Strip Pokedex retro styling : remplace par moderne theme-driven */
/* Section heads : modern (pas ribbon retro) */
/* Groupes : glass moderne avec accent theme */
/* Cells modern */
/* Widgets : glassmorph theme */
/* Inputs */
/* Buttons modern theme */
/* Sheets / modals modern */
/* Toast */
/* Progress bars theme */
/* Badges */
/* Chips */
/* Tabbar : sober theme glass */
/* DESACTIVE old POKEDEX retro */
/* ════════════════════════════════════════════
 * EFFETS SIGNATURE PAR THEME
 * ════════════════════════════════════════════ */

/* CHARIZARD : Embers montent vers haut, glow chaleureux */
@keyframes charizardEmber {
  0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(20px) scale(1); opacity: 0; }
}


/* MEWTWO : Ondes psychiques violettes */
@keyframes mewtwoRipple {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.1); }
}


/* PIKACHU : Eclairs jaunes flash */
@keyframes pikachuSpark {
  0%, 95%, 100% { opacity: 0; }
  96%, 99% { opacity: 1; }
}



/* MEW : Sparkles roses doux */
@keyframes mewSparkle {
  0%, 100% { transform: translateY(0) scale(1); opacity: .4; }
  50% { transform: translateY(-30px) scale(1.2); opacity: 1; }
}


/* LUCARIO : Aura bleu acier */
@keyframes lucarioAura {
  0%, 100% { box-shadow: 0 0 60px rgba(56,189,248,.3) inset; }
  50% { box-shadow: 0 0 120px rgba(56,189,248,.5) inset; }
}


/* RAYQUAZA : Tornado vert/jaune */
@keyframes rayquazaSwirl {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}


/* GENGAR : Ombre violette mouvante */
@keyframes gengarShadow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .4; }
  50% { transform: translate(40px, -20px) scale(1.1); opacity: .6; }
}


/* SUICUNE : Vagues cyan */
@keyframes suicuneWave {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(40px); }
}


/* ════════════════════════════════════════════
 * POKEDEX DEVICE FRAME - L'app entiere est DANS un Pokedex
 * Body = chassis rouge | App = ecran central
 * ════════════════════════════════════════════ */

/* Hardware caché par defaut (mode reseller) */
.pokedex-lens-real,
.pokedex-leds-real,
.pokedex-speaker,
.pokedex-dpad,
.pokedex-btns,
.pokedex-mini { display: none; }
/* Hardware = elements HTML uniquement (pseudo-elements supprimes car opaque-bug) */
/* Rivets coins via box-shadow sur app */

/* ════ POKEMON DECO inline section headers ════ */
/* Mascots fixes coin desactives - on utilise inline section deco a la place */
.pkmn-mascot, .pkmn-walker { display: none !important; }

.pkmn-section {
  display: none;
  width: 56px; height: 56px;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
  vertical-align: middle;
  margin-right: 8px;
  animation: pkmnFloat 3.5s ease-in-out infinite;
}
@keyframes pkmnFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Wrapper section pour aligner Pokemon + section-hd */
.pkmn-section-wrap { margin: 0; }
/* Plusieurs thèmes dissolvent ce wrap avec « display: contents !important »
   pour effacer le sprite. Ses enfants deviennent alors indépendants et le
   chevron de repli tombe seul sur une ligne, collé au bord gauche, loin du
   titre qu il commande. Dès qu il y a un chevron, la ligne reste une ligne. */
.pkmn-section-wrap.collapse-hd {
  display: flex !important;
  align-items: center; gap: 8px;
  /* « max-width: max-content » ailleurs fait coller le wrap au texte du
     titre ; le chevron suivait la fin du mot au lieu de tenir le bord
     droit, et sa position sautait d une section à l autre. */
  max-width: none !important; width: 100%;
  /* L en-tête se cale sur son propre corps : le contenu des sections est à
     16 px des bords, l en-tête flottait à 6 — dix pixels d écart entre un
     titre et la liste qu il annonce, visibles sur toute la colonne. */
  margin-inline: 0; padding-right: var(--sp-4);
}
.pkmn-section-wrap.collapse-hd > .section-hd { flex: 1; min-width: 0; }
:root[data-mode="reseller"] .pkmn-section-wrap > .section-hd {
  margin-left: 16px !important;
}

/* Themes Pokemon selector (Settings) */
.pkmn-themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
}
@media (min-width: 600px) { .pkmn-themes-grid { grid-template-columns: repeat(4, 1fr); } }
.pkmn-theme-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 12px 6px;
  background: var(--bg2);
  border: 2px solid var(--bg4);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s, border-color .2s, box-shadow .2s;
  --theme-color: var(--gold);
}
.pkmn-theme-btn:active { transform: scale(.94); }
.pkmn-theme-btn.active {
  border-color: var(--theme-color);
  box-shadow: 0 0 0 2px var(--theme-color), 0 4px 12px rgba(0,0,0,.3);
}
.pkmn-theme-sprite {
  width: 48px; height: 48px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.pkmn-theme-name {
  font-size: 11px; font-weight: 600;
  font-family: var(--font-display);
  color: var(--t1);
  text-align: center;
}
.pkmn-theme-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--theme-color);
  border: 2px solid #000;
  box-shadow: 0 1px 0 #000;
}
.pkmn-theme-btn.active .pkmn-theme-dot::after {
  content: '✓';
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 9px; font-weight: 800;
  color: #000;
}

/* Pokeball spinner */
.pkmn-spinner {
  display: inline-block;
  width: 32px; height: 32px;
  background: radial-gradient(circle at center, #fff 0 16%, #000 16% 22%, transparent 22%),
              linear-gradient(180deg, var(--danger) 0%, var(--danger) 50%, #fff 50%, #fff 100%);
  border-radius: 50%;
  border: 2px solid #000;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  animation: pkmnSpinnerSpin 1s linear infinite;
}
@keyframes pkmnSpinnerSpin {
  to { transform: rotate(360deg); }
}

/* App garde son inset:0 par defaut. Pas de cadre physique qui retrecit l'usage. */

/* Hardware decoratifs supprimes (gachait la place utile)
.pokedex-lens-real, .pokedex-leds-real, .pokedex-speaker, .pokedex-dpad, .pokedex-btns, .pokedex-mini { display: none !important; }
*/
.pokedex-lens-real,
.pokedex-leds-real,
.pokedex-speaker,
.pokedex-dpad,
.pokedex-btns,
.pokedex-mini { display: none !important; }
/* legacy - rules disabled (selector inert) */
.pokedex-lens-real-disabled {
  position: fixed;
  top: 30px; left: 18px;
  width: 70px; height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0%, #DBEAFE 8%, #93C5FD 22%, var(--info) 50%, var(--info) 80%, #172554 100%);
  border: 6px solid #fff;
  box-shadow:
    0 4px 14px rgba(0,0,0,.6),
    inset 0 -4px 8px rgba(0,0,0,.4),
    inset 0 4px 6px rgba(255,255,255,.2);
  z-index: 2;
  pointer-events: none;
  animation: pokedexLensBlinkBig 4s ease-in-out infinite;
}
@keyframes pokedexLensBlinkBig {
  0%, 88%, 100% {
    box-shadow:
      0 4px 14px rgba(0,0,0,.6),
      inset 0 -4px 8px rgba(0,0,0,.4),
      inset 0 4px 6px rgba(255,255,255,.2),
      0 0 0 0 rgba(96,165,250,0);
  }
  44% {
    box-shadow:
      0 4px 14px rgba(0,0,0,.6),
      inset 0 -4px 8px rgba(0,0,0,.4),
      inset 0 4px 6px rgba(255,255,255,.2),
      0 0 32px 6px rgba(96,165,250,.7);
  }
}

/* 3 LEDs réelles top */
@keyframes pkdxLed1 { 0%,100% { box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 12px 2px rgba(239,68,68,.7); } }
@keyframes pkdxLed2 { 0%,100% { box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 0 0 rgba(252,211,77,0); } 50% { box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 12px 2px rgba(252,211,77,.7); } }
@keyframes pkdxLed3 { 0%,100% { box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 0 0 rgba(52,211,153,0); } 50% { box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 12px 2px rgba(52,211,153,.7); } }

/* Speaker grille top-right (vrai HTML) */
/* D-PAD bas-gauche */
/* Boutons rouges A B bas-droite */
/* Mini écran vert bas-centre */
/* Hide elements decoratifs si mobile petit (<400px) — garde l'app utilisable */
@media (max-width: 400px) {
  }

/* ════ THEMES POKEMON (mode collector) ════
 * Override accent colors selon Pokemon choisi via data-pkmn-theme
 * Default pokedex (rouge/jaune) reste si pas de theme set
 */

/* CHARIZARD - Feu/Dragon orange-rouge */
:root[data-mode="collector"][data-pkmn-theme="charizard"] {
  --gold: var(--dv-4);
  --gold-lt: #FDBA74;
  --gold-dk: var(--dv-4);
  --gold-bg: rgba(251,146,60,.14);
  --gold-bd: rgba(251,146,60,.40);
  --acc2: var(--danger);
}


/* MEWTWO - Psy violet */
:root[data-mode="collector"][data-pkmn-theme="mewtwo"] {
  --gold: var(--dv-3);
  --gold-lt: #DDD6FE;
  --gold-dk: var(--dv-3);
  --gold-bg: rgba(192,132,252,.14);
  --gold-bd: rgba(192,132,252,.40);
  --acc2: var(--dv-1);
}


/* PIKACHU - Foudre jaune */
:root[data-mode="collector"][data-pkmn-theme="pikachu"] {
  --gold: var(--warning);
  --gold-lt: var(--warning);
  --gold-dk: var(--warning);
  --gold-bg: rgba(250,204,21,.14);
  --gold-bd: rgba(250,204,21,.45);
  --acc2: var(--danger);
}


/* MEW - Rose doux */
:root[data-mode="collector"][data-pkmn-theme="mew"] {
  --gold: var(--dv-2);
  --gold-lt: #A0D4B8;
  --gold-dk: var(--dv-6);
  --gold-bg: rgba(244,114,182,.14);
  --gold-bd: rgba(244,114,182,.40);
  --acc2: var(--dv-2);
}


/* LUCARIO - Aura combat bleu acier */
:root[data-mode="collector"][data-pkmn-theme="lucario"] {
  --gold: var(--info);
  --gold-lt: #7DD3FC;
  --gold-dk: var(--info);
  --gold-bg: rgba(56,189,248,.14);
  --gold-bd: rgba(56,189,248,.40);
  --acc2: var(--info);
}


/* RAYQUAZA - Dragon vert/jaune */
:root[data-mode="collector"][data-pkmn-theme="rayquaza"] {
  --gold: var(--warning);
  --gold-lt: var(--warning);
  --gold-dk: var(--warning);
  --gold-bg: rgba(250,204,21,.14);
  --gold-bd: rgba(250,204,21,.40);
  --acc2: #15803D;
}


/* GENGAR - Spectre violet/noir */
:root[data-mode="collector"][data-pkmn-theme="gengar"] {
  --gold: var(--dv-3);
  --gold-lt: var(--dv-3);
  --gold-dk: #5B21B6;
  --gold-bg: rgba(167,139,250,.14);
  --gold-bd: rgba(167,139,250,.40);
  --acc2: var(--dv-1);
}


/* SUICUNE - Eau pure cyan */
:root[data-mode="collector"][data-pkmn-theme="suicune"] {
  --gold: var(--dv-2);
  --gold-lt: #A5F3FC;
  --gold-dk: var(--dv-2);
  --gold-bg: rgba(103,232,249,.14);
  --gold-bd: rgba(103,232,249,.40);
  --acc2: var(--dv-2);
}


/* (override variables Pokedex retire - vars heritent de :root reseller) */

/* BODY background = ambiance Pokédex full */
/* Scanlines CRT subtiles partout */
/* NAVBAR = top bezel Pokedex */
/* TITRES de pages : style ribbon Pokédex */
/* SECTIONS — applique partout */
/* GROUPES (.grp) : bezels noirs cadre */
/* CELLS génériques */
/* WIDGETS basique */
/* INPUTS, SELECTS, TEXTAREAS = style retro avec underline jaune */
/* BUTTONS partout */
/* SHEETS / MODALS */
/* BACKDROP de modals */
/* TOAST */
/* TABLES */
/* PROGRESS BARS partout */
/* BADGES */
/* BARS / charts color override */
/* CHIPS (filtres, segments) */
/* ANIMATIONS POKÉDEX globales */
@keyframes pokedexBoot {
  0% { opacity: 0; transform: scale(.8); filter: brightness(2); }
  50% { opacity: 1; transform: scale(1.02); filter: brightness(1.4); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes pokedexCRTOn {
  0% { opacity: 0; transform: scaleY(.05); }
  30% { opacity: 1; transform: scaleY(.05); }
  60% { transform: scaleY(1); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes pokedexScanner {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* Animation entrée vue active en mode collec */
/* LED scanner animée sous navbar (background-position pour clip natif) */
@keyframes pokedexScanner {
  0%, 100% { background-position: -100% 0; }
  50% { background-position: 100% 0; }
}

/* POKEDEX BOOT SCREEN (overlay au switch mode) */
#pokedex-boot {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, var(--danger) 0%, #7F1D1D 50%, #000 100%);
  z-index: 99999;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 16px;
}
#pokedex-boot.show {
  display: flex;
  animation: pokedexCRTOn .35s ease-out;
}
.pkdx-boot-screen {
  position: relative;
  width: 280px; max-width: 80vw;
  padding: 32px 24px 24px;
  background: linear-gradient(180deg, #1F2937 0%, #000 100%);
  border: 4px solid var(--warning);
  border-radius: 18px;
  box-shadow:
    0 0 30px rgba(252,211,77,.4),
    inset 0 2px 4px rgba(255,255,255,.1),
    inset 0 -4px 8px rgba(0,0,0,.5);
  text-align: center;
}
.pkdx-boot-lens {
  position: absolute;
  top: -24px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #93C5FD 12%, var(--info) 38%, #1E3A8A 80%);
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.6), 0 0 24px 4px rgba(96,165,250,.5);
  animation: pokedexLensBlink 1s ease-in-out infinite;
}
.pkdx-boot-leds {
  position: absolute;
  top: 14px; right: 18px;
  display: flex; gap: 6px;
}
.pkdx-boot-leds div {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid #000;
}
.pkdx-boot-leds div:nth-child(1) {
  background: var(--danger);
  animation: pokedexBootLed .3s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(239,68,68,.8);
}
.pkdx-boot-leds div:nth-child(2) {
  background: var(--warning);
  animation: pokedexBootLed .3s ease-in-out .1s infinite;
  box-shadow: 0 0 6px rgba(252,211,77,.8);
}
.pkdx-boot-leds div:nth-child(3) {
  background: var(--success);
  animation: pokedexBootLed .3s ease-in-out .2s infinite;
  box-shadow: 0 0 6px rgba(52,211,153,.8);
}
@keyframes pokedexBootLed {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
.pkdx-boot-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px; font-weight: 700;
  color: var(--warning);
  letter-spacing: .12em;
  text-shadow: 0 2px 0 #000, 0 0 16px rgba(252,211,77,.6);
  margin-top: 18px;
}
.pkdx-boot-sub {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 600;
  color: #FEF3C7;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .8;
}
.pkdx-boot-bar {
  margin: 18px auto 6px;
  width: 200px; height: 8px;
  background: rgba(0,0,0,.6);
  border: 2px solid #000;
  border-radius: 4px;
  overflow: hidden;
}
.pkdx-boot-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--danger), var(--warning), var(--success));
  animation: pokedexBootFill 1.2s ease-out forwards;
}
@keyframes pokedexBootFill {
  to { width: 100%; }
}
.pkdx-boot-status {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px; font-weight: 600;
  color: var(--warning);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .9;
  animation: pokedexBootBlink .4s steps(2) infinite;
}
@keyframes pokedexBootBlink {
  to { opacity: .4; }
}

/* Set explorer DEJA defini ci-dessous, garde existant */

/* ════ POKEDEX SKIN (collector mode) ════

/* Body : ambiance rouge Pokédex sur dashboard view actif */
/* Hero Capital = "écran principal" Pokédex avec LED + lens */
/* Niveau card : "écran de stats" */
/* Stats grid 4 cards = boutons D-pad */
/* Section headings : style ribbon Pokédex */
/* Groupes (.grp) = bezels noirs Pokédex */
/* Top cartes par valeur = "entrées Pokédex" */
/* Galerie cartes = "slots Pokédex" */
/* News rows = log entries */
/* Achievements = badges arène */
/* Cells (profil public, wishlist) = boutons retro */
/* Insights rows */
/* Sets cards dashboard : style cartouche */
/* Pill mode dans navbar quand collector : look bouton cartouche */
/* Tabbar fond rouge en bas en mode collec */
/* Trade hub teaser block */
/* ════ POKEDEX SKIN (collector mode) ════
 * Active via :root[data-mode="collector"]
 * Donne au set explorer l'allure d'un Pokedex retro
 */
/* Grosse lentille bleue Pokedex (top-left) */
@keyframes pokedexLensBlink {
  0%, 90%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 -4px 8px rgba(0,0,0,.3), inset 0 4px 6px rgba(255,255,255,.2), 0 0 0 0 rgba(96,165,250,0); }
  50% { box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 -4px 8px rgba(0,0,0,.3), inset 0 4px 6px rgba(255,255,255,.2), 0 0 24px 4px rgba(96,165,250,.6); }
}
/* 3 LEDs (rouge / jaune / vert) à droite de la lentille */
@keyframes pokedexLedsBlink {
  0%   { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(239,68,68,.8)); }
  33%  { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(252,211,77,.8)); }
  66%  { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(52,211,153,.8)); }
  100% { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(239,68,68,.8)); }
}
/* Logo + titre dans un "écran noir" central */
/* Boutons header style D-pad */
/* Toolbar = boutons retro */
/* Grid = "écran" Pokedex avec bezel */
/* Bordure intérieure type CRT */
/* Cards : look entrée Pokédex */
/* Set explorer Pokecardex-style */
.cl-set-explorer {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: none;
  flex-direction: column;
}
/* Toute la fiche défile d'un bloc, hero compris. Avant, seule la grille de
   cartes défilait : sur téléphone l'en-tête mangeait les deux tiers de
   l'écran et il ne restait qu'une bande étroite pour les cartes. */
.cl-set-explorer.open {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

/* Header avec logo set en grand */
.cl-set-explorer-hero {
  position: relative;
  padding: 4px 16px 16px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(124,58,237,.20), transparent 70%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  border-bottom: .5px solid var(--sep);
}
/* Le nom du set part avec le défilement, mais fermer et partager doivent
   rester à portée de pouce : cette barre-là reste. */
.cl-set-explorer-hdr-row {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: .5px solid transparent;
  transition: border-color .2s ease;
}
/* Repli si color-mix n'est pas supporté : un fond opaque vaut mieux qu'un
   texte illisible qui défile derrière la barre. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .cl-set-explorer-hdr-row { background: var(--bg); }
}
/* Posée seulement une fois qu'on a quitté le haut : au repos la barre se
   fond dans le hero. */
.cl-set-explorer.defile .cl-set-explorer-hdr-row { border-bottom-color: var(--sep); }

/* Nom du set en petit, qui prend le relais quand le grand titre sort. */
.cl-set-explorer-hdr-title {
  flex: 1; min-width: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
  color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
/* Une fois affiché il devient cliquable : un appui remonte en haut, donc
   aux filtres et à la recherche, sans remonter à la main. */
.cl-set-explorer.defile .cl-set-explorer-hdr-title {
  opacity: 1; transform: none;
  pointer-events: auto; cursor: pointer;
}
.cl-set-explorer.defile .cl-set-explorer-hdr-title:active { opacity: .6; }
.cl-set-explorer-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg3); border: .5px solid var(--bg4);
  font-size: 20px; color: var(--t1); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .15s;
}
.cl-set-explorer-close:active { transform: scale(.92); }
.cl-set-explorer-share {
  padding: 7px 14px; border-radius: 14px;
  background: var(--bg3); border: .5px solid var(--bg4);
  color: var(--t1); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  font-family: var(--font-display);
}

.cl-set-explorer-logo-wrap {
  display: flex; align-items: center; justify-content: center;
  height: 90px; margin-bottom: 12px;
}
.cl-set-explorer-logo {
  max-height: 100%; max-width: 80%;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(124,58,237,.2));
}
.cl-set-explorer-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -.03em;
  color: var(--t1); text-align: center;
}
.cl-set-explorer-sub {
  font-size: 12.5px; color: var(--t2); text-align: center; margin-top: 4px;
}
.cl-set-explorer-stats {
  display: flex; justify-content: center; gap: 18px;
  margin-top: 14px;
}
.cl-set-explorer-stat-item {
  text-align: center;
}
.cl-set-explorer-stat-val {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; color: var(--gold);
  letter-spacing: -.02em;
}
.cl-set-explorer-stat-lbl {
  font-size: 10px; color: var(--t3); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  margin-top: 2px;
}

/* Toolbar filtres */
.cl-set-explorer-toolbar {
  display: flex; gap: 8px; padding: 10px 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--bg);
  border-bottom: .5px solid var(--sep);
  flex-shrink: 0;
}
.cl-set-explorer-toolbar::-webkit-scrollbar { display: none; }

/* Grid cartes Pokecardex-style : colonnes fixes, ratio Pokemon strict */
/* Plus de zone de défilement propre : c'est la fiche entière qui défile.
   La grille se contente d'occuper la hauteur qu'il lui faut. */
.cl-set-explorer-grid {
  padding: 14px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  grid-auto-rows: min-content;
  gap: 14px;
  background: var(--bg);
  align-content: start;
}
@media (min-width: 600px) { .cl-set-explorer-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .cl-set-explorer-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; } }

.cl-set-explorer-card {
  position: relative;
  width: 100%;
  aspect-ratio: 0.716; /* 245/342 ratio Pokemon */
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg2);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.18,.89,.32,1.28), box-shadow .25s, opacity .3s;
  transform-style: preserve-3d;
  will-change: transform;
}
.cl-set-explorer-card:hover {
  z-index: 5;
}
.cl-set-explorer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size: 200% 200%;
  background-position: -100% -100%;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 4;
  border-radius: 8px;
}
.cl-set-explorer-card:hover::before {
  opacity: 1;
  animation: cardShineSweep 1.5s ease-out;
}
@keyframes cardShineSweep {
  to { background-position: 200% 200%; }
}
.cl-set-explorer-card.missing { cursor: pointer; }
.cl-set-explorer-card.missing:hover { transform: translateY(-3px) scale(1.02); }
.cl-set-explorer-card.missing:hover img,
.cl-set-explorer-card.missing:hover .cl-card-noscan { opacity: .7; }
.cl-set-explorer-card.missing:active { transform: scale(.94); }
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes cardBurst {
  0% { transform: scale(0); opacity: 1; }
  50% { transform: scale(8); opacity: .8; }
  100% { transform: scale(20); opacity: 0; }
}
@keyframes cardRemovePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 2px var(--accent-fill) inset; }
  30% { transform: scale(1.06); box-shadow: 0 0 0 3px var(--danger) inset, 0 0 24px rgba(251,69,112,.6); }
  100% { transform: scale(1); box-shadow: none; }
}
/* Fallback browsers sans aspect-ratio support */
@supports not (aspect-ratio: 1) {
  .cl-set-explorer-card { padding-top: 139.6%; height: 0; }
  .cl-set-explorer-card > * { position: absolute; inset: 0; }
}
/* L'estompage d'une carte manquante ne touche QUE le visuel : appliqué à
   la carte entière, il rendait flous le prix et le numéro (badges enfants). */
.cl-set-explorer-card.missing img,
.cl-set-explorer-card.missing .cl-card-noscan {
  opacity: .38;
  filter: grayscale(.8);
}
.cl-set-explorer-card.missing::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.4), rgba(0,0,0,.2));
  pointer-events: none;
}
.cl-set-explorer-card.owned {
  box-shadow: 0 0 0 2px var(--accent-fill), 0 4px 16px rgba(124,58,237,.30);
}
.cl-set-explorer-card:active { transform: scale(.94); }
.cl-set-explorer-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.cl-set-explorer-card.owned:hover { box-shadow: 0 0 0 2px var(--accent-fill), 0 8px 28px rgba(124,58,237,.45); }
.cl-set-explorer-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-set-explorer-card-num {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(0,0,0,.85); color: #fff;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  padding: 3px 6px; border-radius: 4px;
  backdrop-filter: blur(8px);
}
.cl-set-explorer-card-check {
  position: absolute; top: 6px; right: 6px;
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  color: var(--on-accent);
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(124,58,237,.5);
}
.cl-set-explorer-card-rarity {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
  backdrop-filter: blur(8px);
}

.cl-insight-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: .5px solid var(--sep);
}
.cl-insight-lbl { font-size: 13px; color: var(--t2); font-weight: 500; }
.cl-insight-val { font-size: 14px; color: var(--t1); font-weight: 700; text-align: right; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
/* Comportement natif, pas « page web » :
   — overflow-x caché des deux côtés : un seul élément décoratif trop large
     suffisait à autoriser le panoramique latéral ;
   — overscroll-behavior-x none : coupe le rebond élastique horizontal et le
     geste « retour » par balayage depuis le bord ;
   — touch-action pan-y : le doigt ne fait plus défiler que verticalement.
     Les bandes voulues horizontales le réautorisent explicitement (voir
     .clang-row, .cl-flux-period-row, .cl-lang-chips…). */
html {
  height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  height: 100%;
  background:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(124,58,237,.10) 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 100% 100%, rgba(6,182,212,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(124,58,237,.04) 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--t1);
  font-family: var(--font-body);
  font-size: 15px;
  font-feature-settings: "ss01", "cv11"; /* Inter ligatures */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  user-select: none;
}

/* Encoches et coins arrondis : sans ces marges, le contenu passe sous le
   bord de l'écran en paysage et sur les téléphones à écran incurvé. */
.app {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Les conteneurs qui défilent verticalement gardent leur geste, mais plus
   rien ne dérive latéralement. */
.view, .content, #v-dash, #v-tx, #v-stock, #v-pl, #v-set, #v-market, #v-outils, #v-actu {
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

/* Bandes volontairement horizontales : on leur rend le geste. */
.clang-row, .cl-flux-period-row, .cl-lang-chips, .cl-sets-chips,
.gv-row, .so-tabs, .chips-row, .seg, .mode-switch {
  touch-action: pan-x;
}

/* Display font sur valeurs + titres importants */
.lt, .nav-title, .w-val, .w-val-hero, .col-stat-val,
.lvl-name, .section-hd, .pro-ttl, .cl-set-explorer-title {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}

/* ════ Hero Capital widget premium ════ */
.w-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124,58,237,.15) 0%, rgba(6,182,212,.10) 50%, rgba(56,189,248,.08) 100%);
  border: .5px solid rgba(124,58,237,.30);
  border-radius: 20px;
  isolation: isolate;
}
.w-hero::before {
  content: '';
  position: absolute; inset: -2px;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(124,58,237,.4), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(6,182,212,.3), transparent 60%);
  filter: blur(30px);
  opacity: .6;
  z-index: -1;
  animation: heroPulse 8s ease-in-out infinite;
}
.w-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: heroShimmer 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .6; }
  50% { transform: scale(1.08) rotate(2deg); opacity: .9; }
}
@keyframes heroShimmer {
  0% { background-position: -200% -200%; }
  100% { background-position: 200% 200%; }
}

/* Valeurs hero plus grandes/punchies */
.w-val-hero {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}
@media (min-width: 600px) {
  .w-val-hero { font-size: 44px; }
}

/* Section headings premium */
.section-hd {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t2);
}

/* Cards typed hierarchy */
.w {
  transition: transform .25s cubic-bezier(.18,.89,.32,1.28), border-color .25s, box-shadow .25s;
}
.w:active { transform: scale(.98); }
@media (hover: hover) {
  .w:hover { border-color: rgba(124,58,237,.3); box-shadow: 0 8px 24px rgba(124,58,237,.10); }
}

/* Glass morph effet sur widgets-2 stat cards */
.widgets-2 .w {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(21,21,42,.7);
  border: .5px solid rgba(255,255,255,.06);
}

/* Pulse sur badges nouveaux */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124,58,237,.5); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(124,58,237,0); }
}
.bdg.new { animation: badgePulse 2s ease-in-out infinite; }

/* Tab bar + navbar = floating glass */
.tabbar, .navbar {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* Pill mode : glow subtle */
.mode-pill {
  box-shadow: 0 2px 8px rgba(124,58,237,.15);
}
/* Empty states cleaner */
.empty-premium .ico, .empty-ico {
  font-size: 32px;
  opacity: .5;
  margin-bottom: 8px;
}
.empty-premium .tt {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
}

/* Achievements : glow on unlocked */
.cl-ach.unlocked {
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(6,182,212,.08));
  border-color: rgba(124,58,237,.4);
  box-shadow: 0 4px 16px rgba(124,58,237,.10);
}
.cl-ach.unlocked .cl-ach-ico { animation: heroPulse 4s ease-in-out infinite; }

/* Set cards : tilt on hover */
@media (hover: hover) {
  .cl-set-card:hover .cl-set-cover img { transform: scale(1.08) rotate(-1deg); transition: transform .4s cubic-bezier(.18,.89,.32,1.28); }
}
.cl-set-cover img { transition: transform .3s ease; }

/* Top 5 cartes : gradient on rank 1 */
.cl-top-rank.r1 {
  background: linear-gradient(135deg, #FFD93D, #FFA500);
  box-shadow: 0 0 12px rgba(255,217,61,.4);
  color: #000;
}

/* Buttons premium feel */
.btn-main, .cta {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform .15s cubic-bezier(.18,.89,.32,1.28), box-shadow .2s;
}
.btn-main:active, .cta:active { transform: scale(.96); }

/* Tab actif : gradient indicator */
.tab.on .tab-ico-w svg {
  filter: drop-shadow(0 0 6px rgba(124,58,237,.6));
}

/* FAB scan : pulse breathe */
@keyframes fabBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.5), 0 0 24px rgba(124,58,237,.3); }
  50% { box-shadow: 0 0 0 8px rgba(124,58,237,0), 0 0 32px rgba(6,182,212,.4); }
}
.tab-fab-circle {
  background: linear-gradient(135deg, var(--dv-1) 0%, var(--dv-2) 100%) !important;
  animation: fabBreathe 3s ease-in-out infinite;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(139,92,246,.06) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 100% 100%, rgba(219,39,119,.05) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ─── SHELL ─── */
.app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
}

.sbar { height: var(--sat); flex-shrink: 0; }

/* ─── NAVBAR ─── */
.navbar {
  height: var(--nav-h); flex-shrink: 0;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(8,8,12,.8);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: .5px solid var(--sep);
  position: relative; z-index: 50;
}
.nav-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 16px; font-weight: 600; letter-spacing: -.3px;
  color: var(--t1); opacity: 0; transition: opacity .2s;
  pointer-events: none; white-space: nowrap;
}
.nav-title.show { opacity: 1; }
.nav-side { display: flex; align-items: center; gap: 2px; min-width: 100px; }
.nav-side.right { justify-content: flex-end; }

.nav-ico-btn {
  width: 44px; height: 44px;
  background: none; border: none;
  color: var(--gold); font-size: 22px;
  cursor: pointer; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
.nav-ico-btn:active { opacity: .5; }

/* Mode pill (navbar top-left toggle) */
.mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px 0 9px;
  background: var(--bg3); border: .5px solid var(--bg4);
  border-radius: 16px;
  color: var(--t1); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.18,.89,.32,1.28), background .2s, border-color .2s;
  -webkit-user-select: none; user-select: none;
}
.mode-pill:active { transform: scale(.93); }
.mode-pill-ico { font-size: 14px; line-height: 1; }
.mode-pill-lbl { letter-spacing: -.2px; }
/* Pill sidebar : caché par défaut (mobile), visible desktop */
.mode-pill-side { display: none !important; }
@media (min-width: 1024px) {
  .mode-pill-side {
    display: inline-flex !important;
    margin: 0 6px 12px;
    width: calc(100% - 12px);
    height: 36px;
    justify-content: center;
    font-size: 13px;
  }
  /* Desktop : pill navbar caché (déjà dans sidebar) */
  .mode-pill-mobile { display: none !important; }
}

.add-btn {
  width: 30px; height: 30px;
  background: var(--accent-fill);
  border: none; border-radius: 50%;
  color: var(--on-accent); font-size: 20px; font-weight: 300;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .15s, opacity .15s;
  box-shadow: 0 0 16px rgba(124,58,237,.3);
}
.add-btn:active { transform: scale(.9); opacity: .85; }

/* ─── CONTENT ─── */
.content { flex: 1; min-height: 0; position: relative; }

.view {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--bg);
  display: none;
}
.view.on { display: block; }
.view::-webkit-scrollbar { width: 0; }

/* ─── LARGE TITLE ─── */
.lt-area { padding: 8px 16px 4px; }
.lt {
  font-size: 32px; font-weight: 700;
  letter-spacing: .2px; color: var(--t1);
  padding: 6px 0 2px;
}
.lt-sub { font-size: 13px; color: var(--t3); letter-spacing: -.1px; padding-bottom: 4px; }

/* ─── Ajout rapide sous le titre du dashboard ─── */
.dash-add {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 10px 16px 2px;
  padding: 2px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 14px;
  overflow: hidden;
}
.dash-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 8px;
  background: transparent;
  border: none; border-radius: 12px;
  color: var(--t2);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  letter-spacing: -.1px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.dash-add-btn:hover { background: var(--bg3); color: var(--t1); }
.dash-add-btn:active { transform: scale(.97); }
/* Les deux boutons portaient deux couleurs différentes — un violet et un
   turquoise — pour se distinguer l'un de l'autre. C'était deux accents
   concurrents pour deux actions de même rang, et en thème clair le
   violet tombait à 3,4:1. L'icône et le libellé suffisent à les
   distinguer ; la couleur, elle, dit « action principale ». */
.dash-add-btn { color: var(--accent); }
.dash-add-btn:hover { background: var(--accent-soft); color: var(--accent); }
/* Un trait vertical sépare les deux actions : l'œil voit deux boutons,
   pas un interrupteur à bascule dont une moitié serait active. */
.dash-add-btn:first-child { box-shadow: inset -1px 0 0 var(--sep); }
.dash-add-ico { font-size: 15px; line-height: 1; }
.dash-add-txt { white-space: nowrap; }
@media (max-width: 340px) { .dash-add-btn { font-size: 12.5px; padding: 10px 4px; } }

/* ─── TABBAR ─── */
.tabbar {
  /* 83 px, c'était 25 de trop : sur un écran de téléphone, la barre
     mangeait un tiers de rangée de cartes. 58 px de contenu suffisent —
     l'aire de touche reste à 44 px, le minimum d'Apple — et la zone sûre
     s'AJOUTE au lieu de rogner dedans, sinon la barre rétrécit sur les
     modèles à encoche et grandit sur les autres. */
  height: calc(var(--tab-h) + var(--sab)); flex-shrink: 0;
  background: rgba(14,14,20,.9);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: .5px solid var(--sep);
  display: flex; align-items: flex-start;
  padding-top: 5px;
  padding-bottom: var(--sab);
}
.tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  background: none; border: none;
  color: var(--t3); cursor: pointer;
  padding: 0; transition: color .2s;
  min-height: 44px; font-family: inherit;
}
.tab.on { color: var(--gold); }
.tab:active { opacity: .65; }
.tab-ico-w { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.tab-ico-w svg { width: 21px; height: 21px; }
.tab-lbl { font-size: 10px; font-weight: 500; letter-spacing: -.2px; }

/* ─── LIST GROUP ─── */
.grp {
  background: var(--bg2);
  border-radius: var(--r);
  margin: 0 16px;
  overflow: hidden;
  border: .5px solid var(--sep);
}
.section-hd {
  font-size: 12px; font-weight: 500; letter-spacing: -.05px;
  color: var(--t3); text-transform: uppercase;
  padding: 18px 20px 6px;
}
.section-ft {
  font-size: 12px; color: var(--t3);
  padding: 6px 20px 14px; line-height: 1.5;
}

/* ─── CELL ─── */
.cell {
  display: flex; align-items: center;
  min-height: 48px; padding: 11px 16px;
  position: relative; background: transparent;
  cursor: pointer; transition: background .1s;
  border: none; width: 100%; text-align: left;
  font-family: inherit; font-size: 16px; color: var(--t1);
}
.cell:active { background: var(--bg4); }
.cell::after {
  content: ''; position: absolute;
  bottom: 0; left: 54px; right: 0;
  height: .5px; background: var(--sep);
}
.cell:last-child::after { display: none; }
.cell-ico {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0; margin-right: 12px;
}
.cell-body { flex: 1; min-width: 0; }
.cell-t { font-size: 16px; letter-spacing: -.3px; }
.cell-s { font-size: 12px; color: var(--t2); margin-top: 1px; }
.cell-trail { display: flex; align-items: center; gap: 4px; margin-left: 8px; flex-shrink: 0; }
.cell-val { font-size: 16px; color: var(--t2); }
.chev { color: var(--t3); font-size: 13px; font-weight: 600; }

/* ─── WIDGETS ─── */
.widgets-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px; }
.widgets-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 10px 16px; }

.w {
  background: var(--bg2);
  border: .5px solid var(--sep);
  border-radius: var(--r-lg);
  padding: 14px;
  min-height: 96px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  position: relative; overflow: hidden;
}
.w.wide { grid-column: 1/-1; min-height: 78px; flex-direction: row; align-items: center; }
.w-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; margin-bottom: 10px; flex-shrink: 0;
}
.w.wide .w-ico { margin-bottom: 0; margin-right: 13px; }
.w-data { flex: 1; }
.w-lbl { font-size: 12px; font-weight: 500; color: var(--t2); margin-bottom: 2px; letter-spacing: -.1px; }
.w-val { font-size: 24px; font-weight: 700; letter-spacing: .2px; line-height: 1.1; }
.w-sub { font-size: 11px; color: var(--t3); margin-top: 3px; }

/* ─── BAR CHART ─── */
.bars { padding: 6px 0; }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 5px 16px; }
.bar-lbl { font-size: 12px; color: var(--t2); width: 82px; flex-shrink: 0; text-align: right; }
.bar-track { flex: 1; height: 20px; background: var(--bg4); border-radius: 5px; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 5px;
  display: flex; align-items: center; padding: 0 7px;
  min-width: 32px; transition: width 1s cubic-bezier(.34,1.2,.64,1);
}
.bar-txt { font-size: 11px; font-weight: 600; color: rgba(0,0,0,.7); white-space: nowrap; }
.empty-c { font-size: 14px; color: var(--t3); text-align: center; padding: 24px; letter-spacing: -.2px; }

/* ─── SEG CONTROL ─── */
.seg-w { padding: 8px 16px; }
.seg {
  background: var(--bg3); border-radius: 10px;
  padding: 2px; display: flex;
}
.seg-b {
  flex: 1; height: 30px; border-radius: 8px; border: none;
  background: none; color: var(--t1); font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: all .15s; letter-spacing: -.2px;
}
.seg-b.on {
  background: var(--bg5);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  font-weight: 600; color: var(--t1);
}
.an-plat, .an-ton {
  background: var(--bg2); border: .5px solid var(--bd);
  color: var(--t2); padding: 8px 6px; border-radius: 8px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-plat.on, .an-ton.on {
  background: var(--gold-bg); border-color: var(--gold-bd);
  color: var(--gold);
}
.plan-badge {
  display: inline-block; vertical-align: middle;
  margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase;
}
.plan-badge.starter { background: rgba(56,189,248,.15); color: var(--info); border: .5px solid rgba(56,189,248,.4); }
.plan-badge.pro { background: rgba(124,58,237,.07); color: var(--gold); border: .5px solid rgba(124,58,237,.4); }
.plan-badge:empty { display: none; }

/* ─── SEARCH ─── */
.search-w { padding: 4px 16px 8px; }
.ios-srch {
  background: var(--bg3); border-radius: 10px;
  height: 36px; display: flex; align-items: center;
  gap: 6px; padding: 0 10px;
}
.srch-ico { font-size: 14px; color: var(--t3); flex-shrink: 0; }
.srch-inp {
  flex: 1; background: none; border: none; outline: none;
  color: var(--t1); font-size: 16px; font-family: inherit;
  caret-color: var(--gold); letter-spacing: -.3px;
}
.srch-inp::placeholder { color: var(--t3); }

/* ─── TX ROW ─── */
.tx-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 16px;
  position: relative; cursor: pointer;
  background: transparent; transition: background .1s;
}
.tx-row:active { background: var(--bg3); }
.tx-row::after {
  content: ''; position: absolute;
  bottom: 0; left: 58px; right: 0;
  height: .5px; background: var(--sep);
}
.tx-row:last-child::after { display: none; }
.tx-ico {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.tx-main { flex: 1; min-width: 0; }
.tx-name { font-size: 16px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-meta { font-size: 12px; color: var(--t2); margin-top: 1px; }
.tx-r { text-align: right; flex-shrink: 0; }
.tx-amt { font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.tx-mg  { font-size: 12px; margin-top: 1px; }

/* ─── STOCK ROW ─── */
.sk-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 16px;
  position: relative; background: transparent;
}
.sk-row::after {
  content: ''; position: absolute;
  bottom: 0; left: 58px; right: 0;
  height: .5px; background: var(--sep);
}
.sk-row:last-child::after { display: none; }
.sk-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.sk-main { flex: 1; min-width: 0; }
.sk-name { font-size: 16px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-det  { font-size: 12px; color: var(--t2); margin-top: 1px; }
.sk-r    { text-align: right; flex-shrink: 0; }
.sk-price { font-size: 16px; font-weight: 600; color: var(--gold); }
.sk-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 100px;
  letter-spacing: -.1px; display: inline-block; margin-top: 3px;
}
.sb-in  { background: var(--up-bg); color: var(--up); }
.sb-out { background: var(--bg5); color: var(--t3); }

/* ─── P&L ROW ─── */
.pl-r {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 16px; gap: 10px; position: relative;
}
.pl-r::after {
  content: ''; position: absolute;
  bottom: 0; left: 16px; right: 0;
  height: .5px; background: var(--sep);
}
.pl-r:last-child::after { display: none; }
.pl-k { font-size: 16px; letter-spacing: -.3px; flex: 1; }
.pl-k.sub { font-size: 14px; color: var(--t2); }
.pl-v { font-size: 16px; font-weight: 500; letter-spacing: -.3px; flex-shrink: 0; }
.pl-r.tot { padding-top: 15px; }
.pl-r.tot .pl-k { font-weight: 700; }
.pl-r.tot .pl-v { font-size: 20px; font-weight: 700; }

/* ─── SETTINGS ROWS ─── */
.set-row {
  display: flex; align-items: center;
  min-height: 48px; padding: 0 16px;
  gap: 10px; position: relative;
}
.set-row::after {
  content: ''; position: absolute;
  bottom: 0; left: 16px; right: 0;
  height: .5px; background: var(--sep);
}
.set-row:last-child::after { display: none; }
.set-lbl { font-size: 16px; letter-spacing: -.3px; flex-shrink: 0; width: 110px; }
.set-inp {
  flex: 1; background: none; border: none; outline: none;
  font-size: 16px; font-family: inherit; color: var(--t1);
  text-align: right; caret-color: var(--gold); letter-spacing: -.3px;
}
.set-inp::placeholder { color: var(--t3); }
.set-sel {
  flex: 1; background: none; border: none; outline: none;
  font-size: 16px; font-family: inherit; color: var(--t2);
  text-align: right; -webkit-appearance: none; cursor: pointer;
}
.set-sel option { background: var(--bg2); }

/* ─── SHEET ─── */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: flex-end; justify-content: center;
}
.overlay.on {
  display: flex;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sheet {
  background: var(--bg2);
  border: .5px solid var(--sep2);
  border-radius: 22px 22px 0 0;
  width: 100%; max-width: 640px;
  max-height: 93dvh; max-height: 93vh;
  display: flex; flex-direction: column;
  padding-bottom: var(--sab);
  animation: up .38s cubic-bezier(.34,1.1,.64,1);
}
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }

.sheet-handle-area { display: flex; justify-content: center; padding: 10px 0 8px; flex-shrink: 0; }
.sheet-handle { width: 36px; height: 4px; background: var(--bg5); border-radius: 2px; }
.sheet-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px 13px; flex-shrink: 0;
  border-bottom: .5px solid var(--sep);
}
.sheet-ttl { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.sheet-x {
  width: 28px; height: 28px; background: var(--bg4);
  border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--t2); transition: opacity .15s;
}
.sheet-x:active { opacity: .6; }
.sheet-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 0;
}
.sheet-scroll::-webkit-scrollbar { width: 0; }
.sheet-ft { padding: 10px 16px 16px; border-top: .5px solid var(--sep); flex-shrink: 0; }

/* ─── FORM ─── */
.f-sec { margin-bottom: 6px; }
.f-lbl { font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: -.05px; padding: 8px 20px 4px; }
.f-grp { background: var(--bg3); border-radius: var(--r); margin: 0 16px; overflow: hidden; border: .5px solid var(--sep2); }
.f-row {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 14px; gap: 10px;
  position: relative;
}
.f-row::after {
  content: ''; position: absolute;
  bottom: 0; left: 14px; right: 0;
  height: .5px; background: var(--sep);
}
.f-row:last-child::after { display: none; }
.f-rl { font-size: 16px; letter-spacing: -.3px; flex-shrink: 0; width: 95px; }
.f-inp, .f-sel {
  flex: 1; background: none; border: none; outline: none;
  font-size: 16px; font-family: inherit; color: var(--t1);
  text-align: right; caret-color: var(--gold); letter-spacing: -.3px;
  -webkit-appearance: none;
}
.f-inp::placeholder { color: var(--t3); }
.f-inp-full { text-align: left; }
.f-sel option { background: var(--bg2); }
.f-ta {
  background: none; border: none; outline: none;
  font-size: 16px; font-family: inherit; color: var(--t1);
  caret-color: var(--gold); resize: none; width: 100%;
  min-height: 70px; padding: 12px 14px; letter-spacing: -.2px;
}
.pv-box {
  display: flex; justify-content: space-around; align-items: center;
  background: var(--bg3); border-radius: var(--r);
  margin: 8px 16px; padding: 14px 12px;
  border: .5px solid var(--sep2);
}
.pv-item { text-align: center; }
.pv-lbl { font-size: 11px; color: var(--t3); margin-bottom: 3px; letter-spacing: -.1px; }
.pv-sep { width: .5px; height: 36px; background: var(--sep); }
.pv-val { font-size: 22px; font-weight: 700; letter-spacing: .2px; }

/* ─── BUTTONS ─── */
.btn-main {
  width: 100%; height: 52px; border: none; border-radius: var(--r);
  font-size: 17px; font-weight: 600; font-family: inherit; letter-spacing: -.3px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity .15s;
}
.btn-main:active { opacity: .75; }
.btn-gold { background: var(--accent-fill); color: var(--on-accent); }
.btn-up   { background: var(--up);   color: var(--on-fill); }
.btn-dn   { background: var(--dn);   color: var(--on-fill); }
.btn-ghost {
  background: var(--bg3); color: var(--t2);
  border: .5px solid var(--sep); font-size: 15px; height: 44px;
  padding: 0 18px; width: auto; border-radius: 10px;
}

/* ─── ONBOARDING MODAL ─── */
/* Auth form fields - stacked layout (label above, input full width) */
.auth-field {
  margin-bottom: 14px;
}
.auth-lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t3);
  margin-bottom: 6px;
}
.auth-inp {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg3);
  border: 1px solid var(--bg4);
  border-radius: 12px;
  color: var(--t1);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-inp::placeholder { color: var(--t3); }
.auth-inp:focus {
  border-color: var(--gold);
  background: var(--bg2);
  box-shadow: 0 0 0 3px var(--gold-bg);
}
.auth-submit {
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  font-size: 15px;
}

.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.on { display: flex; }
.modal {
  background: var(--bg2);
  border: .5px solid var(--sep);
  border-radius: var(--r-xl);
  width: 100%; max-width: 380px;
  padding: 0;
  overflow: hidden;
  animation: scaleIn .4s cubic-bezier(.34,1.2,.64,1);
}
@keyframes scaleIn { 0% { transform: scale(.86); opacity: 0; } 65% { transform: scale(1.02); opacity: 1; } 100% { transform: none; opacity: 1; } }
.modal-head { padding: 28px 24px 20px; text-align: center; }
.modal-badge {
  width: 64px; height: 64px; background: var(--gold-bg);
  border: 1px solid var(--gold-bd); border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto 16px;
}
.modal-ttl { font-size: 22px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 6px; }
.modal-sub { font-size: 14px; color: var(--t2); line-height: 1.5; letter-spacing: -.2px; }
.modal-body { padding: 0 16px 16px; }
.modal-ft { padding: 12px 16px 20px; border-top: .5px solid var(--sep); }

/* ─── PRO OVERLAY ─── */
.pro-overlay {
  /* fixed, pas absolute : ancré sur #v-dash — lui-même défilant — le voile
     de paiement remontait avec le contenu et sortait de l écran au premier
     glissement, laissant tout lisible et cliquable. */
  position: fixed; inset: 0;
  background: rgba(8,8,12,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 100; padding: 32px;
  text-align: center; gap: 14px;
}
.pro-overlay.show { display: flex; }
.pro-badge {
  width: 56px; height: 56px; background: var(--gold-bg);
  border: 1px solid var(--gold-bd); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.pro-ttl { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.pro-sub { font-size: 14px; color: var(--t2); line-height: 1.5; max-width: 260px; }
.pro-btn {
  background: var(--accent-fill); color: var(--on-accent);
  border: none; border-radius: 12px;
  padding: 13px 28px; font-size: 16px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 0 24px rgba(124,58,237,.3);
}

/* ─── PROGRESS BAR ─── */
.progress-wrap { padding: 4px 0; }
/* Objectif : déjà affiché dans le widget capital (badge OBJECTIF %) → barre flottante redondante masquée */
#d-progress-wrap { display: none !important; }
.progress-bar {
  height: 4px; background: var(--bg5); border-radius: 2px;
  overflow: hidden; margin: 0 16px 6px;
}
.progress-fill { height: 100%; border-radius: 2px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.progress-lbl { font-size: 11px; color: var(--t3); text-align: right; padding: 0 16px 2px; }

/* ─── WATERMARK ─── */
.watermark {
  font-size: 10px; color: var(--t3); text-align: center;
  padding: 12px 20px 8px; letter-spacing: .05em; line-height: 1.6;
  border-top: .5px solid var(--sep2); margin-top: 8px;
}

/* ─── EMPTY STATE ─── */
.empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 52px 32px; text-align: center; gap: 8px;
}
.empty-ico { font-size: 44px; opacity: .18; }
.empty-t { font-size: 18px; font-weight: 600; letter-spacing: -.3px; color: var(--t2); }
.empty-s { font-size: 14px; color: var(--t3); max-width: 220px; }

/* ─── COLORS ─── */
.c-up  { color: var(--up); }
.c-dn  { color: var(--dn); }
.c-go  { color: var(--gold); }
.c-go-lt { color: var(--gold-lt); }
.c-blu { color: var(--blu); }
.c-pur { color: var(--pur); }
.c-ora { color: var(--ora); }
.c-t2  { color: var(--t2); }
.c-t3  { color: var(--t3); }

/* ─── TOAST ─── */
.toast {
  position: fixed;
  bottom: calc(96px + var(--sab));
  left: 50%; transform: translateX(-50%) translateY(6px);
  /* Le fond était figé en sombre alors que la couleur du texte suit le
     thème : en thème clair, du texte quasi noir se posait sur un fond
     quasi noir — 1,28:1, notification totalement illisible. Le fond
     suit maintenant le thème comme le reste. */
  background: var(--bg3);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: .5px solid var(--sep);
  border-radius: 100px; padding: 10px 20px;
  box-shadow: var(--sh-2);
  font-size: 14px; font-weight: 500; letter-spacing: -.2px;
  color: var(--t1); z-index: 400; white-space: nowrap;
  opacity: 0; transition: all .28s cubic-bezier(.34,1.2,.64,1);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── LEGAL BANNER ─── */
.legal-banner {
  background: var(--dn-bg); border: .5px solid var(--dn-bd);
  border-radius: var(--r); margin: 0 16px 8px;
  padding: 12px 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.legal-banner-ico { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.legal-banner-txt { font-size: 13px; color: var(--dn-lt); line-height: 1.5; letter-spacing: -.2px; }

/* ─── RESPONSIVE ─── */
/* Cadre « téléphone posé sur un bureau » : réservé aux vrais grands écrans.
   La condition de hauteur est ce qui distingue une tablette d'un téléphone
   en paysage — 844×390 dépasse 540 de large mais fait moins de 600 de haut.
   Sans elle, un téléphone tourné affichait l'appli dans une colonne de
   430 px centrée sur fond noir : exactement l'effet « page web » à éviter. */
@media (min-width: 540px) and (min-height: 600px) {
  body { background: var(--bg); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
  .app { max-width: 430px; box-shadow: 0 0 100px rgba(0,0,0,.9); border: .5px solid var(--sep); }
  .toast { bottom: calc(110px + var(--sab)); }
}
@media (max-width: 380px) {
  .widgets-2 { grid-template-columns: 1fr; }
}

/* ─── CHECKBOX ─── */
.check-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
}
.check-box {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
  background: var(--bg3); border: 1.5px solid var(--bg5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.check-box.on { background: var(--accent-fill); border-color: var(--gold); }
.check-lbl { font-size: 14px; color: var(--t2); line-height: 1.5; flex: 1; }
.check-lbl a { color: var(--gold); }

/* ─── SPACERS ─── */
.sp8  { height: 8px; }
.sp12 { height: 12px; }
.sp16 { height: 16px; }
.sp24 { height: 24px; }

/* ─── ALERT BANNER ─── */
.alert-banner {
  background: var(--ora-bg); border: .5px solid rgba(251,146,60,.3);
  border-radius: var(--r); margin: 0 16px 8px;
  padding: 11px 14px;
  display: flex; gap: 10px; align-items: center;
}
.alert-banner-ico { font-size: 15px; flex-shrink: 0; }
.alert-banner-txt { font-size: 13px; color: var(--ora); line-height: 1.4; flex:1; }

/* ─── AUTH MODAL ─── */
.auth-sep { display:flex;align-items:center;gap:10px;padding:12px 16px; }
.auth-sep-line { flex:1;height:.5px;background:var(--sep); }
.auth-sep-txt { font-size:12px;color:var(--t3); }

/* ─── PRINT ─── */
@media print {
  .navbar,.tabbar,.toast,.overlay,.modal-overlay,
  #d-limit-wrap,.pro-overlay,.watermark { display:none !important; }
  .app { position:static;max-width:100%;box-shadow:none;border:none; }
  .content { height:auto;overflow:visible; }
  /* On imprime l écran affiché, pas les dix. « .view { display:block } »
     dépliait tout le classeur bout à bout dans le PDF. */
  .view { position:static;overflow:visible; }
  .view:not(.on) { display:none !important; }
  .view.on { display:block !important; }
  body { background:white;color:black;overflow:auto; }
  .w-val,.pl-v,.tx-amt { color:black !important; }
}

/* Level + Badges */
/* Niveau : une ligne fine façon barre d'XP — la gamification reste,
   sans manger un tiers d'écran au-dessus des vraies données. */
.lvl-card { margin:10px 16px 0; padding:10px 14px; border-radius:14px; background:linear-gradient(135deg,rgba(124,58,237,.07) 0%,var(--bg2) 60%); border:.5px solid var(--gold-bd); position:relative; overflow:hidden; }
.lvl-card::before { content:''; position:absolute; inset:-2px; background:linear-gradient(120deg,transparent 30%,rgba(124,58,237,.10) 50%,transparent 70%); animation:lvlShine 4s ease-in-out infinite; pointer-events:none; }
@keyframes lvlShine { 0%,100%{transform:translateX(-100%);} 50%{transform:translateX(100%);} }
.lvl-row { display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.lvl-ico { font-size:22px; filter:drop-shadow(0 2px 6px rgba(124,58,237,.4)); }
.lvl-info { flex:1; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.lvl-name { font-size:14px; font-weight:800; color:var(--gold); letter-spacing:-.3px; }
.lvl-sub { font-size:11px; color:var(--t3); }
.lvl-next { font-size:11px; color:var(--t3); text-align:right; }
.lvl-bar { margin-top:8px; height:4px; border-radius:3px; background:rgba(124,58,237,.15); overflow:hidden; position:relative; z-index:1; }
.lvl-fill { height:100%; background:linear-gradient(90deg,var(--dv-1),var(--warning)); border-radius:3px; transition:width 1.2s cubic-bezier(.2,.9,.2,1); }
.bdg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:8px; padding:12px; }
.bdg { aspect-ratio:1; border-radius:14px; background:var(--bg2); border:.5px solid var(--bd); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px; transition:transform .2s; cursor:default; }
.bdg.on { background:linear-gradient(135deg,rgba(124,58,237,.10),var(--bg2)); border-color:var(--gold-bd); }
.bdg.on:hover { transform:translateY(-2px); }
.bdg-ico { font-size:24px; filter:grayscale(1) opacity(.35); }
.bdg.on .bdg-ico { filter:none; animation:bdgPop .5s cubic-bezier(.3,1.6,.5,1); }
.bdg-lbl { font-size:9px; color:var(--t3); text-align:center; line-height:1.1; font-weight:600; }
.bdg.on .bdg-lbl { color:var(--gold); }
@keyframes bdgPop { 0%{transform:scale(.5);} 100%{transform:scale(1);} }
.bdg-stat { font-size:11px; color:var(--t3); padding:0 16px 8px; }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS & MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════ */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

/* View entrance (when user switches tab) */
.view.on { animation: viewIn .35s cubic-bezier(.22,.9,.32,1.18) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

/* Stagger entrance for groups/widgets inside an active view */
.view.on .grp,
.view.on .widgets-2,
.view.on .widgets-3,
.view.on .lt-area,
.view.on .alert-banner {
  animation: rise .45s cubic-bezier(.22,.9,.32,1.18) both;
}
.view.on > *:nth-child(1) { animation-delay: .02s; }
.view.on > *:nth-child(2) { animation-delay: .06s; }
.view.on > *:nth-child(3) { animation-delay: .10s; }
.view.on > *:nth-child(4) { animation-delay: .14s; }
.view.on > *:nth-child(5) { animation-delay: .18s; }
.view.on > *:nth-child(6) { animation-delay: .22s; }
.view.on > *:nth-child(7) { animation-delay: .26s; }
.view.on > *:nth-child(8) { animation-delay: .30s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Widget shimmer on entrance */
.w {
  transition: transform .25s cubic-bezier(.22,.9,.32,1.18),
              box-shadow .25s ease,
              border-color .25s ease;
}
.w::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(124,58,237,.06) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.view.on .w::before { animation: shimmer 1.6s ease .3s; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Number/value pop-in */
.w-val, .pl-v {
  animation: pop .5s cubic-bezier(.22,1.4,.32,1) both;
}
@keyframes pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: none; }
}

/* Cell tap polish */
.cell, .tx-row, .sk-row {
  transition: background .15s ease, transform .15s ease;
}

/* Floating add button */
.add-btn { transition: transform .2s cubic-bezier(.22,1.4,.32,1), box-shadow .2s ease; }

/* Buttons feedback */
.btn-main, .seg-b, .nav-ico-btn {
  transition: transform .15s cubic-bezier(.22,1.4,.32,1),
              background .2s ease,
              opacity .15s ease,
              box-shadow .25s ease;
}
.btn-main:active { transform: scale(.97); }

/* Tab indicator slide */
.tab { position: relative; }
.tab::after {
  content: ''; position: absolute;
  left: 50%; top: 2px;
  width: 30px; height: 3px; border-radius: 2px;
  background: var(--accent-fill);
  transform: translateX(-50%) scaleX(0);
  transition: transform .3s cubic-bezier(.22,.9,.32,1.18);
}
.tab.on::after { transform: translateX(-50%) scaleX(1); }

/* Toast lift */
.toast { transition: transform .35s cubic-bezier(.22,.9,.32,1.18), opacity .25s ease; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP LAYOUT (≥ 1024px)
   ═══════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .cell:hover { background: var(--bg3); }
  .w:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    border-color: var(--gold-bd);
  }
  .btn-main:hover { transform: translateY(-1px); filter: brightness(1.08); }
  .btn-gold:hover { box-shadow: 0 0 32px rgba(124,58,237,.45); }
  .tab:hover { color: var(--t1); }
  .nav-ico-btn:hover { background: var(--bg3); }
  .add-btn:hover { transform: scale(1.1); box-shadow: 0 0 24px rgba(124,58,237,.6); }
  .seg-b:hover:not(.on) { color: var(--t1); }
}

@media (min-width: 1024px) {
  body {
    background:
      radial-gradient(ellipse 80% 60% at 20% 0%, rgba(124,58,237,.08) 0%, transparent 60%),
      radial-gradient(ellipse 60% 80% at 100% 100%, rgba(124,58,237,.04) 0%, transparent 60%),
      radial-gradient(ellipse at top, #14141a 0%, var(--bg) 70%);
    display: block; min-height: 100vh;
  }
  .app {
    position: fixed; inset: 0;
    margin: 0; max-width: none; width: 100vw;
    min-height: 100vh; height: 100vh;
    display: grid;
    grid-template-columns: 232px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "side nav"
      "side main";
    box-shadow: none; border: none;
  }
  .sbar { display: none; }
  .navbar {
    grid-area: nav;
    padding: 0 32px;
    border-left: none;
  }
  .nav-title { font-size: 18px; opacity: 1; position: static; transform: none; }
  .nav-side { display: flex; }
  .nav-side.right { display: flex; }
  .content {
    grid-area: main;
    border-left: none;
    overflow: hidden;
  }
  .view::-webkit-scrollbar { width: 8px; }
  .view::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 4px; }
  .view::-webkit-scrollbar-thumb:hover { background: var(--bg5); }

  /* Sidebar verticale À GAUCHE */
  .tabbar {
    grid-area: side;
    height: auto; padding: 16px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border-top: none;
    border-right: .5px solid var(--sep);
    background: rgba(10,10,14,.6);
    overflow-y: auto;
  }
  .tabbar::before {
    content: '⚡ TCG Pro';
    display: flex;
    align-items: center;
    font-size: 18px; font-weight: 700;
    color: var(--gold);
    letter-spacing: -.3px;
    padding: 4px 12px 18px;
    white-space: nowrap;
  }
  .tab {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    min-height: 42px;
    font-size: 14px;
    white-space: nowrap;
  }
  .tab-ico-w { width: 22px; height: 22px; }
  .tab-ico-w svg { width: 20px; height: 20px; }
  .tab-lbl { font-size: 14px; font-weight: 500; }
  .tab.on { background: var(--gold-bg); color: var(--gold); }
  .tab.on::after { display: none; }
  .tab:hover:not(.on) { background: var(--bg3); }

  /* FAB scan : desktop = inline normal (pas float) — !important car .tab-fab{flex:1} défini plus bas dans le fichier */
  .tab-fab {
    position: relative;
    flex: 0 0 auto !important;
    padding: 4px 14px;
    border-radius: 10px;
    min-height: 40px;
    flex-direction: row !important;
    justify-content: flex-start;
    gap: 10px;
  }
  .tab-fab-circle {
    position: relative !important;
    top: auto !important; left: auto !important; transform: none !important;
    width: 32px !important; height: 32px !important;
    flex-shrink: 0;
    border-width: 2px !important;
    box-shadow: 0 2px 8px rgba(124,58,237,.35) !important;
  }
  .tab-fab-circle svg { width: 18px !important; height: 18px !important; }
  .tab-fab-lbl {
    position: relative !important;
    bottom: auto !important; left: auto !important; transform: none !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--t1);
    white-space: nowrap;
  }
  .tab-fab:active .tab-fab-circle { transform: scale(.92) !important; }
  .tab-fab.on .tab-fab-circle { transform: scale(1) !important; }
  .tab-fab .tab-ico-w { display: none; }
  /* Pill de mode : collée en bas de la sidebar */
  .mode-pill-side { order: 99; margin: auto 0 0 !important; width: 100% !important; height: 38px; justify-content: center; }

  /* Wider content */
  .lt { font-size: 40px; padding: 12px 0 6px; }
  .lt-area { padding: 16px 32px 8px; }
  .grp { margin: 0 32px; }
  .alert-banner { margin: 0 32px 12px; }
  .section-hd, .section-ft { padding-left: 36px; padding-right: 36px; }
  /* Gouttières unifiées 32px (sinon lvl-card/progress débordent visuellement) */
  #v-dash .lvl-card { margin-left: 32px !important; margin-right: 32px !important; }
  .progress-bar { margin-left: 32px; margin-right: 32px; }
  .progress-lbl { padding-left: 32px; padding-right: 32px; }
  #d-progress-wrap { margin-top: 6px; }
  #d-insight { margin-left: 32px !important; margin-right: 32px !important; }
  #d-latent { margin-left: 32px !important; margin-right: 32px !important; }
  #d-limit-wrap { padding-left: 32px !important; padding-right: 32px !important; }

  /* Wider widget grids */
  .widgets-2 {
    grid-template-columns: repeat(4, 1fr);
    padding: 12px 32px; gap: 14px;
  }
  .widgets-3 {
    grid-template-columns: repeat(6, 1fr);
    padding: 12px 32px; gap: 14px;
  }
  .w { min-height: 110px; padding: 18px; }
  .w.wide { grid-column: 1 / -1; min-height: 90px; }
  .w-val { font-size: 28px; }

  /* Sheets become centered modals on desktop */
  .sheet-overlay { align-items: center; padding: 40px; }
  .sheet {
    max-width: 560px;
    border-radius: 20px;
    max-height: 85vh;
    animation: scaleIn .4s cubic-bezier(.34,1.2,.64,1);
  }
  .sheet-handle-area { display: none; }

  /* Modal sizing */
  .modal { max-width: 440px; }

  /* Cells get hover indent */
  .cell { padding: 13px 24px; }
  .cell::after { left: 62px; right: 24px; }
  .section-hd { padding: 22px 36px 8px; }
}

/* Adaptive grids for very wide desktop screens */
@media (min-width: 1440px) {
  .widgets-2 { grid-template-columns: repeat(5, 1fr); }
  .widgets-3 { grid-template-columns: repeat(8, 1fr); }
  .lt-area, .grp, .alert-banner, .widgets-2, .widgets-3 {
    padding-left: 48px; padding-right: 48px;
  }
  .grp, .alert-banner { margin-left: 48px; margin-right: 48px; }
  .navbar { padding: 0 48px; }
}
@media (min-width: 1800px) {
  .widgets-2 { grid-template-columns: repeat(6, 1fr); }
  .widgets-3 { grid-template-columns: repeat(10, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM ANIMATIONS — niveau supérieur
   ═══════════════════════════════════════════════════════════ */

/* Glow ambiant qui pulse doucement sur les widgets dorés */
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(124,58,237,0); }
  50%      { box-shadow: 0 0 24px rgba(124,58,237,.10); }
}
.btn-gold { animation: goldPulse 3.6s ease-in-out infinite; }

/* Gradient animé sur la barre de progression */
.progress-fill {
  background: linear-gradient(90deg, var(--accent-fill-press), var(--accent-fill), var(--accent-fill-hover), var(--accent-fill)) !important;
  background-size: 300% 100% !important;
  animation: progGrad 3s linear infinite;
}
@keyframes progGrad { from { background-position: 0% 0; } to { background-position: 300% 0; } }

/* Bars de chart qui poussent depuis 0 */
.bar-fill, .bar-rect, [class*="bar-bar"] {
  transform-origin: left center;
  animation: barGrow .9s cubic-bezier(.22,.9,.32,1.18) both;
}
@keyframes barGrow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Le bouton "+" tourne légèrement au hover et au scale press */
.add-btn { will-change: transform; }
@media (hover: hover) {
  .add-btn:hover { transform: scale(1.12) rotate(90deg); }
}

/* Cellules qui décalent vers la droite au hover (effet iOS) */
@media (hover: hover) and (pointer: fine) {
  .cell:hover { padding-left: 22px; }
  .cell:hover .cell-ico { transform: scale(1.06); }
  .cell-ico { transition: transform .25s cubic-bezier(.22,1.4,.32,1); }
}

/* Tabbar (mobile) — icônes qui pulsent quand actif */
.tab.on .tab-ico-w {
  animation: iconPop .35s cubic-bezier(.22,1.6,.32,1.05);
}
@keyframes iconPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Sheets — ombre qui s'intensifie en arrivant */
.sheet { box-shadow: 0 -20px 60px rgba(0,0,0,.4), 0 0 0 .5px var(--sep) inset; }

/* Modal overlay — backdrop qui se floute en fondu */
.modal-overlay, .sheet-overlay {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease, background .3s ease;
}
.modal-overlay.show, .sheet-overlay.show {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Glow doré qui suit la souris sur les widgets (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .w {
    background:
      radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), rgba(124,58,237,.08), transparent 50%),
      var(--bg2);
  }
}

/* Pulse vert/rouge sur les valeurs quand elles changent */
.flash-up   { animation: flashUp   .6s ease; }
.flash-down { animation: flashDown .6s ease; }
@keyframes flashUp {
  0%   { color: var(--up); text-shadow: 0 0 12px rgba(16,224,144,.6); }
  100% { }
}
@keyframes flashDown {
  0%   { color: var(--dn); text-shadow: 0 0 12px rgba(251,69,112,.6); }
  100% { }
}

/* Toast — slide-in avec rebond */
.toast.show {
  animation: toastIn .45s cubic-bezier(.22,1.5,.32,1) both;
}
@keyframes toastIn {
  from { transform: translate(-50%, 30px) scale(.92); opacity: 0; }
  to   { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

/* Skeleton shimmer (loading state) */
.skeleton {
  background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s linear infinite;
  border-radius: 8px;
}


/* Boutons primaires — ripple au clic */
.btn-main { position: relative; overflow: hidden; }
.btn-main::after {
  content: ''; position: absolute;
  width: 6px; height: 6px;
  top: var(--ry, 50%); left: var(--rx, 50%);
  background: rgba(255,255,255,.25); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}
.btn-main.ripple::after { animation: rippleAnim .6s ease-out; }
@keyframes rippleAnim {
  to { transform: translate(-50%, -50%) scale(80); opacity: 0; }
}

/* Sidebar logo qui pulse doucement */
@media (min-width: 1024px) {
  .tabbar::before {
    background: linear-gradient(120deg, var(--accent-fill) 0%, var(--accent-fill-hover) 50%, var(--accent-fill) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldShine 4s linear infinite;
  }
}
@keyframes goldShine { from { background-position: 0% 0; } to { background-position: 200% 0; } }

/* Page-fade au load initial */
.app { animation: appFadeIn .6s ease both; }
@keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Tx-row / sk-row — slide-in stagger */
.tx-row, .sk-row { animation: slideInRow .4s cubic-bezier(.22,.9,.32,1.18) both; }
@keyframes slideInRow {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

/* Focus rings premium */
input:focus, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,.3);
  transition: box-shadow .2s ease;
}

/* ─── Tablet (640–1023px) ─── */
/* Palier tablette. Même garde de hauteur que le cadre 430 px : sans elle, un
   téléphone en paysage (860×293) retombait dans une colonne de 720 px. */
@media (min-width: 640px) and (max-width: 1023px) and (min-height: 600px) {
  body { background: radial-gradient(ellipse at top, #14141a 0%, var(--bg) 70%); }
  .app { max-width: 720px; box-shadow: 0 0 80px rgba(0,0,0,.7); border: .5px solid var(--sep); }
  .widgets-2 { grid-template-columns: repeat(3, 1fr); }
  .widgets-3 { grid-template-columns: repeat(4, 1fr); }
  .lt { font-size: 36px; }
}

/* ─── APEX TERMINAL : finance-grade monospace + ticker style ─── */
.w-val,
#d-cap, #d-ca, #d-marge, #d-dep, #d-stock,
.kpi-v, .pl-v, .stk-v, .tx-amt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
  letter-spacing: -.5px;
}
.w-val { font-size: 26px; font-weight: 800; }
.w.wide .w-val { font-size: 34px; letter-spacing: -1px; font-weight: 900; }

/* Live data indicator (pulsing dot sur le Capital widget) */
.w.wide .w-data { position: relative; }
.w.wide .w-lbl::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(16,224,144,.8);
  animation: apexPulse 2.4s ease-in-out infinite;
}
@keyframes apexPulse {
  0% { box-shadow: 0 0 0 0 rgba(16,224,144,.55); }
  70% { box-shadow: 0 0 0 8px rgba(16,224,144,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,224,144,0); }
}

/* Subtle terminal grid pattern derrière les widgets */
.w {
  background-image:
    linear-gradient(rgba(124,58,237,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.025) 1px, transparent 1px),
    var(--bg2);
  background-size: 24px 24px, 24px 24px, auto;
  background-position: 0 0, 0 0, 0 0;
}

/* Trend pill plus impactant (gain/perte) */
#d-cap-delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
}
#d-marge-pill {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16,224,144,.12);
  border: .5px solid rgba(16,224,144,.3);
}

/* Section headers : style ticker */
.section-hd {
  position: relative;
  padding-left: 16px;
}
.section-hd::before {
  content: '▸';
  position: absolute;
  left: 4px;
  color: var(--gold);
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .6;
}

/* Smart Insight pill (dashboard) */
.insight-pill {
  margin: 8px 16px 0; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(124,58,237,.04));
  border: .5px solid var(--gold-bd);
  border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  position: relative; overflow: hidden;
  font-size: 13px; line-height: 1.4; letter-spacing: -.2px;
}
.insight-pill::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(to bottom, var(--accent-fill), transparent);
}
.insight-pill .ico {
  font-size: 22px; flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(124,58,237,.5));
}
.insight-pill .body { flex: 1; min-width: 0; }
.insight-pill .body b { color: var(--gold); font-weight: 700; }
.insight-pill .body small { color: var(--t3); font-size: 11px; }
.insight-pill.up    { border-color: rgba(16,224,144,.35); background: linear-gradient(135deg, rgba(16,224,144,.10), rgba(16,224,144,.03)); }
.insight-pill.up::before    { background: linear-gradient(to bottom, var(--up), transparent); }
.insight-pill.up .body b    { color: var(--up); }
.insight-pill.warn  { border-color: rgba(255,181,71,.35); background: linear-gradient(135deg, rgba(255,181,71,.10), rgba(255,181,71,.03)); }
.insight-pill.warn::before  { background: linear-gradient(to bottom, var(--ora), transparent); }
.insight-pill.warn .body b  { color: var(--ora); }

/* ─── PREMIUM SaaS UPGRADES (visible / vendeur) ─── */

/* Skeleton shimmer — chargement premium */
 100%{background-position:200% 0} }
.skel { display:inline-block; min-width:60px; height:1em; vertical-align:middle; border-radius:6px;
  background:linear-gradient(90deg, var(--bg3) 0%, var(--bg4) 30%, var(--bg3) 60%);
  background-size:200% 100%; animation: skeletonShimmer 1.4s linear infinite; color:transparent !important; }
.skel-lg { height:1.4em; min-width:120px; }

/* Toast premium : icon + variants + spring */
.toast { display:inline-flex; align-items:center; gap:10px; padding-left:14px; }
.toast-ico { width:18px; height:18px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:14px;
  border-radius:50%; background:rgba(255,255,255,.1); }
.toast.success .toast-ico { background:rgba(16,224,144,.2); color:var(--success); }
.toast.error   .toast-ico { background:rgba(255,87,87,.2); color:var(--danger); }
.toast.warn    .toast-ico { background:rgba(255,181,71,.2); color:var(--warning); }
.toast.info    .toast-ico { background:rgba(124,58,237,.2); color:var(--gold); }
.toast.success { border-color:rgba(16,224,144,.4); }
.toast.error   { border-color:rgba(255,87,87,.4); }
.toast.warn    { border-color:rgba(255,181,71,.4); }

/* Confetti */
.confetti-host { position:fixed; inset:0; pointer-events:none; z-index:500; overflow:hidden; }
.confetti-bit { position:absolute; width:8px; height:14px; opacity:0; will-change:transform,opacity;
  border-radius:1.5px; }
@keyframes confettiFall {
  0%   { transform:translate3d(0,-20px,0) rotate(0); opacity:1; }
  100% { transform:translate3d(var(--cx,0),110vh,0) rotate(var(--cr,540deg)); opacity:0; }
}

/* Focus rings premium (a11y + perceived quality) */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(124,58,237,.10);
}

/* Empty state premium */
.empty-premium {
  text-align:center; padding:32px 20px;
  background:radial-gradient(ellipse at top, rgba(124,58,237,.08), transparent 70%);
  border-radius:18px;
}
.empty-premium .ico {
  font-size:42px; display:inline-flex; width:72px; height:72px; align-items:center; justify-content:center;
  border-radius:50%; background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(124,58,237,.04));
  border:.5px solid var(--gold-bd); margin-bottom:14px;
  box-shadow:0 0 30px rgba(124,58,237,.15); animation:emptyPulse 3s ease-in-out infinite;
}
@keyframes emptyPulse { 0%,100%{box-shadow:0 0 30px rgba(124,58,237,.15)} 50%{box-shadow:0 0 50px rgba(124,58,237,.35)} }
.empty-premium .tt { font-size:16px; font-weight:700; color:var(--t1); margin-bottom:6px; letter-spacing:-.3px; }
.empty-premium .sub { font-size:13px; color:var(--t3); line-height:1.5; max-width:280px; margin:0 auto 14px; }
.empty-premium .cta {
  display:inline-flex; gap:6px; align-items:center; padding:9px 18px;
  background:linear-gradient(135deg,var(--accent-fill),#9F7C3E); color: var(--on-accent);
  font-weight:700; font-size:13px; border-radius:100px; border:none; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  box-shadow:0 4px 20px rgba(124,58,237,.35);
}
.empty-premium .cta:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 8px 30px rgba(124,58,237,.55); }

/* Sparkline (SVG inline dans widgets) */
.spark { width:100%; height:32px; margin-top:6px; display:block; overflow:visible; }
.spark path.line { fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(124,58,237,.5)); }
.spark path.area { opacity:.8; }
.spark.up path.line { stroke:var(--up); filter:drop-shadow(0 0 4px rgba(16,224,144,.5)); }
.spark.dn path.line { stroke:var(--dn); filter:drop-shadow(0 0 4px rgba(255,87,87,.5)); }

/* (page enter via .view.on existe deja, on ne duplique pas) */

/* Hover lift sur cells / tx-row / stk-row (desktop seulement) */
@media (hover: hover) and (pointer: fine) {
  .cell, .tx-row, .stk-row, .pl-row {
    transition: transform .28s cubic-bezier(.2,.8,.2,1), background .25s ease;
    will-change: transform;
  }
  .cell:hover, .tx-row:hover, .stk-row:hover, .pl-row:hover {
    transform: translateX(3px);
    background: linear-gradient(90deg, rgba(124,58,237,.06), transparent 60%);
  }
}

/* KPI widget hover : gradient border doré qui apparait */
.w {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .w:hover {
    transform: translateY(-3px);
    border-color: var(--gold-bd);
    box-shadow: 0 12px 30px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(124,58,237,.15);
  }
}

/* Flash up/down premium (quand value change) */
@keyframes flashUp   { 0%{color:var(--up); text-shadow:0 0 12px rgba(16,224,144,.6);} 100%{} }
@keyframes flashDown { 0%{color:var(--dn); text-shadow:0 0 12px rgba(255,87,87,.6);}  100%{} }
.flash-up   { animation:flashUp 1.1s ease; }
.flash-down { animation:flashDown 1.1s ease; }

/* Trend badges premium (pour stock cards / KPIs) */
.trend-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:6px; font-variant-numeric:tabular-nums;
  font-family:var(--font-mono); }
.trend-badge.up { background:rgba(16,224,144,.14); color:var(--success); }
.trend-badge.dn { background:rgba(255,87,87,.14);  color:var(--danger); }
.trend-badge.eq { background:rgba(160,160,170,.12); color:var(--t3); }

/* Streak badge */
.streak-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,rgba(255,140,40,.18),rgba(255,87,87,.12));
  border:.5px solid rgba(255,140,40,.35);
  padding:4px 10px; border-radius:100px;
  font-size:12px; font-weight:700; color:#ff8c28;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 16px rgba(255,140,40,.18);
}

/* Mobile premium — pull to refresh hint */
@media (hover: none) and (pointer: coarse) {
  .cell:active, .tx-row:active, .stk-row:active { transform:scale(.985); transition:transform .12s ease; }
  .btn-main:active { transform:scale(.97); }
}

/* Tab active : 1 seul indicateur (le slide animé `.tab::after` suffit) */
/* (Ancien duplicate `.tab.on::before` retiré pour éviter 2 traits) */

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .skel { animation:none !important; background:var(--bg3) !important; }
}

/* ====== Card Scan + Autocomplete ====== */
.cs-scan-btn {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border:none; border-radius:10px;
  background:linear-gradient(135deg, var(--accent-fill) 0%, var(--warning) 100%);
  color: var(--on-accent); font-size:18px; cursor:pointer; z-index:2;
  box-shadow:0 2px 8px rgba(124,58,237,.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cs-scan-btn:hover { transform:translateY(-50%) scale(1.05); box-shadow:0 4px 14px rgba(124,58,237,.5); }
.cs-scan-btn:active { transform:translateY(-50%) scale(0.95); }
.f-row:has(.cs-scan-btn) .f-inp { padding-right:54px; }

.cs-dropdown {
  position:relative; max-height:0; overflow-y:auto; transition:max-height .25s ease;
  background:var(--bg2); border-radius:0 0 12px 12px; margin-top:-2px;
}
.cs-dropdown.open { max-height:320px; border:1px solid rgba(124,58,237,.2); border-top:none; }
.cs-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04); transition:background .12s ease;
}
.cs-item:hover, .cs-item.kbd-focus { background:rgba(124,58,237,.08); }
.cs-item:last-child { border-bottom:none; }
.cs-img { width:40px; height:56px; border-radius:6px; object-fit:cover; background:var(--bg3); flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.cs-info { flex:1; min-width:0; }
.cs-name { font-weight:700; font-size:14px; color:var(--t1); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-meta { font-size:11px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-meta b { color:var(--gold); }
.cs-empty { padding:14px; text-align:center; color:var(--t3); font-size:13px; }
.cs-loading { padding:14px; text-align:center; color:var(--t3); font-size:13px; }

.cs-locked {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(124,58,237,.02));
  border:1px solid rgba(124,58,237,.25); border-radius:12px; margin:8px 4px 0;
}
.cs-locked-img { width:44px; height:60px; border-radius:6px; object-fit:cover; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.cs-locked-info { flex:1; min-width:0; }
.cs-locked-name { font-weight:700; font-size:14px; color:var(--gold); margin-bottom:2px; }
.cs-locked-meta { font-size:11px; color:var(--t3); }
.cs-locked-x { background:none; border:none; color:var(--t3); cursor:pointer; font-size:18px; padding:6px; }
.cs-locked-x:hover { color:var(--dn); }

/* Scan modal */
.scan-modal {
  position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999;
  display:none; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(8px);
}
.scan-modal.open { display:flex; }
.scan-card {
  background:var(--bg1); border-radius:24px; padding:24px; max-width:480px; width:100%;
  border:1px solid rgba(124,58,237,.2); box-shadow:0 20px 60px rgba(0,0,0,.7);
  max-height:90vh; overflow-y:auto;
}
.scan-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.scan-ttl { font-size:18px; font-weight:800; color:var(--gold); }
.scan-x { background:none; border:none; color:var(--t2); font-size:22px; cursor:pointer; }
.scan-zone {
  border:2px dashed rgba(124,58,237,.3); border-radius:18px; padding:40px 20px;
  text-align:center; cursor:pointer; transition:all .2s ease;
  background:linear-gradient(135deg, rgba(124,58,237,.03), transparent);
}
.scan-zone:hover { border-color:var(--gold); background:rgba(124,58,237,.06); }
.scan-zone.drag { border-color:var(--gold); background:rgba(124,58,237,.1); transform:scale(1.02); }
.scan-zone-ico { font-size:48px; margin-bottom:12px; }
.scan-zone-tt { font-weight:700; font-size:16px; margin-bottom:6px; color:var(--t1); }
.scan-zone-sub { font-size:12px; color:var(--t3); }
.scan-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.scan-btn {
  padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background:var(--bg2); color:var(--t1); font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all .15s ease;
}
.scan-btn:hover { border-color:var(--gold); background:rgba(124,58,237,.06); }
.scan-progress { padding:24px; text-align:center; }
.scan-progress-spin {
  width:48px; height:48px; margin:0 auto 16px; border-radius:50%;
  border:3px solid rgba(124,58,237,.15); border-top-color:var(--gold);
  animation:scanSpin 0.8s linear infinite;
}
@keyframes scanSpin { to { transform:rotate(360deg); } }
.scan-progress-step { font-size:13px; color:var(--t3); margin-top:4px; }
.scan-progress-step.done { color:var(--up); }
.scan-progress-step.active { color:var(--gold); font-weight:700; }
.scan-result-card {
  display:flex; gap:14px; padding:16px; border-radius:16px;
  background:rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.3); margin-bottom:14px;
  align-items:center;
}
.scan-result-img { width:130px; height:180px; border-radius:10px; object-fit:cover; box-shadow:0 6px 20px rgba(0,0,0,.6); flex-shrink:0; }
.scan-result-name { font-size:18px; font-weight:800; color:var(--gold); margin-bottom:6px; line-height:1.2; }
.scan-result-meta { font-size:13px; color:var(--t2); margin-bottom:10px; }
.scan-result-conf { font-size:12px; color:var(--up); font-weight:700; }
.scan-candidates { display:grid; gap:10px; margin-top:10px; }
.scan-cand {
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px;
  background:var(--bg2); cursor:pointer; transition:all .15s ease;
  border:1px solid rgba(255,255,255,.06);
}
.scan-cand:hover, .scan-cand:active { border-color:var(--gold); background:rgba(124,58,237,.08); transform:scale(0.99); }
.scan-cand-img { width:60px; height:84px; border-radius:6px; object-fit:cover; flex-shrink:0; box-shadow:0 3px 10px rgba(0,0,0,.4); }
.scan-cand-info { flex:1; min-width:0; }
.scan-cand-name { font-weight:700; font-size:14px; color:var(--t1); margin-bottom:3px; }
.scan-cand-meta { font-size:12px; color:var(--t3); line-height:1.3; }

/* Live scan camera view */
.live-scan-wrap {
  position:relative; width:100%; aspect-ratio:3/4; background:#000;
  border-radius:18px; overflow:hidden; margin-bottom:14px;
}
#live-scan-video { width:100%; height:100%; object-fit:cover; display:block; }
.live-scan-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.live-scan-frame {
  position:relative;
  width:88%;                    /* plus large : 88% du viewport */
  aspect-ratio: 63 / 88;        /* ratio EXACT carte Pokemon (63mm × 88mm) */
  max-width: 380px;
  max-height: 75vh;
  border-radius:14px; overflow:hidden;
}
.live-scan-corner {
  position:absolute; width:24px; height:24px; border:3px solid var(--gold);
}
.live-scan-corner.tl { top:0; left:0; border-right:none; border-bottom:none; border-radius:14px 0 0 0; }
.live-scan-corner.tr { top:0; right:0; border-left:none; border-bottom:none; border-radius:0 14px 0 0; }
.live-scan-corner.bl { bottom:0; left:0; border-right:none; border-top:none; border-radius:0 0 0 14px; }
.live-scan-corner.br { bottom:0; right:0; border-left:none; border-top:none; border-radius:0 0 14px 0; }
.live-scan-line {
  position:absolute; left:8%; right:8%; height:2px; top:0;
  background:linear-gradient(90deg, transparent, var(--accent-fill), transparent);
  box-shadow:0 0 12px var(--accent-fill);
  animation:liveScanSweep 2.4s ease-in-out infinite;
}
@keyframes liveScanSweep {
  0%, 100% { top:0; opacity:.6; }
  50% { top:calc(100% - 2px); opacity:1; }
}
.live-scan-hint {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.65); color:#fff; font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:20px; backdrop-filter:blur(8px);
  white-space:nowrap;
}
.live-scan-status {
  position:absolute; top:14px; left:14px; right:14px; pointer-events:auto;
  text-align:center;
}
.live-scan-tip {
  background:rgba(124,58,237,.92); color:var(--bg); font-size:13px;
  font-weight:700; padding:10px 14px; border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
/* Multi-step scan UI */
.scan-step-highlight {
  position:absolute; pointer-events:none;
  border:3px solid var(--gold); border-radius:8px;
  background:rgba(124,58,237,.15);
  box-shadow:0 0 0 200px rgba(0,0,0,.45);
  animation:stepPulse 2s ease-in-out infinite;
}
@keyframes stepPulse {
  0%, 100% { box-shadow:0 0 0 200px rgba(0,0,0,.45), 0 0 12px rgba(124,58,237,.6); }
  50% { box-shadow:0 0 0 200px rgba(0,0,0,.45), 0 0 24px rgba(124,58,237,1); }
}
.scan-step-progress {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; pointer-events:none;
}
.scan-step-dot {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.3);
  border:2px solid rgba(255,255,255,.5);
  transition:all .25s ease;
}
.scan-step-dot.active {
  background:var(--accent-fill); border-color: var(--on-accent); transform:scale(1.4);
  box-shadow:0 0 12px var(--accent-fill);
}
.scan-step-dot.done {
  background:var(--up); border-color:var(--up);
}
.scan-step-title {
  position:absolute; top:46px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.7); color:var(--gold); font-size:13px;
  font-weight:800; padding:6px 14px; border-radius:20px;
  letter-spacing:.3px; backdrop-filter:blur(8px);
  white-space:nowrap;
}

/* External links (Cardmarket / eBay) sous résultat scan — uniformes */
.ext-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0 12px;
  align-items:stretch;
}
.ext-link {
  /* Reset native button styles */
  -webkit-appearance:none; appearance:none;
  font-family:inherit;
  width:100%;
  /* Layout */
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  min-height:62px;
  border-radius:14px;
  background:var(--bg2);
  border:1px solid rgba(255,255,255,.06);
  text-decoration:none; color:var(--t1);
  transition:all .15s ease;
  cursor:pointer;
  text-align:left;
}
.ext-link:hover, .ext-link:active {
  border-color:var(--gold); background:rgba(124,58,237,.06);
  transform:translateY(-1px);
}
.ext-link-ico {
  width:36px; height:36px; border-radius:10px;
  background:rgba(124,58,237,.07); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0;
}
.ext-link.eb .ext-link-ico { background:rgba(0,165,96,.12); color:var(--up); }
.ext-link-body { flex:1; min-width:0; overflow:hidden; }
.ext-link-t {
  font-size:13px; font-weight:700; color:var(--t1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ext-link-s {
  font-size:11px; color:var(--t3); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ext-link-arrow { color:var(--t3); font-size:14px; flex-shrink:0; }

/* Price summary block (Cardmarket + eBay live prices) */
.price-summary { margin: 8px 0 12px; }
.price-block {
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.price-block.ebay { border-color: rgba(0,165,96,.18); }
.price-block-hd {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; font-weight: 700;
  color: var(--t3); margin-bottom: 10px;
}
.price-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.price-cell {
  text-align: center;
  background: rgba(255,255,255,.02);
  border-radius: 8px;
  padding: 8px 4px;
}
.price-lbl {
  font-size: 10px; color: var(--t3); text-transform: uppercase;
  letter-spacing: .3px; font-weight: 600; margin-bottom: 3px;
}
.price-val {
  font-size: 14px; font-weight: 800; color: var(--t1);
  font-variant-numeric: tabular-nums;
}
.price-val.low { color: var(--up); }
.price-val.high { color: var(--dn); }
.price-val.trend { color: var(--gold); }
.price-foot {
  font-size: 10px; color: var(--t3); margin-top: 6px; text-align: right;
}
.price-empty {
  font-size: 12px; color: var(--t3); padding: 8px 4px; text-align: center; font-style: italic;
}
.price-loading {
  font-size: 12px; color: var(--t3); padding: 12px; text-align: center;
}

/* FAB central scanner dans tab bar (Pokecardex / TCGplayer style) */
.tab-fab {
  position: relative;
  flex: 1;
}
.tab-fab-circle {
  position: absolute;
  top: -28px;
  left: 50%; transform: translateX(-50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-fill) 0%, var(--warning) 100%);
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 6px 20px rgba(124,58,237,.45),
    0 2px 6px rgba(0,0,0,.3),
    inset 0 -2px 6px rgba(0,0,0,.15),
    inset 0 1px 2px rgba(255,255,255,.4);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  border: 3px solid var(--bg);
}
.tab-fab-circle svg { width: 28px; height: 28px; }
.tab-fab:active .tab-fab-circle {
  transform: translateX(-50%) scale(0.92);
  box-shadow: 0 3px 12px rgba(124,58,237,.35), inset 0 -1px 3px rgba(0,0,0,.2);
}
.tab-fab-lbl {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  color: var(--gold); font-weight: 700;
  white-space: nowrap;
}
.tab-fab .tab-ico-w { display: none; }
.tab-fab::after { display: none !important; }  /* No active indicator on FAB */
.tab-fab.on .tab-fab-circle { transform: translateX(-50%) scale(1.05); }

/* Light mode FAB tweak */
:root[data-theme="light"] .tab-fab-circle {
  border-color: var(--bg);
  box-shadow:
    0 8px 22px rgba(139,92,246,.35),
    0 2px 6px rgba(0,0,0,.12),
    inset 0 -2px 4px rgba(0,0,0,.1),
    inset 0 1px 2px rgba(255,255,255,.7);
}

/* Cleanup interface scan : moins de bruit visuel */
.live-scan-wrap { margin-bottom: 12px; }
.live-scan-line {
  /* discret, ralenti */
  animation: liveScanSweep 3.5s ease-in-out infinite;
  opacity: .8;
}
.live-scan-hint {
  font-size: 12px;
  padding: 7px 12px;
  background: rgba(0,0,0,.6);
}
.scan-buttons {
  margin-top: 8px;
  gap: 8px;
}
.scan-btn {
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
:root[data-theme="light"] .scan-btn {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}
.scan-capture-btn {
  width:100% !important; padding:16px !important; font-size:16px !important;
  display:flex !important; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; box-shadow:0 6px 20px rgba(124,58,237,.35);
  transition:transform .12s ease;
}
.scan-capture-btn:active { transform:scale(0.97); }

/* ════════════════════════════════════════════════════════════
   ════ DASHBOARD REFONTE — Premium SaaS Polish ════
   Goal: cleaner hierarchy, more breathing room, premium feel.
   No HTML changes, only visual refinements.
   ════════════════════════════════════════════════════════════ */

/* Large title : plus aéré, typo plus claire */
#v-dash .lt-area { padding: 14px 20px 6px; }
#v-dash .lt { font-size: 30px; font-weight: 800; letter-spacing:-.5px; }
#v-dash .lt-sub { font-size: 12px; color: var(--t3); font-weight:500; }

/* Hero capital widget : moins de gradient agressif, glass subtle */
#v-dash .w.wide {
  background: linear-gradient(135deg, rgba(124,58,237,.04) 0%, var(--bg2) 70%) !important;
  border: 1px solid rgba(124,58,237,.10) !important;
  border-radius: 22px !important;
  padding: 18px 20px;
  min-height: 92px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.02) inset;
}
#v-dash .w.wide::before {
  content:''; position:absolute; top:0; left:20px; right:20px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.3), transparent);
}
#v-dash .w.wide .w-ico {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(124,58,237,.08)) !important;
  font-size: 22px; box-shadow: 0 2px 8px rgba(124,58,237,.07);
}
#v-dash .w.wide .w-data { flex:1; padding-left: 14px; }
#v-dash .w.wide .w-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--t3); font-weight: 600; margin-bottom: 4px;
}
#v-dash .w.wide .w-val {
  font-size: 28px !important; font-weight: 800 !important;
  letter-spacing: -.8px; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
#v-dash .w.wide .w-sub { font-size: 12px; color: var(--t3); margin-top: 4px; font-weight:500; }

/* Stats grid 2×2 : cleaner cards */
#v-dash .widgets-2 { gap: 10px; padding: 12px 16px; }
#v-dash .widgets-2 .w {
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 18px;
  padding: 16px;
  min-height: 100px;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s;
}
#v-dash .widgets-2 .w:hover { transform: translateY(-1px); border-color: rgba(124,58,237,.2); }
#v-dash .widgets-2 .w-ico {
  width: 32px; height: 32px; border-radius: 10px;
  font-size: 15px; margin-bottom: 12px;
}
#v-dash .widgets-2 .w-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  font-weight: 600; color: var(--t3); margin-bottom: 4px;
}
#v-dash .widgets-2 .w-val {
  font-size: 22px; font-weight: 800; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
#v-dash .widgets-2 .w-sub { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* Section headers : hiérarchie + spacing */
#v-dash .section-hd {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; font-weight: 700;
  color: var(--t3);
  padding: 24px 20px 10px;
  display:flex; align-items:center; gap:8px;
}
#v-dash .section-hd::before {
  content:''; width:3px; height:14px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent-fill), rgba(124,58,237,.4));
}

/* Group cards : uniformes, cleaner */
#v-dash .grp {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.05);
  background: var(--bg2);
  margin: 0 16px;
  overflow: hidden;
}

/* Niveau card : plus subtle */
#v-dash .lvl-card {
  margin: 12px 16px 0 !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(124,58,237,.06) 0%, var(--bg2) 60%) !important;
  border: 1px solid rgba(124,58,237,.15) !important;
}

/* Insight pill : centrée, premium */
#v-dash #d-insight {
  margin: 12px 16px 0;
}

/* Spacing entre sections : aéré */
#v-dash .sp8 { height: 4px; }

/* Récentes : cells plus aérées */
#v-dash #d-recent .cell {
  padding: 14px 18px;
  min-height: 56px;
}

/* Watermark plus discret */
#dash-wm {
  font-size: 10px !important;
  color: var(--t3) !important;
  text-align: center;
  padding: 32px 20px 12px;
  opacity: .55;
  letter-spacing: .3px;
}

/* Smooth scroll feel */
#v-dash { scroll-behavior: smooth; }

/* ──────────── Premium polish (autres views) ──────────── */
.section-hd { letter-spacing:.5px; }

/* Section headers : même style premium partout */
.view .section-hd {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; font-weight: 700;
  color: var(--t3);
  padding: 22px 20px 10px;
  display:flex; align-items:center; gap:8px;
}
.view .section-hd::before {
  content:''; width:3px; height:13px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent-fill), rgba(124,58,237,.4));
}

/* Group cards uniformes partout */
.view .grp {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.05);
  background: var(--bg2);
  margin: 0 16px;
  overflow: hidden;
}

/* Large titles uniformes */
.view .lt-area { padding: 14px 20px 6px; }
.view .lt { font-size: 30px; font-weight: 800; letter-spacing:-.5px; }
.view .lt-sub { font-size: 12px; color: var(--t3); font-weight:500; }

/* ──── Stock view : summary card + filters cleaner ──── */
#v-stock .summary-card {
  margin: 12px 16px 0;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(151, 71, 255, .05) 0%, var(--bg2) 70%);
  border: 1px solid rgba(151, 71, 255, .15);
}
#v-stock .summary-card .sk-hd { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--t3); font-weight:600; margin-bottom:10px; }
#v-stock .filter-chip {
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
}
#v-stock .filter-chip.on { box-shadow: 0 2px 8px rgba(124,58,237,.2); }

/* Stock items : aérés */
#v-stock #sk-list .cell { padding: 14px 16px; min-height: 64px; }

/* ──── Transactions view ──── */
#v-tx .grp .cell { padding: 12px 16px; min-height: 60px; }
#v-tx .srch-wrap {
  margin: 12px 16px;
  border-radius: 14px;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.05);
}
#v-tx .srch-inp {
  background: transparent;
  font-size: 14px;
  padding: 12px 16px;
}

/* ──── P&L view : indicateurs cleaner ──── */
#v-pl .grp { padding: 8px 0; }
#v-pl .cell { padding: 14px 18px; }

/* ──── Settings view : cells aérées ──── */
#v-set .cell { padding: 14px 18px; min-height: 56px; }
#v-set .cell-ico { width: 30px; height: 30px; border-radius: 9px; }
#v-set .cell-t { font-size: 15px; font-weight: 600; }

/* ──── Buttons CTA partout cohérents ──── */
.cta {
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
  padding: 12px 18px;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.cta:active { transform: scale(.97); }

/* ──── Sheets/Modals : padding plus aéré ──── */
.sheet-hd { padding: 16px 20px 12px; }
.sheet-ttl { font-size: 18px; font-weight: 800; letter-spacing:-.3px; }

/* Empty states : centrés et clean */
.empty-premium {
  padding: 32px 20px;
  text-align: center;
}
.empty-premium .ico { font-size: 38px; margin-bottom: 10px; opacity: .85; }
.empty-premium .tt { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.empty-premium .sub { font-size: 12px; color: var(--t3); line-height: 1.5; max-width:280px; margin: 0 auto 14px; }

/* iOS Safe area sur toutes vues */
@supports (padding: max(0px)) {
  .view { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* Smooth scroll partout */
.view { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* Subtle dividers entre sections (au lieu de sp8 vide) */
.view .sp8 + .section-hd::before { background: linear-gradient(180deg, var(--accent-fill), rgba(124,58,237,.2)); }

/* ════════════════════════════════════════════
 * THEMES POKEMON — Interface complete par theme
 * Default (pas de theme set) = look classique standard
 * Theme set = transformation totale (BG, fonts, borders, animations)
 * ════════════════════════════════════════════ */

/* Quand mode collec mais SANS theme : look classique zero override */
:root[data-mode="collector"]:not([data-pkmn-theme]) body::before,
:root[data-mode="collector"]:not([data-pkmn-theme]) body::after {
  display: none !important;
}
.pokedex-lens-real, .pokedex-leds-real, .pokedex-speaker,
.pokedex-dpad, .pokedex-btns, .pokedex-mini,
.pkmn-mascot, .pkmn-walker, .pkmn-section,
#pokedex-boot { display: none !important; }
.pkmn-section-wrap { display: contents !important; }

/* ════════════════════════════════════════════
 * CHARIZARD - Feu/Dragon orange-rouge
 * ════════════════════════════════════════════ */


@keyframes charizardEmberFloat {
  0% { transform: translateY(100vh); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-20vh); opacity: 0; }
}




/* ════════════════════════════════════════════
 * MEWTWO - Psy violet mystique
 * ════════════════════════════════════════════ */


@keyframes mewtwoPulse {
  0%, 100% { opacity: .4; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.1); }
}





/* ════════════════════════════════════════════
 * PIKACHU - Foudre jaune electrique
 * ════════════════════════════════════════════ */



@keyframes pikachuFlash {
  0%, 88%, 100% { opacity: 0; transform: scale(.5); }
  92% { opacity: 1; transform: scale(1.3); }
  96% { opacity: .6; transform: scale(1); }
}





/* ════════════════════════════════════════════
 * MEW - Rose doux dreamy
 * ════════════════════════════════════════════ */



@keyframes mewSparkle {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); opacity: .5; }
  50% { transform: translateY(-20px) scale(1.3) rotate(15deg); opacity: 1; }
}





/* ════════════════════════════════════════════
 * LUCARIO - Aura combat bleu acier
 * ════════════════════════════════════════════ */


@keyframes lucarioAuraGlow {
  0%, 100% { box-shadow: inset 0 0 80px rgba(56,189,248,.2); opacity: 1; }
  50% { box-shadow: inset 0 0 160px rgba(56,189,248,.4); opacity: .8; }
}






/* ════════════════════════════════════════════
 * RAYQUAZA - Dragon vert/jaune
 * ════════════════════════════════════════════ */


@keyframes rayquazaSwirl { to { transform: rotate(360deg); } }




/* ════════════════════════════════════════════
 * GENGAR - Spectre violet sombre
 * ════════════════════════════════════════════ */



@keyframes gengarShadow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -40px) scale(1.15); }
}





/* ════════════════════════════════════════════
 * SUICUNE - Eau pure cyan flowing
 * ════════════════════════════════════════════ */


@keyframes suicuneWave {
  0%, 100% { transform: translateX(-30px); }
  50% { transform: translateX(30px); }
}





/* ════════════════════════════════════════════
 * RESET FINAL — mode collec = look reseller
 * Themes override que les couleurs primaires (gold + acc2)
 * Aucun effet visuel particulier
 * ════════════════════════════════════════════ */

/* Desactive TOUS pseudo-elements decoratifs collec */
:root[data-mode="collector"] body::before,
:root[data-mode="collector"] body::after,
:root[data-mode="collector"][data-pkmn-theme] body::before,
:root[data-mode="collector"][data-pkmn-theme] body::after,
:root[data-mode="collector"] .navbar::before,
:root[data-mode="collector"] .navbar::after,
:root[data-mode="collector"] #v-dash .w.wide.w-hero::before,
:root[data-mode="collector"] #v-dash .w.wide.w-hero::after,
:root[data-mode="collector"] .w-hero::before,
:root[data-mode="collector"] .w-hero::after,
:root[data-mode="collector"] .w-hero .w-ico::before,
:root[data-mode="collector"] .w-hero .w-ico::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hero widget : neutralise theme rouge */
:root[data-mode="collector"] #v-dash .w.wide.w-hero,
:root[data-mode="collector"] .w-hero {
  background: linear-gradient(135deg, var(--gold-bg) 0%, var(--bg2) 100%) !important;
  border: .5px solid var(--gold-bd) !important;
  padding: 12px 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
:root[data-mode="collector"] .w-hero .w-ico {
  background: var(--gold-bg) !important;
  color: var(--gold) !important;
  box-shadow: none !important;
  font-size: 20px !important;
}
:root[data-mode="collector"] .w-val-hero {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  text-shadow: none !important;
}
@media (min-width: 600px) {
  :root[data-mode="collector"] .w-val-hero { font-size: 40px !important; }
}

/* Hardware Pokedex + mascots = OFF total */
.pokedex-lens-real, .pokedex-leds-real, .pokedex-speaker,
.pokedex-dpad, .pokedex-btns, .pokedex-mini,
.pkmn-mascot, .pkmn-walker, .pkmn-section,
#pokedex-boot {
  display: none !important;
}
.pkmn-section-wrap { display: contents !important; }

/* Body : EXACTEMENT comme reseller (purple/pink/cyan fixe) */
/* L ambiance du mode collectionneur prend la teinte de l accent au lieu
   d un violet figé — et reste assez discrète pour laisser voir la
   matière du fond. À 10 % elle recouvrait l anthracite et le nacré :
   la palette semblait n avoir jamais changé. */
/* L ambiance du mode collectionneur prend la teinte de l accent plutôt
   qu un violet figé, et reste assez discrète pour laisser voir la
   matière du fond. À 10 % d opacité elle recouvrait l anthracite comme
   le nacré : la palette semblait n avoir jamais changé. */
:root[data-mode="collector"] body,
:root[data-mode="collector"][data-pkmn-theme] body {
  background:
    radial-gradient(ellipse 70% 50% at 18% 0%,
      color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 85% 8%,
      color-mix(in srgb, var(--dv-2) 3.5%, transparent) 0%, transparent 60%),
    var(--bg) !important;
  background-attachment: fixed !important;
}

/* Reset toutes overrides collector vers look reseller */
:root[data-mode="collector"] .navbar {
  background: rgba(8,8,12,.8) !important;
  border-bottom: .5px solid var(--sep) !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
}
:root[data-mode="collector"] .navbar::after { display: none !important; }
:root[data-mode="collector"] .nav-title {
  color: var(--t1) !important;
  text-shadow: none !important;
  background: none !important;
}
:root[data-mode="collector"] .add-btn {
  background: var(--accent-fill) !important;
  color: var(--on-accent) !important;
  border: none !important;
  box-shadow: 0 0 16px var(--gold-bg) !important;
}

:root[data-mode="collector"] .tabbar {
  background: rgba(8,8,12,.8) !important;
  border-top: .5px solid var(--sep) !important;
  border-right: none !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
}
/* Desktop : sidebar gauche → bordure à droite, pas en haut */
@media (min-width: 1024px) {
  :root[data-mode="collector"] .tabbar {
    border-top: none !important;
    border-right: .5px solid var(--sep) !important;
  }
}

/* Mode collector : 3 widgets reseller cachés → la carte Stock seule prend toute la largeur */
:root[data-mode="collector"] .widgets-2 { grid-template-columns: 1fr !important; }

:root[data-mode="collector"] .lt {
  color: var(--t1) !important;
  text-shadow: none !important;
}
:root[data-mode="collector"] .lt-sub { color: var(--t3) !important; }

:root[data-mode="collector"] .section-hd {
  display: block !important;
  background: none !important;
  color: var(--t2) !important;
  padding: 0 !important;
  margin-left: 16px !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: none !important;
  border: none !important;
  font-size: 13px !important;
}

:root[data-mode="collector"] .grp {
  background: var(--bg2) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  backdrop-filter: none !important;
}

:root[data-mode="collector"] .cell {
  background: transparent;
  color: var(--t1);
  border-bottom: .5px solid var(--sep) !important;
}
:root[data-mode="collector"] .cell-t { color: var(--t1) !important; font-family: inherit; font-weight: inherit; }
:root[data-mode="collector"] .cell-s { color: var(--t3) !important; }
:root[data-mode="collector"] .cell-ico { border: none !important; box-shadow: none !important; }

:root[data-mode="collector"] .w {
  background: var(--bg2) !important;
  border: .5px solid var(--bg4) !important;
  color: var(--t1) !important;
  box-shadow: none !important;
}
:root[data-mode="collector"] .w-lbl { color: var(--t3) !important; text-transform: none; letter-spacing: 0; font-size: inherit; }
:root[data-mode="collector"] .w-val { text-shadow: none !important; font-family: inherit; }
:root[data-mode="collector"] .w-sub { color: var(--t3) !important; }
:root[data-mode="collector"] .w-ico { border: none !important; box-shadow: none !important; }

:root[data-mode="collector"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-mode="collector"] select,
:root[data-mode="collector"] textarea {
  background: var(--bg2) !important;
  color: var(--t1) !important;
  border: 1px solid var(--bg4) !important;
}
:root[data-mode="collector"] input:focus,
:root[data-mode="collector"] select:focus,
:root[data-mode="collector"] textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-bg) !important;
}

:root[data-mode="collector"] .btn-main,
:root[data-mode="collector"] .cta {
  background: var(--accent-fill) !important;
  color: var(--on-accent) !important;
  border: none !important;
  box-shadow: 0 0 0 1px var(--gold-bd), 0 4px 14px var(--gold-bg) !important;
  font-family: inherit;
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 14px !important;
}

:root[data-mode="collector"] .sh,
:root[data-mode="collector"] .s {
  background: var(--bg1) !important;
  border: none !important;
}
:root[data-mode="collector"] .s-hd {
  background: transparent !important;
  color: var(--t1) !important;
  text-shadow: none !important;
  border-bottom: .5px solid var(--sep) !important;
}
:root[data-mode="collector"] .s-cls {
  background: var(--bg3) !important;
  border: none !important;
  color: var(--t1) !important;
  box-shadow: none !important;
}

:root[data-mode="collector"] .toast {
  background: var(--bg3) !important;
  color: var(--t1) !important;
  border: .5px solid var(--gold-bd) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}

:root[data-mode="collector"] .progress-bar {
  background: var(--bg4) !important;
  border: none !important;
}
:root[data-mode="collector"] .progress-fill {
  background: var(--accent-fill) !important;
}

:root[data-mode="collector"] .seg-b,
:root[data-mode="collector"] .chip,
:root[data-mode="collector"] .cl-sets-chip {
  background: var(--bg2) !important;
  border: .5px solid var(--bg4) !important;
  color: var(--t2) !important;
  box-shadow: none !important;
  font-family: inherit;
}
:root[data-mode="collector"] .seg-b.on,
:root[data-mode="collector"] .chip.on,
:root[data-mode="collector"] .cl-sets-chip.active {
  background: var(--accent-fill) !important;
  color: var(--on-accent) !important;
  border: none !important;
  box-shadow: 0 0 14px var(--gold-bg) !important;
}

/* ═══ THÈMES POKÉMON DÉBLOCABLES ═══════════════════════════════════════
   Ces thèmes reteintent l'accent — c'est leur raison d'être. Ils règlent
   donc les tokens SOURCES (--accent, --accent-fill), jamais les alias :
   sinon le texte devenait orange pendant que les boutons restaient
   indigo. Les deux rôles gardent leurs contraintes de contraste :
   --accent est la version claire, posée sur le fond de page (≥ 10:1) ;
   --accent-fill est la version soutenue, sous un libellé blanc (≥ 4,9:1).
   Valeurs vérifiées au calcul, pas à l'œil. */
:root[data-mode="collector"]:not([data-pkmn-theme]) {
  --acc2: var(--dv-2);
  --acc2-bg: rgba(6,182,212,.08);
}
:root[data-mode="collector"][data-pkmn-theme] { --on-accent: #FFFFFF; }

:root[data-mode="collector"][data-pkmn-theme="pokedex"]   { --accent:#FCD34D; --accent-hover:#FDE68A; --accent-press:#FBBF24; --accent-fill:#B45309; --accent-fill-hover:#D97706; --accent-fill-press:#92400E; --accent-soft:rgba(252,211,77,.13); --accent-line:rgba(252,211,77,.34); --acc2:var(--dv-4); --acc2-bg:rgba(249,115,22,.10); }
:root[data-mode="collector"][data-pkmn-theme="charizard"] { --accent:#FDBA74; --accent-hover:#FED7AA; --accent-press:#FB923C; --accent-fill:#C2410C; --accent-fill-hover:#EA580C; --accent-fill-press:#9A3412; --accent-soft:rgba(253,186,116,.13); --accent-line:rgba(253,186,116,.34); --acc2:var(--danger); --acc2-bg:rgba(220,38,38,.12); }
:root[data-mode="collector"][data-pkmn-theme="mewtwo"]    { --accent:#DDD6FE; --accent-hover:#EDE9FE; --accent-press:#C4B5FD; --accent-fill:#7C3AED; --accent-fill-hover:#8B5CF6; --accent-fill-press:#6D28D9; --accent-soft:rgba(221,214,254,.13); --accent-line:rgba(221,214,254,.34); --acc2:var(--dv-1); --acc2-bg:rgba(109,40,217,.12); }
:root[data-mode="collector"][data-pkmn-theme="pikachu"]   { --accent:#FDE047; --accent-hover:#FEF08A; --accent-press:#FACC15; --accent-fill:#A16207; --accent-fill-hover:#CA8A04; --accent-fill-press:#854D0E; --accent-soft:rgba(253,224,71,.13); --accent-line:rgba(253,224,71,.38); --acc2:var(--danger); --acc2-bg:rgba(220,38,38,.12); }
:root[data-mode="collector"][data-pkmn-theme="mew"]       { --accent:#F9A8D4; --accent-hover:#FBCFE8; --accent-press:#F472B6; --accent-fill:#BE185D; --accent-fill-hover:#DB2777; --accent-fill-press:#9D174D; --accent-soft:rgba(249,168,212,.13); --accent-line:rgba(249,168,212,.34); --acc2:var(--dv-2); --acc2-bg:rgba(6,182,212,.08); }
:root[data-mode="collector"][data-pkmn-theme="lucario"]   { --accent:#7DD3FC; --accent-hover:#BAE6FD; --accent-press:#38BDF8; --accent-fill:#0369A1; --accent-fill-hover:#0284C7; --accent-fill-press:#075985; --accent-soft:rgba(125,211,252,.13); --accent-line:rgba(125,211,252,.34); --acc2:var(--info); --acc2-bg:rgba(30,64,175,.12); }
:root[data-mode="collector"][data-pkmn-theme="rayquaza"]  { --accent:#4ADE80; --accent-hover:#86EFAC; --accent-press:#22C55E; --accent-fill:#15803D; --accent-fill-hover:#16A34A; --accent-fill-press:#14532D; --accent-soft:rgba(74,222,128,.13); --accent-line:rgba(74,222,128,.34); --acc2:var(--warning); --acc2-bg:rgba(250,204,21,.12); }
:root[data-mode="collector"][data-pkmn-theme="gengar"]    { --accent:#C4B5FD; --accent-hover:#DDD6FE; --accent-press:#A78BFA; --accent-fill:#6D28D9; --accent-fill-hover:#7C3AED; --accent-fill-press:#5B21B6; --accent-soft:rgba(196,181,253,.13); --accent-line:rgba(196,181,253,.34); --acc2:var(--dv-1); --acc2-bg:rgba(76,29,149,.12); }
:root[data-mode="collector"][data-pkmn-theme="suicune"]   { --accent:#A5F3FC; --accent-hover:#CFFAFE; --accent-press:#67E8F9; --accent-fill:#0E7490; --accent-fill-hover:#0891B2; --accent-fill-press:#155E75; --accent-soft:rgba(165,243,252,.13); --accent-line:rgba(165,243,252,.34); --acc2:var(--dv-2); --acc2-bg:rgba(8,145,178,.12); }


/* ═══════════════════════════════════════════════
   FX LAYER — micro-interactions satisfaisantes
═══════════════════════════════════════════════ */

/* Ripple contenu (boutons) */
.fx-ripple {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,.12) 40%, transparent 70%);
  pointer-events: none; z-index: 10;
  animation: fxRipple .55s cubic-bezier(.2,.6,.35,1) forwards;
}
@keyframes fxRipple {
  from { transform: scale(0); opacity: 1; }
  to { transform: scale(1); opacity: 0; }
}

/* Pulse curseur global (anneau au point de clic) */
.fx-pulse {
  position: fixed; width: 36px; height: 36px;
  margin: -18px 0 0 -18px; border-radius: 50%;
  border: 2px solid var(--gold, var(--dv-1));
  pointer-events: none; z-index: 99999;
  animation: fxPulse .5s cubic-bezier(.2,.6,.35,1) forwards;
}
@keyframes fxPulse {
  from { transform: scale(.3); opacity: .8; }
  to { transform: scale(1.6); opacity: 0; }
}

/* Press spring (enfoncement + rebond) */
.fx-press { animation: fxPress .38s cubic-bezier(.34,1.56,.64,1); }
@keyframes fxPress {
  0% { transform: scale(1); }
  30% { transform: scale(.955); }
  70% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Particules confetti (succès) */
.fx-particle {
  position: fixed; pointer-events: none; z-index: 99999;
  width: var(--sz, 7px); height: var(--sz, 7px);
  background: var(--clr, var(--dv-1));
  border-radius: var(--br, 2px);
  animation: fxParticle var(--dur, .75s) cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes fxParticle {
  0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  65% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.4); opacity: 0; }
}

/* Tab pop (icône rebondit à la sélection) */
.tab.fx-tabpop { animation: fxTabPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes fxTabPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.22) rotate(-3deg); }
  65% { transform: scale(.94) rotate(2deg); }
  100% { transform: scale(1); }
}

/* Toggle knob pop */
.cl-master-set-toggle input:checked + .cl-master-slider::after {
  animation: fxKnobPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fxKnobPop {
  0% { transform: translateX(16px) scale(1); }
  40% { transform: translateX(16px) scale(1.25); }
  100% { transform: translateX(16px) scale(1); }
}

/* Cœur favori : battement */
.cl-card-fav.on, .cl-card-actions .cl-card-fav.on { animation: fxHeartBeat .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes fxHeartBeat {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  55% { transform: scale(.9); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-ripple, .fx-pulse, .fx-particle { display: none !important; }
  .fx-press, .tab.fx-tabpop { animation: none !important; }
}

/* ═══ SMART DASHBOARD ═══ */
.dz-latent {
  padding: 14px 16px; border-radius: 14px;
  background: var(--bg1); border: 1px solid rgba(16,224,144,.25);
}
.dz-latent.down { border-color: rgba(239,68,68,.25); }
.dz-latent-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dz-latent-lbl { font-size: 12px; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.dz-latent-val { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.dz-latent.up .dz-latent-val { color: var(--success); }
.dz-latent.down .dz-latent-val { color: var(--danger); }
.dz-latent-pct { font-size: 13px; font-weight: 700; }
.dz-latent.up .dz-latent-pct { color: var(--success); }
.dz-latent.down .dz-latent-pct { color: var(--danger); }
.dz-latent-sub { font-size: 11.5px; color: var(--t3); margin-top: 4px; }

.dz-action-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  border-left: 3px solid transparent;
  margin-bottom: 4px;
  transition: background .15s;
}
.dz-action-row:hover { background: var(--bg2); }
.dz-action-row.up { border-left-color: var(--success); background: rgba(16,224,144,.05); }
.dz-action-row.warn { border-left-color: var(--warning); background: rgba(250,204,21,.04); }
.dz-action-row.down { border-left-color: var(--danger); background: rgba(239,68,68,.05); }
.dz-action-row.flat { border-left-color: var(--bg3); }
.dz-action-ico { font-size: 18px; flex-shrink: 0; }
.dz-action-txt { flex: 1; font-size: 13px; line-height: 1.45; color: var(--t2); }
.dz-action-txt b { color: var(--t1); }

.cl-prog-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  cursor: pointer; transition: background .15s;
}
.cl-prog-row:hover { background: var(--bg2); }
.cl-prog-info { flex: 1; min-width: 0; }
.cl-prog-name { font-size: 14px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-prog-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.cl-prog-count { font-size: 12px; color: var(--t1); font-weight: 600; }
.cl-prog-pct { font-size: 12px; color: var(--gold); font-weight: 800; }

.cl-next-hd { font-size: 12.5px; color: var(--t2); padding: 12px 12px 8px; border-top: 1px solid var(--bg3); margin-top: 6px; }
.cl-next-row { display: flex; gap: 10px; padding: 0 12px 8px; overflow-x: auto; }
.cl-next-card {
  position: relative; width: 72px; flex-shrink: 0;
  aspect-ratio: .716; border-radius: 6px; overflow: hidden;
  cursor: pointer; background: var(--bg2);
  transition: transform .25s var(--ease-out, ease);
}
.cl-next-card:hover { transform: translateY(-4px) scale(1.06); }
.cl-next-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-next-price {
  position: absolute; bottom: 3px; right: 3px;
  font-size: 9px; font-weight: 800; color: #fff;
  background: rgba(0,0,0,.75); padding: 2px 5px; border-radius: 5px;
}

/* ═══════════════════════════════════════════════
   FEED LAYER — l'app défile comme un réseau social
═══════════════════════════════════════════════ */

/* Transition de vue (chaque changement d'onglet = arrivée fluide) */
.view.on { animation: viewIn .42s cubic-bezier(.22,1,.36,1); }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(16px) scale(.995); }
  to { opacity: 1; transform: none; }
}

/* Feed items : chaque bloc arrive au scroll (stagger géré en JS) */
.feed-item {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.feed-item.feed-in { opacity: 1; transform: none; }

/* Cartes du feed : élévation + lift au hover (desktop) */
@media (hover: hover) {
  .grp { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease; }
  .grp:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.12);
  }
}

/* La barre de navigation reste en place. Elle se dérobait au défilement
   pour gagner quelques pixels, mais le contenu conserve sa marge basse :
   à sa place apparaissait une bande vide de sa hauteur. */
.tabbar { transition: transform .32s cubic-bezier(.22,1,.36,1); }
.tabbar.tb-hide { transform: none; }

/* Rythme vertical Apple : respiration constante entre sections */
.pkmn-section-wrap { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .view.on { animation: none; }
  .feed-item { opacity: 1; transform: none; transition: none; }
  .tabbar { transition: none; }
}

/* ═══════════════════════════════════════════════
   FX LAYER v2 — vague d'animations supplémentaires
═══════════════════════════════════════════════ */

/* 1) Carte 3D : entrée en flip spectaculaire */
.card3d-modal.open .card3d-stage {
  animation: card3dFlipIn .65s cubic-bezier(.22,1,.36,1);
  transform-style: preserve-3d;
}
@keyframes card3dFlipIn {
  0% { opacity: 0; transform: rotateY(70deg) scale(.8) translateY(30px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* 2) FAB scan : anneau sonar périodique */
.tab-fab-circle { position: relative; }
.tab-fab-circle::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--gold, var(--dv-1));
  opacity: 0;
  animation: fabSonar 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes fabSonar {
  0%, 55% { transform: scale(.9); opacity: 0; }
  60% { opacity: .7; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* 3) Toast : pop spring vertical */
.toast.show { animation: toastPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes toastPop {
  0% { transform: translateX(-50%) translateY(24px) scale(.9); }
  60% { transform: translateX(-50%) translateY(-4px) scale(1.03); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

/* 4) Cells : glissement + chevron + icône vivante au hover */
@media (hover: hover) {
  .cell { transition: background .18s ease, transform .25s cubic-bezier(.22,1,.36,1); }
  .cell:hover { transform: translateX(4px); }
  .cell:hover .chev { transform: translateX(3px); transition: transform .25s cubic-bezier(.22,1,.36,1); }
  .cell:hover .cell-ico { animation: icoWiggle .5s cubic-bezier(.34,1.56,.64,1); }
}
@keyframes icoWiggle {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.15) rotate(-6deg); }
  70% { transform: scale(1.05) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* 5) Sheets : montée avec sur-oscillation légère */
.sheet { animation: up .44s cubic-bezier(.30,1.25,.44,1); }

/* 6) Plus-value latente : lueur qui respire */
.dz-latent.up .dz-latent-val { animation: latentGlow 3s ease-in-out infinite; }
@keyframes latentGlow {
  0%,100% { text-shadow: 0 0 0 rgba(16,224,144,0); }
  50% { text-shadow: 0 0 18px rgba(16,224,144,.45); }
}

/* 7) Sprites Pokémon des sections : rebond à l'arrivée du feed */
.pkmn-section-wrap.feed-in .pkmn-section { animation: spriteBounce .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes spriteBounce {
  0% { transform: translateY(8px) scale(.8); }
  55% { transform: translateY(-4px) scale(1.12); }
  100% { transform: none; }
}

/* 8) Empty states : icône qui flotte doucement */
.empty-ico { display: inline-block; animation: emptyFloat 3.4s ease-in-out infinite; }
@keyframes emptyFloat {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

/* 9) Images cartes : pop d'apparition */
.cl-set-explorer-card img, .cl-flux-img, .cl-next-card img {
  animation: imgPop .45s cubic-bezier(.22,1,.36,1);
}
@keyframes imgPop {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

/* 10) Barres de progression : remplissage animé (JS déclenche) */
.bar-animate { transition: width 1.1s cubic-bezier(.22,1,.36,1) !important; }

/* 11) Chart prix : la ligne se dessine (JS pilote dashoffset) */
.chart-draw { animation: chartDraw 1.15s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes chartDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .card3d-modal.open .card3d-stage, .tab-fab-circle::after, .toast.show,
  .pkmn-section-wrap.feed-in .pkmn-section, .empty-ico,
  .cl-set-explorer-card img, .cl-flux-img, .cl-next-card img,
  .dz-latent.up .dz-latent-val { animation: none !important; }
}

/* ═══ PULSE DU MATIN ═══ */
#pulse-chip {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  width: calc(100% - 32px); margin: 10px 16px 0;
  padding: 13px 16px;
  background: linear-gradient(135deg, rgba(250,204,21,.14), rgba(99,102,241,.10));
  border: 1px solid rgba(250,204,21,.35);
  border-radius: 14px;
  color: var(--t1); font-size: 13.5px; cursor: pointer;
  animation: pulseChipGlow 2.6s ease-in-out infinite;
}
@keyframes pulseChipGlow {
  0%,100% { box-shadow: 0 0 0 rgba(250,204,21,0); }
  50% { box-shadow: 0 0 22px rgba(250,204,21,.22); }
}
#pulse-overlay {
  position: fixed; inset: 0; z-index: 99997;
  background: rgba(4,6,14,.88);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: card3dFadeIn .3s ease-out;
}
.pulse-panel {
  position: relative; width: 100%; max-width: 400px;
  background: var(--bg2); border: 1px solid rgba(250,204,21,.25);
  border-radius: 22px; padding: 26px 24px 20px;
  animation: scaleIn .45s cubic-bezier(.34,1.4,.64,1);
  text-align: center;
}
.pulse-x {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--t3);
  font-size: 24px; cursor: pointer;
}
.pulse-date { font-size: 12px; color: var(--t3); text-transform: capitalize; }
.pulse-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 6px 0 18px; }
.pulse-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.04); border-radius: 12px;
}
.pulse-lbl { font-size: 12.5px; color: var(--t3); }
.pulse-val { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.pulse-val.up, .pulse-cod-detail .up { color: var(--success); }
.pulse-val.down, .pulse-cod-detail .down { color: var(--danger); }
.pulse-card-day {
  padding: 14px; margin-bottom: 10px;
  background: rgba(250,204,21,.06); border: 1px solid rgba(250,204,21,.2);
  border-radius: 12px;
}
.pulse-cod-name { font-weight: 700; font-size: 16px; margin-top: 4px; }
.pulse-cod-detail { font-size: 13px; color: var(--t2); margin-top: 4px; }
.pulse-foot { font-size: 11px; color: var(--t3); margin-top: 12px; }

/* ═══ REVEAL GRADUÉ AU SCAN ═══ */
#scan-reveal {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,14,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: card3dFadeIn .25s ease-out;
  cursor: pointer;
}
#scan-reveal.epic { background: rgba(0,0,2,.96); }
#scan-reveal.sr-out { opacity: 0; transition: opacity .3s ease; }
.sr-rays {
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(250,204,21,.14) 12deg, transparent 26deg,
    transparent 60deg, rgba(99,102,241,.12) 74deg, transparent 90deg,
    transparent 130deg, rgba(250,204,21,.14) 145deg, transparent 160deg,
    transparent 200deg, rgba(20,184,166,.10) 215deg, transparent 232deg,
    transparent 280deg, rgba(250,204,21,.13) 295deg, transparent 312deg);
  animation: srRaysSpin 14s linear infinite;
  pointer-events: none;
}
@keyframes srRaysSpin { to { transform: rotate(360deg); } }
.sr-stage { position: relative; text-align: center; perspective: 1400px; }
.sr-card {
  position: relative; width: min(62vw, 250px); aspect-ratio: .716;
  margin: 0 auto; transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.34,1.2,.64,1);
  animation: srCardIn .6s cubic-bezier(.22,1,.36,1);
}
@keyframes srCardIn { from { opacity: 0; transform: translateY(50px) scale(.85); } to { opacity: 1; } }
.sr-card.hidden-face { transform: rotateY(180deg); }
.sr-front, .sr-back {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.sr-front img { width: 100%; height: 100%; object-fit: cover; }
.sr-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 42%, rgba(99,102,241,.6), transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 50%, #191B2E 0deg 18deg, #22243C 18deg 36deg),
    #14162A;
  display: flex; align-items: center; justify-content: center;
}
.sr-back::after { content: '⚡'; font-size: 54px; filter: drop-shadow(0 0 18px rgba(250,204,21,.6)); }
.sr-info { margin-top: 22px; }
.sr-name { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: #fff; }
.sr-price {
  font-family: var(--font-display); font-size: 34px; font-weight: 900;
  background: linear-gradient(135deg, var(--warning), var(--warning));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-top: 4px;
}
.sr-hint { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 10px; animation: pulseDot 1.6s infinite; }

/* ═══ CÉRÉMONIE SET COMPLET ═══ */
#set-complete-ov {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2,3,10,.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  animation: card3dFadeIn .35s ease-out;
}
.sc-rays {
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(250,204,21,.18) 15deg, transparent 32deg,
    transparent 90deg, rgba(250,204,21,.15) 105deg, transparent 122deg,
    transparent 180deg, rgba(99,102,241,.14) 196deg, transparent 214deg,
    transparent 275deg, rgba(250,204,21,.16) 290deg, transparent 308deg);
  animation: srRaysSpin 18s linear infinite;
  pointer-events: none;
}
.sc-panel { position: relative; text-align: center; padding: 20px; }
.sc-ring { width: 150px; height: 150px; margin: 0 auto; display: block; }
.sc-ring-fill { animation: scRingClose 1.6s cubic-bezier(.4,0,.2,1) .3s forwards; }
@keyframes scRingClose { to { stroke-dashoffset: 0; } }
.sc-100 {
  font-family: var(--font-display); font-size: 30px; font-weight: 900;
  margin-top: -98px; margin-bottom: 62px; color: #fff;
  animation: wordIn .6s cubic-bezier(.22,1,.36,1) 1.5s backwards;
}
.sc-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 800;
  letter-spacing: .35em; color: var(--warning);
  animation: wordIn .6s cubic-bezier(.22,1,.36,1) 1.8s backwards;
}
.sc-set {
  font-family: var(--font-display); font-size: 32px; font-weight: 900; color: #fff;
  margin-top: 8px;
  animation: wordIn .6s cubic-bezier(.22,1,.36,1) 2s backwards;
}
.sc-detail { font-size: 14px; color: rgba(255,255,255,.55); margin-top: 8px; animation: wordIn .6s ease 2.2s backwards; }
.sc-close {
  margin-top: 26px; padding: 13px 34px;
  background: linear-gradient(135deg, var(--warning), var(--warning));
  border: none; border-radius: 13px;
  font-weight: 800; font-size: 14px; color: #1a1200; cursor: pointer;
  animation: wordIn .6s ease 2.5s backwards;
}
.sc-trophy { border-color: rgba(250,204,21,.4) !important; }

@media (prefers-reduced-motion: reduce) {
  .sr-rays, .sc-rays { animation: none; }
}

/* ═══ Fluctuations verrouillées (Business) ═══ */
.flux-locked .cl-flux-row {
  filter: blur(7px) saturate(.7);
  pointer-events: none; user-select: none;
}
.flux-lock-ov {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(8,8,14,.55) 40%);
  border-radius: inherit;
}
.flux-lock-ico { font-size: 26px; filter: drop-shadow(0 0 12px rgba(250,204,21,.5)); }
.flux-lock-txt { font-size: 12.5px; font-weight: 700; color: var(--t1); }
.flux-lock-btn { padding: 9px 16px; font-size: 12.5px; }

/* ═══ MES GRADATIONS — slabs premium ═══ */
.grad-panel {
  width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto;
  background: var(--bg2); border: 1px solid rgba(250,204,21,.25);
  border-radius: 20px; padding: 20px;
  animation: scaleIn .45s cubic-bezier(.34,1.4,.64,1);
}
.grad-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.grad-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; }
.grad-x { background: none; border: none; color: var(--t3); font-size: 24px; cursor: pointer; }
.grad-total {
  text-align: center; padding: 16px;
  background: linear-gradient(135deg, rgba(250,204,21,.08), rgba(99,102,241,.05));
  border: 1px solid rgba(250,204,21,.2); border-radius: 14px; margin-bottom: 14px;
}
.grad-total-lbl { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.grad-total-val {
  font-family: var(--font-display); font-size: 32px; font-weight: 900; margin-top: 4px;
  background: linear-gradient(135deg, var(--warning), var(--warning));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.grad-total-delta { font-size: 12px; font-weight: 700; margin-top: 4px; }
.grad-total-delta.up { color: var(--success); } .grad-total-delta.down { color: var(--danger); }
.grad-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.grad-slab {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(250,204,21,.04));
  border: 1px solid rgba(250,204,21,.22);
  animation: gradSlabIn .5s cubic-bezier(.22,1,.36,1) backwards;
}
.grad-list .grad-slab:nth-child(1){ animation-delay: .05s; }
.grad-list .grad-slab:nth-child(2){ animation-delay: .12s; }
.grad-list .grad-slab:nth-child(3){ animation-delay: .19s; }
.grad-list .grad-slab:nth-child(4){ animation-delay: .26s; }
@keyframes gradSlabIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.grad-slab-shine {
  position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: gradShine 5s ease-in-out infinite;
}
@keyframes gradShine { 0%, 65%, 100% { left: -80%; } 80% { left: 130%; } }
.grad-slab-img { width: 44px; height: 61px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.grad-slab-fb { display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--bg3); }
.grad-slab-info { flex: 1; min-width: 0; }
.grad-slab-name { font-size: 13.5px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grad-slab-meta { font-size: 11px; color: var(--t3); margin-top: 3px; }
.grad-slab-right { text-align: right; flex-shrink: 0; }
.grad-badge {
  display: inline-block; padding: 3px 9px; border-radius: 7px;
  background: linear-gradient(135deg, var(--warning), var(--warning));
  color: #1a1200; font-size: 11px; font-weight: 900; letter-spacing: .03em;
  animation: gradBadgePop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gradBadgePop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.grad-slab-val { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--warning); margin-top: 4px; }
.grad-declare-btn { width: 100%; padding: 13px; font-weight: 800; }
.grad-lbl { font-size: 12px; color: var(--t3); font-weight: 600; display: block; margin-bottom: 6px; }
.grad-sel {
  width: 100%; padding: 11px; background: var(--bg1); color: var(--t1);
  border: 1px solid var(--bg3); border-radius: 10px; font-size: 14px;
}
.grad-companies, .grad-notes { display: flex; gap: 8px; flex-wrap: wrap; }
.grad-chip {
  padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 800;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: var(--t2); cursor: pointer;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
}
.grad-chip.on {
  background: linear-gradient(135deg, rgba(250,204,21,.22), rgba(245,158,11,.12));
  border-color: var(--warning); color: var(--warning);
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(250,204,21,.2);
}
.grad-note { min-width: 54px; text-align: center; font-size: 16px; }

/* ═══ Chips scan + annonce ═══ */
.scan-type-chip {
  padding: 3px 9px; border-radius: 7px; font-size: 10.5px; font-weight: 700;
  background: rgba(99,102,241,.15); color: #A5B4FC; border: 1px solid rgba(99,102,241,.3);
}
.scan-conf-chip {
  padding: 3px 9px; border-radius: 7px; font-size: 10.5px; font-weight: 800;
  animation: gradBadgePop .45s cubic-bezier(.34,1.56,.64,1);
}
.scan-conf-chip.high { background: rgba(16,224,144,.14); color: var(--success); }
.scan-conf-chip.mid { background: rgba(250,204,21,.14); color: var(--warning); }
.scan-conf-chip.low { background: rgba(239,68,68,.14); color: var(--danger); }
.annonce-chip {
  position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%);
  z-index: 9990; padding: 12px 22px; border: none; border-radius: 30px;
  background: linear-gradient(135deg, var(--dv-1), var(--dv-5));
  color: #fff; font-weight: 800; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 12px 34px rgba(99,102,241,.45);
  animation: annonceChipIn .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes annonceChipIn { from { transform: translateX(-50%) translateY(60px); opacity: 0; } }
.annonce-chip.out { opacity: 0; transform: translateX(-50%) translateY(30px); transition: all .4s ease; }

/* ═══════════════════════════════════════════════════════
   THÈMES POKÉMON : AMBIANCE COMPLÈTE (fond, artwork, hero)
   ═══════════════════════════════════════════════════════ */
:root[data-pkmn-theme="charizard"]{ --th-g1: rgba(251,146,60,.17); --th-g2: rgba(220,38,38,.13); }
:root[data-pkmn-theme="mewtwo"]{ --th-g1: rgba(167,139,250,.17); --th-g2: rgba(109,40,217,.14); }
:root[data-pkmn-theme="pikachu"]{ --th-g1: rgba(250,204,21,.15); --th-g2: rgba(220,38,38,.09); }
:root[data-pkmn-theme="mew"]{ --th-g1: rgba(244,114,182,.16); --th-g2: rgba(34,211,238,.11); }
:root[data-pkmn-theme="lucario"]{ --th-g1: rgba(56,189,248,.16); --th-g2: rgba(30,64,175,.15); }
:root[data-pkmn-theme="rayquaza"]{ --th-g1: rgba(21,128,61,.20); --th-g2: rgba(250,204,21,.10); }
:root[data-pkmn-theme="gengar"]{ --th-g1: rgba(139,92,246,.18); --th-g2: rgba(76,29,149,.17); }
:root[data-pkmn-theme="suicune"]{ --th-g1: rgba(103,232,249,.15); --th-g2: rgba(8,145,178,.14); }

/* Fond ambiance aux couleurs du Pokémon */
:root[data-mode="collector"][data-pkmn-theme]:not([data-theme="light"]) body {
  background:
    radial-gradient(ellipse 75% 55% at 12% 0%, var(--th-g1) 0%, transparent 60%),
    radial-gradient(ellipse 65% 75% at 100% 100%, var(--th-g2) 0%, transparent 65%),
    radial-gradient(ellipse at top, #101016 0%, var(--bg) 72%) !important;
}
/* Artwork officiel en filigrane flottant (sombre uniquement — contraste) */
:root[data-mode="collector"][data-pkmn-theme]:not([data-theme="light"]) .content::after {
  content: '';
  position: absolute; right: -30px; bottom: -20px;
  width: min(55vw, 440px); aspect-ratio: 1;
  background: var(--pkmn-art, none) no-repeat center / contain;
  opacity: .08; pointer-events: none; z-index: 0;
  filter: saturate(1.3) drop-shadow(0 0 40px var(--th-g1));
  animation: pkmnArtFloat 9s ease-in-out infinite;
}
/* Thème clair : artwork plus discret mais présent */
:root[data-mode="collector"][data-pkmn-theme][data-theme="light"] .content::after {
  content: '';
  position: absolute; right: -30px; bottom: -20px;
  width: min(50vw, 400px); aspect-ratio: 1;
  background: var(--pkmn-art, none) no-repeat center / contain;
  opacity: .06; pointer-events: none; z-index: 0;
  animation: pkmnArtFloat 9s ease-in-out infinite;
}
@keyframes pkmnArtFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}
/* Hero + titres imprégnés du thème */
:root[data-mode="collector"][data-pkmn-theme] .w-hero {
  background: linear-gradient(135deg, var(--th-g1), var(--bg2) 68%) !important;
  border-color: var(--gold-bd) !important;
}
:root[data-mode="collector"][data-pkmn-theme]:not([data-theme="light"]) .lt { color: var(--gold) !important; }
:root[data-mode="collector"][data-pkmn-theme] .lvl-card {
  background: linear-gradient(135deg, var(--th-g1) 0%, var(--bg2) 60%) !important;
}
:root[data-mode="collector"][data-pkmn-theme] .tab-fab-circle {
  background: linear-gradient(135deg, var(--accent-fill) 0%, var(--accent-fill-press) 100%) !important;
}
:root[data-mode="collector"][data-pkmn-theme] .tab.on { box-shadow: inset 0 0 18px var(--th-g1); }

/* ═══════════════════════════════════════════════════════
   SOCIAL — fil, amis, échanges
   ═══════════════════════════════════════════════════════ */
.so-tabs { display: flex; gap: 8px; padding: 4px 16px 14px; }
.so-tab {
  flex: 1; padding: 10px 12px; border-radius: 12px;
  background: var(--bg2); border: .5px solid var(--bg4);
  color: var(--t2); font-family: var(--font-display); font-weight: 600; font-size: 13px;
  cursor: pointer; transition: all .18s; position: relative;
}
.so-tab.on { background: var(--gold-bg); border-color: var(--gold-bd); color: var(--gold); transform: scale(1.02); }
.so-tab:active { transform: scale(.96); }
.so-tab-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); margin-left: 5px; box-shadow: 0 0 8px rgba(251,69,112,.8);
  animation: soDotPulse 1.6s ease-in-out infinite;
}
@keyframes soDotPulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.35);} }

/* Fil */
.so-feed-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2); border: .5px solid var(--sep);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 8px;
  animation: soFeedIn .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes soFeedIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.so-feed-ico { font-size: 20px; flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--bg3); border-radius: 12px; }
.so-feed-body { flex: 1; min-width: 0; }
.so-feed-txt { font-size: 13px; color: var(--t1); line-height: 1.4; }
.so-feed-time { font-size: 11px; color: var(--t3); margin-top: 2px; }
.so-feed-img { width: 40px; border-radius: 6px; flex-shrink: 0; }

/* Amis */
.so-btn {
  padding: 8px 12px; border-radius: 10px; border: .5px solid var(--bg4);
  background: var(--bg3); color: var(--t1); font-size: 12px; font-weight: 600;
  font-family: var(--font-display); cursor: pointer; transition: all .15s; white-space: nowrap;
}
.so-btn:active { transform: scale(.94); }
.so-btn-ok { background: var(--gold-bg); border-color: var(--gold-bd); color: var(--gold); }
.so-btn-bad { background: rgba(251,69,112,.10); border-color: rgba(251,69,112,.35); color: var(--danger); }
.so-new-tag {
  font-size: 10px; font-weight: 700; color: var(--on-accent); background: var(--accent-fill);
  padding: 1px 6px; border-radius: 6px; vertical-align: middle; margin-left: 4px;
}
.so-privacy-note { font-size: 12px; color: var(--t3); padding: 14px 4px; line-height: 1.5; }

/* Doublons */
.so-dupes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.so-dupe-card { background: var(--bg2); border: .5px solid var(--sep); border-radius: 10px; padding: 6px; text-align: center; }
.so-dupe-card img { width: 100%; border-radius: 6px; }
.so-dupe-noimg { font-size: 30px; padding: 18px 0; }
.so-dupe-nom { font-size: 11px; font-weight: 600; color: var(--t1); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-dupe-meta { font-size: 10px; color: var(--gold); font-weight: 700; }

/* Builder échange */
.so-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.so-pool-card {
  position: relative; background: var(--bg2); border: 1.5px solid var(--sep);
  border-radius: 10px; padding: 5px; text-align: center; cursor: pointer;
  transition: all .18s cubic-bezier(.18,.89,.32,1.28);
}
.so-pool-card:active { transform: scale(.93); }
.so-pool-card.on { border-color: var(--gold); box-shadow: 0 0 14px var(--gold-bg); transform: scale(1.03); }
.so-pool-card img { width: 100%; border-radius: 6px; }
.so-pool-nom { font-size: 10px; font-weight: 600; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-pool-cote { font-size: 10px; color: var(--gold); font-weight: 700; }
.so-pool-check {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-fill); color: var(--on-accent); font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  animation: gradBadgePop .3s cubic-bezier(.18,.89,.32,1.28);
}
.so-balance-wrap { background: var(--bg2); border: .5px solid var(--sep); border-radius: 14px; padding: 14px; }
.so-balance-lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--t2); margin-bottom: 8px; }
.so-balance-bar { position: relative; height: 10px; border-radius: 5px; background: var(--bg4); overflow: hidden; }
.so-balance-fill { height: 100%; background: linear-gradient(90deg, var(--accent-fill), var(--acc2)); border-radius: 5px; transition: width .5s cubic-bezier(.2,.9,.2,1); }
.so-balance-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--t3); }
.so-balance-verdict { font-size: 12px; font-weight: 700; margin-top: 8px; text-align: center; }
.so-balance-verdict.fair { color: var(--success); }
.so-balance-verdict.unfair { color: var(--warning); }
.so-sec-banner {
  margin-top: 12px; padding: 12px; border-radius: 12px; font-size: 12px; line-height: 1.55;
  background: rgba(0,214,143,.06); border: .5px solid rgba(0,214,143,.25); color: var(--t2);
}

/* Détail échange */
.so-st-banner { padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 14px; background: var(--bg3); margin-bottom: 12px; text-align: center; }
.so-st-banner.gold { background: var(--gold-bg); color: var(--gold); }
.so-st-banner.ok { background: rgba(0,214,143,.12); color: var(--success); }
.so-st-banner.bad { background: rgba(251,69,112,.12); color: var(--danger); }
.so-st.gold { color: var(--gold); } .so-st.ok { color: var(--success); } .so-st.bad { color: var(--danger); } .so-st.mut { color: var(--t3); }
.so-tl { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.so-tl-step { font-size: 11px; font-weight: 600; color: var(--t3); padding: 5px 9px; border-radius: 8px; background: var(--bg2); }
.so-tl-step.on { color: var(--gold); background: var(--gold-bg); }
.so-tl-sep { flex: 0 0 10px; height: 1.5px; background: var(--bg4); }
.so-td-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.so-td-col { background: var(--bg2); border: .5px solid var(--sep); border-radius: 12px; padding: 10px; }
.so-td-colhd { font-size: 12px; color: var(--t2); margin-bottom: 8px; }
.so-td-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--t1); padding: 5px 0; border-bottom: .5px solid var(--sep2); }
.so-td-item:last-child { border-bottom: none; }
.so-td-item img { width: 26px; border-radius: 3px; }
.so-td-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-track-row { display: flex; gap: 8px; margin-bottom: 8px; }
.so-info-row { font-size: 13px; color: var(--t2); padding: 8px 4px; }
.so-rate-row { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--t2); flex-wrap: wrap; }
.so-star { background: var(--bg3); border: .5px solid var(--bg4); color: var(--gold); border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 12px; }
.so-star:active { transform: scale(.92); }

/* Sélecteur langue catalogue */
.cl-lang-chips { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; }
.cl-lang-chip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 20px;
  background: var(--bg2); border: .5px solid var(--bg4); color: var(--t2);
  font-size: 12px; font-weight: 600; font-family: var(--font-display); cursor: pointer; transition: all .18s;
}
.cl-lang-chip.on { background: var(--gold-bg); border-color: var(--gold-bd); color: var(--gold); transform: scale(1.04); }
.cl-lang-chip:active { transform: scale(.94); }

/* Desktop */
@media (min-width: 1024px) {
  .so-tabs { padding: 4px 32px 14px; max-width: 720px; }
  #so-body { padding: 0 32px 40px !important; max-width: 900px; }
  .so-dupes-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .cl-lang-chips { padding: 0 32px 10px; }
}

/* ═══════ RADAR GRADATION ═══════ */
.gr-card {
  background: linear-gradient(135deg, rgba(255,210,63,.07), var(--bg2) 65%);
  border: 1px solid var(--gold-bd); border-radius: 16px; padding: 14px;
  animation: grIn .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes grIn { from { opacity:0; transform: translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
.gr-hd { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.gr-hd-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.gr-hd-txt b { font-family: var(--font-display); font-size:14px; color: var(--gold); }
.gr-sub { font-size:11px; color: var(--t3); }
.gr-pulse {
  width:9px; height:9px; border-radius:50%; background: var(--accent-fill); flex-shrink:0;
  box-shadow: 0 0 0 0 var(--gold-bg); animation: grPulse 2s ease-out infinite;
}
@keyframes grPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,210,63,.55); }
  70% { box-shadow: 0 0 0 11px rgba(255,210,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,210,63,0); }
}
.gr-refresh {
  background:none; border:none; color: var(--t3); font-size:16px; cursor:pointer;
  padding:4px 6px; border-radius:8px; transition: transform .3s, color .2s;
}
.gr-refresh:hover { color: var(--gold); transform: rotate(180deg); }
.gr-list { display:flex; flex-direction:column; gap:6px; }
.gr-row {
  display:flex; align-items:center; gap:10px; padding:8px;
  background: var(--bg1); border-radius:11px; cursor:pointer;
  transition: transform .18s cubic-bezier(.18,.89,.32,1.28), background .18s;
}
.gr-row:hover { background: var(--bg3); transform: translateX(3px); }
.gr-row:active { transform: scale(.98); }
.gr-img { width:34px; height:47px; object-fit:cover; border-radius:5px; flex-shrink:0; }
.gr-img-ph { display:flex; align-items:center; justify-content:center; background: var(--bg3); font-size:17px; }
.gr-info { flex:1; min-width:0; }
.gr-nom { font-size:12.5px; font-weight:600; color: var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gr-meta { display:flex; align-items:center; gap:6px; margin-top:3px; }
.gr-badge {
  font-size:10px; font-weight:800; padding:2px 6px; border-radius:5px;
  background: var(--bg4); color: var(--t2);
}
.gr-badge-9  { background: rgba(6,182,212,.16); color:var(--dv-2); }
.gr-badge-10 {
  background: linear-gradient(135deg,var(--warning),#FF9500); color: var(--on-fill);
  box-shadow: 0 0 10px rgba(255,210,63,.45); animation: grBadge 2.4s ease-in-out infinite;
}
@keyframes grBadge { 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.18);} }
.gr-time { font-size:10px; color: var(--t3); }
.gr-prices { text-align:right; flex-shrink:0; }
.gr-price { font-size:14px; font-weight:800; color: var(--gold); font-family: var(--font-display); }
.gr-mult { font-size:10px; font-weight:700; color:var(--success); }
.gr-mult-low { color: var(--t3); font-weight:500; }
.gr-foot { font-size:10.5px; color: var(--t3); margin-top:10px; line-height:1.5; }

/* ═══════ FIL : sections + missions ═══════ */
.so-feed-sec {
  font-size:11px; font-weight:700; color: var(--t3); text-transform:uppercase;
  letter-spacing:.06em; padding:12px 4px 8px;
}
.so-feed-mission {
  background: linear-gradient(135deg, var(--gold-bg), var(--bg2) 70%);
  border-color: var(--gold-bd);
}
.so-mission-cta {
  margin-top:8px; padding:7px 13px; border-radius:9px; border:none; cursor:pointer;
  background: var(--accent-fill); color: var(--on-accent); font-family: var(--font-display);
  font-size:12px; font-weight:700; transition: transform .15s;
}
.so-mission-cta:active { transform: scale(.95); }
.so-code { letter-spacing:.08em; color: var(--gold); }

/* ═══════ ACCUEIL PERSONNALISÉ — scène animée ═══════ */
.hello-ov {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,12,.94);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  opacity: 0; transition: opacity .5s ease; cursor: pointer;
  perspective: 1000px; overflow: hidden;
}
/* Sans cela le calque plein écran continue d avaler les taps pendant les
   650 ms qui séparent le fondu de sortie du retrait du nœud : le premier
   appui sur un onglet ne faisait rien. */
.hello-ov { pointer-events: none; }
.hello-ov.on { opacity: 1; pointer-events: auto; }
.hello-ov.out { opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform .6s ease; }
.hello-bg { position: absolute; inset: 0; pointer-events: none; }

/* Grille en perspective — profondeur 3D */
.hello-grid {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 65%;
  background-image: linear-gradient(rgba(124,58,237,.20) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(124,58,237,.20) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: rotateX(74deg);
  mask-image: linear-gradient(to top, #000 5%, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 70%);
  animation: helloGrid 7s linear infinite; pointer-events: none;
}
@keyframes helloGrid { from { background-position: 0 0; } to { background-position: 0 46px; } }

/* Balayage lumineux type scan */
.hello-scan {
  position: absolute; left: 0; right: 0; height: 130px;
  background: linear-gradient(180deg, transparent, rgba(6,182,212,.10), transparent);
  animation: helloScan 2.8s cubic-bezier(.5,0,.5,1) infinite; pointer-events: none;
}
@keyframes helloScan { 0% { top:-15%; opacity:0; } 15%,85% { opacity:1; } 100% { top:105%; opacity:0; } }

/* Particules ascendantes */
.hello-particles { position: absolute; inset: 0; pointer-events: none; }
.hello-particles i {
  position: absolute; bottom: -6px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent-fill); opacity: 0;
  animation-name: helloPart; animation-iteration-count: infinite; animation-timing-function: ease-out;
}
@keyframes helloPart {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  15%  { opacity: .85; }
  100% { transform: translateY(-62vh) scale(1.1); opacity: 0; }
}

.hello-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hello-rings span {
  position: absolute; border-radius: 50%; border: 1px solid var(--gold-bd);
  width: 190px; height: 190px; opacity: 0;
  animation: helloRing 2.8s cubic-bezier(.2,.8,.3,1) infinite;
}
.hello-rings span:nth-child(2) { animation-delay: .55s; }
.hello-rings span:nth-child(3) { animation-delay: 1.1s; }
@keyframes helloRing { 0% { transform: scale(.45); opacity:.6; } 100% { transform: scale(2.7); opacity:0; } }

.hello-core {
  position: relative; text-align: center; padding: 0 32px; max-width: 560px;
  transform-style: preserve-3d;
  animation: helloCore 1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes helloCore {
  from { transform: translateZ(-140px) rotateX(12deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.hello-ico {
  font-size: 56px; margin-bottom: 14px; display: inline-block;
  filter: drop-shadow(0 8px 26px rgba(255,210,63,.35));
  animation: helloIco 1.1s cubic-bezier(.18,.89,.32,1.28) both, helloFloat 3.4s ease-in-out 1.1s infinite;
}
@keyframes helloIco { from { opacity:0; transform: scale(.3) rotate(-25deg); } to { opacity:1; transform: none; } }
@keyframes helloFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.hello-salut {
  font-family: var(--font-display); font-size: 32px; font-weight: 800;
  color: var(--t1); letter-spacing: -.025em; line-height: 1.15;
}
/* Apparition lettre par lettre */
.hello-salut .hl {
  display: inline-block; opacity: 0;
  animation: helloLetter .55s cubic-bezier(.18,.89,.32,1.28) both;
}
.hello-salut .hl-sp { display: inline-block; width: .3em; }
@keyframes helloLetter {
  from { opacity: 0; transform: translateY(16px) rotateX(-70deg); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hello-sub {
  font-size: 17px; color: var(--gold); font-weight: 600; margin-top: 6px;
  animation: helloUp .8s cubic-bezier(.16,1,.3,1) .75s both;
}
.hello-line {
  font-size: 13.5px; color: var(--t2); margin-top: 15px; line-height: 1.5;
  animation: helloUp .8s cubic-bezier(.16,1,.3,1) .95s both;
}
@keyframes helloUp { from { opacity:0; transform: translateY(15px); } to { opacity:1; transform:none; } }
.hello-bar { margin: 24px auto 0; width: 140px; height: 2px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
.hello-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent-fill), var(--acc2));
  transform-origin: left; animation: helloBar 3.6s linear .3s both;
}
@keyframes helloBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hello-rings, .hello-particles, .hello-scan, .hello-grid,
  .gr-pulse, .gr-badge-10 { animation: none !important; }
  .hello-ico, .hello-salut .hl, .hello-sub, .hello-line, .hello-core {
    animation-duration: .01s !important; animation-delay: 0s !important;
  }
}
@media (min-width: 1024px) {
  #d-graderadar { margin-left: 32px !important; margin-right: 32px !important; }
  .hello-salut { font-size: 40px; }
}

/* ═══════ INTERRUPTEUR DE MODE ═══════ */
.mode-sw { padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; }
.mode-sw-track {
  position: relative; display: inline-flex; align-items: center;
  background: var(--bg3); border: .5px solid var(--bg4);
  border-radius: 999px; padding: 3px; gap: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28);
}
.mode-sw-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2));
  box-shadow: 0 2px 10px rgba(124,58,237,.42);
  transition: transform .42s cubic-bezier(.34,1.4,.5,1);
  transform: translateX(100%);      /* business par défaut */
}
.mode-sw.is-col .mode-sw-thumb { transform: translateX(0); }
.mode-sw-opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; font-family: var(--font-display);
  color: var(--t3); transition: color .3s; line-height: 1;
}
.mode-sw-opt em { font-style: normal; }
.mode-sw.is-col  .mode-sw-opt[data-m="collector"],
.mode-sw:not(.is-col) .mode-sw-opt[data-m="reseller"] { color: var(--on-accent); }
.mode-sw:active .mode-sw-track { transform: scale(.96); transition: transform .12s; }

/* ═══════ SECTIONS REPLIABLES ═══════ */
.collapse-sec { position: relative; }
.collapse-hd { position: relative; display: flex; align-items: center; }
.collapse-btn {
  margin-left: auto; margin-right: 16px; flex-shrink: 0;
  background: var(--bg3); border: .5px solid var(--bg4); color: var(--t2);
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.34,1.4,.5,1), background .2s, color .2s;
}
.collapse-btn:hover { background: var(--gold-bg); color: var(--gold); }
.collapse-btn:active { transform: scale(.88); }
.collapse-sec.is-closed .collapse-btn { transform: rotate(-90deg); }
.collapse-sec.is-closed .collapse-btn:active { transform: rotate(-90deg) scale(.88); }
.collapse-body {
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.collapse-sec.is-closed .collapse-body { opacity: 0; }

/* ═══════ PROFONDEUR & MOTION GÉNÉRALE ═══════ */
@media (hover: hover) {
  .w, .grp .cell, .col-stat {
    transition: transform .28s cubic-bezier(.18,.89,.32,1.28), box-shadow .28s, border-color .28s;
  }
  .w:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.34);
    border-color: var(--gold-bd);
  }
  .col-stat:hover { transform: translateY(-3px) scale(1.015); }
}
.w:active, .col-stat:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .mode-sw-thumb, .collapse-btn, .collapse-body, .w, .col-stat { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════
   CONNEXION — scène en profondeur, typographie en volume
   ═══════════════════════════════════════════════════════ */
.av-overlay { perspective: 1200px; }
.av-overlay.on .av-scene { opacity: 1; }
.av-scene {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .8s ease;
}
.av-grid {
  position: absolute; left: -60%; right: -60%; bottom: -22%; height: 78%;
  background-image: linear-gradient(rgba(124,58,237,.16) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(124,58,237,.16) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: rotateX(76deg);
  mask-image: linear-gradient(to top, #000 2%, transparent 62%);
  -webkit-mask-image: linear-gradient(to top, #000 2%, transparent 62%);
  animation: avGrid 9s linear infinite;
}
@keyframes avGrid { from { background-position: 0 0; } to { background-position: 0 54px; } }
.av-glow {
  position: absolute; left: 50%; top: 34%; width: 640px; height: 640px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(124,58,237,.20), transparent 62%);
  animation: avGlow 7s ease-in-out infinite;
}
@keyframes avGlow { 0%,100% { opacity:.65; transform: translate(-50%,-50%) scale(1); } 50% { opacity:1; transform: translate(-50%,-50%) scale(1.13); } }
/* Trois cartes qui flottent en arrière-plan */
.av-cards { position: absolute; inset: 0; transform-style: preserve-3d; }
.av-cards i {
  position: absolute; width: 92px; height: 128px; border-radius: 9px;
  background: linear-gradient(150deg, rgba(124,58,237,.22), rgba(6,182,212,.10));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 20px 46px rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.av-cards i:nth-child(1){ left:11%; top:20%; animation: avFloat1 11s ease-in-out infinite; }
.av-cards i:nth-child(2){ right:9%;  top:29%; animation: avFloat2 13s ease-in-out infinite; }
.av-cards i:nth-child(3){ left:19%;  bottom:13%; animation: avFloat3 15s ease-in-out infinite; }
@keyframes avFloat1 { 0%,100%{ transform: rotateY(19deg) rotateZ(-8deg) translateY(0);} 50%{ transform: rotateY(30deg) rotateZ(-4deg) translateY(-26px);} }
@keyframes avFloat2 { 0%,100%{ transform: rotateY(-22deg) rotateZ(9deg) translateY(0);} 50%{ transform: rotateY(-32deg) rotateZ(5deg) translateY(-32px);} }
@keyframes avFloat3 { 0%,100%{ transform: rotateY(13deg) rotateZ(6deg) translateY(0);} 50%{ transform: rotateY(24deg) rotateZ(2deg) translateY(-20px);} }

.av-modal {
  position: relative; z-index: 2;
  background: linear-gradient(168deg, rgba(26,32,50,.96), rgba(11,15,26,.98));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 34px 90px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.07);
  animation: avIn .85s cubic-bezier(.16,1,.3,1) both;
}
@keyframes avIn {
  from { opacity:0; transform: translateY(30px) rotateX(9deg) scale(.95); }
  to   { opacity:1; transform: none; }
}
.av-head { text-align: center; padding: 32px 24px 20px; }
.av-mark {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 19px;
  background: linear-gradient(140deg, var(--accent-fill), var(--acc2));
  display: flex; align-items: center; justify-content: center; font-size: 29px;
  box-shadow: 0 14px 34px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.35);
  animation: avMark 5s ease-in-out infinite;
}
@keyframes avMark {
  0%,100% { transform: translateY(0) rotateZ(0); }
  50%     { transform: translateY(-7px) rotateZ(-4deg); }
}
.av-mark-i { display: block; animation: avSpark 3.4s ease-in-out infinite; }
@keyframes avSpark { 0%,100%{ filter: brightness(1);} 50%{ filter: brightness(1.5) drop-shadow(0 0 9px rgba(255,255,255,.65)); } }

/* Titre en volume : couches empilées en profondeur réelle */
.av-ttl {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-size: 40px; font-weight: 800;
  letter-spacing: -.035em; line-height: 1; margin: 0;
  color: transparent;
  background: linear-gradient(180deg, #fff 28%, #9d8bff 78%);
  -webkit-background-clip: text; background-clip: text;
  transform-style: preserve-3d;
  animation: avTtl 6.5s ease-in-out infinite;
}
.av-ttl::before {
  content: attr(data-txt);
  position: absolute; inset: 0; z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(124,58,237,.55);
  transform: translateZ(-14px) translateY(3px);
}
.av-ttl::after {
  content: attr(data-txt);
  position: absolute; inset: 0; z-index: -2;
  color: rgba(6,182,212,.20);
  filter: blur(7px);
  transform: translateZ(-30px) translateY(7px);
}
@keyframes avTtl {
  0%,100% { transform: rotateX(9deg) rotateY(-7deg); }
  50%     { transform: rotateX(4deg) rotateY(8deg); }
}
.av-sub { font-size: 13.5px; color: var(--t3); margin-top: 12px; letter-spacing: .01em; }

/* Champs : sobriété, une seule accentuation à la fois */
.av-modal .auth-field { margin-bottom: 13px; }
.av-modal .auth-inp {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px; padding: 14px 15px; font-size: 15px;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.av-modal .auth-inp:focus {
  border-color: var(--gold); background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px var(--gold-bg); outline: none;
}
.av-modal .auth-lbl { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); }
.av-modal .seg { background: rgba(255,255,255,.045); border-radius: 13px; padding: 4px; }
.av-modal .auth-submit {
  margin-top: 6px; padding: 15px; border-radius: 13px; font-size: 15px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(124,58,237,.34);
  transition: transform .18s cubic-bezier(.18,.89,.32,1.28), box-shadow .22s;
}
.av-modal .auth-submit:hover { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(124,58,237,.44); }
.av-modal .auth-submit:active { transform: translateY(0) scale(.98); }

.av-foot { text-align: center; margin-top: 18px; }
.av-skip {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--t2); font-size: 13.5px; padding: 8px 14px; border-radius: 9px;
  transition: color .2s, background .2s;
}
.av-skip span { color: var(--t3); }
.av-skip:hover { color: var(--t1); background: rgba(255,255,255,.05); }
.av-note { font-size: 11px; color: var(--t3); margin-top: 10px; }

@media (max-width: 420px) {
  .av-ttl { font-size: 33px; }
  .av-cards i { width: 66px; height: 92px; }
  .av-head { padding: 26px 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .av-grid, .av-glow, .av-cards i, .av-mark, .av-mark-i, .av-ttl { animation: none !important; }
  .av-modal { animation-duration: .01s !important; }
}

/* ═══════ PRODUITS SCELLÉS ═══════ */
.sl-dash {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  background: linear-gradient(135deg, rgba(103,232,249,.08), var(--bg2) 62%);
  border: 1px solid rgba(103,232,249,.26); border-radius: 16px; padding: 14px;
  transition: transform .26s cubic-bezier(.18,.89,.32,1.28), box-shadow .26s;
}
.sl-dash:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.34); }
.sl-dash:active { transform: scale(.985); }
.sl-dash-ico {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; font-size: 21px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(103,232,249,.13);
}
.sl-dash-body { flex: 1; min-width: 0; }
.sl-dash-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); font-weight: 600; }
.sl-dash-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 23px; font-weight: 700; color: var(--dv-2); line-height: 1.15; }
.sl-dash-sub { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.sl-dash-day {
  text-align: right; flex-shrink: 0; font-size: 14px; font-weight: 800;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.sl-dash-day.up { color: var(--success); } .sl-dash-day.dn { color: var(--danger); }
.sl-dash-day span { display: block; font-size: 9.5px; font-weight: 500; color: var(--t3); font-family: var(--font-body); }

.sl-hero {
  background: linear-gradient(140deg, rgba(103,232,249,.10), var(--bg2) 66%);
  border: 1px solid rgba(103,232,249,.24); border-radius: 16px; padding: 16px;
}
.sl-hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sl-hero-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); font-weight: 600; }
.sl-hero-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 800; color: var(--dv-2); line-height: 1.15; }
.sl-hero-pv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 800; line-height: 1.2; }
.sl-hero-pv.up { color: var(--success); } .sl-hero-pv.dn { color: var(--danger); }
.sl-hero-pv span { font-size: 12px; opacity: .8; }
.sl-hero-foot { font-size: 11.5px; color: var(--t3); margin-top: 10px; }

.sl-list { display: flex; flex-direction: column; gap: 7px; }
.sl-row {
  display: flex; align-items: center; gap: 11px; padding: 11px;
  background: var(--bg2); border: .5px solid var(--sep); border-radius: 12px;
  transition: transform .2s, border-color .2s;
}
.sl-row:hover { transform: translateX(3px); border-color: rgba(103,232,249,.32); }
.sl-ico { font-size: 20px; width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg3); border-radius: 10px; }
.sl-info { flex: 1; min-width: 0; }
.sl-nom { font-size: 13px; font-weight: 600; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-meta { font-size: 11px; color: var(--t3); margin-top: 2px; }
.sl-val { text-align: right; flex-shrink: 0; }
.sl-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 700; color: var(--t1); }
.sl-pv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; }
.sl-pv.up { color: var(--success); } .sl-pv.dn { color: var(--danger); }
.sl-note { font-size: 11px; color: var(--t3); margin-top: 14px; line-height: 1.55; }

@media (min-width: 1024px) {
  #d-sealed { margin-left: 32px !important; margin-right: 32px !important; }
}

/* ═══════ VALEUR PAR GRADATION ═══════ */
.gv-wrap { padding: 0 16px; margin-top: 12px; }
.gv-card {
  background: linear-gradient(140deg, rgba(255,210,63,.07), var(--bg2) 66%);
  border: 1px solid var(--gold-bd); border-radius: 16px; padding: 14px;
  animation: gvIn .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gvIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.gv-hd { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 11px; }

.gv-seg {
  display: flex; gap: 3px; background: var(--bg1); border-radius: 11px; padding: 3px; margin-bottom: 8px;
}
.gv-seg-b {
  flex: 1; padding: 8px 4px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--t3);
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  transition: background .25s, color .25s, transform .2s cubic-bezier(.18,.89,.32,1.28);
}
.gv-seg-b.on { background: linear-gradient(135deg, var(--accent-fill), var(--acc2)); color: var(--on-accent); box-shadow: 0 3px 12px rgba(124,58,237,.34); }
.gv-seg-b:active { transform: scale(.94); }

.gv-notes { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 2px; }
.gv-note {
  flex: 1 0 auto; min-width: 54px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  background: var(--bg3); border: 1.5px solid transparent; color: var(--t2);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700;
  transition: all .22s cubic-bezier(.18,.89,.32,1.28);
}
.gv-note.on { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); transform: scale(1.05); }
.gv-note:active { transform: scale(.93); }

.gv-result { display: flex; align-items: center; gap: 12px; }
.gv-grade-badge {
  flex-shrink: 0; padding: 8px 12px; border-radius: 10px;
  background: var(--bg4); color: var(--t1);
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
}
.gv-grade-badge.is10 {
  background: linear-gradient(135deg, var(--warning), #FF9500); color: var(--on-fill);
  box-shadow: 0 0 14px rgba(255,210,63,.45);
}
.gv-price-box { flex: 1; min-width: 0; text-align: right; }
.gv-price {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 800; color: var(--gold); line-height: 1.1;
  animation: gvPop .35s cubic-bezier(.18,.89,.32,1.28) both;
}
@keyframes gvPop { from { opacity:0; transform: scale(.86); } to { opacity:1; transform: none; } }
.gv-mult { font-size: 11.5px; font-weight: 700; color: var(--success); margin-top: 2px; }
.gv-mult.gv-mut { color: var(--t3); font-weight: 500; }
.gv-loading, .gv-empty { font-size: 12.5px; color: var(--t3); }
.gv-src { font-size: 10.5px; color: var(--t3); margin-top: 10px; line-height: 1.5; }
.gv-fetch {
  width: 100%; margin-top: 11px; padding: 11px; border-radius: 11px; cursor: pointer;
  background: var(--gold-bg); border: 1px solid var(--gold-bd); color: var(--gold);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  transition: transform .18s, background .2s;
}
.gv-fetch:hover:not(:disabled) { background: rgba(255,210,63,.18); }
.gv-fetch:active:not(:disabled) { transform: scale(.97); }
.gv-fetch:disabled { opacity: .6; cursor: default; }

@media (min-width: 1024px) { .gv-wrap { max-width: 560px; margin-left: auto; margin-right: auto; } }

/* ─── Même carte, autres langues (comparateur de cotes) ─── */
.clang-wrap { padding: 0 16px; margin-top: 14px; }
@media (min-width: 1024px) { .clang-wrap { max-width: 560px; margin-left: auto; margin-right: auto; } }
.clang-hd {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: rgba(255,255,255,.8);
  margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.clang-hd-sub { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.42); }
.clang-load, .clang-vide {
  font-size: 11.5px; color: rgba(255,255,255,.45);
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
}
/* Bande défilante : autant de langues que disponibles, sans casser la fiche */
.clang-row {
  display: flex; gap: 8px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.clang-row::-webkit-scrollbar { height: 4px; }
.clang-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.clang-chip {
  flex: 0 0 auto; min-width: 108px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  border-radius: 11px;
  transition: border-color .18s, background .18s, transform .18s;
}
.clang-chip:hover { border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.clang-chip.eco {
  border-color: rgba(16,224,144,.45);
  background: rgba(16,224,144,.09);
}
.clang-chip-lang {
  font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
}
.clang-chip-prix {
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 700; color: #fff;
  margin: 3px 0 1px;
}
.clang-chip.eco .clang-chip-prix { color: var(--success); }
.clang-chip-set {
  font-size: 9.5px; color: rgba(255,255,255,.38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
}
.clang-chip-tag {
  margin-top: 4px; font-size: 8.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--success);
}
.clang-note {
  margin-top: 8px; font-size: 10px; line-height: 1.45;
  color: rgba(255,255,255,.36);
}
@media (prefers-reduced-motion: reduce) { .gv-card, .gv-price { animation: none !important; } }

/* ═══════ TRADUCTIONS JP / CN / KR ═══════ */
.pk-tr {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px;
  animation: pkTrIn .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pkTrIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:none; } }
.pk-tr-i {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg3); border: .5px solid var(--sep);
  border-radius: 7px; padding: 3px 8px;
  font-size: 12px; color: var(--t2); line-height: 1.4;
}
.pk-tr-i b {
  font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--gold); opacity: .85;
}

/* ═══════ RECHERCHE RAPIDE (loupe navbar) ═══════ */
.qs-ov {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(4,6,12,.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.qs-ov.on { opacity: 1; pointer-events: auto; }
.qs-box {
  width: 100%; max-width: 580px;
  background: var(--bg2); border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: translateY(-12px) scale(.98); transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.qs-ov.on .qs-box { transform: none; }
.qs-inp-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: .5px solid var(--sep); }
.qs-inp-ico { width: 19px; height: 19px; color: var(--t3); flex-shrink: 0; }
.qs-inp-wrap input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--t1); font-size: 15.5px; font-family: inherit;
}
.qs-inp-wrap input::placeholder { color: var(--t3); }
.qs-esc {
  flex-shrink: 0; background: var(--bg3); border: .5px solid var(--bg4); color: var(--t3);
  font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-family: inherit;
}
.qs-results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.qs-hint { padding: 22px 16px; text-align: center; color: var(--t3); font-size: 13px; line-height: 1.5; }
.qs-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 11px; cursor: pointer; transition: background .15s;
}
.qs-row:hover, .qs-row.sel { background: var(--gold-bg); }
.qs-row img { width: 34px; height: 47px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.qs-noimg { width: 34px; height: 47px; border-radius: 5px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.qs-info { flex: 1; min-width: 0; }
.qs-nom { font-size: 13.5px; font-weight: 600; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-meta { font-size: 11.5px; color: var(--t3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════ PUBLICATION D'ANNONCE ═══════ */
.an-publish {
  width: 100%; margin-top: 8px; padding: 12px; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-fill), var(--acc2)); border: none; color: var(--on-accent);
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  box-shadow: 0 8px 22px rgba(124,58,237,.32);
  transition: transform .18s cubic-bezier(.18,.89,.32,1.28), box-shadow .2s;
}
.an-publish:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(124,58,237,.42); }
.an-publish:active { transform: translateY(0) scale(.98); }
.an-publish-note {
  display: none; margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg1); border: .5px solid var(--sep);
  font-size: 11.5px; color: var(--t3); line-height: 1.55;
}
@media (max-width: 420px) { .qs-ov { padding-top: 8vh; } .qs-results { max-height: 62vh; } }
@media (prefers-reduced-motion: reduce) { .qs-box, .an-publish { transition: none !important; } }

/* ═══════════════════════════════════════════════════════
   STARTER ET PARTENAIRE
   Le starter donne son thème à l'interface et évolue avec les badges.
   ═══════════════════════════════════════════════════════ */

/* ─── Sélecteur ─── */
/* Fond opaque d'emblée, sans transition d'opacité : une transition peut se
   figer à mi-course si la classe est reposée pendant son déroulement, et on
   se retrouve avec un voile à 37 % qui laisse lire l'interface au travers.
   Seule la carte s'anime, via une animation qui ne peut pas rester bloquée. */
.starter-ov {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6,9,16,.96);
  backdrop-filter: blur(22px);
}
.starter-card {
  width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  padding: 26px 22px;
  background: linear-gradient(150deg, var(--bg2), var(--bg1));
  border: 1px solid var(--bg3);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  /* L'animation ne porte QUE sur la transformation, jamais sur l'opacité :
     si elle ne démarre pas — onglet en arrière-plan, animations gelées — la
     carte doit rester lisible. Une entrée ratée vaut mieux qu'un écran vide. */
  animation: starterEntree .34s cubic-bezier(.18,.89,.32,1.15);
}
@keyframes starterEntree {
  from { transform: translateY(16px) scale(.97); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .starter-card { animation: none; } }
.starter-hd { text-align: center; margin-bottom: 18px; }
.starter-ttl {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; color: var(--t1);
  letter-spacing: -.01em;
}
.starter-sub {
  margin-top: 6px; font-size: 13px; line-height: 1.5;
  color: var(--t3);
}
.starter-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 380px) { .starter-grille { grid-template-columns: repeat(2, 1fr); } }
.starter-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 6px 10px;
  background: var(--bg1);
  border: 1.5px solid var(--bg3);
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s, transform .16s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.starter-opt:hover { border-color: var(--c); transform: translateY(-3px); background: var(--bg2); }
.starter-opt.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--bg1)); }
.starter-opt img {
  width: 56px; height: 56px; object-fit: contain;
  image-rendering: pixelated;
}
.starter-opt-nom { font-size: 12px; font-weight: 700; color: var(--t1); }
.starter-opt-gen { font-size: 10px; color: var(--t3); }
.starter-annuler {
  display: block; margin: 16px auto 0; padding: 9px 20px;
  background: none; border: 1px solid var(--bg3); border-radius: 12px;
  color: var(--t3); font-family: inherit; font-size: 13px; cursor: pointer;
}
.starter-annuler:hover { color: var(--t1); border-color: var(--t3); }

/* ─── Bandeau dans les réglages ─── */
.starter-cta {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 16px; background: none; border: none;
  color: var(--t2); font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.starter-cta span { font-size: 20px; }
.starter-bloc {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
}
.starter-bloc-img {
  width: 54px; height: 54px; object-fit: contain;
  image-rendering: pixelated; flex-shrink: 0;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--c) 45%, transparent));
}
.starter-bloc-info { flex: 1; min-width: 0; }
.starter-bloc-nom {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; color: var(--t1);
}
.starter-bloc-nom span { font-weight: 500; color: var(--c); font-size: 12px; }
.starter-bloc-sub { font-size: 11.5px; color: var(--t3); margin: 2px 0 6px; }
.starter-bloc-barre {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--bg3);
}
.starter-bloc-barre i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #fff));
  transition: width .6s cubic-bezier(.18,.89,.32,1);
}
.starter-bloc-chg {
  flex-shrink: 0; width: 34px; height: 34px;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px;
  color: var(--t3); font-size: 15px; cursor: pointer;
}
.starter-bloc-chg:hover { color: var(--t1); border-color: var(--t3); }

/* ─── Pastille partenaire dans le social ─── */
.starter-pastille {
  display: inline-block; vertical-align: -5px;
  object-fit: contain; image-rendering: pixelated;
  margin-right: 3px;
}

/* ─── Thème verrouillé ─── */
/* La bande du bas est RÉSERVÉE au badge : posé en absolu sans réserve, il
   s imprimait par-dessus la pastille de couleur du thème. */
.pkmn-theme-btn.verrouille { opacity: .4; filter: grayscale(.85); position: relative; padding-bottom: 20px; }
.pkmn-theme-btn.verrouille::after {
  content: '🔒 ' attr(data-verrou);
  position: absolute; inset: auto 0 0 0; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--t2);
  letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--bg2);
}
.pkmn-theme-btn.verrouille:hover { opacity: .6; }

/* Le partenaire salue l'utilisateur à l'ouverture */
.hello-partenaire {
  display: block; margin: 0 auto 6px;
  width: 76px; height: 76px; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
  /* Transformation seule, pas d'opacité : même raison que .starter-card */
  animation: helloPartenaire .9s cubic-bezier(.18,.89,.32,1.28) .25s;
}
@keyframes helloPartenaire {
  from { transform: translateY(16px) scale(.7); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hello-partenaire { animation: none; } }

/* Lien vers les ventes eBay d'un produit scellé : second repère européen
   pour recouper la cote, comme sur les fiches carte. */
.sl-ebay {
  flex-shrink: 0; margin-left: 8px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 9px;
  font-size: 14px; text-decoration: none;
  transition: border-color .18s, background .18s;
}
.sl-ebay:hover { border-color: var(--t3); background: var(--bg3); }

/* Confirmation d'un choix irréversible : on ne rend pas une décision
   définitive sans la faire valider explicitement. */
.starter-avert {
  display: inline-block; margin-top: 6px;
  font-size: 12px; font-weight: 600; color: var(--gold, var(--warning));
}
.starter-pied {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--bg3);
  text-align: center;
}
.starter-confirm-txt { font-size: 13px; color: var(--t2); line-height: 1.5; }
.starter-confirm {
  margin-top: 10px; padding: 12px 24px;
  background: var(--c); border: none; border-radius: 13px;
  color: var(--bg); font-family: inherit;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .14s, filter .18s;
}
.starter-confirm:hover  { filter: brightness(1.1); }
.starter-confirm:active { transform: scale(.97); }

/* ─── Courbe de valeur de la collection ─── */
.cl-pf-chip {
  padding: 4px 10px; border-radius: 10px;
  background: var(--bg3); border: .5px solid var(--bg4);
  color: var(--t2); font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.cl-pf-chip.on { background: var(--pur-bg); color: var(--pur); border-color: transparent; }
.cl-pf-chip:active { transform: scale(.95); }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD CALME — un seul point focal : la valeur.
   Tout le reste passe en retrait : cartes déboîtées, reflets
   animés coupés, chips en fantôme, titres réduits. Aucune
   feature retirée — seule la hiérarchie visuelle change.
   ═══════════════════════════════════════════════════════════ */

/* Titre de page discret : la donnée d'abord, pas le nom de l'onglet */
#v-dash .lt { font-size: 23px; padding: 2px 0 0; }
#v-dash .lt-sub { font-size: 12px; padding-bottom: 2px; }

/* La courbe déboîtée : édge-à-édge, c'est LE contenu, pas une boîte.
   Classe dédiée : la classe .w traîne texture de bruit, verre et glow
   au survol en !important — impossible à neutraliser proprement. */
.pf-hero {
  display: block;
  position: relative;
  padding: 4px 16px 0;
  margin: 4px 0 0;
}
#cl-pf-now, #rv-pf-now { font-size: 36px; }
#cl-pf-delta, #rv-pf-delta, #rv-ann-delta { font-size: 12.5px; }

/* Chips de période en fantôme — présentes quand on les cherche,
   invisibles quand on lit le chiffre */
.cl-pf-chip { background: none; border: none; color: var(--t3); font-size: 11px; padding: 4px 9px; }
.cl-pf-chip.on { background: var(--bg3); color: var(--t1); border: none; }

/* Niveau : ligne nue — le reflet qui balayait toutes les 4 s attirait
   l'œil en boucle, il saute. L'XP et la barre restent. !important requis :
   une ancienne règle « premium » verrouille fond et bordure en !important. */
#v-dash .lvl-card {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2px 16px 0 !important;
  margin: 14px 0 0 !important;
}
#v-dash .lvl-card::before { display: none; }

/* Tuiles de stats : texture de fond, plus des boîtes cerclées */
.col-stat { border: none; }

/* Boutons d'ajout en retrait : l'action primaire reste le scan central */
.dash-add { background: none; border: none; padding: 0; gap: 8px; }
.dash-add-btn { background: var(--bg2); border: .5px solid var(--bg3); }

/* Rythme des sections : de l'air AVANT chaque groupe, sous-titres bas */
#v-dash .section-hd { font-size: 11px; color: var(--t3); letter-spacing: .08em; }
#v-dash .pkmn-section-wrap { margin-top: 18px; }

/* Sélecteur de période façon segmented control iOS (app Bourse) */
#cl-pf-chips, #rv-pf-chips {
  background: var(--bg2); border-radius: 9px; padding: 2px; gap: 0 !important;
}
.cl-pf-chip { flex: 1; border-radius: 7px; font-weight: 600; transition: background .15s, color .15s; }
.cl-pf-chip.on { background: var(--bg4); color: var(--t1); box-shadow: 0 1px 3px rgba(0,0,0,.35); }

/* ═══════════════════════════════════════════════════════════
   REFONTE APPLE — passe système sur toute l'app.
   Surfaces plates, séparateurs hairline, un seul accent, zéro
   texture ni halo décoratif. La peau change, pas les features.
   ═══════════════════════════════════════════════════════════ */

/* Matières : le grain de bruit et le verre teinté partaient dans tous
   les sens — surfaces nettes, contraste par l'élévation, pas la déco. */
.grp::after, .w::after, .modal::after { display: none !important; }
.grp {
  background: var(--bg2) !important;
  border: .5px solid var(--sep) !important;
  box-shadow: none !important;
  border-radius: 16px !important;
}

/* Halo violet + lévitation au survol → simple retour tactile */
.w:hover, .grp:hover {
  border-color: var(--sep) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Rayons unifiés (continuité iOS) */
.w { border-radius: 16px; }

/* Cellules : hauteur de cible tactile confortable */
.cell { min-height: 48px; }

/* Titres de section homogènes partout : petites capitales grises,
   respiration avant, sans liseré décoratif */
.section-hd { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--t3); text-transform: uppercase; }
#v-dash .section-hd::before { display: none; }
#v-dash .section-hd { padding: 22px 16px 8px; }

/* Boutons pleins : rayon et graisse iOS */
.cta { border-radius: 12px; font-weight: 600; }

/* Le chevron décoratif « ▸ » devant chaque titre de section : retiré —
   un titre en petites capitales n'a pas besoin d'être pointé du doigt. */
.section-hd::before { display: none !important; }
.section-hd { padding-left: 20px; }

/* Tabbar à 6 : « Outils » sort de la barre (Apple plafonne à 5). La vue
   existe toujours — accessible depuis Moi → Outils, où elle était déjà
   dupliquée. L'élément reste dans le DOM : switchTab s'en sert de cible. */
.tab[data-v="outils"] { display: none; }

/* Masquage « collection vide » : par classe et en !important — les wraps
   de section sont en display:contents !important, un style inline ne
   suffit pas à les faire disparaître. */
.cl-vide-cache.cache-off,
.cl-vide-cache.cache-off * { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   REFONTE — DESKTOP : discipline de largeur.
   Un cockpit se lit dans une colonne, il ne s'étale pas sur
   1 300 px. Les overlays fixes (explorateur de set, modales)
   vivent hors des vues et ne sont pas contraints.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .view > * {
    max-width: 1060px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Le scan de la sidebar est un item de menu, pas un FAB flottant */
  .tabbar .tab-fab-circle {
    box-shadow: none !important;
    animation: none !important;
    background: var(--gold-bg) !important;
    color: var(--gold) !important;
    border: none !important;
  }
}

/* Bannière Pulse : une entrée du système, pas une enseigne dorée
   qui clignote — le contenu du Pulse garde son théâtre à l'ouverture. */
#pulse-chip {
  background: var(--bg2);
  border: .5px solid var(--sep);
  animation: none;
  color: var(--t2);
  font-weight: 600;
  border-radius: 12px;
}

/* Widget scellés du dashboard : mêmes chiffres que le reste du système
   (la police mono cyan détonnait au milieu des montants Geist). */
.sl-dash-val { font-family: var(--font-display); color: var(--t1); }
.sl-dash-day { font-family: var(--font-display); }

/* Collection en mode collectionneur : les affordances de VENTE (bouton
   Vendre, suggestion de prix de revente, glissement Vendre) sont du
   vocabulaire business — masquées, elles restent en mode Business. */
[data-mode="collector"] .sk-act-vendre,
[data-mode="collector"] .sk-suggest,
[data-mode="collector"] .sk-swipe-action-left { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   THÈMES — sélecteur Clair / Sombre / Système + transition.
   Les tokens des deux thèmes vivent en tête de fichier ; ici
   uniquement le composant de choix et la bascule douce.
   ═══════════════════════════════════════════════════════════ */
html.theme-transition,
html.theme-transition body,
html.theme-transition .view,
html.theme-transition .grp,
html.theme-transition .w,
html.theme-transition .cell,
html.theme-transition .navbar,
html.theme-transition .tabbar {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}

.theme-seg { display: flex; gap: 6px; }
.theme-seg-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 8px;
  background: var(--bg1);
  border: .5px solid var(--sep);
  border-radius: 12px;
  color: var(--t2);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.theme-seg-btn.on {
  background: var(--gold-bg);
  border-color: var(--gold-bd);
  color: var(--t1);
}
/* Aperçus miniatures : la pastille EST le thème qu'elle propose */
.theme-dot {
  width: 16px; height: 16px; border-radius: 5px;
  display: inline-block; position: relative; overflow: hidden;
  border: .5px solid var(--sep);
  flex-shrink: 0;
}
.theme-dot::after {
  content: ''; position: absolute; left: 3px; bottom: 3px;
  width: 6px; height: 3px; border-radius: 2px; background: var(--dv-1);
}
.theme-dot-clair { background: var(--bg); }
.theme-dot-sombre { background: var(--bg); }
.theme-dot-systeme { background: linear-gradient(105deg, var(--bg) 50%, var(--bg) 50%); }

/* ═══════════════════════════════════════════════════════════
   DESKTOP LARGE — rail droit du dashboard : les flancs vides
   deviennent la colonne des widgets (stats, scellés, alertes,
   trophées, wishlist, profil). Flux mobile inchangé.
   ═══════════════════════════════════════════════════════════ */
/* Le rail flottant a été remplacé par une grille — voir la fin du fichier. */

/* Thème clair × desktop : la sidebar et le fond de page codaient leurs
   couleurs sombres en dur dans le bloc ≥1024px, après les overrides
   clairs — le clair s'arrêtait au bord du contenu. */
@media (min-width: 1024px) {
  :root[data-theme="light"] body {
    background:
      radial-gradient(ellipse 80% 60% at 20% 0%, rgba(109,40,217,.05) 0%, transparent 60%),
      #EFEFF2;
  }
  :root[data-theme="light"] .tabbar {
    background: rgba(247,247,249,.88);
    border-right-color: rgba(10,10,15,.08);
  }
}

/* Thème clair × mode collectionneur : le « look collector » fige navbar
   et tabbar en sombre dur (!important) — le clair reprend la main ici. */
:root[data-theme="light"][data-mode="collector"] .navbar,
:root[data-theme="light"][data-mode="collector"] .tabbar {
  background: rgba(247,247,249,.9) !important;
}
:root[data-theme="light"] .tabbar { border-right-color: rgba(10,10,15,.08) !important; }

/* KPIs de performance sous la valeur du cockpit */
.pf-perf-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pf-perf-chip {
  font-size: 11.5px; color: var(--t3);
  background: var(--bg2); border: .5px solid var(--sep);
  border-radius: 8px; padding: 4px 9px;
}
.pf-perf-chip b { color: var(--t2); font-weight: 600; margin-right: 2px; }

/* ═══ COMPOSANTS PRO — Import / Radar / Coach ═══ */
.pro-ov {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(5,6,12,.82); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
:root[data-theme="light"] .pro-ov { background: rgba(240,240,244,.85); }
.pro-ov-card {
  background: var(--bg1); border: .5px solid var(--sep); border-radius: 18px;
  width: 100%; max-width: 640px; max-height: 86vh; overflow-y: auto;
  padding: 18px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.pro-ov-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pro-ov-titre { font-weight: 800; font-size: 16px; }
.pro-ov-fermer { background: none; border: none; color: var(--t3); font-size: 16px; cursor: pointer; padding: 4px 8px; }
.pro-note { font-size: 13px; color: var(--t2); line-height: 1.5; margin: 8px 0; }
.pro-err { font-size: 13px; color: var(--dn); margin: 10px 0; }
.pro-sous { font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 6px; }
.pro-drop {
  display: block; text-align: center; padding: 26px; margin-top: 12px;
  border: 1.5px dashed var(--bg4); border-radius: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pro-drop:hover { border-color: var(--gold); background: var(--gold-bg); }
.pro-barre { height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.pro-barre > div { height: 100%; background: var(--accent-fill); transition: width .3s; }
.pro-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--t2); margin: 10px 0; }
.pro-liste { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto; }
.pro-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; background: var(--bg2); border-radius: 11px; }
.pro-row-main { flex: 1; min-width: 0; }
.pro-row-nom { font-size: 13.5px; font-weight: 600; }
.pro-row-sel { width: 100%; margin-top: 5px; padding: 7px; background: var(--bg1); color: var(--t1); border: .5px solid var(--sep); border-radius: 8px; font-family: inherit; font-size: 12.5px; }
.pro-row-conf { font-size: 12px; font-weight: 800; flex-shrink: 0; }
.pro-row-conf.o { color: var(--ora, var(--warning)); }
.pro-btn-ghost {
  background: var(--bg2); border: .5px solid var(--sep); color: var(--t2);
  border-radius: 11px; padding: 11px 14px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.pro-radar-score {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
}
.pro-radar-score.sa { background: var(--up-bg); color: var(--up); }
.pro-radar-score.sb { background: var(--gold-bg); color: var(--gold); }
.pro-radar-score.sc { background: var(--bg3); color: var(--t2); }
.pro-radar-img { width: 34px; border-radius: 5px; flex-shrink: 0; }
.pro-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pro-chip {
  background: var(--bg2); border: .5px solid var(--sep); color: var(--t2);
  border-radius: 999px; padding: 7px 12px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.pro-chip:hover { color: var(--t1); border-color: var(--gold-bd); }
.pro-coach-q { font-size: 13.5px; font-weight: 700; margin: 12px 0 4px; }
.pro-coach-r { font-size: 13.5px; color: var(--t2); line-height: 1.55; white-space: pre-wrap; background: var(--bg2); border-radius: 11px; padding: 11px 13px; }
/* Sidebar : entrées Pro visibles sur desktop uniquement (mobile : via Moi) */
.pro-nav-item { display: none; }
@media (min-width: 1024px) { .pro-nav-item { display: flex; } }

/* ── KPIs du cockpit ──────────────────────────────────────────────────
   Densité d'information façon terminal financier : beaucoup de chiffres,
   aucune boîte superflue. Séparateurs plutôt que cartes empilées. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 10px 16px 0;
  background: var(--sep);
  border: .5px solid var(--sep);
  border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 620px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(6, 1fr); }
  /* Deux indicateurs dans une grille de six, ce sont quatre pistes vides :
     un grand rectangle gris ouvert à droite de la rangée. La grille se
     règle sur le nombre de cellules réellement présentes. */
  .kpi-grid:not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, 1fr); }
  .kpi-grid:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, 1fr); }
}
.kpi { background: var(--bg1); padding: 11px 13px; }
.kpi-lbl {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t3);
}
.kpi-val {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--t1); margin-top: 3px; line-height: 1.15;
}
.kpi-sub { font-size: 10.5px; color: var(--t3); margin-top: 2px; line-height: 1.3; }
#dash-alertes:not(:empty) { margin-top: 4px; }

/* ═══ RESPONSIVE — tablette et ultrawide (point 27) ═══════════════════ */

/* Tablette 768-1023 px : encore la tabbar du bas (le pouce reste le
   moyen de navigation), mais on profite de la largeur — grilles plus
   denses, gouttières plus généreuses. */
@media (min-width: 768px) and (max-width: 1023px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .col-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .widgets-2 { grid-template-columns: repeat(2, 1fr); }
  .cl-set-explorer-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .view > * { max-width: 720px; margin-left: auto; margin-right: auto; }
  .pro-ov-card { max-width: 560px; }
}

/* Ultrawide ≥1800 px : la colonne de lecture ne s'étire pas à l'infini —
   au-delà, l'œil perd la ligne. Le rail droit gagne un peu d'air. */
@media (min-width: 1800px) {
  .view > * { max-width: 1440px; }
  /* Le rail flottant d avant la grille réservait sa place avec
     « margin-right: 408px !important ». La grille le place désormais
     elle-même : garder la marge coupait la colonne de lecture à 490 px
     là où les blocs voisins en faisaient 896. */
  .kpi-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Tableaux et listes denses : défilement horizontal maîtrisé plutôt
   qu'un écrasement des colonnes (point 27). */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll > table { min-width: 560px; }

/* Sélecteur de langue : plusieurs lignes, l'Europe ne tient pas sur une */
#langue-seg { display: flex; flex-wrap: wrap; }
#langue-seg .theme-seg-btn { flex: 1 1 30%; min-width: 110px; }

/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHIE — LES SEPT RÔLES, APPLIQUÉS

   Les tokens --fs-* définis en tête ne servaient à rien tant qu'aucune
   règle ne les employait. Ce bloc les branche sur les classes qui
   existent déjà dans l'application, plutôt que d'inventer un vocabulaire
   parallèle que personne n'utiliserait.

   Placé en fin de feuille : il doit gagner sur les valeurs écrites au
   fil de l'eau, sans avoir à les réécrire une par une.
═══════════════════════════════════════════════════════════════════════ */

/* DISPLAY — la valeur du portefeuille. Le seul chiffre qu'on doit voir
   avant même d'avoir décidé de regarder. */
#cl-pf-now, #rv-pf-now, #rv-ann-now, .display-val {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
}

/* H1 — titre de page */
.page-h1, .view-h1, .sheet-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

/* H2 — en-tête de bloc à l'intérieur d'une page */
.w-t, .grp-t, .sheet-t {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

/* H3 — étiquette de section. Capitales étroites : elle se repère sans
   se lire, ce qui est exactement son rôle. */
.section-hd {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: var(--lh-title);
}

/* BODY et CAPTION */
.cell-t { font-size: var(--fs-body); line-height: var(--lh-body); }
.cell-s, .kpi-sub, .hint, .muted {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--t3);
}

/* DATA — prix, ROI, pourcentages. Chiffres tabulaires pour que les
   colonnes s'alignent : sans cela, 1 234,00 € et 987,50 € ne tombent pas
   sur la même grille et l'œil doit relire. */
.kpi-val, .stat-v, .price, .cote, .money, .num,
.cl-set-row-total, .cl-prod-prix {
  font-family: var(--font-display);
  font-size: var(--fs-data);
  font-weight: var(--fw-title);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Tout ce qui affiche un montant, où qu'il soit : l'alignement des
   chiffres n'est pas une préférence, c'est ce qui rend une colonne
   lisible d'un coup d'œil. */
.tbl-cell-num, .tx-amt, .lot-val, .pf-val, td { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════
   SYSTÈME DE TABLEAUX

   L'application n'utilise aucun <table> : les listes denses sont des
   grilles de div. Le point du brief tient quand même — un tableau, ce
   n'est pas la balise, c'est le comportement : en-tête stable, lignes
   distinguables, survol, sélection, chiffres alignés, valeurs positives
   et négatives lisibles sans dépendre de la couleur seule.

   .tbl s'applique à n'importe quelle liste dense, balise ou grille.
═══════════════════════════════════════════════════════════════════════ */
.tbl { width: 100%; border-collapse: collapse; }
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Une ombre au bord droit annonce qu'il reste du contenu : sans elle,
     rien ne signale qu'on peut faire défiler. */
  background:
    linear-gradient(to right, var(--bg1) 30%, transparent) left / 24px 100% no-repeat,
    linear-gradient(to left, var(--bg1) 30%, transparent) right / 24px 100% no-repeat;
}
.tbl-scroll > table, .tbl-scroll > .tbl { min-width: 560px; }

.tbl thead th, .tbl-hd {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg1);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--t3);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--sep);
  white-space: nowrap;
}
.tbl tbody td, .tbl-cell {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--sep2);
  font-size: var(--fs-body);
  color: var(--t1);
}
.tbl tbody tr:hover, .tbl-row:hover { background: var(--glass-bg); }
.tbl tbody tr[aria-selected="true"], .tbl-row.on {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
/* Colonnes de chiffres : alignées à droite et tabulaires, sinon les
   ordres de grandeur ne se comparent pas d'un coup d'œil. */
.tbl .num, .tbl-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Le signe porte l'information autant que la couleur — un daltonien
   doit lire la même chose. */
.tbl .pos::before, .val-pos::before { content: '▲ '; }
.tbl .neg::before, .val-neg::before { content: '▼ '; }
.tbl .pos, .val-pos { color: var(--success); }
.tbl .neg, .val-neg { color: var(--danger); }
/* Colonne triée : la flèche indique le sens, la couleur ne fait que
   renforcer. */
.tbl-hd[data-tri]::after { content: ' ↕'; color: var(--t3); }
.tbl-hd[data-tri="asc"]::after  { content: ' ↑'; color: var(--accent); }
.tbl-hd[data-tri="desc"]::after { content: ' ↓'; color: var(--accent); }

/* ═══ IMPORT — LEVER UNE AMBIGUÏTÉ ═════════════════════════════════════
   Un menu déroulant obligeait à comparer trois lignes de texte tronqué.
   Ici les candidats sont côte à côte, avec leur visuel. */
.imp-amb { display: block; padding: var(--sp-3) 0; }
.imp-amb-hd { display: flex; align-items: center; gap: var(--sp-2); }
.imp-amb-hd .pro-row-nom { flex: 1; min-width: 0; }
.imp-cands {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) 0 var(--sp-1);
  scroll-snap-type: x mandatory;
}
.imp-cand {
  flex: 0 0 auto; width: 168px;
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-2);
  border: 1px solid var(--sep);
  border-radius: var(--r);
  background: var(--bg1);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s, background .15s;
}
.imp-cand:hover { border-color: var(--accent-line); }
.imp-cand.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.imp-cand input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.imp-cand-vis {
  flex: 0 0 40px; height: 56px; border-radius: 5px; overflow: hidden;
  background: var(--bg2); display: flex; align-items: center; justify-content: center;
}
.imp-cand-vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imp-cand-vide { font-size: 18px; }
.imp-cand-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.imp-cand-nom {
  font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--t1);
  line-height: 1.25; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.imp-cand-meta { font-size: var(--fs-micro); color: var(--t3); line-height: 1.35; }
.imp-cand-id {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--t3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══ RADAR — LES SIGNAUX SOUS LE SCORE ═══════════════════════════════
   Un score sur 100 sans ce qui le compose est un oracle. La ligne des
   signaux donne la matière, celle des absents dit ce qui manque. */
.radar-signaux {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-1);
  font-size: var(--fs-micro); color: var(--t3);
}
.radar-signaux span {
  background: var(--bg2);
  border: 1px solid var(--sep);
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
}
.radar-absents {
  margin-top: 3px;
  font-size: 10px; color: var(--t3); font-style: italic;
}

/* Les trois valeurs de tête (collection, stock, annonces) sont le même
   rôle : le chiffre principal d'un bloc. Elles portaient trois
   traitements — deux blancs de tailles différentes et un indigo — ce qui
   suggérait à tort une hiérarchie entre elles. */
#cl-pf-now, #rv-pf-now, #rv-ann-now {
  color: var(--t1);
  font-size: var(--fs-display);
}

/* ═══════════════════════════════════════════════════════════════════════
   IDENTITÉ CHROME — LA MATIÈRE DE TCG PRO

   Une même matière, deux environnements. En thème clair, un blanc nacré
   légèrement chaud et le chrome posé dessus, sombre et dense. En thème
   sombre, un anthracite et le MÊME chrome, remonté en luminosité pour
   rester lisible — c'est le même métal sous un autre éclairage, pas une
   autre couleur.

   Le chrome est réservé aux chiffres de tête et aux titres. Étendu au
   texte courant, un dégradé sur du 14 px devient sale et fatigant : le
   luxe se joue sur trois éléments par écran, pas sur trois cents.
═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Anthracite — jamais de noir pur, qui écrase les visuels de cartes */
  --bg:   #1A1D21;
  --bg1:  #22262B;
  --bg2:  #2A2F36;
  --bg3:  #353B44;
  --bg4:  #434A55;
  --bg5:  #565E6B;

  /* Chrome éclairci : le noir remonté pour tenir sur l'anthracite */
  --t1:   #E9EBEE;
  --t2:   #B9C0C9;
  --t3:   #9EA5B0;
  --t4:   rgba(233,235,238,.26);

  --sep:  rgba(233,235,238,.09);
  --sep2: rgba(233,235,238,.045);

  /* Reflet du métal : deux arêtes claires, un creux au centre. */
  --chrome: linear-gradient(157deg,
    #FFFFFF 0%, #C7CDD6 22%, #8F97A3 44%,
    #E4E8ED 60%, #A5ACB8 78%, #FBFCFD 100%);
  --chrome-bord: rgba(255,255,255,.16);
  --chrome-creux: rgba(0,0,0,.34);

  --glass-bg: rgba(255,255,255,.045);
  --glass-bd: rgba(255,255,255,.085);
}

:root[data-theme="light"] {
  /* Blanc nacré : un blanc cassé chaud, jamais le blanc pur qui pique */
  --bg:   #F3F0EA;
  --bg1:  #FBF9F5;
  --bg2:  #EAE6DE;
  --bg3:  #DAD5CB;
  --bg4:  #C3BDB1;
  --bg5:  #9A9488;

  /* Chrome dense */
  --t1:   #15181C;
  --t2:   #3A4048;
  --t3:   #525860;
  --t4:   rgba(21,24,28,.30);

  --sep:  rgba(21,24,28,.10);
  --sep2: rgba(21,24,28,.05);

  --chrome: linear-gradient(157deg,
    #5A626D 0%, #14171B 22%, #454C56 44%,
    #0E1114 60%, #333A43 78%, #1B1F24 100%);
  --chrome-bord: rgba(255,255,255,.65);
  --chrome-creux: rgba(21,24,28,.16);

  --glass-bg: rgba(255,255,255,.60);
  --glass-bd: rgba(21,24,28,.07);
}

/* Le chrome ne s'applique QUE là où il porte : les chiffres de tête et
   les titres de page. Repli en couleur pleine si background-clip n'est
   pas supporté — le chiffre reste lisible, il perd juste son reflet. */
#cl-pf-now, #rv-pf-now, #rv-ann-now, .display-val, .page-h1 {
  color: var(--t1);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  #cl-pf-now, #rv-pf-now, #rv-ann-now, .display-val {
    background: var(--chrome);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Une arête claire sous le texte : sans elle le métal reste plat */
    filter: drop-shadow(0 1px 0 var(--chrome-bord));
  }
}

/* Surfaces : un liseré clair en haut, une ombre douce en bas. C'est ce
   qui distingue une carte métallique d'un rectangle gris. */
.w, .grp, .pro-ov-card, .imp-cand, .tbl-scroll {
  position: relative;
}
.w::before, .grp::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--chrome-bord) 22%, var(--chrome-bord) 78%, transparent);
  pointer-events: none;
  border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════
   IMAGES ENTIÈRES

   `object-fit: cover` remplit le cadre en rognant ce qui dépasse. Sur une
   carte au format 63×88 le rognage est minime ; sur un packshot de
   display, de tin ou de coffret — dont les proportions vont du carré au
   panoramique — il coupait le produit et n'en montrait que le centre.
   On ne possède pas le milieu d'un objet : on le possède en entier.

   `contain` montre tout et laisse du vide autour. Ce vide est traité
   comme un fond de présentation, pas comme un accident.
═══════════════════════════════════════════════════════════════════════ */
.cl-prod-card img,
.cl-set-explorer-card img,
.cl-card-thumb img,
.card3d-front img,
.cs-img-produit,
.imp-cand-vis img,
.lot-card-thumb img,
.scan-result-img,
.scan-cand-img,
.cl-next-card img,
.sr-front img,
.grad-slab-img,
.gr-img,
.qs-row img,
.cl-top-img,
.bulk-item img {
  object-fit: contain !important;
  background: var(--bg2);
}

/* Les cartes gardent leurs proportions exactes : le cadre s'y adapte au
   lieu de l'inverse. 63 × 88 mm, le format Pokémon depuis 1996. */
.cl-set-explorer-card, .cl-card-thumb {
  aspect-ratio: 63 / 88;
  height: auto;
}
/* Un packshot n'a pas de format standard : le cadre reste carré et
   l'objet se centre dedans, entier. */
.cl-prod-card {
  aspect-ratio: 1 / 1;
  height: auto;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-2);
}
.cl-prod-card img { width: 100%; height: 100%; }

/* Fiche produit : le visuel occupe la scène sans être rogné ni déformé */
:root .card3d-modal[data-kind="scelle"] .card3d-card,
:root .card3d-modal[data-kind="scelle"] .card3d-front {
  aspect-ratio: auto;
  background: var(--bg1);
  border-radius: var(--r-lg);
}
.card3d-modal[data-kind="scelle"] .card3d-front img {
  width: 100%; height: 100%; object-fit: contain;
  padding: var(--sp-3);
}
.card3d-modal[data-kind="scelle"] .card3d-holo,
.card3d-modal[data-kind="scelle"] .card3d-shine { display: none !important; }

/* ── Fiche scellé : bloc cote et bouton ─────────────────────────────── */
.card3d-nom {
  font-family: var(--font-display);
  font-size: var(--fs-h1); font-weight: var(--fw-title);
  letter-spacing: var(--ls-title); color: var(--t1);
  line-height: var(--lh-title); margin-bottom: var(--sp-2);
}
.card3d-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-caption); color: var(--t3);
  margin-bottom: var(--sp-3);
}
.scelle-tag {
  background: var(--bg2); border: 1px solid var(--sep);
  border-radius: 999px; padding: 2px 10px; color: var(--t2);
}
.scelle-cote {
  background: var(--bg1); border: 1px solid var(--sep);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.scelle-cote-val {
  font-family: var(--font-display); font-size: var(--fs-display);
  font-weight: var(--fw-display); letter-spacing: var(--ls-display);
  line-height: 1.05; color: var(--t1);
  font-variant-numeric: tabular-nums;
}
.scelle-cote-lbl { font-size: var(--fs-caption); color: var(--t3); margin-top: 2px; }
.scelle-add { width: 100%; margin-bottom: var(--sp-3); }

/* ═══════════════════════════════════════════════════════════════════════
   TÊTE DU PORTEFEUILLE — UNE SEULE LIGNE, QUOI QU'IL ARRIVE

   « Valeur de ta collection » + « ↗ Partager » + quatre chips de période
   font 365 px sur un écran de 375 : la ligne se cassait en deux et la
   tête du tableau de bord partait de travers. Le partage devient un
   bouton rond, le libellé peut se tronquer, les chips ne bougent jamais.
═══════════════════════════════════════════════════════════════════════ */
.pf-hero > div:first-child { flex-wrap: nowrap !important; }
.pf-lbl {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0;                      /* sans ça, un flex ne se tronque pas */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-partager {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--sep); background: var(--bg2);
  color: var(--accent); font-size: 13px; font-weight: 700;
  cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.pf-partager:hover { background: var(--accent-soft); border-color: var(--accent-line); }
#cl-pf-chips, #rv-pf-chips { flex-shrink: 0; }
.cl-pf-chip { padding: 4px 7px; }

/* Sous 360 px, « Tout » passe en « ∞ » plutôt que de pousser la ligne */
@media (max-width: 359px) {
  .cl-pf-chip { padding: 4px 5px; font-size: 10px; }
  .pf-lbl { font-size: var(--fs-caption); }
}

/* Le bouton de partage se faisait écraser par une règle de bouton plus
   ancienne : 17 × 24 px sans arrondi, une pastille de travers. */
.pf-hero .pf-partager {
  width: 26px !important; height: 26px !important;
  min-width: 26px !important; padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--bg2) !important; border: 1px solid var(--sep) !important;
  color: var(--accent) !important; font-size: 13px; line-height: 1;
}

/* Un conteneur vide ne doit pas occuper de place. Trois rangées sans
   contenu gardaient leurs marges et creusaient 24 px de vide au milieu
   de la tête du tableau de bord — le « décalage » qu'on voyait sans
   pouvoir le nommer. */
.pf-hero > :empty,
.pf-hero .pf-perf-row:empty,
#cl-pf-perf:empty, #rv-pf-perf:empty,
#dash-alertes:empty, .w > :empty:not(img):not(svg):not(canvas):not(input) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   RANGÉES QUI DÉBORDENT — SCROLL ASSUMÉ, JAMAIS COUPÉ NET

   Trois rangées dépassaient la largeur de l'écran : les filtres de set,
   la barre de tri de l'explorateur, les chips de langue. Deux glissaient
   sans le dire, la troisième était simplement tronquée — le bouton
   « Prix » restait hors d'atteinte.

   Règle : soit ça tient, soit ça défile, et le défilement se voit.
═══════════════════════════════════════════════════════════════════════ */
.cl-sets-chips, .cl-lang-chips, .clang-row, .cl-flux-period-row,
.cl-set-explorer-tools, .cl-set-explorer-sort, .imp-cands, .radar-signaux,
.pro-seg, #langue-seg {
  scrollbar-width: none;
}
.cl-sets-chips::-webkit-scrollbar, .cl-lang-chips::-webkit-scrollbar,
.cl-set-explorer-tools::-webkit-scrollbar, .imp-cands::-webkit-scrollbar { display: none; }

/* Un dégradé au bord droit annonce qu'il reste du contenu. Sans lui,
   « Manquantes (120) » coupé en deux ressemble à un défaut d'affichage. */
.defile-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.cl-sets-chips, .cl-lang-chips { scroll-snap-type: x proximity; }
.cl-sets-chips > *, .cl-lang-chips > * { scroll-snap-align: start; }

/* La barre de tri débordait de 12 px sans défilement : le dernier bouton
   était inaccessible. Elle défile maintenant, et la recherche garde une
   largeur minimale utilisable. */
.cl-set-explorer-tools {
  display: flex; gap: var(--sp-2); align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.cl-set-explorer-tools > * { flex-shrink: 0; }
.cl-set-explorer-tools input,
.cl-set-explorer-tools #cl-set-explorer-q { flex: 1 1 140px; min-width: 120px; }
.cl-set-explorer-sort { flex-shrink: 0; }

/* Filet de sécurité : rien, nulle part, ne fait défiler la PAGE
   horizontalement. Un débordement doit rester dans son conteneur. */
html, body { overflow-x: hidden; }

/* Cibles tactiles : 32 px minimum sur les commandes permanentes. Sous
   cette taille, un pouce vise à côté — et la barre du haut est ce qu'on
   touche le plus souvent. */
.nav-ico-btn { min-width: 36px; }
.add-btn { min-width: 34px; min-height: 34px; }
.mode-pill-mobile { min-height: 34px; }
.cl-sets-chip, .cl-pf-chip { min-height: 32px; }
.cl-card-fav, .cl-card-classeur { min-width: 32px; min-height: 32px; }

/* ═══════════════════════════════════════════════════════════════════════
   SUPERPOSITIONS — LE VOILE SUIT LE THÈME

   Quinze superpositions figeaient leur fond en quasi-noir : modales,
   feuilles, cérémonies, écran de scan. Elles avaient été écrites en
   rgba(), que la purge des couleurs hexadécimales n'avait pas vues.

   En thème clair, le texte suit le thème mais pas le voile : le titre
   de la fiche produit s'affichait en chrome sombre sur fond noir —
   invisible. Le voile est maintenant un token, et il s'éclaircit avec
   le reste. Il reste dense : une modale doit couper du fond, pas
   flotter dessus.
═══════════════════════════════════════════════════════════════════════ */
:root {
  --voile:       radial-gradient(ellipse at center, rgba(10,12,16,.94) 0%, rgba(4,5,7,.985) 100%);
  --voile-plat:  rgba(8,10,13,.92);
  --voile-doux:  rgba(8,10,13,.82);
}
:root[data-theme="light"] {
  /* Un voile clair, mais assez dense pour détacher la modale. Sur du
     nacré, un gris chaud lit mieux qu'un gris neutre. */
  --voile:       radial-gradient(ellipse at center, rgba(236,232,224,.96) 0%, rgba(214,208,197,.99) 100%);
  --voile-plat:  rgba(233,229,221,.94);
  --voile-doux:  rgba(233,229,221,.85);
}

.card3d-modal { background: var(--voile) !important; }
.pro-overlay, .pro-ov, .onboard, .av-modal { background: var(--voile-plat) !important; }
.modal-overlay, .scan-modal, .quick-sheet-bd { background: var(--voile-doux) !important; }
#pulse-overlay, #scan-reveal, #set-complete-ov { background: var(--voile-plat) !important; }

/* Le titre de la fiche produit doit contraster avec le voile, pas avec
   le fond de page : c'est sur le voile qu'il est posé. */
.card3d-nom, .card3d-meta, .card3d-info { color: var(--t1); }
.card3d-meta, .scelle-cote-lbl { color: var(--t3); }

/* La barre du bas est un élément d'interface, pas un décor : elle suit
   le thème comme le reste. */
.tabbar { background: color-mix(in srgb, var(--bg1) 92%, transparent) !important; }

/* Les deux actions de bas de fiche gardaient un violet translucide et un
   texte blanc, hérités du seul thème sombre : en clair, du blanc sur du
   nacré ne se lit pas. Elles suivent le thème comme le reste. */
.card3d-action {
  background: var(--bg1) !important;
  border: 1px solid var(--sep) !important;
  color: var(--t1) !important;
}
.card3d-action .lbl { color: var(--t1); }
.card3d-action .sub { color: var(--t3); }
.card3d-action:hover {
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
  box-shadow: var(--sh-2) !important;
}
/* Le bouton d'ajout est l'action principale : il porte l'accent, pas un
   aplat blanc qui disparaît sur le nacré. */
.scelle-add {
  background: var(--accent-fill) !important;
  color: var(--on-accent) !important;
  border: none !important;
  min-height: 46px; font-weight: var(--fw-title);
}
.scelle-add:hover { background: var(--accent-fill-hover) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   BARRE DE NAVIGATION — LISIBLE DANS LES DEUX THÈMES

   Les libellés inactifs utilisaient --t4, une opacité de 26 à 30 %.
   Composité sur la barre, cela donne 2,16:1 en sombre et 1,94:1 en clair
   pour un texte de 10 px. C'est la navigation principale : on doit
   pouvoir lire où l'on va sans deviner. --t3 les porte à 5,0 et 5,4:1,
   et l'onglet actif reste distingué par l'accent et son icône pleine.

   La transition de couleur est retirée sur ces éléments : au changement
   de thème, elle laissait des onglets figés sur l'ancienne teinte —
   des libellés indigo sur une barre blanche, indéfiniment.
═══════════════════════════════════════════════════════════════════════ */
.tab { color: var(--t3); transition: none; }
.tab .tab-lbl { color: inherit; }
.tab.on { color: var(--accent); }
.tab.on .tab-lbl { font-weight: var(--fw-medium); }
.tab:hover { color: var(--t1); }

/* Aucune couleur de texte ne s'anime au basculement de thème : une
   transition interrompue en plein vol reste bloquée sur sa valeur de
   départ, et le texte garde la couleur de l'autre thème. */
html.theme-transition *, html.theme-transition {
  transition-property: background-color, border-color !important;
}

/* --t4 garde son rôle de trait et de chevron décoratif, mais il ne doit
   plus servir de couleur de TEXTE : à 26-30 % d'opacité, un en-tête de
   colonne du stock tombait à 2,13:1. Les 215 déclarations de couleur qui
   l'employaient passent à --t3, lisible sur les quatre surfaces. */
.chev, .cell-chev, .cl-set-row-chev { color: var(--t3); }

/* ═══════════════════════════════════════════════════════════════════════
   DERNIERS ÉCARTS DE CONTRASTE — MESURÉS, PAS ESTIMÉS

   Contrastes calculés en compositant l'opacité du texte sur son fond
   réel, sur les huit écrans, dans les deux thèmes.
═══════════════════════════════════════════════════════════════════════ */

/* Pastille de catégorie d'actualité : texte blanc figé sur un fond
   d'accent à 10 % d'opacité. En thème clair, blanc sur presque blanc —
   1,24:1. La pastille prend l'accent en texte et son voile en fond. */
.cl-news-cat {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-line);
}

/* Option non sélectionnée du sélecteur de mode : 1,46:1 en clair. Une
   option qu'on peut choisir doit se lire — c'est le seul moyen de savoir
   vers quoi on bascule. */
.mode-sw-opt { color: var(--t2); }
.mode-sw.is-col .mode-sw-opt[data-m="collector"],
.mode-sw:not(.is-col) .mode-sw-opt[data-m="reseller"] { color: var(--on-accent); }

/* Icônes et raccourcis d'interface entre 3,7 et 4,0:1 : sous le seuil
   pour du texte de moins de 18 px, même en gras. */
.qs-esc, .srch-ico, .toast-ico, .cl-card-thumb-fallback, .cl-card-thumb-num {
  color: var(--t2);
}

/* Le numéro de carte est posé sur un voile noir, PAS sur le fond de la
   page : je l'avais fait suivre le thème, ce qui le rendait sombre sur
   sombre en mode clair. Il reste blanc, comme le voile qui le porte. */
.cl-card-thumb-num, .cl-set-explorer-card-num {
  color: #FFFFFF !important;
  background: rgba(0,0,0,.72);
}

/* ═══════════════════════════════════════════════════════════════════════
   GOUTTIÈRE UNIQUE — 16 px, PARTOUT

   Le titre de page et son sous-titre étaient posés à 20 px du bord ;
   les tuiles, les filtres et les cartes à 16. Quatre pixels d'écart sur
   chaque écran : trop peu pour qu'on nomme le défaut, assez pour que
   rien ne semble aligné. C'est le « décalage » qu'on voit sans pouvoir
   le désigner.
═══════════════════════════════════════════════════════════════════════ */

/* La barre de filtres du stock défile : elle doit le dire, sinon le
   dernier bouton (« ↻ Cotes ») paraît simplement absent. */
#v-stock > div:has(> .f-sel), #v-collec > div:has(> .f-sel) {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
#v-stock > div:has(> .f-sel)::-webkit-scrollbar,
#v-collec > div:has(> .f-sel)::-webkit-scrollbar { display: none; }

/* Gouttière unique, sources corrigées à la racine plutôt que compensées.
   Mesuré sur cinq écrans : le titre était à 20 px, les tuiles à 16, et
   sur Marché un conteneur intermédiaire ajoutait sa propre gouttière à
   celle de ses enfants — 32 px. Quatre alignements différents. */
.lt-area { padding-left: 16px !important; padding-right: 16px !important; }
/* Un bloc encadré par un conteneur qui porte déjà la gouttière ne la
   remet pas : sinon les deux s'additionnent. */
.view > div:not([class]) > .grp,
.view > div:not([class]) > .w { margin-left: 0 !important; margin-right: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   IMAGES EN COURS DE CHARGEMENT

   Les visuels sont chargés paresseusement : tant qu'ils n'arrivent pas,
   leur cadre reste vide. Sur une grille de vingt produits et une
   connexion moyenne, cela ressemble à des données manquantes — on croit
   que le catalogue est incomplet alors qu'il s'affiche.

   Un dégradé qui balaie lentement dit « ça arrive » ; il s'efface dès
   que l'image est décodée. Vérifié : les 21 packshots de Nuit Noire
   répondent tous, aucun n'est réellement absent.
═══════════════════════════════════════════════════════════════════════ */

.cl-prod-card, .cl-set-explorer-card, .imp-cand-vis, .card3d-front {
  background-image: linear-gradient(100deg,
    var(--bg2) 32%, var(--bg3) 46%, var(--bg2) 60%);
  background-size: 220% 100%;
  animation: skeletonShimmer 1.4s linear infinite;
}
/* :has(img[src]) ne convient pas : un img porte son src dès le parse,
   longtemps avant d être téléchargé — le squelette disparaissait donc
   immédiatement. Le marqueur est posé au chargement RÉEL, par un seul
   écouteur délégué (voir visuelCharge dans 01-config-etat.js). */
.cl-prod-card.vis-ok, .cl-set-explorer-card.vis-ok,
.imp-cand-vis.vis-ok, .card3d-front.vis-ok {
  animation: none !important;
  background-image: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .cl-prod-card, .cl-set-explorer-card, .imp-cand-vis, .card3d-front { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP — UNE GRILLE, PAS DES FLOTTANTS

   L'ancienne version faisait flotter les widgets à droite et rendait la
   place au flux principal par une liste de `margin-right` posée
   sélecteur par sélecteur. Tout bloc absent de cette liste gardait sa
   pleine largeur : mesuré à 1900 px, les blocs du tableau de bord
   démarraient à quatre abscisses différentes — 232, 342, 452 et 1512 —
   pour une même largeur de 1440. Rien n'était aligné, et chaque nouveau
   bloc ajoutait un cas particulier.

   Une grille à deux colonnes règle le problème par construction : la
   colonne gauche reçoit tout, la droite le rail. Aucun bloc ne peut
   « oublier » de laisser la place, puisqu'il n'a plus à la connaître.
═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  /* .on est indispensable : #v-dash seul (spécificité d ID) écrase
     « .view { display: none } » et laissait le tableau de bord visible
     par-dessus Sets, Collec et les autres — un chevauchement à chaque
     changement de catégorie. */
  #v-dash.on {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: var(--sp-8);
    align-items: start;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--sp-6);
  }
  /* Tout va à gauche, sans marge automatique : c'est la grille qui
     centre, pas chaque bloc pour son compte. */
  #v-dash.on > * {
    grid-column: 1;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Le rail occupe la colonne droite sur toute la hauteur et suit le
     défilement : ses chiffres restent lisibles pendant qu'on parcourt
     la collection. */
  #v-dash.on > #dash-rail {
    grid-column: 2;
    grid-row: 1 / span 999;
    position: sticky;
    /* La barre de navigation est hors du conteneur défilant : compenser
       sa hauteur creusait 44 px de vide au-dessus du rail. */
    top: var(--sp-4);
    align-self: start;
    display: flex; flex-direction: column; gap: var(--sp-3);
  }
  #v-dash.on > #dash-rail > * { width: 100%; margin: 0 !important; float: none !important; }
  /* Deux colonnes de statistiques dans un rail de 360 px : un seul
     chiffre par ligne gaspillerait la moitié de la place. */
  #dash-rail .col-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

  /* Sans rail (aucun widget à montrer), la colonne droite disparaît
     plutôt que de laisser un vide de 360 px. */
  #v-dash.on:not(:has(#dash-rail)) { grid-template-columns: minmax(0, 1fr); }
}

/* Au-delà de 1600 px, la colonne de lecture cesse de s'élargir : une
   ligne de texte de 1200 px se lit mal, l'œil perd le retour à la ligne. */
@media (min-width: 1600px) {
  #v-dash.on { grid-template-columns: minmax(0, 900px) 360px; justify-content: center; }
}

/* Deux conteneurs, deux cellules : la grille n'a plus rien à deviner.
   Avec un placement automatique bloc par bloc, deux voisins finissaient
   par partager une ligne — 34 px et 41 px de recouvrement mesurés. */
@media (min-width: 1280px) {
  #v-dash.on > #dash-main { grid-column: 1; grid-row: 1; min-width: 0; }
  #v-dash.on > #dash-rail { grid-column: 2; grid-row: 1; }
  #dash-main > * { max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LE VOILE DE FOND NE DOIT PLUS COUVRIR L'IDENTITÉ

   Le mode collectionneur posait sur le fond trois dégradés radiaux
   violets et cyan, à 10 et 14 % d'opacité. Ils étaient assez forts pour
   recouvrir l'anthracite et le nacré : on croyait la palette inchangée
   alors qu'elle l'était bien — le voile la masquait.

   Il reste, mais discret, et prend la teinte de l'accent au lieu d'un
   violet figé : quand un thème Pokémon change l'accent, l'ambiance suit.
═══════════════════════════════════════════════════════════════════════ */
body {
  background-image:
    radial-gradient(ellipse 70% 50% at 18% 0%,
      color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 85% 8%,
      color-mix(in srgb, var(--dv-2) 3.5%, transparent) 0%, transparent 60%) !important;
  background-attachment: fixed;
}
:root[data-mode="collector"] body::before,
:root[data-mode="reseller"] body::before,
body::before { background: none !important; animation: none !important; }

/* ═══ CHEVRONS DE REPLI ═══════════════════════════════════════════════
   `margin-left: auto` les collait au bord droit du conteneur. Sur un
   écran de 375 px cela restait près du titre ; sur 900 px de colonne,
   le chevron se retrouvait à 842 px de son intitulé, seul au milieu du
   vide. Il reste au bout de la ligne, mais la ligne s'arrête au titre. */
@media (min-width: 1024px) {
  .collapse-hd { max-width: max-content; gap: var(--sp-3); }
  .collapse-btn { margin-left: var(--sp-2) !important; margin-right: 0 !important; }
}

/* Dernier écart de largeur dans la colonne : ce bouton gardait les
   marges latérales du mobile alors que la grille les fournit déjà. */
@media (min-width: 1280px) {
  #v-dash.on #pulse-chip { width: 100%; }
}

/* ─── COTE ABSENTE ET ÉCART SUSPECT ───────────────────────────────────
   Cardmarket référence des produits sans aucune offre. Écrire « 0,00 € »
   ferait disparaître un produit d'un portefeuille : l'absence se dit. */
.cote-absente {
  color: var(--t3);
  font-style: italic;
  font-size: .92em;
}
.cote-valeur { font-weight: 700; }
.cote-bas { color: var(--t3); font-weight: 400; font-size: .88em; }
/* Quand la tendance dépasse de plus du double la première offre, la cote
   cesse d'être un prix de revente réaliste — mesuré : rapport médian 1,15×
   sur 3 864 scellés, ce cas est un vrai signal, pas du bruit. */
.cote-avert {
  margin-top: 4px;
  font-size: 11px;
  color: var(--gold);
  display: flex; align-items: center; gap: 4px;
}

/* ── Master Set : la case porte le nom de sa version ────────────────────
   La reverse a sa propre case, à côté de la normale, comme sur une
   planche. Le libellé n'est pas décoratif : c'est ce qui distingue deux
   images identiques. Le pastel du reverse reprend l'accent, sans la
   saturation d'un bouton — c'est une étiquette, pas une action. */
.cl-card-variante-lib {
  text-align: center;
  font-weight: 600;
  letter-spacing: .02em;
}
.cl-card-variante-lib.rev {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 6px;
}


/* ═══ SUR TÉLÉPHONE, TOUT DESCEND — RIEN NE GLISSE DE CÔTÉ ═══════════════
   Un rail horizontal cache la moitié de son contenu : on ne devine pas
   qu'il faut pousser, et sur un écran étroit la moitié droite n'existe
   pas. Pire, un glissement latéral entre en concurrence avec le geste de
   retour du système — on croit reculer, on fait défiler des chips.

   Les rails passent donc à la ligne, et la page ne déborde plus jamais
   horizontalement. Les tableaux gardent leur défilement : les replier
   rendrait une grille de chiffres illisible, et c'est un conteneur qu'on
   voit, pas un piège. */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  .cl-next-row,
  .cl-lang-chips,
  .gv-notes,
  .clang-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* Le reste de la page ne peut pas dépasser la largeur de l'écran. */
  .view, .grp, .card, .widget { max-width: 100%; }
  .view > * { min-width: 0; }
}

/* Bloc « tirage » : une information de contexte, pas une alerte. Le ton
   reste sobre — on informe sur ce que la cote couvre, on ne crie pas. */
.price-block.ed1 { border-left: 3px solid var(--gold); }
.price-block.ed1 .price-foot { color: var(--t2); line-height: 1.5; }

/* Dire qu'une fiche n'est pas confirmée plutôt que de laisser croire que le
   lien mène à la bonne page. 1 626 cartes sont dans ce cas : aucune source
   publique ne donne leur correspondance, et Cardmarket bloque la collecte
   automatisée. La seule personne qui puisse trancher est celle qui a la
   carte en main — autant le lui dire et lui ouvrir la porte. */
.cote-non-confirmee {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  font-size: 12px;
  line-height: 1.5;
  color: var(--t2);
}
.cote-non-confirmee a { color: var(--accent); font-weight: 600; }