/* Adjugé! — front. Extrait de app.css (Écran liste, règles, porte-monnaie).
   Les app.*.css sont chargés DANS L'ORDRE (la cascade en dépend) ;
   ne pas réordonner les <link>. */
/* ---------- Écran liste (Favoris / Mes annonces) ---------- */
#screen-list { padding-top: calc(8px + var(--sat)); padding-bottom: calc(110px + var(--sab)); }
.list-head { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.list-head .page-title { margin-top: 0; }
.list-back { font-size: 24px; line-height: 1; padding-bottom: 3px; flex-shrink: 0; }
.list-grid { padding: 18px 0 0; }
/* « Mes abonnements » : liste de VENDEURS en lignes (pas une grille de cartes).
   Réutilise .p-row (avatar + nom + chevron). */
.list-grid.rows { display: block; padding-top: 12px; }
.list-grid.rows .p-row { margin-bottom: 8px; }

/* ---------- Menu « ⋯ » du profil vendeur (feuille d'actions, façon iOS) ----
   Bouton dans l'en-tête (poussé à droite) + feuille d'actions centrée :
   Partager (bleu), Signaler / Bloquer (rouge), Fermer (bleu, à part). */
.list-menu { margin-left: auto; font-size: 25px; line-height: 1; flex-shrink: 0; }

/* ---------- Recherche dans les favoris ---------- */
/* Loupe à la hauteur du titre, poussée à droite (le titre prend l'espace). */
.fav-search-btn { margin-left: auto; flex-shrink: 0; color: #2B2118; }
.fav-search-btn.on { color: #E8622C; }
/* Barre dépliée sous l'en-tête : champ plein + bouton effacer. */
.fav-search { display: flex; align-items: center; gap: 8px; margin-top: 12px; position: relative; }
.fav-search-input {
  flex: 1; height: 44px; padding: 0 38px 0 14px;
  border: 1px solid #E4DCCF; border-radius: 12px; background: #FFFFFF;
  font-size: 16px; color: #2B2118; outline: none;
}
.fav-search-input:focus { border-color: #E8622C; }
/* Masque le bouton « effacer » natif de WebKit (on a le nôtre, #fav-search-clear). */
.fav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fav-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 50%; background: #EFE9E0;
  color: #6B5E4E; font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#seller-menu-backdrop {
  position: fixed; inset: 0; z-index: 65; background: rgba(24,17,9,0.45);
  animation: fadeIn 0.2s ease both;
}
.action-sheet {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 66;
  padding: 0 8px calc(8px + var(--sab));
  animation: sheetUp 0.32s cubic-bezier(0.2,0.9,0.3,1) both;
}
.action-group {
  background: #FFFFFF; border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(24,17,9,0.20);
}
.action-row {
  display: block; width: 100%; text-align: center;
  padding: 17px 16px; font-size: 17px; font-weight: 600; color: var(--ink);
  background: #FFFFFF; transition: background 0.12s;
}
.action-row:active { background: var(--chip-bg); }
.action-group .action-row + .action-row { border-top: 1px solid var(--line); }
.action-primary { color: #0A84FF; font-weight: 700; }
.action-danger { color: #E5484D; }
.action-cancel {
  margin-top: 8px; border-radius: 16px; color: #0A84FF; font-weight: 800;
  box-shadow: 0 10px 34px rgba(24,17,9,0.20);
}

/* ---------- Profil VENDEUR (« suivre un membre », façon Vinted) ---------- */
/* En-tête riche au-dessus des articles : avatar, note, badges, compteurs,
   bouton « Suivre ». C'est le SEUL endroit où l'on suit un membre. */
.seller-profile { padding: 16px 0 2px; }
.sp-card { display: flex; align-items: center; gap: 13px; }
.sp-id { flex: 1; min-width: 0; }
.sp-name { font-size: 17px; font-weight: 800; line-height: 1.2; }
.sp-rating { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* Note en étoiles du header profil (façon Vinted) : barre d'étoiles + valeur +
   « (N) ». Masquée quand le vendeur n'a aucun avis. */
.sp-rating .stars-bar { font-size: 15px; letter-spacing: 1.5px; vertical-align: -2px; }
.sp-rate-num { font-weight: 800; color: var(--ink); margin: 0 5px 0 4px; }
.sp-rate-count { color: var(--muted); }
.sp-info { margin-top: 13px; display: flex; flex-direction: column; gap: 7px; }
.sp-info-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--ink-soft);
}
.sp-info-row strong { font-weight: 800; color: var(--ink); }
.sp-ico { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
/* « Abonnés / Abonnements » du profil = liens CLIQUABLES (façon Vinted : on
   touche le compteur pour voir la LISTE des membres). Bouton remis à plat
   (pas de chrome de bouton), souligné pour signaler l'interaction. */
.sp-stats { flex-wrap: wrap; gap: 6px; }
.sp-stat {
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: var(--ink-soft); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--muted2);
}
.sp-stat:active { opacity: 0.55; }
.sp-dot { color: var(--muted2); }
.sp-articles { margin-top: 8px; }

/* Bouton « Suivre / ✓ Suivi » (pleine largeur). Façon Vinted : PLEIN quand on
   ne suit pas encore (engageant), CONTOUR discret une fois suivi. */
.follow-btn {
  appearance: none; border: 1.5px solid var(--ink); background: #FFFFFF;
  color: var(--ink); font-weight: 800; font-size: 13px; line-height: 1;
  padding: 9px 15px; border-radius: 999px; white-space: nowrap;
  transition: opacity 0.1s, background 0.15s, color 0.15s;
}
.follow-btn:active { opacity: 0.85; }
.profile-follow {
  display: block; width: 100%; margin-top: 14px; text-align: center;
  padding: 13px 16px; font-size: 14.5px;
  background: var(--ink); color: var(--bg);   /* « Suivre » : plein */
}
.profile-follow.on {
  background: #FFFFFF; color: var(--ink);      /* « ✓ Suivi » : contour */
}

/* ---------- Règles des enchères ---------- */
/* La bande basse (110px) réserve la place de la tabbar, qui reste visible sur
   ce sous-écran (cf. TABS dans app.core.js). */
#screen-rules { padding-top: calc(8px + var(--sat)); padding-bottom: calc(110px + var(--sab)); }
.rules-updated {
  margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rules { margin-top: 8px; }
.rules h2 { margin-top: 26px; font-size: 14.5px; font-weight: 800; }
.rules p { margin-top: 8px; font-size: 13px; color: var(--ink-soft); line-height: 1.65; }
.rules ul { margin: 8px 0 0; padding-left: 20px; }
.rules li { font-size: 13px; color: var(--ink-soft); line-height: 1.65; }
.rules strong { font-weight: 800; color: var(--ink); }
.rules a { color: var(--orange); font-weight: 700; }

/* Lien « Règles des enchères » inséré dans un texte courant */
.rules-link {
  color: var(--orange); font-weight: 700; text-decoration: underline;
  font-size: inherit;
}
.sheet-legal { margin-top: 14px; text-align: center; font-size: 11.5px; color: var(--muted2); }

/* ---------- Questions fréquentes (FAQ, accordéon) ---------- */
#screen-faq { padding-top: calc(8px + var(--sat)); padding-bottom: calc(110px + var(--sab)); }
/* Lien « Règles » dans le sous-titre (bouton stylé en lien, CSP : pas d'<a>) */
.faq-link {
  color: var(--orange); font-weight: 700; text-decoration: underline;
  font-size: inherit;
}
.faq { margin-top: 16px; }
.faq-cat {
  margin: 24px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.faq-cat:first-child { margin-top: 8px; }
.faq-item {
  background: #FFFFFF; border: 1px solid var(--card-line); border-radius: 14px;
  margin-top: 10px; overflow: hidden;
}
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; text-align: left;
  font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4;
}
.faq-q:active { background: var(--bg); }
.faq-chev {
  margin-left: auto; flex-shrink: 0; font-size: 20px; color: var(--muted2);
  transition: transform 0.2s ease;
}
.faq-item.open .faq-chev { transform: rotate(90deg); color: var(--orange); }
.faq-a { display: none; padding: 0 16px 15px; }
.faq-item.open .faq-a { display: block; }
.faq-a p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

/* Barre vendeur (annulation) sur sa propre annonce */
.cta.danger { background: var(--red); box-shadow: 0 6px 18px rgba(215,38,61,0.3); }
.cta:disabled { opacity: 0.45; transform: none; cursor: default; }
/* Bouton CTA en cours de traitement : texte masqué + spinner centré (réutilise
   l'animation feedspin d'app.extras.css). Ex. « Retirer mes gains » pendant le
   virement, le temps de l'aller-retour Stripe. */
.cta.btn-loading { color: transparent !important; position: relative; pointer-events: none; }
.cta.btn-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px;
  margin: -10px 0 0 -10px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.45); border-top-color: #FFFFFF;
  animation: feedspin 0.7s linear infinite;
}

/* ---------- Porte-monnaie ---------- */
#screen-wallet { padding-top: calc(8px + var(--sat)); padding-bottom: calc(110px + var(--sab)); }
/* Transactions partage la même bande basse (la tabbar reste visible). */
#screen-transactions { padding-bottom: calc(110px + var(--sab)); }
.wallet-card {
  margin-top: 16px; background: var(--ink); color: var(--bg);
  border-radius: 20px; padding: 20px;
}
/* « Montant en attente » (séquestre) épinglé en haut de la carte, façon
   Vinted : rangée pleine largeur cliquable, séparée du disponible par un
   filet. Le ⓘ ouvre le détail (libération + ventes en cours). */
.wallet-pending {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px; margin: 0; padding: 0 0 14px;
  background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--bg); text-align: left; cursor: pointer; font-family: inherit;
}
.wallet-pending:active { opacity: 0.7; }
.wallet-pending-label { font-size: 13px; font-weight: 700; opacity: 0.82; }
.wallet-pending-right { display: flex; align-items: center; gap: 8px; }
.wallet-pending-amt {
  font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.wallet-pending-ic {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; font-style: italic; line-height: 1;
  opacity: 0.85;
}
/* Titre de sous-groupe dans « Mes achats » (ex. « Mes mises en avant »),
   sur fond clair de l'écran transactions. */
.tx-group-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted2); margin: 20px 0 8px;
}
/* Montant DISPONIBLE (retirable) : gros, centré sous le filet. */
.wallet-avail { text-align: center; padding: 20px 0 6px; }
.wallet-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; opacity: 0.6;
}
.wallet-balance {
  font-size: 44px; font-weight: 900; letter-spacing: -1px;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.wallet-avail .wallet-label { margin-top: 4px; }
#wallet-withdraw { margin-top: 16px; }
.wallet-note { margin-top: 10px; font-size: 11px; opacity: 0.55; text-align: center; }
.w-amount { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--muted); }
.w-amount.plus { color: var(--green-ink); }

/* Reçu PDF par transaction : la ligne du porte-monnaie est scindée en une
   zone principale cliquable (ouvre le détail) + un petit bouton « reçu » à
   droite (un bouton ne peut pas en contenir un autre → conteneur en div). */
.p-row-tap {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.p-row-tap:active { opacity: 0.85; }
.p-row-recu {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--card-line); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted);
}
.p-row-recu:active { background: var(--chip-bg); }
/* Bouton « Télécharger mon relevé » (sous la carte solde) : discret, pleine
   largeur. */
.wallet-statement-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 12px 0 4px; padding: 12px 16px;
  border: 1px solid var(--card-line); border-radius: 14px; background: #FFFFFF;
  font-size: 14px; font-weight: 800; color: var(--ink); cursor: pointer;
}
.wallet-statement-btn:active { background: var(--chip-bg); }
.wsb-ic { font-size: 16px; }

/* Stripe Connect (virements bancaires du vendeur) */
.connect-card {
  margin-top: 12px; background: #FFFFFF; border: 1px solid var(--card-line);
  border-radius: 16px; padding: 14px;
}
.connect-row { display: flex; align-items: center; gap: 10px; }
.connect-dot {
  width: 10px; height: 10px; border-radius: 999px; background: var(--faint);
  flex-shrink: 0;
}
.connect-dot.on { background: var(--green); }
.connect-dot.pending { background: var(--orange); }
.connect-info { flex: 1; min-width: 0; }
.connect-title { font-size: 13.5px; font-weight: 800; }
.connect-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

/* Onboarding Connect + paiement embarqués : panneaux plein écran dans l'app */
#onboard-overlay, #checkout-overlay {
  position: fixed; inset: 0; z-index: 60; overflow: auto;
  background: var(--bg);
  max-width: 480px; margin: 0 auto;
  padding: calc(14px + var(--sat)) 18px calc(30px + var(--sab));
  animation: fadeIn 0.18s ease;
}
#checkout-container { margin-top: 16px; min-height: 380px; }
.onboard-head { display: flex; align-items: center; justify-content: space-between; }
.onboard-sub { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
#onboard-container { margin-top: 16px; min-height: 320px; }

/* Lightbox photos : plein écran, une photo par « page », le scroll-snap
   horizontal donne le défilement au doigt nativement (pas de JS de drag). */
#lightbox {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(12, 9, 6, 0.96);
  animation: fadeIn 0.18s ease;
}
.lb-track {
  height: 100%; display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lb-track::-webkit-scrollbar { display: none; }
.lb-item {
  flex: 0 0 100%; height: 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  padding: calc(60px + var(--sat)) 0 calc(48px + var(--sab));
}
.lb-item img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  display: block;
}
.lb-close {
  position: absolute; top: calc(14px + var(--sat)); right: 14px;
  z-index: 1; width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255,255,255,0.94); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.lb-dots { bottom: calc(48px + var(--sab)); }
/* Compteur « 2 / 3 » sous les points — toujours affiché, même « 1 / 1 » */
.lb-count {
  position: absolute; bottom: calc(16px + var(--sab));
  left: 50%; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.16);
  color: #FFFFFF; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; pointer-events: none;
}

/* Filtres du feed : panneau plein écran (catégorie, tri, prix, critères) */
#filters-sheet {
  position: fixed; inset: 0; z-index: 55; overflow: auto;
  background: var(--bg); max-width: 480px; margin: 0 auto;
  padding: calc(14px + var(--sat)) 18px calc(30px + var(--sab));
  animation: fadeIn 0.18s ease;
}
.filter-cat-btn { margin-top: 7px; text-align: left; font-weight: 600; }
.seg.wrap { flex-wrap: wrap; }
.filter-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip {
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: #FFFFFF; color: #5C5347; border: 1px solid var(--line);
}
.filter-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filter-hint { margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.filters-apply { margin-top: 24px; }
#filters-reset { display: block; margin: 14px auto 0; }

/* Wizard « Déposer une annonce » (façon leboncoin) */
.sell-head { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.sell-back { font-size: 26px; line-height: 1; padding: 0 6px 3px 0; color: var(--ink); }
.sell-head-title { flex: 1; text-align: center; font-size: 15px; font-weight: 800; }
.sell-step-count { font-size: 12px; font-weight: 700; color: var(--muted2); min-width: 28px; text-align: right; }
.sell-progress { margin-top: 10px; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
#sell-progress-bar { height: 100%; width: 20%; border-radius: 999px; background: var(--orange); transition: width 0.25s ease; }
.step-title { margin-top: 18px; font-size: 22px; font-weight: 900; letter-spacing: -0.4px; }
.sell-step .page-sub { margin-top: 6px; }
.sell-step .cta { margin-top: 24px; }
.sell-step { animation: fadeIn 0.18s ease; }

/* Récapitulatif (étape 5) */
.recap-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 10px; padding: 12px 14px; background: #FFFFFF;
  border: 1px solid var(--card-line); border-radius: 13px; text-align: left;
}
.recap-main { flex: 1; min-width: 0; }
.recap-label { font-size: 11px; font-weight: 800; color: var(--muted2); text-transform: uppercase; letter-spacing: 0.4px; }
.recap-value { margin-top: 2px; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap-edit { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }

/* Profil : tuiles d'accès rapide */
.quick-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-tile {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 14px; background: #FFFFFF; border: 1px solid var(--card-line);
  border-radius: 14px; font-size: 13.5px; font-weight: 700; text-align: left;
  transition: transform 0.1s;
}
.quick-tile:active { transform: scale(0.97); }
.quick-ico { font-size: 18px; }
.quick-tile .favs-count { margin-left: auto; }

/* Recherche : lignes enrichies (récentes + sauvegardées) */
.recent-ico { font-size: 15px; flex-shrink: 0; }
.recent-main { flex: 1; min-width: 0; }
.recent-q { font-size: 13.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-sub { margin-top: 1px; font-size: 11.5px; color: var(--muted2); }

/* Popup d'interruption du dépôt (3 choix, façon leboncoin) */
#sell-leave-backdrop {
  position: fixed; inset: 0; z-index: 70; background: rgba(24,17,9,0.45);
  animation: fadeIn 0.2s ease both;
}
#sell-leave-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 71; width: calc(100% - 56px); max-width: 360px;
  background: #FFFFFF; border-radius: 20px; padding: 22px 20px 14px;
  text-align: center; animation: leaveIn 0.22s ease both;
}
/* Le centrage vit dans transform: translate(-50%,-50%) — les keyframes
   DOIVENT le conserver, sinon le modal part en bas à droite. */
@keyframes leaveIn {
  from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.leave-title { font-size: 17px; font-weight: 900; letter-spacing: -0.2px; }
.leave-sub { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.leave-opt {
  display: block; width: 100%; margin-top: 6px; padding: 14px 8px;
  font-size: 15px; font-weight: 700; color: var(--orange);
  border-top: 1px solid var(--line);
}
.leave-opt:first-of-type { margin-top: 16px; }
.leave-opt.primary { font-weight: 800; }

/* Cartes brouillon (Mes annonces) */
.draft-card {
  position: relative; display: flex; margin-bottom: 12px; background: #FFFFFF;
  border: 1px solid var(--card-line); border-radius: 16px; overflow: hidden;
}
.draft-tag {
  flex-shrink: 0; width: 90px; background: var(--bg-out);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--muted); text-align: center;
}
.draft-body { flex: 1; min-width: 0; padding: 14px 14px 16px; }
.draft-title {
  font-size: 15px; font-weight: 800; padding-right: 34px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.draft-meta { margin-top: 4px; font-size: 12px; color: var(--muted2); }
.draft-finish { margin-top: 12px; }
.draft-del {
  position: absolute; top: 8px; right: 8px; width: 38px; height: 38px;
  border-radius: 999px; background: var(--chip-bg); color: var(--muted);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  transition: transform 0.1s, background 0.1s;
}
.draft-del:active { transform: scale(0.9); background: #F2D9CB; color: var(--red); }
.draft-del svg { display: block; }

/* Localisation : « Lyon (69) » sur cartes et fiche */
.g-loc { font-size: 11.5px; color: var(--muted2); margin-top: 1px; }
.d-loc { margin-top: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.f-opt { font-weight: 600; color: var(--muted2); text-transform: none; }

/* Questions au vendeur */
.q-empty { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.q-block { margin-top: 12px; padding: 12px 14px; background: #FFFFFF;
  border: 1px solid var(--card-line); border-radius: 14px; }
.q-head { display: flex; align-items: center; gap: 8px; }
/* Avatar de l'auteur d'une question (photo de profil publique ou initiales) */
.q-avatar {
  width: 26px; height: 26px; border-radius: 999px; background: #EADBC6;
  color: var(--chip-ink); display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; flex-shrink: 0;
}
.q-name { font-size: 12.5px; font-weight: 800; }
.q-when { font-size: 11px; color: var(--muted2); }
.q-text { margin-top: 4px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.q-answer { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--orange);
  background: #FBF4EC; border-radius: 0 10px 10px 0; }
/* En-tête de la réponse : avatar (photo de profil) + « Réponse de … » du vendeur */
.q-answer-head { display: flex; align-items: center; gap: 8px; }
.q-answer-tag { font-size: 11px; font-weight: 800; color: var(--orange-dark);
  text-transform: uppercase; letter-spacing: 0.4px; }
.q-pending { margin-top: 8px; font-size: 11.5px; color: var(--muted2); font-style: italic; }
.q-ask-box { margin-top: 12px; }
.q-ask { display: flex; gap: 8px; align-items: center; }
.q-ask-box .q-ask { margin-top: 0; }
/* Réponse inline du vendeur : un .q-ask créé DANS un .q-block (hors q-ask-box) ;
   il garde l'espacement que portait jadis .q-ask de base, sous le texte. */
.q-block > .q-ask { margin-top: 12px; }
.q-ask .f-input { margin-top: 0; flex: 1; }
.q-send {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px;
  background: var(--ink); color: var(--bg); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.q-send:disabled { opacity: 0.5; }
/* Coche « Question privée » : visible du vendeur et de l'auteur seuls. */
.q-private-opt {
  margin-top: 9px; display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.q-private-opt input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--orange);
  margin: 0;
}
.q-private-text { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.q-private-text em { font-style: normal; font-weight: 500; color: var(--muted2); }
/* Question privée affichée (auteur/vendeur uniquement) : repère discret. */
.q-block--private { background: #FBF4EC; border-color: #E7D2B3; }
.q-private-badge {
  font-size: 10px; font-weight: 800; color: var(--orange-dark);
  background: #F4E4CE; padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.3px;
}

/* Alertes de recherche */
.alert-link { display: block; margin-top: 12px; font-size: 13.5px;
  font-weight: 700; color: var(--orange); text-decoration: underline;
  text-underline-offset: 3px; }
/* Sauvegardée : cœur (et libellé) en noir, comme demandé */
.alert-link.saved { color: var(--ink); }
.alert-row { display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 11px 13px; background: #FFFFFF; border: 1px solid var(--card-line);
  border-radius: 13px; }
.alert-row .slot-del { position: static; flex-shrink: 0; margin-left: auto; }
.alert-txt { font-size: 13px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Critères affichés sur la fiche (label · valeur) */
.d-attrs { margin-top: 8px; }
.d-attr {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.d-attr-label { color: var(--muted); }
.d-attr-value { font-weight: 700; text-align: right; }

/* Catégorie de l'écran Vendre : suggestions sous le titre (radio + icône +
   « Parent > Sous-catégorie », façon leboncoin) + sélecteur complet. */
#sell-sugg { margin-top: 4px; display: flex; flex-direction: column; }
.cat-sugg {
  display: flex; align-items: center; gap: 12px; padding: 9px 2px;
  text-align: left; font-size: 14.5px;
}
.cat-radio {
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid var(--faint); background: #FFFFFF; position: relative;
}
.cat-sugg.on .cat-radio { border-color: var(--orange); }
.cat-sugg.on .cat-radio::after {
  content: ''; position: absolute; inset: 4px; border-radius: 999px;
  background: var(--orange);
}
.cat-ico { font-size: 17px; flex-shrink: 0; }
.cat-path { color: var(--ink-soft); min-width: 0; }
.cat-path b { color: var(--ink); font-weight: 800; }
.cat-other-link {
  display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
/* Recherche de catégories en cours (le titre vient d'être tapé, on attend les
   suggestions du serveur) : petit spinner + libellé, pour signaler que des
   suggestions peuvent apparaître quand l'utilisateur cesse de taper. */
.sell-sugg-loading {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  color: var(--ink-soft); font-size: 14px;
}
.sell-sugg-loading .feed-spinner { width: 18px; height: 18px; border-width: 2px; }

/* Sélecteur complet : panneau plein écran, parents puis sous-catégories */
#cat-picker {
  position: fixed; inset: 0; z-index: 60; overflow: auto;
  background: var(--bg); max-width: 480px; margin: 0 auto;
  padding: calc(14px + var(--sat)) 18px calc(30px + var(--sab));
  animation: fadeIn 0.18s ease;
}
.cat-back { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
#cat-picker-list { margin-top: 8px; }
.cat-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 600; text-align: left;
}
.cat-row .chev { margin-left: auto; color: var(--muted2); font-size: 18px; }

/* Signalement d'une annonce */
.report-link {
  display: inline-block; margin-top: 12px; font-size: 12px;
  color: var(--muted2); text-decoration: underline;
}
.report-reasons { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.report-reason {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px;
  font-size: 13px; font-weight: 600; text-align: left; background: #FFFFFF;
}
.report-reason.on { border-color: var(--orange); background: #FDEEE3; font-weight: 800; }
#report-comment { margin-top: 12px; height: 64px; }
#report-submit { margin-top: 14px; }

/* ============ Profil vendeur : onglets + Évaluations (façon Vinted) ============ */
.sp-tabs {
  display: flex; gap: 4px; margin: 14px 0 4px;
  border-bottom: 1px solid var(--line);
}
.sp-tab {
  flex: 1; padding: 11px 4px 12px; font-size: 14.5px; font-weight: 700;
  color: var(--muted); background: none; position: relative;
  transition: color 0.12s;
}
.sp-tab.on { color: var(--ink); font-weight: 800; }
.sp-tab.on::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2.5px;
  border-radius: 3px; background: var(--ink);
}
.sp-reviews { margin-top: 4px; }

/* Carte de synthèse : grosse note + barre d'étoiles + répartition */
.rev-summary {
  padding: 18px 0 16px; border-bottom: 1px solid var(--line); text-align: center;
}
.rev-score-big {
  font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.rev-stars.stars-bar { margin: 8px auto 4px; display: inline-block; }
.stars-bar {
  position: relative; display: inline-block; font-size: 19px; line-height: 1;
  letter-spacing: 2px;
}
.stars-base { color: #E2D7C7; }
.stars-fill {
  position: absolute; left: 0; top: 0; color: #F5A623;
  overflow: hidden; white-space: nowrap;
}
.rev-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rev-breakdown { margin-top: 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.rev-break-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; font-weight: 600;
}
.rev-break-label { color: var(--ink-soft); }
.rev-break-label span { color: var(--muted); font-weight: 600; }
.rev-break-val {
  font-weight: 800; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rev-how {
  display: block; margin: 16px auto 0; font-size: 13px; font-weight: 700;
  color: var(--orange); background: none; text-align: center;
}
.rev-help {
  margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg);
  border: 1px solid var(--card-line); font-size: 12.5px; line-height: 1.55;
  color: var(--ink-soft); text-align: left;
}

/* Filtres (Toutes / Des membres / Automatiques) + tri */
.rev-filters { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.rev-chip {
  padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--chip-ink); background: #FFFFFF; border: 1.5px solid #E4D9CB;
  transition: transform 0.1s;
}
.rev-chip:active { transform: scale(0.96); }
.rev-chip.on { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.rev-sort { margin: 14px 2px 4px; font-size: 12px; color: var(--muted); }

/* Une évaluation */
.rev-item {
  display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.rev-avatar { width: 42px; height: 42px; flex-shrink: 0; font-size: 15px; }
.rev-avatar.auto {
  background: #FDE7CE; color: #C77A1B; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.rev-item-body { flex: 1; min-width: 0; }
.rev-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rev-item-name { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.rev-item-date { font-size: 12px; color: var(--muted2); white-space: nowrap; flex-shrink: 0; }
.rev-item-stars { margin-top: 3px; font-size: 14px; color: #F5A623; letter-spacing: 1px; }
.rev-item-comment {
  margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  white-space: pre-wrap; word-break: break-word;
}
.rev-item-comment.auto { color: var(--muted); font-style: italic; }
#rev-more { margin-top: 4px; }
.review-done { font-weight: 700; color: var(--green-ink); }

/* ============ Onglet « À propos » du profil membre (façon Vinted) ============ */
.sp-about { margin-top: 8px; }
/* Grande photo de profil (remplace l'en-tête compact sur cet onglet) */
.about-photo {
  width: 100%; aspect-ratio: 5 / 4; border-radius: 18px;
  background: var(--ink); color: var(--bg);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 800;
}
.about-name {
  margin-top: 14px; font-size: 22px; font-weight: 900; letter-spacing: -0.4px;
}
.about-block { margin-top: 16px; }
.about-block + .about-block { margin-top: 18px; }
.about-row {
  display: flex; align-items: center; gap: 9px; font-size: 14px;
  color: var(--ink-soft); padding: 4px 0;
}
.about-ico {
  font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; color: var(--muted);
}
.about-follow { flex-wrap: wrap; gap: 6px; }

/* ---------- Mes notifications (préférences e-mail) ---------- */
#screen-notifications { padding-top: calc(8px + var(--sat)); padding-bottom: calc(110px + var(--sab)); }
/* Carte regroupant les lignes-interrupteurs d'une section. */
.notif-card {
  background: var(--bg); border: 1px solid var(--card-line);
  border-radius: 16px; margin-top: 8px; overflow: hidden;
}
/* Scopé à .notif-card : la classe .notif-row est AUSSI portée par les lignes du
   JOURNAL de notifications (onglet Notifications de Messages, .conv-row.notif-row
   dans #notif-list). Sans ce scope, ce border-top fuyait sur la 1re ligne du
   journal (le reset :first-child ci-dessous étant, lui, déjà scopé .notif-card)
   → un 2e trait gris parasite sous les sous-onglets. */
.notif-card .notif-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; cursor: pointer;
  border-top: 1px solid var(--line);
}
.notif-card .notif-row:first-child { border-top: none; }
.notif-text { flex: 1; min-width: 0; }
.notif-label { font-size: 15px; font-weight: 700; color: var(--ink); }
.notif-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
/* Interrupteur iOS : input caché + piste glissante. Le bouton fait > 16px
   (pas de zoom iOS au focus). */
.switch { position: relative; flex-shrink: 0; width: 46px; height: 28px; }
.switch input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%; z-index: 1;
}
.switch-track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--faint); transition: background .18s ease;
}
.switch-track::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  transition: transform .18s ease;
}
.switch input:checked + .switch-track { background: var(--orange); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }