/* ═══════════════════════════════════════════════════════════════
   components.css
   Cards, grille, overlay, modales, communauté, badges, wishlist
   Topps Chrome F1 2025 — Collection Tracker
═══════════════════════════════════════════════════════════════ */

/* ─── Grille de cartes ─── */
.card-grid,
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
}

/* ─── Carte ─── */
.card-item {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 0 9px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}

.card-item:hover {
  transform: translateY(-3px);
  border-color: rgba(232, 0, 61, 0.4);
  box-shadow: 0 8px 24px rgba(232, 0, 61, 0.1);
}

.card-item.owned { border-color: rgba(0, 230, 118, 0.3); }

.card-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}

.card-item:hover .card-stripe {
  opacity: 1;
  background: linear-gradient(90deg, var(--red), var(--orange));
}

.card-item.owned .card-stripe {
  opacity: 1;
  background: linear-gradient(90deg, var(--green), #00c853);
}

/* Photo carte */
.card-photo-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  background: var(--s2);
  border-radius: 8px 8px 0 0;
  flex-shrink: 0;
}

.card-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.card-item:hover .card-photo-wrap img { transform: scale(1.04); }

.card-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--dim);
}

.card-photo-placeholder span {
  font-size: 0.65rem;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-upload-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(7, 9, 14, 0.85);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.65rem;
  padding: 4px 8px;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-item:hover .card-upload-btn { opacity: 1; }
.card-upload-btn:hover { border-color: var(--blue); color: var(--blue); }

.card-del-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(232, 0, 61, 0.85);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 0.6rem;
  padding: 3px 7px;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s;
}

.card-item:hover .card-del-btn { opacity: 1; }

/* Body carte */
.card-body {
  padding: 9px 10px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.card-name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 3px;
}

.card-team {
  font-size: 0.7rem;
  color: var(--sub);
  line-height: 1.3;
  margin-bottom: 6px;
}

/* Badges */
.card-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }

.badge-subset,
.badge {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif;
}

.b-rc     { background: rgba(255, 94, 0, 0.12);    color: var(--orange); border: 1px solid rgba(255, 94, 0, 0.25); }
.b-ins    { background: rgba(138, 43, 226, 0.12);   color: #c084fc;       border: 1px solid rgba(138, 43, 226, 0.25); }
.b-var    { background: rgba(255, 193, 7, 0.12);    color: var(--gold);   border: 1px solid rgba(255, 193, 7, 0.25); }
.b-custom { background: rgba(14, 165, 233, 0.12);   color: var(--blue);   border: 1px solid rgba(14, 165, 233, 0.25); }
.b-gold   { background: rgba(255, 193, 7, 0.15);    color: var(--gold);   border: 1px solid rgba(255, 193, 7, 0.3); }
.b-blue   { background: rgba(14, 165, 233, 0.12);   color: var(--blue);   border: 1px solid rgba(14, 165, 233, 0.25); }
.b-sub    { background: rgba(107, 122, 150, 0.12);  color: var(--sub);    border: 1px solid rgba(107, 122, 150, 0.25); }

/* Parallèles dots */
.par-dots,
.card-parallels {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 4px;
}

.par-dot,
.mini-par {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: transform 0.1s;
}

.par-dot:hover,
.mini-par:hover { transform: scale(1.5); }

.par-dot.lit,
.mini-par.checked { box-shadow: 0 0 5px currentColor; }

.par-owned-lbl {
  font-size: 0.62rem;
  color: var(--sub);
  margin-bottom: 5px;
}

/* Bouton "Marquer" */
.own-btn {
  width: calc(100% - 20px);
  margin: auto 10px 0;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  color: var(--sub);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.own-btn:hover { border-color: var(--green); color: var(--green); }
.card-item.owned .own-btn {
  background: rgba(0, 230, 118, 0.08);
  border-color: rgba(0, 230, 118, 0.35);
  color: var(--green);
}

/* Tags RC / wishlist / double */
.rc-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, var(--gold), #ff8c00);
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.45rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
  z-index: 3;
}

.wishlist-tag,
.double-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.7rem;
  z-index: 3;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* ─── Empty state ─── */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--sub);
}

.empty-icon,
.empty-state-icon { font-size: 2.5rem; margin-bottom: 12px; }

.empty-txt,
.empty-state-text { font-size: 1rem; }

/* ─── Overlay / Modale ─── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 13, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: 18px;
  width: 100%;
  max-width: 700px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.overlay.open .modal { transform: translateY(0) scale(1); }

.modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--t2);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), color var(--transition);
  z-index: 10;
}

.modal-x:hover { border-color: var(--red); color: var(--red); }

/* Modale carte */
.modal-layout {
  display: flex;
  align-items: stretch;
}

.modal-photo-col {
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--s2);
  border-radius: 18px 0 0 18px;
}

.photo-area {
  width: 100%;
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  background: var(--s2);
  border-radius: 18px 0 0 0;
  flex-shrink: 0;
}

.photo-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--dim);
}

.photo-placeholder span {
  font-size: 0.68rem;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.modal-photo-actions {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--s2);
  border-radius: 0 0 0 18px;
  flex: 1;
}

.modal-upload-btn {
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--border2);
  border-radius: 8px;
  background: transparent;
  color: var(--t1);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition);
}

.modal-upload-btn:hover         { border-color: var(--blue); color: var(--blue); }
.modal-upload-btn.del           { border-color: transparent; color: var(--t3); }
.modal-upload-btn.del:hover     { border-color: var(--red); color: var(--red); }

.modal-content-col {
  flex: 1;
  padding: 24px;
  min-width: 0;
}

.modal-card-num {
  font-size: 0.65rem;
  color: var(--red);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.modal-card-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
  line-height: 1.2;
}

.modal-card-team {
  font-size: 0.82rem;
  color: var(--t3);
  margin-bottom: 20px;
}

/* Titre section modal */
.modal-section-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 10px;
  font-family: 'Barlow Condensed', sans-serif;
}

/* Label section (ex: WISHLIST dans modal) */
.modal-section-label {
  font-size: 0.75rem;
  color: var(--t3);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Badges dans modal */
.modal-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* Section wishlist dans modal */
.modal-wish-section { margin-bottom: 14px; }

/* Bouton Marquer dans modal */
.modal-own-row { margin-bottom: 20px; }

.modal-own-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: var(--s2);
  color: var(--t1);
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all var(--transition);
}

.modal-own-btn:hover           { border-color: var(--green); background: rgba(0, 230, 118, 0.05); }
.modal-own-btn.owned           { border-color: rgba(0, 230, 118, 0.4); background: rgba(0, 230, 118, 0.07); color: var(--green); }
.modal-own-btn.owned:hover     { border-color: var(--red); background: rgba(232, 0, 61, 0.05); color: var(--red); }

/* Boutons wishlist modal */
.modal-wish-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.modal-wish-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--s2);
  color: var(--t3);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.modal-wish-btn:hover       { border-color: var(--border2); color: var(--t1); }
.modal-wish-btn.wl-active   { border-color: rgba(14, 165, 233, 0.4); background: rgba(14, 165, 233, 0.08); color: var(--blue); }
.modal-wish-btn.dbl-active  { border-color: rgba(255, 193, 7, 0.4); background: rgba(255, 193, 7, 0.08); color: var(--gold); }

/* Titre modal */
.modal-title { margin-bottom: 20px; }

/* Parallèles dans modal */
.parallel-list { display: flex; flex-direction: column; gap: 6px; }

.parallel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.parallel-row:hover          { border-color: var(--border2); }
.parallel-row.checked        { border-color: rgba(0, 230, 118, 0.3); background: rgba(0, 230, 118, 0.04); }

.parallel-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border2);
  flex-shrink: 0;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallel-row.checked .parallel-check {
  background: var(--green);
  border-color: var(--green);
  color: #000;
  font-size: 0.65rem;
}

.parallel-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.parallel-name { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--t1); }
.parallel-meta { font-size: 0.68rem; color: var(--t3); font-family: 'Barlow Condensed', sans-serif; }

/* ─── Communauté ─── */
/* ══════════════════════════════════════════════════════════════
   COMMUNAUTÉ — Style Instagram
══════════════════════════════════════════════════════════════ */

/* Layout global */
.community-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

/* ── Composer ── */
.community-composer {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.composer-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--orange));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; color: #fff;
  font-family: 'Orbitron', sans-serif;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.08);
}
.composer-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.composer-input {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--t1);
  font-family: 'Barlow', sans-serif;
  font-size: 0.9rem;
  resize: none;
  outline: none;
  min-height: 60px;
  max-height: 200px;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.5;
}
.composer-input:focus {
  border-color: rgba(232,0,61,.35);
  box-shadow: 0 0 0 3px rgba(232,0,61,.06);
}
.composer-input::placeholder { color: var(--t3); }
.composer-post-type {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.cpt-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--s2);
  color: var(--t3);
  font-size: 0.72rem; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.cpt-btn:hover { border-color: var(--border2); color: var(--t2); }
.cpt-btn.active { border-color: var(--red); color: var(--red); background: rgba(232,0,61,.07); }
.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.composer-photo-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t3);
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.composer-photo-btn:hover { border-color: var(--border2); color: var(--t1); }
.composer-submit {
  padding: 8px 20px;
  border: none;
  border-radius: 20px;
  background: var(--red);
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.composer-submit:hover { opacity: 0.85; }
.composer-submit:disabled { opacity: 0.5; cursor: default; }
.composer-photo-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.composer-thumb {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.composer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.composer-thumb-del {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  color: #fff;
  border: none; cursor: pointer;
  font-size: 0.6rem;
  display: flex; align-items: center; justify-content: center;
}
.composer-card-search {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--t1);
  font-family: 'Barlow', sans-serif;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.15s;
}
.composer-card-search:focus { border-color: rgba(232,0,61,.3); }
.composer-card-results {
  max-height: 180px; overflow-y: auto;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 4px;
}
.composer-card-result {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--t2);
  transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}
.composer-card-result:last-child { border-bottom: none; }
.composer-card-result:hover { background: var(--s3); }
.composer-tagged-cards { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.composer-tag {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: rgba(232,0,61,.07);
  border: 1px solid rgba(232,0,61,.2);
  border-radius: 20px;
  font-size: 0.72rem; font-weight: 600; color: var(--red);
}
.composer-tag button {
  background: none; border: none; color: var(--red);
  cursor: pointer; font-size: 0.7rem; padding: 0; line-height: 1;
}

/* ── Feed ── */
.community-feed {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.feed-loading {
  text-align: center; padding: 48px;
  color: var(--t3); font-size: 0.88rem;
}
.feed-empty {
  text-align: center; padding: 60px 20px;
}
.feed-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }

/* ── Post — style Instagram ── */
.feed-post {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.feed-post:hover { border-color: var(--border2); }

/* Header post */
.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.post-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--orange));
  color: #fff;
  font-weight: 700; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.08);
}
.post-meta { flex: 1; min-width: 0; }
.post-author {
  font-weight: 700; font-size: 0.88rem;
  color: var(--t1); line-height: 1.2;
}
.post-time { font-size: 0.68rem; color: var(--t3); margin-top: 1px; }
.post-del {
  background: none; border: none;
  color: var(--t3); cursor: pointer;
  font-size: 0.72rem; font-weight: 600;
  padding: 5px 10px; border-radius: 7px;
  transition: all 0.15s; flex-shrink: 0;
}
.post-del:hover { background: rgba(232,0,61,.08); color: var(--red); }

/* Type badge */
.post-type-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 0 16px 10px;
}
.post-type-badge.wishlist {
  background: rgba(14,165,233,.09);
  border: 1px solid rgba(14,165,233,.2);
  color: #0ea5e9;
}
.post-type-badge.doubles {
  background: rgba(255,193,7,.09);
  border: 1px solid rgba(255,193,7,.2);
  color: #f59e0b;
}

/* Texte */
.post-text {
  font-size: 0.9rem;
  color: var(--t1);
  line-height: 1.65;
  padding: 0 16px 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Images — pleine largeur style Instagram */
.post-images { display: grid; gap: 2px; }
.post-images.count-1 { grid-template-columns: 1fr; }
.post-images.count-2 { grid-template-columns: 1fr 1fr; }
.post-images.count-3 { grid-template-columns: 2fr 1fr; }
.post-images.count-3 .post-img:first-child { grid-row: span 2; }
.post-img {
  width: 100%; object-fit: cover;
  aspect-ratio: 1;
  cursor: zoom-in;
  display: block;
}
.post-images.count-1 .post-img { aspect-ratio: 4/3; border-radius: 0; }

/* Cartes taguées */
.post-tagged-cards {
  display: flex; gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.post-tagged-cards::-webkit-scrollbar { display: none; }
.post-tagged-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
  flex-shrink: 0;
  min-width: 0;
}
.post-tagged-card:hover { border-color: var(--border2); }
.ptc-photo {
  width: 36px; height: 48px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}
.ptc-photo-placeholder {
  width: 36px; height: 48px;
  background: var(--s3);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ptc-info { min-width: 0; }
.ptc-num  { font-size: 0.6rem; color: var(--red); font-weight: 700; letter-spacing: .06em; }
.ptc-name { font-size: 0.78rem; font-weight: 700; color: var(--t1); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.ptc-team { font-size: 0.62rem; color: var(--t3); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

/* Actions — style Instagram */
.post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.post-action-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: none; background: none;
  color: var(--t3);
  font-size: 0.82rem; font-weight: 600;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}
.post-action-btn:hover { background: var(--s2); color: var(--t1); }
.post-action-btn.liked { color: var(--red); }
.post-action-btn .pa-icon { font-size: 1rem; }

/* Commentaires */
.post-comments {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--s2);
  border-radius: 0 0 16px 16px;
}

.comment {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.comment-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--s3);
  color: var(--t2);
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.comment-body {
  flex: 1;
  background: var(--s2);
  border-radius: 10px;
  padding: 7px 10px;
}

.comment-author { font-weight: 700; font-size: 0.72rem; color: var(--t2); margin-bottom: 2px; }
.comment-text   { font-size: 0.8rem; color: var(--t1); line-height: 1.5; }

.comment-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.comment-input {
  flex: 1;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--t1);
  font-family: 'Barlow', sans-serif;
  font-size: 0.82rem;
  outline: none;
  transition: border-color var(--transition);
}

.comment-input:focus { border-color: rgba(232, 0, 61, 0.3); }

.comment-send {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--s3);
  color: var(--t1);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition);
}

.comment-send:hover { background: var(--s4); }

/* Type badge post */
.post-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.ptb-wishlist { background: rgba(14, 165, 233, 0.1); color: var(--blue); border: 1px solid rgba(14, 165, 233, 0.2); }
.ptb-double   { background: rgba(255, 193, 7, 0.1);  color: var(--gold); border: 1px solid rgba(255, 193, 7, 0.2); }

/* ─── Badges wishlist / double ─── */
.wl-badge,
.dbl-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.06em;
  margin-right: 4px;
}

.wl-badge  { background: rgba(14, 165, 233, 0.1); color: var(--blue); border: 1px solid rgba(14, 165, 233, 0.2); }
.dbl-badge { background: rgba(255, 193, 7, 0.1);  color: var(--gold); border: 1px solid rgba(255, 193, 7, 0.2); }

/* ─── Bouton "ajouter une carte" ─── */
.btn-add-card { margin-bottom: 16px; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  main { padding: 16px 12px 80px; }
  .card-grid,
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .modal-layout { flex-direction: column; }
  .modal-photo-col { width: 100%; }
  .photo-area { border-radius: 18px 18px 0 0; aspect-ratio: 16 / 9; }
  .modal-photo-actions { border-radius: 0; flex-direction: row; flex-wrap: wrap; }
  .modal-content-col { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   missing.css
   Classes HTML présentes mais sans définition CSS
   Topps Chrome F1 2025 — Collection Tracker
═══════════════════════════════════════════════════════════════ */

/* ─── Loading ─── */
.loading { position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; }
.loading-txt { font-family:'Barlow Condensed',sans-serif;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t3); }
.spinner { width:36px;height:36px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--red);animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── Toast ─── */
.toast { position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--s3);border:1px solid var(--border2);border-radius:12px;padding:12px 20px;font-size:.82rem;font-weight:600;color:var(--t1);z-index:9999;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.4); }
.toast.show { opacity:1;transform:translateX(-50%) translateY(0); }
.toast.ok { border-color:rgba(0,230,118,.4);color:var(--green); }
.toast.err { border-color:rgba(232,0,61,.4);color:var(--red); }

/* ─── Auth ─── */
.auth-error,.auth-err { font-size:.78rem;color:var(--red);margin-top:12px;min-height:18px; }
.auth-success { font-size:.82rem;color:#22c55e;margin-top:12px;padding:10px 12px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:8px;line-height:1.4; }
.auth-forgot-btn { background:none;border:none;color:var(--red);font-size:.75rem;font-family:'Barlow',sans-serif;cursor:pointer;padding:0;text-decoration:underline;opacity:.8;transition:opacity .15s; }
.auth-forgot-btn:hover { opacity:1; }
.auth-back-btn { background:none;border:1px solid var(--border2);color:var(--t2);font-size:.78rem;font-family:'Barlow',sans-serif;cursor:pointer;padding:4px 10px;border-radius:6px;transition:all .15s; }
.auth-back-btn:hover { border-color:var(--red);color:var(--red); }
.auth-google,.auth-google-btn { width:100%;padding:11px;border:1px solid var(--border2);border-radius:10px;background:var(--s2);color:var(--t1);font-family:'Barlow',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:border-color var(--transition); }
.auth-google:hover { border-color:var(--border2); }

/* ─── Landing page ─── */
/* #landingScreen est maintenant géré dans main.css */
.landing-bg { position:absolute;inset:0;overflow:hidden;pointer-events:none; }
.landing-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(14,165,233,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.04) 1px,transparent 1px);background-size:60px 60px; }
.landing-content { position:relative;z-index:1;text-align:center;padding:40px 24px;max-width:540px;width:100%; }
.landing-logo { margin-bottom:16px; }
.landing-logo-title { font-family:'Orbitron',sans-serif;font-weight:900;font-size:2rem;letter-spacing:.1em;background:linear-gradient(135deg,#fff,var(--red));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.landing-logo-sub { font-family:'Orbitron',sans-serif;font-size:.8rem;color:var(--t3);letter-spacing:.3em;margin-top:4px; }
.landing-tagline { font-size:1rem;color:var(--t2);margin:16px 0 28px;line-height:1.6; }
.landing-features { display:flex;flex-direction:column;gap:10px;margin-bottom:32px;text-align:left; }
.landing-feat { display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--s2);border:1px solid var(--border);border-radius:10px; }
.landing-feat-icon { font-size:1.1rem;flex-shrink:0; }
.landing-ctas { display:flex;gap:12px;justify-content:center;margin-bottom:20px;flex-wrap:wrap; }
.landing-btn-primary { padding:13px 28px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;font-family:'Orbitron',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;cursor:pointer;transition:opacity .2s; }
.landing-btn-primary:hover { opacity:.88; }
.landing-btn-secondary { padding:13px 28px;border:1px solid var(--border2);border-radius:10px;background:var(--s2);color:var(--t1);font-family:'Barlow',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color .2s; }
.landing-btn-secondary:hover { border-color:var(--red); }
.landing-footer { font-size:.72rem;color:var(--t3);margin-top:8px; }
.landing-invite-wrap { margin-bottom:20px; }
.landing-invite-badge { display:inline-flex;align-items:center;gap:8px;background:rgba(0,230,118,.1);border:1px solid rgba(0,230,118,.25);border-radius:20px;padding:6px 16px;font-size:.78rem;font-weight:600;color:var(--green);margin-bottom:8px; }
.landing-invite-msg { font-size:.82rem;color:var(--t2);margin-bottom:16px; }

/* ─── Communauté composer ─── */
.community-composer { background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:20px; }
.composer-avatar { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--orange));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;font-family:'Orbitron',sans-serif;flex-shrink:0; }
.composer-body { display:flex;flex-direction:column;gap:12px; }
.composer-input { width:100%;background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--t1);font-family:'Barlow',sans-serif;font-size:.88rem;resize:none;outline:none;min-height:70px;transition:border-color var(--transition); }
.composer-input:focus { border-color:rgba(232,0,61,.3); }
.composer-toolbar { display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap; }
.composer-post-type { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px; }
.cpt-btn { padding:5px 12px;border-radius:8px;border:1px solid var(--border);background:var(--s2);color:var(--t3);font-size:.72rem;font-weight:600;cursor:pointer;transition:all var(--transition); }
.cpt-btn:hover,.cpt-btn.active { border-color:var(--red);color:var(--red);background:rgba(232,0,61,.06); }
.composer-submit { padding:8px 18px;border:none;border-radius:8px;background:var(--red);color:#fff;font-family:'Barlow',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;transition:opacity var(--transition); }
.composer-submit:hover { opacity:.85; }
.composer-photo-btn { display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--s2);color:var(--t3);font-size:.75rem;font-weight:600;cursor:pointer;transition:all var(--transition); }
.composer-photo-btn:hover { border-color:var(--border2);color:var(--t1); }
.composer-photo-preview { display:flex;gap:8px;flex-wrap:wrap;margin-top:8px; }
.composer-card-results { max-height:200px;overflow-y:auto;background:var(--s2);border:1px solid var(--border);border-radius:10px;margin-top:6px; }
.composer-card-search { width:100%;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--t1);font-family:'Barlow',sans-serif;font-size:.82rem;outline:none;transition:border-color var(--transition);margin-bottom:6px; }
.composer-card-search:focus { border-color:rgba(232,0,61,.3); }
.composer-tagged-cards { display:flex;gap:8px;flex-wrap:wrap;margin-top:8px; }
.community-feed { display:flex;flex-direction:column;gap:12px; }
.feed-loading { text-align:center;padding:40px;color:var(--t3);font-size:.88rem; }

/* ─── Wishlist buttons ─── */
.wish-btn { flex:1;padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--s2);color:var(--t3);font-size:.78rem;font-weight:600;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;gap:6px; }
.wish-btn:hover { border-color:var(--border2);color:var(--t1); }
.wish-btn.want,.wi-want { border-color:rgba(14,165,233,.3);background:rgba(14,165,233,.07);color:var(--blue); }
.wish-btn.dbl,.wi-dbl { border-color:rgba(255,193,7,.3);background:rgba(255,193,7,.07);color:var(--gold); }
.want.active { border-color:rgba(14,165,233,.5);background:rgba(14,165,233,.12); }
.dbl.active { border-color:rgba(255,193,7,.5);background:rgba(255,193,7,.12); }

/* ─── Modal détails carte ─── */
.modal-info { flex:1; min-width:0; padding:22px 22px 20px; overflow-y:auto; max-height:92vh; }
.modal-num { font-family:'Orbitron',sans-serif;font-size:.6rem;font-weight:700;color:var(--dim);letter-spacing:.1em;margin-bottom:4px; }
.modal-team { font-size:.8rem;color:var(--t3);margin-bottom:16px; }
.modal-title { font-family:'Orbitron',sans-serif;font-size:1.2rem;font-weight:700;color:var(--t1);line-height:1.2;margin-bottom:20px; }
.modal-sec { font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--t3);margin-bottom:10px;font-family:'Barlow Condensed',sans-serif; }
.modal-pad { padding:20px; }
.modal-del-btn { padding:7px 14px;border:1px solid rgba(232,0,61,.3);border-radius:7px;background:transparent;color:var(--red);font-size:.72rem;font-weight:600;cursor:pointer;transition:all var(--transition); }
.modal-del-btn:hover { background:rgba(232,0,61,.08); }
.modal-prog { height:4px;background:var(--s3);border-radius:2px;margin-bottom:12px;overflow:hidden; }
.modal-prog-bar { height:100%;background:linear-gradient(90deg,var(--green),#00c853);border-radius:2px;transition:width .3s; }

/* ─── Parallèles dans modal ─── */
.par-rows { display:flex;flex-direction:column;gap:6px; }
.par-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  transition:all var(--transition);
  min-width:0;
}
.par-row:hover { border-color:var(--border2); }
.par-row.lit { border-color:rgba(0,230,118,.3);background:rgba(0,230,118,.04); }
.par-chk {
  width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border2);
  flex-shrink:0;transition:all var(--transition);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;color:#fff;
}
.par-row.lit .par-chk { background:var(--green);border-color:var(--green); }
.par-row.owned .par-chk { background:var(--green);border-color:var(--green); }
/* Info principale — prend toute la largeur disponible */
.par-info {
  flex:1;
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:nowrap;
}
/* Nom du parallèle — ne wrap jamais, truncate si besoin */
.par-nm {
  font-size:.82rem;
  font-weight:600;
  color:var(--t1);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:5px;
}
/* Numérotation /299 etc */
.par-serial {
  font-size:.72rem;
  color:var(--t3);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
}
/* Disponibilité — badges inline à droite */
.par-avail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  flex-shrink: 0;
  margin-left: auto;
  max-width: 130px;
}
.par-avail-badge {
  font-size: .58rem;
  color: var(--t3);
  background: var(--s3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  line-height: 1.5;
}
/* Pastille couleur du parallèle */
.par-swatch {
  display:inline-block;
  width:9px;height:9px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  flex-shrink:0;
}

/* ─── Formulaire ajout carte ─── */
.modal-pad .modal-title { font-size:1rem; }
.form-row { display:flex;gap:10px;margin-bottom:14px; }
.form-grp { flex:1;display:flex;flex-direction:column;gap:5px; }
.form-grp label { font-size:.7rem;color:var(--t3);letter-spacing:.1em;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif; }
.form-grp input,.form-grp select,.form-grp textarea { background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--t1);font-family:'Barlow',sans-serif;font-size:.85rem;outline:none;transition:border-color var(--transition); }
.form-grp input:focus { border-color:rgba(232,0,61,.4); }
.btn-p,.btn-s { padding:9px 18px;border-radius:8px;font-weight:700;font-size:.82rem;cursor:pointer;transition:all var(--transition); }
.btn-p { background:var(--red);border:none;color:#fff; }
.btn-p:hover { opacity:.88; }
.btn-s { background:transparent;border:1px solid var(--border);color:var(--t2); }
.btn-s:hover { border-color:var(--border2);color:var(--t1); }
.btn-row { display:flex;gap:8px;justify-content:flex-end;margin-top:16px; }

/* ─── Admin ─── */
.admin-panel-overlay { position:fixed;inset:0;background:rgba(6,8,13,.92);backdrop-filter:blur(12px);z-index:400;display:none;align-items:center;justify-content:center;padding:20px; }
.admin-panel-overlay.open { display:flex; }
.admin-section { margin-bottom:20px; }
.admin-global-section { margin-bottom:20px; }
.admin-par-global-list { display:flex;flex-direction:column;gap:6px;margin-bottom:14px; }
.admin-par-global-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.admin-par-global-row input {
  flex: 1;
  padding: 6px 8px;
  background: var(--s3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--t1);
  font-size: .78rem;
  font-family: 'Barlow', sans-serif;
  min-width: 0;
}
.admin-par-global-row input[style*="width:70px"] {
  flex: 0 0 70px;
}
.aef-btn-del-par {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: .5;
  transition: opacity .15s;
  flex-shrink: 0;
}
.aef-btn-del-par:hover { opacity: 1; }
.admin-search { width:100%;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--t1);font-family:'Barlow',sans-serif;font-size:.85rem;outline:none;margin-bottom:12px;transition:border-color var(--transition); }
.admin-search:focus { border-color:rgba(232,0,61,.4); }
.aef-row { display:flex;gap:10px; }

/* ─── Settings ─── */
.settings-section { margin-bottom:20px; }
.settings-label { display:block;font-size:.72rem;color:var(--t3);letter-spacing:.12em;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif;margin-bottom:6px; }
.settings-input { width:100%;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--t1);font-family:'Barlow',sans-serif;font-size:.9rem;outline:none;transition:border-color var(--transition); }
.settings-input:focus { border-color:rgba(232,0,61,.4); }
.settings-toggle-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0; }
.settings-community { padding-top:8px;border-top:1px solid var(--border); }

/* ─── Filter drawer mobile ─── */
.filter-drawer-overlay { position:fixed;inset:0;background:rgba(6,8,13,.8);z-index:200;display:none;align-items:flex-end;justify-content:center; }
.filter-drawer-overlay.open { display:flex; }
.filter-drawer { background:var(--s1);border-radius:20px 20px 0 0;padding:24px;width:100%;max-height:75vh;overflow-y:auto; }
.filter-drawer-grid { display:flex;flex-direction:column;gap:12px;margin-bottom:16px; }
.fdr-select { width:100%;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--t1);font-family:'Barlow',sans-serif;font-size:.88rem;outline:none;appearance:none; }
.fdr-row { display:flex;flex-wrap:wrap;gap:8px; }
.fdr-btn { padding:8px 14px;border:1px solid var(--border);border-radius:8px;background:var(--s2);color:var(--t2);font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--transition); }
.fdr-btn:hover,.fdr-btn.active { border-color:var(--red);color:var(--red); }
.fdr-close { width:100%;padding:12px;border:none;background:var(--s3);border-radius:10px;color:var(--t1);font-size:.85rem;font-weight:600;cursor:pointer;margin-top:8px; }
.mobile-filter-btn { position:fixed;bottom:20px;right:20px;background:var(--red);border:none;border-radius:50%;width:52px;height:52px;color:#fff;font-size:1.2rem;cursor:pointer;z-index:100;box-shadow:0 4px 16px rgba(232,0,61,.4);display:none; }

/* ─── Offer feature text ─── */
.offer-feature-text { flex:1; }

/* ─── Offer / sub ─── */
.dbl { }
.want { }

@media (max-width:900px) {
  .mobile-filter-btn { display:flex;align-items:center;justify-content:center; }
}