*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* ── DA sobre : bleu / rouge / blanc / noir ───────────────── */
  /* Thème CLAIR (par défaut) — blanc + noir */
  :root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface2: #eef0f3;
    --input-bg: #ffffff;
    --fg-rgb: 18, 22, 33;          /* teinte neutre foncée (bordures, hovers, dividers) */
    --border: rgba(var(--fg-rgb), 0.12);
    --text: #14161c;
    --muted: #5f6775;
    --muted-rgb: 95, 103, 117;
    --accent: #1d4ed8;             /* BLEU (marque, possédée) */
    --accent-rgb: 29, 78, 216;
    --accent2: #c62828;            /* ROUGE (à obtenir, secondaire) */
    --accent2-rgb: 198, 40, 40;
    --slate: #475569;             /* gris ardoise (tertiaire neutre) */
    --slate-rgb: 71, 85, 105;
    --shadow: rgba(20, 28, 56, 0.14);
    --radius: 12px;
    /* Échelle des Poké Balls (rareté/valeur) — couleurs fixes, identiques en clair/sombre */
    --ball-poke: #ee1515;   --ball-poke-2: #ffffff;   /* Poké Ball  (promo) */
    --ball-super: #2a75bb;  --ball-super-2: #ef4444;  /* Super Ball (AR) */
    --ball-hyper: #333a40;  --ball-hyper-2: #ffcb05;  /* Hyper Ball (ALT + spéciale) */
    --ball-master: #7b2fbe; --ball-master-2: #ffffff; /* Master Ball (SAR) — mauve / blanc */
  }

  /* Thème SOMBRE — noir + blanc */
  :root[data-theme="dark"] {
    --bg: #0c0d10;
    --surface: #15171c;
    --surface2: #1d2028;
    --input-bg: #101217;
    --fg-rgb: 255, 255, 255;       /* teinte neutre claire */
    --border: rgba(var(--fg-rgb), 0.08);
    --text: #f0f1f3;
    --muted: #8a909c;
    --muted-rgb: 138, 144, 156;
    --accent: #5b9dff;             /* BLEU vif sur fond sombre */
    --accent-rgb: 91, 157, 255;
    --accent2: #f26a64;            /* ROUGE clair sur fond sombre */
    --accent2-rgb: 242, 106, 100;
    --slate: #94a3b8;             /* gris ardoise clair */
    --slate-rgb: 148, 163, 184;
    --shadow: rgba(0, 0, 0, 0.55);
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    min-height: 100vh;
  }

  /* ── App Shell ─────────────────────────────── */
  .app-header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 0;
  }

  .app-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
  }

  .app-logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .app-logo span { color: var(--accent); }

  .app-tagline {
    font-size: 12px;
    color: var(--muted);
    margin-top: 5px;
    font-weight: 400;
    letter-spacing: 0.01em;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
    flex-shrink: 0;
  }
  .icon-btn:hover { border-color: rgba(var(--fg-rgb),.2); color: var(--text); }
  .icon-btn.active { background: rgba(var(--accent-rgb),.1); border-color: var(--accent); color: var(--accent); }
  .icon-btn.active-blue { background: rgba(var(--accent2-rgb),.1); border-color: var(--accent2); color: var(--accent2); }

  /* ── Search bar row ─────────────────────────── */
  .search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1.5rem 0 0;
  }

  .search-row .search-wrap {
    flex: 1;
    max-width: 100%;
  }

  /* ── Rarity pills row ───────────────────────── */
  .pills-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 1rem 0 0;
  }

  /* ── Advanced filters row ───────────────────── */
  .filters-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem 0 0;
  }

  .controls {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }

  .search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 360px;
  }

  .search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
  }

  input[type="text"] {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    padding: 10px 14px 10px 38px;
    outline: none;
    transition: border-color 0.2s;
  }
  input[type="text"]:focus { border-color: var(--accent); }
  input[type="text"]::placeholder { color: var(--muted); }

  select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888890' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  select:focus { border-color: var(--accent); }

  /* Menu + bouton d'ordre groupés */
  .filter-cell { display: inline-flex; align-items: stretch; gap: 4px; }
  .order-btn {
    padding: 0 9px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
  }
  .order-btn:hover { color: var(--text); border-color: rgba(var(--fg-rgb),0.2); }

  /* Filtres enregistrés (presets) */
  .presets-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0.85rem 0 0; }
  .presets-row select { min-width: 200px; }
  .preset-btn {
    padding: 9px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
  }
  .preset-btn:hover { color: var(--text); border-color: rgba(var(--fg-rgb),0.2); }

  .rarity-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .pill {
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    transition: all 0.18s;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
  }
  .pill:hover { border-color: rgba(var(--fg-rgb),0.2); color: var(--text); }
  /* Pastilles de filtre alignées sur l'échelle des balls */
  /* Pastilles de filtre bicolores (dualité de chaque ball) */
  .pill.active-promo {
    background: var(--ball-poke);
    box-shadow: inset 0 -2px 0 var(--ball-poke-2);
    border-color: var(--ball-poke);
    color: white;
  }

  .pill.active-ir {
    background: var(--ball-super);
    box-shadow: inset 0 -2px 0 var(--ball-super-2);
    border-color: var(--ball-super);
    color: white;
  }

  .pill.active-alt {
    background: var(--ball-hyper);
    box-shadow: inset 0 -2px 0 var(--ball-hyper-2);
    border-color: var(--ball-hyper);
    color: white;
  }

  .pill.active-special {
    background: var(--ball-hyper);
    box-shadow: inset 0 -2px 0 var(--ball-hyper-2);
    border-color: var(--ball-hyper);
    color: white;
  }

  .pill.active-sir {
    background: var(--ball-master);
    box-shadow: inset 0 -2px 0 var(--ball-master-2);
    border-color: var(--ball-master);
    color: white;
  }
  .pill.active-all { background: rgba(var(--fg-rgb),0.07); border-color: rgba(var(--fg-rgb),0.3); color: var(--text); }

  /* stats-bar is now an inline info-box inside the filters-row */
  .stats-bar { display: none; } /* legacy hidden */

  .explore-info-box {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 14px;
    white-space: nowrap;
  }
  .stat-count {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
  }
  .stat-label { font-size: 12px; color: var(--muted); }
  .divider { width: 1px; height: 18px; background: var(--border); }

  /* Price pill inside info-box */
  .explore-price-total {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    display: none; /* shown only when prices visible */
  }
  .prices-shown .explore-price-total { display: block; }

  #grid, #coll-grid, #master-grid,
  #echange-give-grid, #echange-receive-grid, #echange-have-grid {
    max-width: 1200px;
    margin: 1.5rem auto 4rem;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
  }
  #master-grid { padding: 0; margin: 1.25rem 0 4rem; }
  #echange-give-grid, #echange-receive-grid, #echange-have-grid { padding: 0; margin: 0.75rem 0 2rem; }

  .section-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 1rem 0 0.15rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
  }

  .section-heading:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .section-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
  }

  .section-count {
    color: var(--muted);
    font-size: 12px;
  }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
  }
  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--fg-rgb),0.15);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  }

  .card-img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    background: var(--surface2);
  }

  /* Vignettes de carte : masquées tant que checkCardBack n'a pas confirmé que ce
     n'est pas un dos pokemontcg (640×892) → pas de flash du dos avant remplacement. */
  img[onload] { opacity: 0; transition: opacity 0.15s ease; }

  .image-placeholder {
    --ph-accent: rgba(var(--fg-rgb),0.32);
    width: 100%;
    aspect-ratio: 3/4;
    background:
      linear-gradient(160deg,
        color-mix(in srgb, var(--ph-accent) 18%, var(--surface2)),
        var(--surface2) 72%);
    border-top: 3px solid var(--ph-accent);
    color: var(--muted);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
  }

  .ph-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 16px;
  }

  .ph-num {
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(var(--fg-rgb),0.5);
  }

  .ph-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 0;
  }

  .placeholder-mark {
    width: 46px;
    height: 46px;
    border: 1px solid color-mix(in srgb, var(--ph-accent) 55%, transparent);
    background: color-mix(in srgb, var(--ph-accent) 16%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--ph-accent) 80%, var(--text));
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 800;
    flex: none;
  }

  .placeholder-title {
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ph-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .ph-set {
    font-size: 11px;
    font-weight: 600;
    color: rgba(var(--fg-rgb),0.62);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .placeholder-text {
    font-size: 10px;
    line-height: 1.3;
    opacity: 0.75;
  }

  .card-body {
    padding: 28px 10px 8px;
    position: relative;
    min-height: 56px;
  }

  .card-name {
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  .card-meta {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* .card-badge moved to collection section */
  /* Badges « Poké Ball » : pastille bicolore (couleur principale + bande basse) */
  .badge-promo   { background: var(--ball-poke);   box-shadow: inset 0 -2px 0 var(--ball-poke-2); }   /* Poké Ball */
  .badge-ir      { background: var(--ball-super);  box-shadow: inset 0 -2px 0 var(--ball-super-2); }  /* Super Ball */
  .badge-alt     { background: var(--ball-hyper);  box-shadow: inset 0 -2px 0 var(--ball-hyper-2); border: 1px solid rgba(var(--fg-rgb),0.28); } /* Hyper Ball */
  .badge-special { background: var(--ball-hyper);  box-shadow: inset 0 -2px 0 var(--ball-hyper-2); border: 1px solid rgba(var(--fg-rgb),0.28); } /* Hyper Ball */
  .badge-sir     { background: var(--ball-master); box-shadow: inset 0 -2px 0 var(--ball-master-2); } /* Master Ball */

  .skeleton {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    animation: pulse 1.4s ease-in-out infinite;
  }
  .skeleton-img  { width: 100%; aspect-ratio: 3/4; background: var(--surface2); }
  .skeleton-line { height: 12px; background: var(--surface2); border-radius: 4px; margin: 10px 12px 4px; }
  .skeleton-line.short { width: 60%; margin-bottom: 10px; }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
  }

  #empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--muted);
    display: none;
  }
  #empty svg { display: block; margin: 0 auto 1rem; opacity: 0.3; }

  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 5rem;
    overscroll-behavior: contain;
  }
  .modal-overlay.open { display: flex; }

  /* Verrou de défilement quand une modale est ouverte (voir lockBodyScroll) */
  body.modal-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }

  .modal {
    background: var(--surface);
    border: 1px solid rgba(var(--fg-rgb),0.12);
    border-radius: 20px;
    max-width: min(1100px, calc(100vw - 10rem));
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(320px, 620px) minmax(300px, 380px);
    max-height: 94vh;
    position: relative;
  }

  .modal-image-wrap {
    background: var(--surface2);
    min-height: min(78vh, 760px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
  }

  .modal-img {
    width: 100%;
    max-height: min(84vh, 780px);
    object-fit: contain;
  }

  .modal-placeholder {
    width: min(420px, 100%);
    max-width: 100%;
    aspect-ratio: 3/4;
    border: 1px solid rgba(var(--fg-rgb),0.08);
    border-top: 4px solid var(--ph-accent);
    border-radius: 14px;
    padding: 22px;
    gap: 12px;
  }

  .modal-placeholder .ph-num {
    font-size: 14px;
  }

  .modal-placeholder .ph-center {
    gap: 16px;
  }

  .modal-placeholder .placeholder-mark {
    width: 72px;
    height: 72px;
    font-size: 30px;
  }

  .modal-placeholder .placeholder-title {
    font-size: 20px;
    -webkit-line-clamp: 3;
  }

  .modal-placeholder .ph-set {
    font-size: 14px;
  }

  .modal-placeholder .placeholder-text {
    font-size: 13px;
  }

  .modal-info {
    padding: 1.75rem 1.75rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal-name {
    font-family: 'Syne', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .modal-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
  }
  .modal-row:last-child { border-bottom: none; }
  .modal-row .key   { color: var(--muted); }
  .modal-row .val   { font-weight: 500; text-align: right; }
  .modal-artist-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--accent2);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .modal-artist-link:hover { color: var(--text); }

  .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 2;
  }

  .modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    border: 1px solid rgba(var(--fg-rgb),0.18);
    border-radius: 50%;
    background: rgba(22,22,26,0.88);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    line-height: 1;
    z-index: 101;
  }
  .modal-nav:hover { border-color: rgba(var(--fg-rgb),0.38); background: var(--surface2); }
  .modal-prev { left: calc(50% - min(550px, calc((100vw - 10rem) / 2)) - 5rem); }
  .modal-next { right: calc(50% - min(550px, calc((100vw - 10rem) / 2)) - 5rem); }

  .modal-position {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 0.55rem;
  }

  @media (max-width: 760px) {
    .modal-overlay { padding: 0.75rem; }
    .modal {
      grid-template-columns: 1fr;
      max-width: 100%;
      max-height: 92vh;
      /* La modale entière défile (image + infos) au lieu d'un panneau coupé. */
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .modal-image-wrap {
      min-height: auto;
      height: auto;
      padding: 1rem;
    }
    .modal-img { max-height: 64vh; }
    .modal-info { padding: 1.1rem 1.25rem 1.25rem; overflow: visible; }
    .modal-nav {
      width: 52px;
      height: 52px;
      font-size: 34px;
    }
    .modal-prev { left: 1rem; }
    .modal-next { right: 1rem; }
  }

  .load-more-wrap {
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 0 2rem;
    display: flex;
    justify-content: center;
  }
  #load-more { display: none !important; }

  .scroll-sentinel {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .scroll-loader {
    display: none;
    gap: 6px;
    align-items: center;
  }
  .scroll-loader.visible { display: flex; }
  .scroll-loader span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    animation: bounce 1.2s infinite ease-in-out;
  }
  .scroll-loader span:nth-child(2) { animation-delay: 0.2s; }
  .scroll-loader span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1);   opacity: 1; }
  }

  .error-msg {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
    font-size: 13px;
    color: #f08080;
    text-align: center;
    display: none;
  }

  /* card-actions: supprimés de la grille, gardés uniquement dans la modale */
  .card-actions { display: none !important; }
  .card-status-dot { display: none !important; }

  .card.owned  { border-color: rgba(var(--accent-rgb),0.45); }
  .card.wanted { border-color: rgba(var(--accent2-rgb),0.45); }
  .card.owned.wanted { border-color: rgba(var(--accent-rgb),0.45); box-shadow: inset 3px 0 0 var(--accent2); }

  /* Prix affiché sur la carte */
  /* Badge — inside card-body top-left */
  .card-badge {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px 3px;
    border-radius: 100px;
    font-family: 'Syne', sans-serif;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  }

  /* Price pill — inside card-body top-right */
  .card-price-tag {
    position: absolute;
    top: 5px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .card-price-pill {
    border-radius: 100px;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    display: none;
    line-height: 1.4;
  }
  .card.owned  .card-price-pill.owned-price,
  .card.wanted .card-price-pill.wanted-price,
  .card.trade  .card-price-pill.sell-price { display: var(--prices-display, inline-block); }

  /* Trade badge on card */
  .card.trade::after {
    content: '⇄';
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(var(--slate-rgb),0.2);
    border: 1px solid rgba(var(--slate-rgb),0.4);
    color: var(--slate);
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 100px;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
  }
  .card-price-pill.owned-price  { color: var(--accent); background: rgba(var(--accent-rgb),0.12); }
  .card-price-pill.wanted-price { color: var(--accent2);       background: rgba(var(--accent2-rgb),0.12); }
  .card-price-pill.sell-price   { color: var(--slate); background: rgba(var(--slate-rgb),0.16); }

  /* Price input in modal */
  .price-input-wrap {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
  }
  .price-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .price-input-label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
  }
  .price-input {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 7px 10px;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
  }
  .price-input:focus { border-color: rgba(var(--fg-rgb),0.3); }
  .price-input::placeholder { color: var(--muted); }
  .price-input-save {
    align-self: flex-end;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
  }
  .price-input-save:hover { border-color: rgba(var(--fg-rgb),0.3); background: var(--surface2); }
  .price-input-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    display: none;
  }
  .price-input-section.visible { display: block; }
  .price-input-title {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 6px;
  }

  .collection-bar {
    max-width: 1200px;
    margin: 0.6rem auto 0;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .coll-filter-btn {
    padding: 5px 13px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-family: 'DM Sans', sans-serif;
    transition: all 0.18s;
    white-space: nowrap;
  }
  .coll-filter-btn:hover { color: var(--text); border-color: rgba(var(--fg-rgb),0.2); }
  .coll-filter-btn.active-owned  { background: rgba(var(--accent-rgb),0.12); border-color: var(--accent); color: var(--accent); }
  .coll-filter-btn.active-wanted { background: rgba(var(--accent2-rgb),0.12); border-color: var(--accent2); color: var(--accent2); }
  .coll-filter-btn.active-trade  { background: rgba(var(--slate-rgb),0.12); border-color: var(--slate); color: var(--slate); }
  .card.trade { box-shadow: inset 0 0 0 2px rgba(var(--slate-rgb),0.5); }
  .coll-stat { font-size: 12px; color: var(--muted); }
  .coll-stat b { color: var(--text); font-weight: 600; }

  .modal-collection-btns {
    display: flex;
    gap: 8px;
    margin: 1rem 0 0.5rem;
  }
  .modal-coll-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Syne', sans-serif;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--muted);
    transition: all 0.18s;
    letter-spacing: 0.02em;
  }
  .modal-coll-btn:hover { color: var(--text); border-color: rgba(var(--fg-rgb),0.2); }
  .modal-coll-btn.active-owned  { background: rgba(var(--accent-rgb),0.14); border-color: var(--accent); color: var(--accent); }
  .modal-coll-btn.active-wanted { background: rgba(var(--accent2-rgb),0.14); border-color: var(--accent2); color: var(--accent2); }
  .modal-coll-btn.active-trade  { background: rgba(var(--slate-rgb),0.14); border-color: var(--slate); color: var(--slate); }

  /* ── Prix Cardmarket ───────────────────────────────── */
  .price-block {
    margin: 1rem 0 0.25rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px 10px;
  }
  .price-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .price-source {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .price-updated {
    font-size: 10px;
    color: var(--muted);
    opacity: 0.65;
  }
  .price-main {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .price-tile {
    flex: 1;
    min-width: 72px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
  }
  .price-tile-label {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 3px;
    font-weight: 500;
  }
  .price-tile-value {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
  }
  .price-tile.highlight .price-tile-value { color: var(--accent); }
  .price-history {
    display: flex;
    gap: 6px;
    font-size: 12px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .price-hist-item { color: var(--muted); }
  .price-hist-item b { color: var(--text); font-weight: 600; }
  .price-loading {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    padding: 12px 0 4px;
    animation: pulse 1.4s infinite;
  }
  .price-na {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 10px 0 4px;
    font-style: italic;
  }
  .price-trend-up   { color: #7af07a; }
  .price-trend-down { color: #f07a7a; }
  /* ── fin Prix ──────────────────────────────────────── */

  .btn-cardmarket {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 14px;
    border-radius: var(--radius);
    border: 1px solid rgba(0, 115, 170, 0.45);
    background: rgba(0, 115, 170, 0.1);
    color: #4db8f0;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s;
  }
  .btn-cardmarket:hover {
    background: rgba(0, 115, 170, 0.22);
    border-color: rgba(0, 115, 170, 0.7);
  }
  .btn-cardmarket svg { flex-shrink: 0; }

  /* ── Toast ────────────────────────────────────────── */
  #toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--surface2);
    border: 1px solid rgba(var(--fg-rgb),0.12);
    border-radius: 100px;
    padding: 9px 20px;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    color: var(--text);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s, transform 0.22s;
    white-space: nowrap;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  }
  #toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  #toast.toast-ok   { border-color: rgba(var(--accent-rgb),0.4); color: var(--accent); }
  #toast.toast-info { border-color: rgba(var(--fg-rgb),0.18); }

  .config-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(8px);
  }
  .config-overlay.open { display: flex; }

  .config-modal {
    width: min(680px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: var(--surface);
    border: 1px solid rgba(var(--fg-rgb),0.14);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.65);
  }

  .config-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  .config-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
  }
  .config-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
  }

  .config-body {
    padding: 1rem 1.35rem 1.35rem;
    display: grid;
    gap: 1rem;
  }
  .config-note {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
  }
  .config-textarea {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    padding: 0.9rem;
    outline: none;
  }
  .config-textarea:focus { border-color: var(--accent); }

  .config-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* ── Synchronisation entre appareils ──────────────────────── */
  .config-sync {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    padding: 0.9rem 1rem;
    display: flex; flex-direction: column; gap: 10px;
  }
  .config-sync-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 0.95rem; }
  .config-sync-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .sync-input {
    flex: 1; min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--input-bg); color: var(--text);
    font-size: 13px; outline: none;
  }
  .sync-input:focus { border-color: var(--accent); }
  .sync-code {
    font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.25rem;
    letter-spacing: 0.12em; color: var(--accent);
    padding: 4px 12px; border-radius: 8px; background: rgba(var(--accent-rgb),0.12);
    user-select: all;
  }
  .config-sync-hint { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
  .config-sync-keyline { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .config-sync-keylabel { font-size: 12px; color: var(--muted); }
  .config-sync-status { font-size: 11px; color: var(--accent); margin-bottom: 8px; min-height: 14px; }
  .config-sync-or { font-size: 11px; color: var(--muted); }
  .sync-mini { padding: 6px 10px; font-size: 12px; }
  .config-sync-oneoff { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
  .config-sync-oneoff summary { font-size: 12px; color: var(--muted); cursor: pointer; margin-bottom: 8px; }

  /* ── Panneau d'ajout / scan de cartes ─────────────────────── */
  .scan-capture-btn {
    width: 100%;
    margin-top: 10px;
    padding: 15px;
    border-radius: var(--radius);
    border: none;
    background: var(--accent);
    color: #0d0d0f;
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
  }
  .scan-capture-btn:hover { filter: brightness(1.06); }
  .scan-capture-btn:active { transform: scale(0.98); }
  .scan-context { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
  .scan-context b { color: var(--text); }
  .scan-camera-slot { margin-bottom: 12px; }
  .scan-cam-btn {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px dashed var(--border);
    background: var(--surface2);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  .scan-cam-btn:hover { border-color: rgba(var(--accent-rgb),0.5); }
  .scan-cam-view {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 52vh;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
  }
  .scan-cam-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .scan-cam-frame {
    position: absolute;
    inset: 8% 12%;
    border: 2px solid rgba(255,255,255,0.85);
    border-radius: 10px;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0.25);
    pointer-events: none;
  }
  .scan-cam-status {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    pointer-events: none;
  }
  .scan-manual { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .scan-manual label { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .scan-manual input {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 15px;
  }
  .scan-fields { display: flex; gap: 8px; flex-wrap: wrap; }
  .scan-field { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
  .scan-field-name { flex: 1 1 140px; }
  .scan-field label { font-size: 11px; color: var(--muted); font-weight: 600; }
  .scan-field input {
    width: 90px;
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 15px;
  }
  .scan-field-name input { width: 100%; }
  .scan-hint { font-size: 11px; color: var(--muted); margin: 8px 0 4px; line-height: 1.4; }
  .scan-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    max-height: 48vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .scan-empty { font-size: 13px; color: var(--muted); padding: 12px; text-align: center; }
  .scan-cand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
  }
  .scan-cand:hover { border-color: rgba(var(--accent-rgb),0.5); background: var(--surface2); }
  .scan-cand.owned { opacity: 0.55; cursor: default; }
  .scan-cand-img { width: 42px; height: 58px; object-fit: cover; border-radius: 4px; flex: none; background: var(--surface2); }
  .scan-cand-noimg {
    width: 42px; height: 58px; border-radius: 4px; flex: none;
    background: var(--surface2); color: var(--muted);
    display: flex; align-items: center; justify-content: center; font-weight: 800;
  }
  .scan-cand-info { flex: 1; min-width: 0; }
  .scan-cand-name {
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .scan-cand-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scan-cand-add {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb),0.14); color: var(--accent);
    font-weight: 800; font-size: 16px;
  }
  .scan-cand.owned .scan-cand-add { background: rgba(var(--fg-rgb),0.1); color: var(--muted); }
  .scan-session { font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 10px; min-height: 16px; }
  .config-btn {
    padding: 9px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .config-btn:hover { border-color: rgba(var(--fg-rgb),0.25); }
  .config-btn.primary {
    background: rgba(var(--accent-rgb),0.14);
    border-color: rgba(var(--accent-rgb),0.45);
    color: var(--accent);
  }
  .config-file {
    display: none;
  }

  .modal-share {
    position: absolute;
    top: 1rem;
    right: 3.75rem;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.18s;
  }
  .modal-share:hover { background: rgba(var(--fg-rgb),0.12); }

  /* Type de série (catalogue) + langue de la carte */
  .catalog-toggle {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
  }
  .hdr-select {
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    max-width: 150px;
    transition: background 0.15s;
  }
  .hdr-select:hover { background: var(--surface2); }
  .hdr-select option:disabled { color: var(--muted); }

  /* Drapeaux des langues possédées, en surimpression sur la vignette */
  .card-langs {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    gap: 2px;
    z-index: 2;
    pointer-events: none;
  }
  .card-lang-flag {
    font-size: 12px;
    line-height: 1;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  }
  /* Badge « ×N » (plusieurs exemplaires) — bas-gauche de la vignette */
  .card-acq {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    font-size: 12px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 6px;
    background: rgba(0,0,0,0.5);
    pointer-events: none;
  }
  .card-qty {
    position: absolute;
    bottom: 72px;
    left: 6px;
    z-index: 2;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    pointer-events: none;
  }

  /* Compteur d'exemplaires dans la modale */
  .modal-qty {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 0;
  }
  .modal-qty.visible { display: flex; }
  .modal-qty-label { font-size: 13px; color: var(--muted); font-weight: 600; }
  .modal-qty-stepper { display: flex; align-items: center; gap: 12px; }
  .qty-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 20px; font-weight: 700; line-height: 1;
    cursor: pointer;
  }
  .qty-btn:hover { border-color: rgba(var(--accent-rgb),0.5); }
  .qty-val { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; min-width: 22px; text-align: center; }

  /* Ligne langue dans la modale (langue éditée + langues possédées) */
  .modal-lang-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .modal-lang-active {
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 100px;
    background: var(--surface2);
    color: var(--text);
  }
  .modal-lang-owned { font-size: 11px; color: var(--muted); }

  /* ── 3D card viewer ─────────────────────────── */
  .card-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(12px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
  }
  .card-viewer-overlay.open { display: flex; }
  .card-viewer-scene {
    perspective: 1300px;
    width: min(96vw, 62vh, 640px);
    aspect-ratio: 63/88;
    cursor: grab;
    user-select: none;
    animation: viewerIn 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
  }
  @keyframes viewerIn {
    from { transform: scale(0.82) translateY(14px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  .card-viewer-scene:active { cursor: grabbing; }
  .card-viewer-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.08s ease-out;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
      0 50px 120px rgba(0,0,0,0.75),
      0 0 70px rgba(120,170,255,0.18),
      0 0 0 1px rgba(var(--fg-rgb),0.10);
  }
  .card-viewer-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    pointer-events: none;
  }
  /* Reflet spéculaire qui suit la rotation (vars posées par le JS au drag) */
  .card-viewer-inner::after {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 18px;
    background: radial-gradient(55% 45% at var(--glare-x, 50%) var(--glare-y, 36%),
      rgba(255,255,255,0.34), rgba(255,255,255,0.06) 45%, transparent 68%);
    mix-blend-mode: screen;
  }
  /* Balayage lumineux une fois à l'ouverture (effet « carte holo ») */
  .card-viewer-inner::before {
    content: '';
    position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 18px;
    background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.18) 46%,
      rgba(255,255,255,0.42) 50%, rgba(255,255,255,0.18) 54%, transparent 68%);
    background-size: 250% 100%;
    background-position: 140% 0;
    mix-blend-mode: screen;
    opacity: 0;
  }
  .card-viewer-overlay.open .card-viewer-inner::before {
    animation: cardSweep 1s ease-out 0.25s 1;
  }
  @keyframes cardSweep {
    0%   { background-position: 150% 0; opacity: 1; }
    100% { background-position: -50% 0; opacity: 0; }
  }
  /* Foil holographique : bande iridescente qui balaie la carte selon l'angle
     (position pilotée par --glare-x/--glare-y posées au drag). color-dodge + faible
     opacité → l'arc-en-ciel ne ressort que sur les zones claires, comme une vraie holo. */
  .card-viewer-foil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 18px;
    background: linear-gradient(115deg,
      transparent 18%,
      rgba(255,40,140,0.55) 33%,
      rgba(255,210,60,0.50) 42%,
      rgba(70,255,180,0.50) 50%,
      rgba(60,180,255,0.50) 58%,
      rgba(200,70,255,0.55) 67%,
      transparent 82%);
    background-size: 230% 230%;
    background-position: var(--glare-x, 50%) var(--glare-y, 50%);
    mix-blend-mode: color-dodge;
    opacity: 0.16;
    filter: saturate(1.5);
  }
  /* Fines stries holo qui scintillent (très discret) */
  .card-viewer-foil::after {
    content: ''; position: absolute; inset: 0; border-radius: 18px;
    background: repeating-linear-gradient(100deg,
      rgba(255,255,255,0.06) 0 2px, transparent 2px 6px);
    mix-blend-mode: overlay; opacity: 0.5;
  }
  .card-viewer-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: rgba(var(--fg-rgb),0.35);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
  }

  /* ── Nav tabs ───────────────────────────────── */
  .app-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-top: 1.5rem;
  }
  .nav-tab {
    padding: 10px 22px;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.18s;
    margin-bottom: -1px;
  }
  .nav-tab:hover { color: var(--text); }
  .nav-tab.active { color: var(--text); border-bottom-color: var(--accent); }

  /* ── Sous-navigation (section Ma Collection) ── */
  .sub-nav {
    display: flex;
    gap: 6px;
    margin-top: 0.85rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sub-nav[hidden] { display: none; }
  .sub-nav::-webkit-scrollbar { display: none; }
  .sub-tab {
    padding: 6px 14px;
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.18s;
  }
  .sub-tab:hover { color: var(--text); border-color: rgba(var(--fg-rgb),0.2); }
  .sub-tab.active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb),0.1); }

  /* ── Barre catalogue (type de série + langue + prix) ── */
  .catalog-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0.85rem;
    flex-wrap: wrap;
  }
  .catalog-bar[hidden] { display: none; }

  /* ── Réglages ─────────────────────────────── */
  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
  }
  .settings-row:last-child { border-bottom: none; }
  .settings-row-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: var(--text); }
  .settings-row-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .settings-row .config-btn { flex-shrink: 0; }

  /* ── Réception : À obtenir → Collection ─────── */
  .receive-common { display: flex; gap: 12px; flex-wrap: wrap; }
  .receive-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
  .receive-field input, .receive-field select {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--input-bg); color: var(--text); font-size: 13px;
  }
  .receive-actions-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .receive-total { margin-left: auto; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: var(--accent); }
  .receive-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
  .receive-row {
    display: flex; align-items: center; gap: 10px; padding: 6px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  }
  .receive-thumb { width: 38px; aspect-ratio: 3/4; object-fit: cover; border-radius: 5px; flex-shrink: 0; background: var(--surface2); }
  .receive-thumb.noimg { display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 700; }
  .receive-info { flex: 1; min-width: 0; }
  .receive-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .receive-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .receive-price { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .receive-price-input {
    width: 74px; padding: 7px 8px; text-align: right;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--input-bg); color: var(--text); font-size: 13px;
  }
  .receive-price-input:focus { border-color: var(--accent); outline: none; }
  .receive-eur { font-size: 12px; color: var(--muted); }

  /* Édition acquisition (date + source) dans le détail */
  .acq-edit { display: flex; gap: 10px; margin-top: 8px; }
  .acq-edit-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }

  /* ── Bilan (stats) ──────────────────────────── */
  .stats-view { display: none; max-width: 1000px; margin: 0 auto; padding: 1.25rem 2rem 4rem; }
  .stats-view.active { display: block; }
  .stats-h { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.3rem; margin-bottom: 1rem; }
  .stats-hint { font-size: 12px; color: var(--muted); margin-bottom: 1rem; }
  .stats-empty { color: var(--muted); padding: 3rem 0; text-align: center; }
  .stats-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
  .stat-kpi {
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
    padding: 16px; display: flex; flex-direction: column; gap: 4px;
  }
  .stat-kpi-val { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1; }
  .stat-kpi-lbl { font-size: 12px; color: var(--muted); }
  .stat-kpi-lbl span { display: block; font-size: 11px; opacity: 0.8; margin-top: 2px; }
  .stat-kpi.pos .stat-kpi-val { color: #33b56a; }
  .stat-kpi.neg .stat-kpi-val { color: #e05a5a; }
  .stats-block {
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
    padding: 14px 16px; margin-bottom: 1rem;
  }
  .stats-block-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; margin-bottom: 10px; }
  .stats-bar-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
  .stats-bar-lbl { flex: 0 0 30%; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stats-bar-track { flex: 1; height: 8px; border-radius: 100px; background: var(--surface2); overflow: hidden; }
  .stats-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 100px; }
  .stats-bar-val { flex: 0 0 auto; font-family: 'Syne', sans-serif; font-weight: 700; color: var(--muted); white-space: nowrap; }

  /* ── Collection view ────────────────────────── */
  .collection-view { display: none; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
  .collection-view.active { display: block; }
  .explore-view { display: block; }
  .explore-view.hidden { display: none; }

  .coll-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1.25rem 0 1rem;
    flex-wrap: wrap;
  }
  .coll-tab-btn {
    padding: 7px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-family: 'DM Sans', sans-serif;
    transition: all 0.18s;
    white-space: nowrap;
  }
  .coll-tab-btn:hover { color: var(--text); border-color: rgba(var(--fg-rgb),0.2); }
  .coll-tab-btn.active-owned  { background: rgba(var(--accent-rgb),0.12); border-color: var(--accent); color: var(--accent); }
  .coll-tab-btn.active-wanted { background: rgba(var(--accent2-rgb),0.12); border-color: var(--accent2); color: var(--accent2); }
  .coll-tab-btn.active-trade  { background: rgba(var(--slate-rgb),0.12); border-color: var(--slate); color: var(--slate); }

  .coll-stats {
    margin-left: auto;
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--muted);
    flex-wrap: wrap;
  }
  .coll-stats span b { color: var(--text); font-weight: 700; }
  .coll-stats .sep { color: var(--border); }

  .coll-search-row {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
  }
  .coll-search-row .search-wrap { max-width: 400px; }

  .coll-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--muted);
  }
  .coll-empty svg { display: block; margin: 0 auto 1rem; opacity: 0.25; }
  .coll-empty p { font-size: 14px; margin-bottom: 0.5rem; }
  .coll-empty small { font-size: 12px; opacity: 0.6; }

  /* ── Bouton actualiser (rotation) ───────────── */
  @keyframes icon-spin { to { transform: rotate(360deg); } }
  .icon-btn.spinning svg { animation: icon-spin 0.8s linear infinite; }

  /* ── Master Set / complétion ────────────────── */
  .master-view { display: none; max-width: 1200px; margin: 0 auto; padding: 1.25rem 2rem 0; }
  .master-view.active { display: block; }

  .master-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
  }
  .master-mode-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
  }
  .master-mode-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    background: var(--surface);
    color: var(--muted);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
  }
  .master-mode-btn:hover { color: var(--text); background: var(--surface2); }
  .master-mode-btn.active { background: var(--surface2); color: var(--accent); }
  .master-search-wrap { max-width: 360px; flex: 1; }

  #master-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 1.25rem 0 4rem;
  }
  .master-row {
    position: relative;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 15px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    display: block;
    width: 100%;
  }
  .master-row:hover { transform: translateY(-2px); border-color: rgba(var(--fg-rgb),0.18); }
  .master-row.done { border-color: rgba(var(--accent-rgb),0.4); }
  .master-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
  }
  .master-row-flag, .master-detail-flag {
    font-size: 0.85em;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--surface2);
    color: var(--text);
  }
  .master-row-label {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .master-row-count { font-size: 12px; color: var(--muted); font-weight: 600; flex-shrink: 0; }
  .master-row.done .master-row-count { color: var(--accent); }
  .master-bar-track {
    height: 6px;
    background: var(--surface2);
    border-radius: 100px;
    overflow: hidden;
  }
  .master-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 100px;
    transition: width 0.3s;
  }
  .master-empty { color: var(--muted); text-align: center; padding: 3rem; grid-column: 1/-1; }

  .master-detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 1.25rem 0 1rem;
    flex-wrap: wrap;
  }
  .master-back {
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
  }
  .master-back:hover { border-color: rgba(var(--fg-rgb),0.25); }
  .master-detail-info { flex: 1; min-width: 200px; }
  .master-detail-title { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 800; }
  .master-detail-progress { font-size: 13px; color: var(--muted); margin-top: 4px; max-width: 420px; }
  .master-progress-num { color: var(--text); font-weight: 700; font-family: 'Syne', sans-serif; }
  .master-progress-pct { color: var(--accent); font-weight: 700; }

  /* ── Tag box d'exclusion (par master set) ───── */
  .master-exclude { position: relative; display: inline-block; margin-bottom: 8px; max-width: 100%; }
  .master-exclude-toggle {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text); cursor: pointer; font-size: 12px;
    transition: border-color 0.15s;
  }
  .master-exclude-toggle:hover { border-color: rgba(var(--fg-rgb),0.25); }
  .mex-label { font-weight: 600; color: var(--muted); white-space: nowrap; }
  .mex-current { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
  .mex-tag {
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px;
    background: rgba(var(--accent-rgb),0.14); color: var(--accent);
    padding: 2px 7px; border-radius: 100px; white-space: nowrap;
  }
  .mex-none { color: var(--muted); font-style: italic; }
  .mex-caret { color: var(--muted); margin-left: auto; }
  .master-exclude-menu {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 30;
    min-width: 230px; max-height: 320px; overflow-y: auto;
    background: var(--surface); border: 1px solid rgba(var(--fg-rgb),0.16);
    border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,0.4); padding: 5px;
  }
  .master-exclude-menu[hidden] { display: none; }
  .mex-opt {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border: none; background: none; cursor: pointer;
    border-radius: 8px; color: var(--text); font-size: 13px; text-align: left;
  }
  .mex-opt:hover { background: var(--surface2); }
  .mex-check {
    width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px;
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: transparent;
  }
  .mex-opt.on .mex-check { background: var(--accent); border-color: var(--accent); color: #14160c; }
  .mex-opt-label { flex: 1; font-family: 'Syne', sans-serif; font-weight: 600; }
  .mex-opt-count { color: var(--muted); font-size: 11px; font-weight: 700; }
  .master-excluded-note { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
  /* dans le master set, on atténue les cartes non possédées */
  #master-grid .card:not(.owned) { opacity: 0.45; transition: opacity 0.18s; }
  #master-grid .card:not(.owned):hover { opacity: 1; }

  /* Master sets en cours (section épinglée) */
  .master-section-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.05rem; margin: 1.25rem 0 0.6rem; }
  .master-started-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 0.5rem; }
  .master-row.started { border-color: rgba(var(--accent2-rgb),0.4); padding-right: 36px; }
  .master-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .master-remove:hover { color: #f08080; border-color: rgba(240,128,128,0.5); }

  /* Bouton démarrer / retirer dans le détail */
  .master-detail-actions { margin-left: auto; flex-shrink: 0; display: flex; gap: 8px; flex-wrap: wrap; }
  .master-detail-sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
  .master-start-btn {
    padding: 9px 16px;
    border-radius: var(--radius);
    border: 1px solid rgba(var(--accent2-rgb),0.45);
    background: rgba(var(--accent2-rgb),0.12);
    color: var(--accent2);
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }
  .master-start-btn:hover { background: rgba(var(--accent2-rgb),0.2); }
  .master-start-btn.started { border-color: rgba(var(--accent-rgb),0.45); background: rgba(var(--accent-rgb),0.12); color: var(--accent); }

  /* ── Échange ────────────────────────────────── */
  .echange-view { display: none; max-width: 1200px; margin: 0 auto; padding: 1.25rem 2rem 4rem; }
  .echange-view.active { display: block; }

  /* ── Classeur ─────────────────────────────────── */
  .binder-view { display: none; max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 4rem; text-align: center; }
  .binder-view.active { display: block; }

  /* ── Scène 3D du classeur (Phase A) ─────────── */
  .binder-stage { position: relative; display: grid; place-items: center; perspective: 2200px; min-height: 58vh; margin-bottom: 1rem; }
  .binder-cover, .binder-spread { grid-area: 1 / 1; }

  .binder-cover {
    position: relative;
    /* Calé sur la double-page ouverte : largeur = une demi-double-page (pli au centre des
       anneaux) ; hauteur = hauteur exacte d'une page = 4/3 × largeur de carte × 3 + gaps.
       Formule (2W − 70px)/3 dérivée de : page padding 10, grid padding 4, gaps 7, cartes 3/4. */
    height: calc((min(94vw, 1060px) * 2 - 70px) / 3); width: calc(min(94vw, 1060px) / 2);
    border: none; background: transparent; cursor: pointer; padding: 0;
    transform-origin: 0% center; z-index: 2;
    transition: transform 0.8s cubic-bezier(.2,.7,.15,1), opacity 0.45s ease 0.3s;
  }
  /* Avant l'ouverture : le classeur glisse vers la droite, sur la future page de droite */
  .binder-view.sliding .binder-cover { transform: translateX(calc(min(94vw, 1060px) / 4)); }
  .binder-cover-svg {
    width: 100%; height: 100%; display: block;
    filter: drop-shadow(0 26px 42px rgba(0,0,0,0.5));
  }

  /* Zoom d'une page */
  .binder-zoom-btn {
    position: absolute; top: 4px; right: 4px; z-index: 3;
    width: 26px; height: 26px; border: none; border-radius: 7px;
    background: rgba(0,0,0,0.4); color: #fff; font-size: 14px; cursor: pointer; opacity: 0.72;
  }
  .binder-zoom-btn:hover { opacity: 1; }
  .binder-zoom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: #141519; padding: 8px; border-radius: 8px; }
  .binder-zoom-grid .binder-slot { aspect-ratio: 3 / 4; }
  /* Ouverture : la couverture pivote autour de la reliure (bord gauche, au centre des
     anneaux) et se rabat sur la page de gauche, puis s'estompe pour la dévoiler. */
  .binder-view.open .binder-cover {
    transform: translateX(calc(min(94vw, 1060px) / 4)) rotateY(-180deg);
    opacity: 0; pointer-events: none;
  }

  /* La fermeture éclair n'est jamais dessinée. La languette sort de SOUS le rebord relevé
     (calque .binder-cover-lip posé au-dessus) : sa base + le curseur métal restent cachés,
     seule la partie extérieure, longue, dépasse sur la face. Elle reste perpendiculaire au
     bord et le longe (haut → droite), puis disparaît à droite. Pivot = curseur, sous le rebord. */
  .binder-cover-lip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
  .binder-zip { position: absolute; inset: 0; pointer-events: none; }
  /* La languette pointe vers l'EXTÉRIEUR (elle dépasse du bord) ; le curseur métal est
     à la base, sous le rebord (caché). Perpendiculaire : bord haut 180° (vers le haut),
     côté droit 270° (vers la droite). Le bout libre (fenêtre) est à l'extérieur. */
  .binder-zip-pull {
    position: absolute; left: 14.04%; top: 4.38%;
    transform-origin: 50% 8px; transform: translate(-50%, -8px) rotate(180deg);
    opacity: 0;   /* invisible au repos */
    width: 20px; height: 72px; border-radius: 4px 4px 9px 9px;
    background: linear-gradient(180deg, rgba(182,236,115,0.97), rgba(126,194,58,0.95) 62%, rgba(80,140,32,0.97));
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.3);
  }
  .binder-zip-pull::before {  /* fenêtre du plastique, vers le bout libre (extérieur) */
    content: ''; position: absolute; top: 53px; left: 50%; transform: translateX(-50%);
    width: 9px; height: 16px; border-radius: 4px;
    background: rgba(0,0,0,0.35); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  }
  .binder-zip-pull::after {  /* curseur métal à la base (côté pivot), reste sous le rebord */
    content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 16px; border-radius: 4px;
    background: linear-gradient(180deg, #4a4c53, #191a1f);
  }
  .binder-view.zipping .binder-zip-pull { animation: zipAround var(--zip-ms, 1.65s) linear forwards; }
  @keyframes zipAround {  /* sort de sous le rebord (haut-gauche), fait le tour haut → droite →
                             bas et disparaît en bas-gauche ; pointe vers l'extérieur, pivote
                             180°(haut) → 270°(droite) → 360°(bas). Timing linear = coins fluides. */
    0%    { left: 14.04%; top: 4.38%;  opacity: 0; transform: translate(-50%,-8px) rotate(180deg); }
    7%    { left: 14.04%; top: 4.38%;  opacity: 1; transform: translate(-50%,-8px) rotate(180deg); }
    33%   { left: 87.72%; top: 4.38%;             transform: translate(-50%,-8px) rotate(180deg); }   /* longe le haut */
    36%   { left: 92.63%; top: 9.38%;            transform: translate(-50%,-8px) rotate(270deg); }    /* coin haut-droit */
    68%   { left: 92.63%; top: 89.38%;           transform: translate(-50%,-8px) rotate(270deg); }    /* descend la droite */
    71%   { left: 87.72%; top: 93.75%;           transform: translate(-50%,-8px) rotate(360deg); }    /* coin bas-droit */
    97%   { left: 14.04%; top: 93.75%; opacity: 1; transform: translate(-50%,-8px) rotate(360deg); }  /* longe le bas */
    100%  { left: 14.04%; top: 93.75%; opacity: 0; transform: translate(-50%,-8px) rotate(360deg); }  /* disparaît en bas-gauche */
  }
  @media (prefers-reduced-motion: reduce) { .binder-zip-pull { animation: none !important; opacity: 0; } }

  .binder-spread {
    position: relative;
    display: flex; align-items: stretch; justify-content: center;
    width: min(94vw, 1060px); z-index: 1;
    perspective: 1700px;
    opacity: 0; pointer-events: none;   /* déjà exactement en place : aucun zoom, la couverture se rabat dessus */
    transition: opacity 0.4s ease 0.1s;
  }
  /* Page qui tourne : l'angle est piloté en JS (boutons + glissé au doigt) */
  .binder-flip { position: absolute; z-index: 5; }
  .binder-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; box-shadow: 0 0 40px rgba(0,0,0,0.25); }
  .binder-flip.next .binder-flip-inner { transform-origin: left center; }
  .binder-flip.prev .binder-flip-inner { transform-origin: right center; }
  .binder-flip-face { position: absolute; inset: 0; backface-visibility: hidden; }
  .binder-flip-face.back { transform: rotateY(180deg); }
  .binder-flip-face .binder-page { width: 100%; height: 100%; }
  /* Ombrage de la page pendant le tour (opacité pilotée en JS selon l'angle) */
  .binder-flip-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3; }
  .binder-flip.next .binder-flip-shade { background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.15) 70%); }
  .binder-flip.prev .binder-flip-shade { background: linear-gradient(270deg, rgba(0,0,0,0.6), rgba(0,0,0,0.15) 70%); }
  /* En visualisation : geste horizontal réservé au feuilletage, scroll vertical natif */
  .binder-view:not(.editing) .binder-spread { touch-action: pan-y; }
  .binder-view.open .binder-spread { opacity: 1; transform: none; pointer-events: auto; }
  .binder-page {
    position: relative;
    flex: 1; min-width: 0; padding: 10px;
    background: linear-gradient(160deg, #202127, #141519);
  }
  .binder-page.left  { border-radius: 6px 2px 2px 6px; box-shadow: inset -22px 0 30px -18px rgba(0,0,0,0.7), inset 0 0 26px rgba(0,0,0,0.25); }
  .binder-page.right { border-radius: 2px 6px 6px 2px; box-shadow: inset 22px 0 30px -18px rgba(0,0,0,0.7), inset 0 0 26px rgba(0,0,0,0.25); }
  .binder-page.empty-page { background: #141519; }
  /* Milieu sobre : simple pliure centrale (creux sombre + léger reflet sur l'arête),
     plus d'anneaux métalliques. */
  .binder-rings {
    flex: 0 0 14px; align-self: stretch; position: relative;
    background: linear-gradient(90deg,
      rgba(0,0,0,0.6), rgba(0,0,0,0.28) 42%, rgba(0,0,0,0.42) 50%, rgba(0,0,0,0.28) 58%, rgba(0,0,0,0.6));
  }
  .binder-rings::before {  /* léger reflet sur l'arête de la pliure, estompé en haut/bas */
    content: ''; position: absolute; top: 4%; bottom: 4%; left: 50%; width: 1px;
    transform: translateX(-50%); border-radius: 2px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.06) 15%, rgba(255,255,255,0.06) 85%, transparent);
  }
  /* Effet brillant : une bande plus opaque balaie le texte de gauche à droite */
  .binder-hint {
    font-size: 15px; letter-spacing: 0.03em;
    margin-top: -0.25rem; margin-bottom: 1rem;
    color: rgba(var(--muted-rgb), 0.42);   /* repli lisible si le clip texte n'est pas supporté */
    background-image: linear-gradient(100deg,
      rgba(var(--muted-rgb), 0.42) 0%,
      rgba(var(--muted-rgb), 0.42) 40%,
      rgba(var(--muted-rgb), 0.95) 50%,
      rgba(var(--muted-rgb), 0.42) 60%,
      rgba(var(--muted-rgb), 0.42) 100%);
    background-size: 200% 100%; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: binderHintShine 3.2s linear infinite;
  }
  @keyframes binderHintShine {
    0%   { background-position: 150% center; }
    100% { background-position: -50% center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .binder-hint { animation: none; -webkit-text-fill-color: rgba(var(--muted-rgb), 0.55); }
  }
  .binder-close { color: var(--muted); }
  @media (prefers-reduced-motion: reduce) {
    .binder-cover, .binder-spread { transition: none; }
  }
  .binder-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 1.25rem; }
  .binder-nav {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font-size: 22px; line-height: 1; cursor: pointer;
  }
  .binder-nav:hover { background: var(--surface2); }
  .binder-pageinfo { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px; min-width: 110px; text-align: center; }
  .binder-addpage {
    border: 1px solid var(--border); background: var(--surface2); color: var(--text);
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px;
    padding: 8px 12px; border-radius: var(--radius); cursor: pointer;
  }
  .binder-addpage:hover { border-color: rgba(var(--accent-rgb),0.5); }
  .binder-palette { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; justify-content: center; margin-bottom: 1.1rem; }
  .binder-palette-col { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 300px; }
  .binder-palette-label { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
  .binder-palette-row { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
  .binder-swatch {
    width: 24px; height: 24px; border-radius: 50%;
    border: none; padding: 0; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform 0.1s;
  }
  .binder-swatch:hover { transform: scale(1.12); }
  .binder-swatch.selected { outline: 2px solid var(--text); outline-offset: 2px; }
  /* Bouton "Modifier" : accent quand actif */
  .binder-edit-toggle.active { background: rgba(var(--accent-rgb),0.18); border-color: rgba(var(--accent-rgb),0.6); color: var(--accent); }
  /* Mode VISUALISATION : les poches se contentent d'afficher les cartes, sans + / × / hover d'édition */
  .binder-view:not(.editing) .binder-slot-plus,
  .binder-view:not(.editing) .binder-slot-remove { display: none !important; }
  .binder-view:not(.editing) .binder-slot:not(.filled) { cursor: default; background: rgba(255,255,255,0.02); border-style: dashed; border-color: rgba(255,255,255,0.08); box-shadow: none; }
  .binder-view:not(.editing) .binder-slot:hover { border-color: rgba(255,255,255,0.12); }
  .binder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 4px;
    height: 100%;
  }
  .binder-slot {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 7px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.13);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
  }
  .binder-slot.filled { border-color: rgba(255,255,255,0.16); }
  /* Carte pas (encore) dans la collection : grisée/transparente ; se dé-grise seule une fois obtenue */
  .binder-slot.not-owned .binder-slot-img { opacity: 0.4; filter: grayscale(0.7); }
  /* Foil holographique (cartes possédées) : même bande iridescente que la visu 3D,
     mais en balayage lent — pas d'inclinaison au doigt dans le classeur. */
  .binder-slot-foil {
    position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg,
      transparent 18%,
      rgba(255,40,140,0.55) 33%,
      rgba(255,210,60,0.50) 42%,
      rgba(70,255,180,0.50) 50%,
      rgba(60,180,255,0.50) 58%,
      rgba(200,70,255,0.55) 67%,
      transparent 82%);
    background-size: 230% 230%;
    mix-blend-mode: color-dodge;
    opacity: 0.14;
    filter: saturate(1.5);
    animation: binderFoilSweep 7s ease-in-out infinite alternate;
  }
  .binder-slot-foil::after {  /* fines stries holo, très discrètes */
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: repeating-linear-gradient(100deg,
      rgba(255,255,255,0.06) 0 2px, transparent 2px 6px);
    mix-blend-mode: overlay; opacity: 0.5;
  }
  @keyframes binderFoilSweep {
    0%   { background-position: 12% 20%; }
    100% { background-position: 88% 80%; }
  }
  @media (prefers-reduced-motion: reduce) { .binder-slot-foil { animation: none; background-position: 50% 50%; } }
  .binder-slot:hover { border-color: rgba(var(--accent-rgb),0.6); }
  .binder-slot-plus { color: rgba(255,255,255,0.28) !important; }
  .binder-slot-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .binder-slot-plus { font-size: 28px; color: var(--muted); font-weight: 300; }
  .binder-slot-remove {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    border: none; background: rgba(0,0,0,0.55); color: #fff;
    font-size: 15px; line-height: 1; cursor: pointer;
    display: none;
  }
  .binder-slot.filled:hover .binder-slot-remove { display: block; }
  /* Glisser-déposer en mode édition */
  .binder-view.editing .binder-slot.drag-handle { cursor: grab; touch-action: none; }
  .binder-view.editing .binder-slot.drag-source { opacity: 0.32; }
  .binder-view.editing .binder-slot.drag-over {
    outline: 2px dashed rgba(var(--accent-rgb),0.9); outline-offset: -2px;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.25) inset;
  }
  body.binder-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
  /* Pas de sélection HTML native dans le classeur : le glissé sert au drag & drop
     (cartes en édition, feuilletage en visualisation), pas à sélectionner. */
  .binder-view, .binder-zoom-grid { user-select: none; -webkit-user-select: none; }
  .binder-slot-img, .binder-drag-ghost img { -webkit-user-drag: none; -webkit-touch-callout: none; }
  .binder-drag-ghost {
    position: fixed; z-index: 9999; pointer-events: none;
    border-radius: 7px; overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,0.45); opacity: 0.92;
    transform: translate(0,0); will-change: transform;
  }
  .binder-drag-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Sélecteur de carte du classeur */
  .binder-picker-search {
    width: 100%; padding: 10px; margin-bottom: 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--input-bg); color: var(--text); font-size: 15px;
  }
  .binder-picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
    max-height: 62vh; overflow-y: auto; overscroll-behavior: contain;
    padding-right: 2px;
  }
  .binder-pick {
    display: flex; flex-direction: column; gap: 4px;
    padding: 0; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); cursor: pointer; overflow: hidden; text-align: center;
  }
  .binder-pick:hover { border-color: rgba(var(--accent-rgb),0.5); }
  .binder-pick img, .binder-pick .image-placeholder { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
  .binder-pick-name {
    font-size: 11px; font-weight: 700; font-family: 'Syne', sans-serif; color: var(--text);
    padding: 2px 4px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ── Tier list ────────────────────────────────── */
  .tierlist-view { display: none; max-width: 1000px; margin: 0 auto; padding: 1.25rem 2rem 4rem; }
  .tierlist-view.active { display: block; }
  .tierlist-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 1.1rem; }
  .tierlist-hint { font-size: 12px; color: var(--muted); flex: 1 1 auto; }
  .tierlist-btn {
    border: 1px solid var(--border); background: var(--surface2); color: var(--text);
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px;
    padding: 9px 14px; border-radius: var(--radius); cursor: pointer;
  }
  .tierlist-btn:hover { border-color: rgba(var(--accent-rgb),0.5); }
  .tierlist-btn.primary { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.4); color: var(--accent); }

  .tier-row {
    display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px;
  }
  .tier-left { display: flex; flex-direction: column; gap: 4px; width: 76px; flex: none; }
  .tier-label {
    flex: 1; min-height: 56px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Syne', sans-serif; font-weight: 800; font-size: 22px; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35); border-radius: 8px; cursor: pointer;
    word-break: break-word; text-align: center; padding: 4px;
  }
  .tier-ctrls { display: flex; gap: 4px; }
  .tier-ctrl {
    flex: 1; height: 26px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface2); color: var(--text);
    font-size: 13px; cursor: pointer; line-height: 1; padding: 0;
  }
  .tier-ctrl:hover { background: var(--surface); }
  .tier-strip {
    flex: 1; min-height: 84px;
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px;
    background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 6px;
  }
  .tier-card {
    position: relative; width: 60px; aspect-ratio: 3/4; flex: none;
    border-radius: 5px; overflow: visible; cursor: pointer;
  }
  .tier-card img, .tier-card .image-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
  .tier-add-card {
    width: 60px; aspect-ratio: 3/4; flex: none;
    border: 2px dashed var(--border); border-radius: 5px;
    background: var(--surface); color: var(--muted); font-size: 22px; cursor: pointer;
  }
  .tier-add-card:hover { border-color: rgba(var(--accent-rgb),0.5); }

  /* Petit menu (déplacer / retirer / couleur) ancré sur une carte ou un bouton */
  .tier-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    z-index: 30; margin-top: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px var(--shadow); padding: 6px; width: max-content; max-width: 220px;
  }
  .tm-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
  .tm-move {
    width: 26px; height: 26px; border-radius: 5px; border: none; color: #fff;
    font-family: 'Syne', sans-serif; font-weight: 800; font-size: 12px; cursor: pointer;
  }
  .tm-remove {
    width: 100%; padding: 5px; border-radius: 5px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer;
  }
  .tm-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
  .tm-color { width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; }

  .tier-picker-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
  .tier-src-tab, .binder-src-tab {
    flex: 1; padding: 8px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px; cursor: pointer;
  }
  .tier-src-tab.active, .binder-src-tab.active { background: var(--surface2); color: var(--text); border-color: rgba(var(--accent-rgb),0.4); }
  .echange-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
  }
  .echange-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.05rem; }
  .echange-note { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0.4rem 0 0.7rem; }
  .echange-code {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    padding: 0.8rem;
    outline: none;
    word-break: break-all;
  }
  .echange-code:focus { border-color: var(--accent); }
  .echange-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0.7rem; }
  .echange-btn {
    padding: 9px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
  }
  .echange-btn:hover { border-color: rgba(var(--fg-rgb),0.25); }
  .echange-btn.primary { background: rgba(var(--accent-rgb),0.14); border-color: rgba(var(--accent-rgb),0.45); color: var(--accent); }
  .echange-btn.primary:hover { background: rgba(var(--accent-rgb),0.22); }
  .echange-empty { color: var(--muted); font-size: 13px; padding: 0.25rem 0 1.25rem; }

  /* ── Price toggle: € icon ───────────────────── */
  .icon-btn .euro-icon {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
  }

  /* ── Selection mode ─────────────────────────── */
  .coll-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 0.75rem;
    flex-wrap: wrap;
    padding-top: 15px;
  }
  .coll-toolbar-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Syne', sans-serif;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
  }
  .coll-toolbar-btn:hover { color: var(--text); border-color: rgba(var(--fg-rgb),0.2); }
  .coll-toolbar-btn.active { background: rgba(var(--accent-rgb),0.1); border-color: var(--accent); color: var(--accent); }

  /* Card selection state */
  .card.selectable { cursor: pointer; }
  .card.selectable:hover { outline: 2px solid rgba(var(--accent2-rgb),0.45); }
  .card.selected { outline: 2.5px solid var(--accent2) !important; box-shadow: 0 0 0 4px rgba(var(--accent2-rgb),0.15) !important; }
  .card.selected::before {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: var(--accent2);
    color: #0d0d0f;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    line-height: 20px;
    text-align: center;
  }

  /* Totals bar */
  /* coll-totals now inline in toolbar — same style as explore-info-box */
  .coll-totals { display: none; } /* legacy hidden */
  .coll-info-box {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 5px 12px;
    white-space: nowrap;
    font-size: 12px;
  }
  .coll-info-count {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
  }
  .coll-info-label { color: var(--muted); font-size: 11px; }
  .coll-info-price {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
  }
  .coll-info-price.green  { color: var(--accent); }
  .coll-info-price.blue   { color: var(--accent2); }
  .coll-info-price.orange { color: var(--slate); }
  .coll-info-divider { width: 1px; height: 16px; background: var(--border); }

  /* ── Collection controls ────────────────────── */
  .coll-controls {
    padding: 1rem 0 0;
    /*border-top: 1px solid var(--border);*/
    margin-top: 0.25rem;
    margin-bottom: 13px;
  }
  .coll-controls .pills-row { padding: 0.75rem 0 0; gap: 8px; }
  .coll-controls .filters-row { padding: 0.75rem 0 0; gap: 10px; }

  .price-filter {
    width: 120px !important;
    flex-shrink: 0;
  }

  .prices-shown .price-filter {
    display: block;
  }

  .coll-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
  }

  input[type="text"],
  input[type="number"] {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s;
  }

  input[type="text"]:focus,
  input[type="number"]:focus {
    border-color: var(--accent);
  }

  input[type="text"]::placeholder,
  input[type="number"]::placeholder {
    color: var(--muted);
  }

  /* ── Barre de filtres réorganisée ───────────────────────────── */
  .search-row .sort-select { flex-shrink: 0; min-width: 150px; width: auto; }
  .filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .filters-toggle:hover { border-color: rgba(var(--fg-rgb),0.25); }
  .filters-toggle.active { border-color: var(--accent); color: var(--accent); }
  .filters-toggle svg { opacity: 0.8; }
  .filters-count {
    background: var(--accent);
    color: #fff;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .advanced-filters { display: none; }
  .advanced-filters.open { display: block; padding-top: 1rem; }
  .adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 14px;
  }
  .adv-field { display: flex; flex-direction: column; gap: 5px; }
  .adv-field > label { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
  .adv-field select { width: 100%; }
  .adv-field .filter-cell { width: 100%; }
  .adv-field .filter-cell select { flex: 1; min-width: 0; }
  .adv-price { display: flex; gap: 8px; }
  .adv-price .price-filter { width: auto !important; flex: 1; }
  /* Filtre prix : visible uniquement quand les prix sont affichés */
  .price-field { display: none; }
  .prices-on .price-field { display: flex; }
  .adv-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .adv-footer .presets-row { padding: 0; }
  .adv-reset { color: var(--muted); }

  /* ── Tags personnalisés (modale) ───────────────────────────── */
  .tags-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
  }
  .tags-title {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .tags-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .tags-empty { font-size: 12px; color: var(--muted); font-style: italic; }
  .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    color: var(--accent);
  }
  .tag-remove {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .tag-remove:hover { background: var(--accent); color: #fff; }
  .tag-input-row { display: flex; gap: 8px; }
  .tag-input {
    flex: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 7px 10px;
    outline: none;
  }
  .tag-input:focus { border-color: var(--accent); }
  .tag-add-btn {
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }
  .tag-add-btn:hover { background: rgba(var(--accent-rgb), 0.2); }

  /* ════════════════════════════════════════════════════════════════════
     MOBILE — améliore la lisibilité sur petit écran.
     Tout est sous media query : aucun impact sur la version bureau.
     ════════════════════════════════════════════════════════════════════ */
  @media (max-width: 640px) {
    /* Marges latérales réduites : plus de place pour le contenu */
    .app-header { padding: 1.25rem 1rem 0; }
    .controls { padding: 0 1rem 1rem; }
    .load-more-wrap, .error-msg { padding-left: 1rem; padding-right: 1rem; }
    .collection-view, .master-view, .echange-view { padding-left: 1rem; padding-right: 1rem; }
    #grid { padding-left: 1rem; padding-right: 1rem; }
    #coll-grid { padding-left: 0; padding-right: 0; } /* déjà dans une vue avec marge */
    .coll-empty { padding: 3rem 1rem; }

    /* Grille : 2 colonnes confortables + libellés un peu plus grands */
    #grid, #coll-grid, #master-grid,
    #echange-give-grid, #echange-receive-grid, #echange-have-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
    }
    .card-name { font-size: 13px; }
    .card-meta { font-size: 11px; }

    /* En-tête compact — évite le débordement horizontal */
    .app-header-top { padding-bottom: 1.1rem; flex-wrap: wrap; }
    .app-logo { font-size: 1.25rem; }
    .header-actions { gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
    .icon-btn { width: 32px; height: 32px; }
    .hdr-select { padding: 6px 6px; font-size: 11px; max-width: 116px; }
    .catalog-toggle { gap: 4px; }

    /* Onglets : défilement horizontal si trop larges */
    .app-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .app-nav::-webkit-scrollbar { display: none; }
    .nav-tab { padding: 10px 14px; font-size: 12px; white-space: nowrap; }

    /* Barre catalogue : les deux sélecteurs partagent la largeur, € au bout */
    .catalog-bar { gap: 6px; flex-wrap: nowrap; }
    .catalog-bar .catalog-toggle { flex: 1; min-width: 0; }
    .catalog-bar .hdr-select { flex: 1; min-width: 0; max-width: none; }

    /* Barre de recherche : passe à la ligne au lieu de déborder hors écran.
       Ligne 1 = recherche pleine largeur ; ligne 2 = tri + bouton Filtres. */
    .search-row { flex-wrap: wrap; gap: 8px; }
    .search-row .search-wrap { flex: 1 1 100%; max-width: 100%; min-width: 0; }
    .search-row .sort-select { flex: 1 1 0; min-width: 0; }
    .search-row .filters-toggle { flex: 0 0 auto; }

    /* Filtres : menus pleine largeur sur 2 colonnes, plus faciles à toucher */
    .filters-row { gap: 8px; }
    .filters-row > select,
    .filter-cell { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .filter-cell select { flex: 1; min-width: 0; }
    .search-wrap { max-width: 100%; }
    .price-filter { width: auto !important; flex: 1 1 calc(50% - 4px); }
    .explore-info-box { margin-left: 0; width: 100%; justify-content: center; }
    .presets-row { width: 100%; }
    .presets-row select { flex: 1; min-width: 0; }

    /* Collection : info / stats / actions sur plusieurs lignes proprement */
    .coll-info-box, .coll-stats { margin-left: 0; }
    .master-detail-actions { margin-left: 0; width: 100%; }
    .echange-actions { gap: 6px; }
  }

  /* ════════════════════════════════════════════════════════════════════
     Contrôles superposés à l'image / aux fonds toujours sombres :
     texte clair fixe (indépendant du thème).
     ════════════════════════════════════════════════════════════════════ */
  .modal-close, .modal-share, .modal-nav { color: #fff; }
  .modal-nav { border-color: rgba(255,255,255,0.18); }
  .card-viewer-hint { color: rgba(255,255,255,0.35); }
  .card-viewer-inner { box-shadow: 0 50px 120px rgba(0,0,0,0.8), 0 0 70px rgba(120,170,255,0.2), 0 0 0 1px rgba(255,255,255,0.1); }
  /* Ombre des cartes adaptée au thème */
  .card:hover { box-shadow: 0 12px 40px var(--shadow); }

  /* ════════════════════════════════════════════════════════════════════
     DA sobre — réglages : sélection en BLEU, CTA master en BLEU,
     bouton liste d'achat en ROUGE, barre de progression bleue,
     tendance prix hausse=bleu / baisse=rouge.
     ════════════════════════════════════════════════════════════════════ */
  .card.selectable:hover { outline-color: rgba(var(--accent-rgb), 0.5); }
  .card.selected { outline-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18) !important; }
  .card.selected::before { background: var(--accent); color: #fff; }

  .master-start-btn { border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
  .master-start-btn:hover { background: rgba(var(--accent-rgb), 0.2); }

  .master-bar-fill { background: var(--accent); }

  .price-trend-up   { color: var(--accent); }
  .price-trend-down { color: var(--accent2); }