/* ============================================================
   MA COLLECTION
   ============================================================ */
.col-wrap .lead{ margin-bottom:26px; }
.col-lbl{ display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }

/* ---- recherche ---- */
.col-search{ padding:clamp(18px,3vw,28px); margin-bottom:40px; border:2px solid #14121C; box-shadow:6px 6px 0 #B36BFF; }
.col-q-wrap{ position:relative; }
#col-q{ width:100%; background:rgba(245,241,232,.06); border:2px solid var(--line); border-radius:14px;
  padding:.9em 1.1em; color:var(--ivory); font-family:var(--sans); font-size:1.05rem; }
#col-q:focus{ outline:none; border-color:#B36BFF; background:rgba(245,241,232,.09); }
.col-sug{ position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px); margin:0; padding:6px; list-style:none;
  background:#16161F; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); max-height:340px; overflow-y:auto; }
.col-sug li{ padding:.6em .8em; border-radius:8px; cursor:pointer; font-size:.95rem; }
.col-sug li:hover,.col-sug li.on{ background:rgba(179,107,255,.2); }
.col-sug .col-sug-none{ color:var(--muted); cursor:default; }
.col-sug .col-sug-none:hover{ background:none; }
.col-loading{ color:var(--muted); margin:18px 0 0; }

/* ---- fiche de carte ---- */
.col-result{ margin-top:22px; }
.col-card{ display:grid; grid-template-columns:minmax(180px,260px) 1fr; gap:clamp(18px,3vw,32px); align-items:start; }
.col-card-img img{ width:100%; border-radius:4.75%/3.5%; display:block; box-shadow:0 14px 40px rgba(0,0,0,.5); }
.col-card-name{ margin:0 0 4px; font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.8rem); }
.col-card-type{ margin:0 0 18px; color:var(--muted); font-size:.9rem; }
.col-select{ background:rgba(245,241,232,.06); border:1px solid var(--line); border-radius:10px; color:var(--ivory);
  font-family:var(--sans); font-size:.9rem; padding:.6em .8em; max-width:100%; }
.col-select option{ background:var(--ink-2); color:var(--ivory); }
.col-print{ width:100%; margin-bottom:16px; }
.col-prices{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.col-price{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:rgba(245,241,232,.03); display:grid; gap:2px; }
.col-price span{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.col-price strong{ font-size:1.45rem; font-family:var(--serif); }
.col-price em{ font-style:normal; font-size:.78rem; color:var(--muted); }
.col-price-foil{ background:var(--holo-soft); }
.col-src{ font-size:.75rem; color:var(--muted); margin:8px 0 18px; }
.col-add{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; margin-bottom:16px; }
.col-qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.col-qty button{ background:rgba(245,241,232,.06); border:0; color:var(--ivory); width:40px; height:40px; font-size:1.2rem; cursor:pointer; }
.col-qty button:hover{ background:rgba(245,241,232,.14); }
.col-qty input{ width:52px; text-align:center; background:transparent; border:0; color:var(--ivory); font:600 1rem var(--sans); -moz-appearance:textfield; }
.col-qty input::-webkit-outer-spin-button,.col-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.col-finish{ display:flex; gap:16px; font-size:.92rem; }
.col-finish label{ display:flex; gap:6px; align-items:center; cursor:pointer; }
.col-finish input{ accent-color:#B36BFF; }
.col-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.col-links{ display:flex; gap:16px; margin-top:16px; font-size:.85rem; }
.col-links a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.col-links a:hover{ color:var(--ivory); }

/* ---- en-tête collection ---- */
.col-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:14px; }
.col-h2{ margin:0; font-family:var(--serif); font-size:clamp(1.4rem,2.8vw,2rem); }
.col-stats{ margin:6px 0 0; color:var(--muted); font-size:.92rem; }
.col-stats strong{ color:var(--ivory); }
.col-total{ color:#FFD83D; font-weight:700; }
.col-muted{ color:var(--muted); }
.col-tools{ display:flex; flex-wrap:wrap; gap:8px; }
.col-tools .btn{ width:auto; }
.col-filters{ margin-bottom:16px; }
.col-filters .search{ margin-left:0; flex:1 1 220px; }

/* ---- lignes ---- */
.col-list{ display:grid; gap:8px; }
.col-row{ display:flex; align-items:center; gap:14px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(245,241,232,.025); }
.col-row.is-foil{ background:linear-gradient(90deg,rgba(179,107,255,.08),rgba(92,225,230,.05)); }
.col-thumb{ flex:none; padding:0; border:0; background:none; cursor:pointer; }
.col-thumb img{ width:46px; aspect-ratio:63/88; object-fit:cover; border-radius:4px; display:block; background:#0B0B10; }
.col-main{ flex:1; min-width:0; }
.col-name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.col-foil{ display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.08em; padding:2px 6px; border-radius:999px; background:var(--holo); color:#0B0B10; vertical-align:middle; }
.col-sub{ font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.col-unit{ font-size:.8rem; color:var(--muted); }
.col-right{ display:flex; align-items:center; gap:16px; }
.col-qty-sm button{ width:32px; height:32px; font-size:1rem; }
.col-qty-sm span{ min-width:30px; text-align:center; font-weight:600; }
.col-line{ min-width:84px; text-align:right; font-family:var(--serif); font-weight:700; }
.col-del{ background:none; border:0; color:var(--muted); font-size:1.4rem; cursor:pointer; line-height:1; padding:4px; }
.col-del:hover{ color:#FF8A75; }
.col-empty{ padding:36px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:14px; }
.col-note{ margin-top:22px; font-size:.78rem; color:var(--muted); }

/* ---- fenêtre export / import ---- */
.col-modal{ position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.6); display:grid; place-items:center; padding:16px; }
.col-modal[hidden]{ display:none; }
.col-modal-box{ position:relative; width:min(620px,100%); max-height:92vh; overflow-y:auto; background:#14141D; padding:24px; }
.col-modal-box h3{ margin:0 0 6px; font-family:var(--serif); }
.col-modal-x{ position:absolute; top:10px; right:14px; background:none; border:0; color:var(--muted); font-size:1.7rem; cursor:pointer; }
.col-small{ font-size:.85rem; color:var(--muted); margin:0 0 12px; }
.col-small code{ color:var(--ivory); background:rgba(245,241,232,.08); padding:1px 5px; border-radius:4px; }
.col-modal textarea{ width:100%; background:rgba(245,241,232,.05); border:1px solid var(--line); border-radius:10px; color:var(--ivory);
  font:.85rem/1.5 ui-monospace,Menlo,Consolas,monospace; padding:12px; resize:vertical; }
.col-modal-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.col-modal-actions .btn{ width:auto; }
.col-file input{ display:none; }
#col-import-msg{ margin-top:8px; color:var(--ivory); }

.col-toast{ position:fixed; left:50%; bottom:90px; transform:translate(-50%,20px); z-index:130; background:#F5F1E8; color:#0B0B10;
  padding:10px 18px; border-radius:999px; font-weight:600; font-size:.9rem; opacity:0; pointer-events:none; transition:all .2s; box-shadow:var(--shadow); }
.col-toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---- cellulaire ---- */
@media (max-width:720px){
  .col-card{ grid-template-columns:1fr; }
  .col-card-img{ max-width:260px; margin:0 auto; }
  .col-actions .btn{ width:100%; }
  .col-row{ flex-wrap:wrap; gap:10px; position:relative; padding-right:36px; }
  .col-right{ width:100%; justify-content:space-between; padding-left:60px; }
  .col-del{ position:absolute; top:6px; right:6px; }
  .col-head{ align-items:flex-start; }
}

/* ============================================================
   SCANNER
   ============================================================ */
.col-q-row{ display:flex; gap:10px; align-items:stretch; }
.col-q-row .col-q-wrap{ flex:1; min-width:0; }
.col-scan-btn{ width:auto !important; flex:none; font-size:1rem; }
@media (max-width:480px){ .col-scan-btn{ padding:.8em 1em; } }

.scan{ position:fixed; inset:0; z-index:140; background:#07070B; display:flex; flex-direction:column; color:var(--ivory); }
.scan[hidden]{ display:none; }
.scan-top{ display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); }
.scan-top-r{ display:flex; gap:6px; }
.scan-ico{ background:rgba(245,241,232,.08); border:0; color:var(--ivory); width:38px; height:38px; border-radius:50%; font-size:1.3rem; cursor:pointer; line-height:1; }
.scan-ico[hidden]{ display:none; }
.scan-stage{ position:relative; flex:1 1 auto; min-height:240px; overflow:hidden; background:#000; }
.scan-stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scan-guide{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:86%; aspect-ratio:63/88;
  border:3px solid rgba(245,241,232,.9); border-radius:4.5%/3.3%; box-shadow:0 0 0 100vmax rgba(0,0,0,.45); transition:border-color .2s; }
.scan-band{ position:absolute; left:5%; top:3.5%; width:76%; height:7%; border:2px dashed #FFD83D; border-radius:6px; background:rgba(255,216,61,.12); }
.scan-guide.ok{ animation:scanok .6s ease; }
@keyframes scanok{ 0%{ border-color:#6FB98A; box-shadow:0 0 0 100vmax rgba(111,185,138,.35); } 100%{ border-color:rgba(245,241,232,.9); box-shadow:0 0 0 100vmax rgba(0,0,0,.45); } }
.scan-status{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); max-width:92%; background:rgba(11,11,16,.85);
  padding:7px 14px; border-radius:999px; font-size:.85rem; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scan-status[hidden]{ display:none; }
.scan-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:.88rem; }
.scan-bar .btn{ width:auto; }
.scan-zoom{ margin-left:auto; }
.scan-tog{ display:flex; gap:7px; align-items:center; cursor:pointer; }
.scan-tog input{ accent-color:#B36BFF; width:18px; height:18px; }
.scan-list{ flex:0 0 30vh; min-height:0; display:flex; flex-direction:column; }   /* hauteur fixe : la vue caméra ne bouge pas */
#scan-items{ flex:1 1 auto; min-height:0; }
.scan-list-h{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; font-size:.88rem; color:var(--muted); }
.scan-list-h strong{ color:var(--ivory); }
.scan-list-h .btn{ width:auto; }
#scan-items{ overflow-y:auto; padding:0 16px 14px; display:grid; gap:6px; }
.scan-item{ display:flex; align-items:center; gap:12px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:rgba(245,241,232,.03); }
.scan-item img,.scan-noimg{ width:34px; aspect-ratio:63/88; object-fit:cover; border-radius:3px; background:#1A1A25; flex:none; }
.scan-item-m{ flex:1; min-width:0; }
.scan-act{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:rgba(245,241,232,.06); color:var(--ivory); font-size:1.1rem; cursor:pointer; }
.scan-act.is-on{ background:#6FB98A; border-color:#6FB98A; color:#0B0B10; }
.scan-act-g{ font-size:1.3rem; }
@media (min-width:900px){
  .scan{ display:grid; grid-template-columns:1fr 380px; grid-template-rows:auto auto 1fr; }
  .scan[hidden]{ display:none; }
  .scan-top{ grid-column:1 / -1; }
  .scan-stage{ grid-row:2 / 4; }
  .scan-bar{ grid-column:2; grid-row:2; border-left:1px solid var(--line); }
  .scan-list{ grid-column:2; grid-row:3; flex:none; height:auto; min-height:0; border-left:1px solid var(--line); }
}

.scan-stage video{ transform-origin:50% 50%; transition:transform .2s; }
.scan-art{ display:none; position:absolute; left:8.2%; top:11.3%; width:83.6%; height:44.3%; border:2px dashed rgba(92,225,230,.8); border-radius:6px; }
.scan.is-image .scan-band{ display:none; }
.scan.is-image .scan-art{ display:block; }

.scan-diag{ position:absolute; left:8px; right:8px; top:8px; font:11px/1.35 ui-monospace,Consolas,monospace; color:#9FE8A5; background:rgba(0,0,0,.6); padding:4px 8px; border-radius:6px; }
.scan-diag:empty{ display:none; }