/* Adjugé! — styles mobile only, transposés de la maquette Claude Design.
   Palette : crème #FAF5EF, encre brune #221A12, orange brûlé #E8590C,
   rouge urgence #D7263D. Typographie : Archivo, chiffres tabulaires. */

:root {
  --bg: #FAF5EF;
  --bg-out: #EDE7DE;
  --ink: #221A12;
  --ink-soft: #4A4136;
  --orange: #E8590C;
  --orange-dark: #C2410C;
  --red: #D7263D;
  --muted: #8A7E70;
  --muted2: #A2937F;
  --faint: #C9BCA9;
  --line: #EBE1D4;
  --card-line: #EFE6D9;
  --chip-bg: #F3EAE0;
  --chip-ink: #6B5E4F;
  --green: #2F9E44;
  --green-ink: #2F7D44;
  --green-bg: #E5F2E4;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg-out); }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg-out);
  overscroll-behavior-y: none;
}
#app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}
button {
  font: inherit; color: inherit; background: none; border: none;
  padding: 0; cursor: pointer; touch-action: manipulation;
}
/* GARDE GLOBALE anti-zoom : un champ focalisé sous 16 px fait zoomer la
   page sur iOS Safari (sans retour arrière). Tout champ — présent ou
   futur — démarre à 16 px ; une règle plus spécifique peut grossir,
   JAMAIS réduire sous 16 px. */
input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
.spacer { flex: 1; }

@keyframes pricePulse { 0% { transform: scale(1); } 30% { transform: scale(1.09); color: var(--orange); } 100% { transform: scale(1); } }
@keyframes bidIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes urgentPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(215,38,61,0.45); } 50% { box-shadow: 0 0 0 8px rgba(215,38,61,0); } }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes confFall { from { transform: translateY(-40px) rotate(0deg); } to { transform: translateY(110vh) rotate(560deg); } }
/* La feuille est centrée par translateX(-50%) : les keyframes doivent le
   conserver, sinon l'animation écrase le centrage. */
@keyframes sheetUp { from { transform: translate(-50%, 70px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.07); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Écrans ---------- */
.screen { min-height: 100dvh; }
#screen-feed, #screen-search, #screen-sell, #screen-profile {
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}

/* ---------- Feed ---------- */
.feed-head {
  display: flex; align-items: center;
  padding: 10px 18px 2px;
}
/* Barre de recherche de l'accueil (façon Vinted) : un bouton habillé en
   champ de saisie, pleine largeur à la place du logo. */
.home-search {
  flex: 1; height: 44px; border-radius: 14px; background: #FFFFFF;
  border: 1px solid var(--line); display: flex; align-items: center;
  gap: 10px; padding: 0 14px; transition: transform 0.1s;
}
.home-search:active { transform: scale(0.985); }
.home-search-ph { font-size: 16px; color: var(--muted2); } /* = placeholder de l'écran recherche */
/* Bouton Filtres (façon leboncoin) : icône curseurs + badge de compte */
.filters-btn { position: relative; margin-left: 10px; flex-shrink: 0; }
.ic-sliders { display: flex; flex-direction: column; gap: 4px; width: 16px; padding-top: 2px; }
.ic-sliders i { display: block; height: 2px; border-radius: 2px; background: var(--ink); position: relative; }
.ic-sliders i::after {
  content: ''; position: absolute; top: -2px; width: 6px; height: 6px;
  border-radius: 999px; background: var(--ink);
}
.ic-sliders i:nth-child(1)::after { left: 2px; }
.ic-sliders i:nth-child(2)::after { right: 2px; }
.ic-sliders i:nth-child(3)::after { left: 6px; }
.filters-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--orange); color: #FFFFFF;
  font-size: 11px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; padding: 0 4px;
}
.icon-btn {
  width: 40px; height: 40px; border-radius: 999px; background: #FFFFFF;
  border: 1px solid var(--line); display: flex; align-items: center;
  justify-content: center; transition: transform 0.1s;
}
.icon-btn:active { transform: scale(0.94); }

/* Loupe dessinée en CSS, comme dans la maquette */
.ic-search { position: relative; width: 16px; height: 16px; display: block; }
.ic-search i {
  display: block; width: 11px; height: 11px;
  border: 2px solid var(--ink); border-radius: 999px;
}
.ic-search b {
  position: absolute; right: 0; bottom: 1px; width: 7px; height: 2px;
  background: var(--ink); border-radius: 2px; transform: rotate(45deg);
}
.ic-search.small i { border-color: var(--muted2); width: 10px; height: 10px; }
.ic-search.small b { background: var(--muted2); width: 6px; }

.cats {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 18px 16px;
  scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }
.cat-pill {
  flex-shrink: 0; padding: 8px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; background: #FFFFFF;
  color: #5C5347; border: 1px solid var(--line); white-space: nowrap;
}
.cat-pill.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.img-label {
  font-family: ui-monospace, Menlo, monospace; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; color: rgba(34,26,18,0.4);
  text-align: center; padding: 0 10px;
}
.star { color: var(--orange); font-weight: 700; }

/* Grille 2 colonnes */
.grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 0 18px;
}
.g-card { text-align: left; display: flex; flex-direction: column; gap: 3px; transition: opacity 0.1s; }
.g-card:active { opacity: 0.8; }
.g-photo {
  position: relative; height: 168px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(34,26,18,0.05);
  display: flex; align-items: center; justify-content: center;
}
.g-photo .img-label { font-size: 9px; letter-spacing: 1px; }
.g-chip {
  position: absolute; top: 9px; left: 9px; padding: 5px 9px; border-radius: 999px;
  background: rgba(34,26,18,0.78); font-size: 11.5px; font-weight: 800;
  color: #FFFFFF; font-variant-numeric: tabular-nums;
}
.g-chip.urgent { background: var(--red); animation: urgentPulse 1s ease-in-out infinite; }
.g-chip.over { background: rgba(34,26,18,0.5); }
.g-price-row { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; }
.g-price { font-size: 16.5px; font-weight: 900; font-variant-numeric: tabular-nums; }
.g-bids { font-size: 10.5px; font-weight: 600; color: var(--muted2); }
.g-title { font-size: 12px; font-weight: 500; color: var(--ink-soft); line-height: 1.35; }

.empty { padding: 40px 30px; text-align: center; }
.empty.slim { padding: 18px 10px; }
.empty-title { font-size: 15px; font-weight: 800; }
.empty-sub { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---------- Détail ---------- */
#screen-detail { position: relative; height: 100dvh; overflow: hidden; }
.detail-scroll { height: 100%; overflow: auto; padding-bottom: 150px; }
.d-photo {
  position: relative; height: 300px;
  display: flex; align-items: center; justify-content: center;
}
.float-btn {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px;
  width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,0.94);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: transform 0.1s;
}
.float-btn:active { transform: scale(0.94); }
.float-btn.back { left: 14px; right: auto; font-size: 24px; line-height: 1; padding-bottom: 3px; }
.float-btn.share { right: 62px; }
.float-btn.fav.on { color: var(--orange); }
.d-body { padding: 16px 18px 0; }
.d-chips { display: flex; align-items: center; gap: 6px; }
.chip {
  padding: 4px 10px; border-radius: 999px; background: var(--chip-bg);
  font-size: 11px; font-weight: 700; color: var(--chip-ink);
}
.muted-count { font-size: 12px; font-weight: 600; color: var(--muted2); }
#screen-detail h1 {
  margin-top: 10px; font-size: 21px; font-weight: 700;
  letter-spacing: -0.3px; line-height: 1.25;
}

.timerbox {
  margin-top: 14px; border-radius: 16px; padding: 14px 16px; background: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
}
.timerbox.urgent { background: var(--red); animation: urgentPulse 1s ease-in-out infinite; }
.timerbox.over { background: #9A8D7D; }
.t-left { display: flex; align-items: center; gap: 8px; }
.livedot {
  width: 7px; height: 7px; border-radius: 999px; background: #FFFFFF;
  animation: livePulse 1.4s ease-in-out infinite;
}
.t-caption {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(255,255,255,0.75);
}
.t-time {
  font-size: 26px; font-weight: 900; color: #FFFFFF;
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
}
.urgent { margin-top: 9px; }
.u-track { height: 4px; border-radius: 999px; background: #F2DFD9; overflow: hidden; }
.u-bar {
  height: 100%; border-radius: 999px; background: var(--red);
  width: 100%; transition: width 1s linear;
}
.u-label {
  margin-top: 6px; font-size: 11px; font-weight: 800; color: var(--red);
  letter-spacing: 1px; text-transform: uppercase;
}

.cur-label {
  margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted2);
}
.d-price {
  margin-top: 5px; font-size: 46px; font-weight: 900; letter-spacing: -1.5px;
  line-height: 1.05; font-variant-numeric: tabular-nums;
  transform-origin: left center;
}
.d-price.pulse { animation: pricePulse 0.55s cubic-bezier(0.2,0.9,0.3,1) both; }
.lead-row { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.lead-chip {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: 999px; background: var(--chip-bg);
  font-size: 12.5px; font-weight: 700; color: var(--chip-ink);
}
.lead-chip.me { background: var(--green-bg); color: var(--green-ink); }
.lead-dot { width: 7px; height: 7px; border-radius: 999px; background: #B9AA94; }
.lead-chip.me .lead-dot { background: var(--green); }
.auto-chip {
  padding: 7px 12px; border-radius: 999px; background: #FDEEE3;
  border: 1px solid #F5CDAA; font-size: 12px; font-weight: 700;
  color: var(--orange-dark);
}
.outbid {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #FBE7EA;
  border: 1px solid #F2C4CC; animation: bidIn 0.4s cubic-bezier(0.2,0.9,0.3,1) both;
}
.ob-title { font-size: 13.5px; font-weight: 800; color: #C01B30; }
.ob-sub { font-size: 12px; color: #A04B58; margin-top: 2px; }

.seller-card {
  margin-top: 18px; background: #FFFFFF; border: 1px solid var(--card-line);
  border-radius: 16px; padding: 13px 14px; display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; transition: opacity 0.1s;
}
.seller-card:active { opacity: 0.85; }
.avatar {
  width: 42px; height: 42px; border-radius: 999px; background: var(--ink);
  color: var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.avatar.big { width: 62px; height: 62px; font-size: 20px; }
.seller-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.seller-name { font-size: 13.5px; font-weight: 700; }
.seller-meta { font-size: 11.5px; color: var(--muted); }
.seller-badges { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.badge {
  padding: 3px 8px; border-radius: 999px; background: var(--chip-bg);
  font-size: 10px; font-weight: 700; color: var(--chip-ink);
}
.chev { font-size: 20px; color: var(--faint); }
.d-h2 { margin-top: 20px; font-size: 13.5px; font-weight: 800; }
.d-desc {
  margin-top: 6px; font-size: 13px; line-height: 1.6; color: #5C5347;
  text-wrap: pretty;
}

.hist-head { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }
.hist-title { font-size: 14px; font-weight: 800; }
.reddot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--red);
  animation: livePulse 1.2s ease-in-out infinite;
}
.history { display: flex; flex-direction: column; gap: 8px; }
.bid-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: 14px; background: #FFFFFF; border: 1px solid var(--card-line);
  animation: bidIn 0.45s cubic-bezier(0.2,0.9,0.3,1) both;
}
.bid-row.mine { background: #FDEEE3; border-color: #F5CDAA; }
.bid-avatar {
  width: 30px; height: 30px; border-radius: 999px; background: #EADBC6;
  color: var(--chip-ink); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.bid-row.mine .bid-avatar { background: var(--orange); color: #FFFFFF; }
.bid-main { flex: 1; min-width: 0; }
.bid-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.bid-row.mine .bid-name { font-weight: 800; }
.auto-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px; padding: 2px 6px;
  border-radius: 999px; background: var(--chip-bg); color: var(--muted);
  text-transform: uppercase;
}
.bid-when { font-size: 11px; color: var(--muted2); margin-top: 1px; }
.bid-amount { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bid-row.top .bid-amount { color: var(--orange); }

/* Barre d'enchère collée en bas */
.bidbar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 25;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  background: rgba(250,245,239,0.95); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
}
.bb-cur { display: flex; flex-direction: column; }
.bb-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted2);
}
.bb-price { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.cta {
  flex: 1; height: 54px; border-radius: 999px; background: var(--orange);
  color: #FFFFFF; display: flex; align-items: center; justify-content: center;
  font-size: 16.5px; font-weight: 800; letter-spacing: 0.2px;
  box-shadow: 0 8px 18px rgba(232,89,12,0.35); transition: transform 0.1s;
}
.cta:active { transform: scale(0.97); }
.cta.dark { background: var(--ink); color: var(--bg); box-shadow: none; }
.cta.wide { width: 100%; flex: none; }
.ended-pill {
  flex: 1; height: 54px; border-radius: 999px; background: #E5DBCC;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  font-size: 15.5px; font-weight: 800;
}
.linklike {
  margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--muted);
  text-decoration: underline;
}
.linklike.small { margin: 0; font-size: 12px; }

/* ---------- Victoire / défaite ---------- */
#screen-win, #screen-lose { position: relative; overflow: auto; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.conf {
  position: absolute; top: -20px; width: 7px; height: 12px; border-radius: 2px;
  opacity: 0.85; animation: confFall linear infinite;
}
.result-wrap {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: calc(60px + env(safe-area-inset-top)) 26px 60px;
  text-align: center; position: relative;
}
.result-wrap.lose { justify-content: flex-start; padding-top: calc(80px + env(safe-area-inset-top)); }
.win-check {
  width: 88px; height: 88px; border-radius: 999px; background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 36px rgba(232,89,12,0.35);
  animation: popIn 0.5s cubic-bezier(0.2,0.9,0.3,1) both;
  font-size: 38px; color: #FFFFFF; font-weight: 900;
}
.win-logo {
  margin-top: 22px; font-size: 44px; font-weight: 900; font-style: italic;
  letter-spacing: -1.2px; line-height: 1;
}
.win-logo span { color: var(--orange); }
.result-sub { margin-top: 10px; font-size: 14px; color: var(--muted); font-weight: 500; }
.result-card {
  margin-top: 26px; width: 100%; background: #FFFFFF; border: 1px solid var(--card-line);
  border-radius: 18px; padding: 14px; display: flex; align-items: center; gap: 13px;
  text-align: left;
}
.result-thumb { width: 58px; height: 58px; border-radius: 12px; flex-shrink: 0; }
.result-thumb.small { width: 52px; height: 52px; }
.result-info { flex: 1; }
.result-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.result-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.final-row { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; }
.final-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.final-price {
  font-size: 40px; font-weight: 900; letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums;
}
#win-share { margin-top: 22px; }
#win-pay { margin-top: 12px; }
.cta svg { flex-shrink: 0; }
.cta-ic { margin-right: 9px; }
.lose-circle {
  width: 84px; height: 84px; border-radius: 999px; background: #EFE3D4;
  display: flex; align-items: center; justify-content: center;
  animation: popIn 0.5s cubic-bezier(0.2,0.9,0.3,1) both;
  font-size: 30px; color: #B9AA94; font-weight: 700;
}
.lose-title { margin-top: 20px; font-size: 30px; font-weight: 900; letter-spacing: -0.6px; }
.lose-sub { margin-top: 9px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.lose-sub strong { font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-block { margin-top: 30px; width: 100%; text-align: left; }
.sim-title { font-size: 14px; font-weight: 800; margin-bottom: 11px; }
.sim-grid { padding: 0; }
.sim-grid .g-photo { height: 130px; border-radius: 14px; }
#lose-more { margin-top: 26px; }

/* ---------- Recherche / Vendre / Profil ---------- */
.page-pad { padding: 0 18px; }
.page-title { font-size: 24px; font-weight: 900; letter-spacing: -0.5px; margin-top: 10px; }
.page-sub { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.5; }
/* Barre de l'écran recherche + bouton « Fermer » qui ramène à l'accueil */
.search-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.search-close { flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.searchbox {
  flex: 1; height: 46px; border-radius: 14px; background: #FFFFFF;
  border: 1px solid var(--line); display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
}
/* 16px minimum sur TOUS les champs : en dessous, iOS Safari zoome
   automatiquement la page au focus — désagréable et sans retour arrière. */
.searchbox input {
  flex: 1; border: none; outline: none; background: none; font-size: 16px;
}
.searchbox input::placeholder { color: var(--muted2); }
.search-grid { padding: 18px 0 0; }
.sec-label {
  margin-top: 24px; font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
}
/* Suggestions de catégorie pendant la frappe (« moto dans Motos ») */
#search-suggest { margin-top: 8px; }
.suggest-line {
  flex: 1; min-width: 0; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggest-line b { font-weight: 700; color: var(--ink); }
.suggest-dans { color: var(--muted2); font-weight: 600; }
.suggest-cat { font-weight: 800; color: var(--orange); }

/* Barre d'outils des résultats de recherche : nombre + pilule Filtres */
.search-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; gap: 12px;
}
.search-count { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.filters-pill {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; background: #FFFFFF;
  border: 1px solid var(--line); font-size: 13px; font-weight: 700;
  transition: transform 0.1s;
}
.filters-pill:active { transform: scale(0.96); }
.filters-pill .ic-sliders { width: 15px; }
.filters-pill .filters-badge { position: static; margin-left: 2px; }

/* « Rechercher par catégorie » : ligne qui ouvre le sélecteur complet */
.cat-browse-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 15px 2px; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 700; text-align: left;
}
.cat-browse-row .chev { color: var(--muted2); font-size: 18px; }
/* Pastille du nombre de résultats d'une recherche sauvegardée */
.saved-count {
  flex-shrink: 0; min-width: 26px; padding: 3px 8px; border-radius: 999px;
  background: var(--orange); color: #FFFFFF; font-size: 11.5px;
  font-weight: 800; text-align: center;
}
.recent-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 13px 2px; border-bottom: 1px solid var(--card-line);
  font-size: 13.5px; font-weight: 500; text-align: left;
}
.recent-row:last-child { border-bottom: none; }
.recent-x { color: var(--faint); font-size: 12px; padding: 4px 6px; }

.photo-row { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; } /* jusqu'à 20 photos */
.photo-add {
  width: 94px; height: 94px; border-radius: 14px; border: 1.5px dashed #D9CDBA;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.photo-add .plus { font-size: 22px; font-weight: 700; color: var(--orange); }
.photo-label { font-size: 10.5px; font-weight: 700; color: var(--muted2); }
.photo-slot { width: 94px; height: 94px; border-radius: 14px; border: 1.5px dashed #E5DBCC; }
.photo-slot.filled {
  position: relative; border: 1px solid var(--card-line);
  background-size: cover; background-position: center;
}
.photo-slot.uploading {
  display: flex; align-items: center; justify-content: center;
  animation: uploadingPulse 1.1s ease-in-out infinite;
}
@keyframes uploadingPulse { 50% { opacity: 0.45; } }
.slot-del {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px;
  border-radius: 999px; background: rgba(34,26,18,0.82); color: #FFFFFF;
  font-size: 15px; line-height: 1; display: flex; align-items: center;
  justify-content: center;
}
/* Points de la galerie de la fiche (annonces multi-photos) */
.photo-dots {
  position: absolute; bottom: 12px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px; pointer-events: none;
}
.photo-dots span {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.55); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.photo-dots span.on { background: #FFFFFF; }
.f-label { display: block; margin-top: 20px; font-size: 12px; font-weight: 800; color: var(--chip-ink); }
.f-input {
  margin-top: 7px; width: 100%; min-height: 46px; border-radius: 13px;
  background: #FFFFFF; border: 1px solid var(--line); padding: 12px 14px;
  font-size: 16px; outline: none; /* < 16px = zoom auto iOS au focus */
}
.f-input:focus { border-color: var(--orange); }
.f-input.area { height: 84px; resize: vertical; }
.f-input::placeholder { color: var(--muted2); }
select.f-input { appearance: none; -webkit-appearance: none; }
.f-row { display: flex; gap: 12px; }
.f-col { flex: 1; min-width: 0; }
.f-col.wide { flex: 1.4; }
.price-input { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.price-input input {
  border: none; outline: none; width: 70%; font-size: 16px; font-weight: 800;
  background: none; padding: 12px 0; /* < 16px = zoom auto iOS au focus */
}
.price-input .eur { font-size: 13px; font-weight: 700; color: var(--muted2); }
.seg { margin-top: 7px; display: flex; gap: 6px; }
.seg button {
  flex: 1; height: 46px; border-radius: 13px; background: #FFFFFF;
  border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.seg button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 800; }
#sell-submit { margin-top: 22px; height: 52px; font-size: 15.5px; }
.reassure { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--muted2); }

.profile-head { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.p-name-row { display: flex; align-items: center; gap: 8px; }
.p-name { font-size: 20px; font-weight: 900; letter-spacing: -0.3px; }
.p-edit { font-size: 13px; color: var(--muted2); padding: 4px; }
.p-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.p-badges { margin-top: 14px; }
.p-badges .badge { padding: 5px 10px; font-size: 11px; }
.stats {
  margin-top: 16px; background: #FFFFFF; border: 1px solid var(--card-line);
  border-radius: 16px; display: flex; padding: 14px 0;
}
.stat { flex: 1; text-align: center; border-right: 1px solid var(--card-line); }
.stat:last-child { border-right: none; }
.stat-n { font-size: 19px; font-weight: 900; }
.stat-l {
  font-size: 10.5px; font-weight: 700; color: var(--muted2);
  text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px;
}
.p-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.p-row {
  width: 100%; background: #FFFFFF; border: 1px solid var(--card-line);
  border-radius: 16px; padding: 11px 13px; display: flex; align-items: center;
  gap: 12px; text-align: left; transition: opacity 0.1s;
}
.p-row:active { opacity: 0.85; }
.p-thumb { width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0; }
.p-row-main { flex: 1; min-width: 0; }
.p-row-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.p-row-time { font-size: 11.5px; color: var(--muted2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.status-chip {
  padding: 5px 10px; border-radius: 999px; background: var(--chip-bg);
  font-size: 11px; font-weight: 800; color: var(--muted); flex-shrink: 0;
}
.status-chip.lead { background: var(--green-bg); color: var(--green-ink); }
.status-chip.won { background: #FDEEE3; color: var(--orange-dark); }
.status-chip.topay { background: var(--orange); color: #FFFFFF; }
.menu {
  margin-top: 22px; background: #FFFFFF; border: 1px solid var(--card-line);
  border-radius: 16px; overflow: hidden;
}
.menu-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px; border-bottom: 1px solid #F3EBE0; font-size: 13.5px;
  font-weight: 600; text-align: left;
}
.menu-item:last-child { border-bottom: none; }
.menu-item .chev { font-size: 16px; }
.menu-item:active { background: var(--bg); }
.favs-count {
  margin-left: auto; margin-right: 10px; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; background: var(--chip-bg);
  color: var(--chip-ink); font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.favs-count:empty { display: none; }

/* ---------- Écran liste (Favoris / Mes annonces) ---------- */
#screen-list { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.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; }

/* ---------- Règles des enchères ---------- */
#screen-rules { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
.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); }

/* 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; }

/* ---------- Porte-monnaie ---------- */
#screen-wallet { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
.wallet-card {
  margin-top: 16px; background: var(--ink); color: var(--bg);
  border-radius: 20px; padding: 20px;
}
.wallet-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; opacity: 0.6;
}
.wallet-balance {
  font-size: 42px; font-weight: 900; letter-spacing: -1px;
  margin-top: 6px; font-variant-numeric: tabular-nums;
}
#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); }

/* 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; }
#connect-btn { margin-top: 12px; }
.connect-tos { margin-top: 8px; font-size: 10.5px; color: var(--muted2); text-align: center; line-height: 1.5; }
.connect-tos a { color: var(--muted); text-decoration: underline; }

/* 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 + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
  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 + env(safe-area-inset-top)) 0 calc(48px + env(safe-area-inset-bottom));
}
.lb-item img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  display: block;
}
.lb-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); 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 + env(safe-area-inset-bottom)); }
/* Compteur « 2 / 3 » sous les points — toujours affiché, même « 1 / 1 » */
.lb-count {
  position: absolute; bottom: calc(16px + env(safe-area-inset-bottom));
  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 + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
  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); }

/* 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: baseline; gap: 8px; }
.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; }
.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 { margin-top: 12px; display: flex; gap: 8px; align-items: center; }
.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; }

/* Alertes de recherche */
.alert-link { display: block; margin-top: 12px; font-size: 13.5px;
  font-weight: 700; color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; }
.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;
}

/* 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 + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
  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; }

/* ---------- Tab bar ---------- */
#tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 30;
  display: flex; align-items: flex-start; justify-content: space-around;
  padding: 11px 10px calc(12px + env(safe-area-inset-bottom));
  background: rgba(250,245,239,0.92); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 64px; padding-top: 3px; color: #9A8D7D;
}
.tab.on { color: var(--orange); }
.tab-label { font-size: 10.5px; font-weight: 700; }
.ic-home {
  width: 12px; height: 12px; border: 2.5px solid currentColor;
  border-radius: 3px; transform: rotate(45deg); margin-top: 2px; margin-bottom: 2px;
}
.tab .ic-search.tab-ic i { border-color: currentColor; border-width: 2.5px; }
.tab .ic-search.tab-ic b { background: currentColor; height: 2.5px; }
.ic-plus { position: relative; width: 16px; height: 16px; display: block; }
.ic-plus i {
  position: absolute; left: 6.75px; top: 0; width: 2.5px; height: 16px;
  background: currentColor; border-radius: 2px;
}
.ic-plus b {
  position: absolute; top: 6.75px; left: 0; width: 16px; height: 2.5px;
  background: currentColor; border-radius: 2px;
}
.ic-user { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ic-user i {
  width: 7px; height: 7px; border: 2.5px solid currentColor; border-radius: 999px;
  display: block;
}
.ic-user b {
  width: 14px; height: 6px; border: 2.5px solid currentColor; border-bottom: none;
  border-radius: 8px 8px 0 0; display: block;
}

/* ---------- Feuilles (« Enchérir » + partage + auth) ---------- */
#sheet-backdrop, #share-backdrop, #auth-backdrop, #report-backdrop {
  position: fixed; inset: 0; z-index: 35; background: rgba(24,17,9,0.45);
  animation: fadeIn 0.25s ease both;
}
#sheet, #share-modal, #auth-modal, #report-modal {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 36;
  background: #FFFFFF; border-radius: 26px 26px 0 0;
  padding: 10px 18px calc(24px + env(safe-area-inset-bottom));
  animation: sheetUp 0.35s cubic-bezier(0.2,0.9,0.3,1) both;
  max-height: 86dvh; overflow: auto;
}
.sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: #E5DBCC; margin: 0 auto 14px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-title { font-size: 18px; font-weight: 900; }
.sheet-close {
  width: 32px; height: 32px; border-radius: 999px; background: var(--chip-bg);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: transform 0.1s;
}
.sheet-close:active { transform: scale(0.92); }
.sheet-sub { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.sheet-sub strong { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
#sheet-name-wrap .f-label { margin-top: 14px; }
.sugg { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
/* Montant libre, sous les suggestions */
.free-bid { display: flex; margin-top: 9px; }
.free-bid-field { flex: 1; margin-top: 0; min-height: 52px; border-radius: 16px; }
/* Pas de spinners natifs sur le montant : on tape un nombre, point. */
.price-input input::-webkit-outer-spin-button,
.price-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-input input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.sheet-cta { margin-top: 14px; }
.sugg-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-radius: 16px; background: #FFFFFF; color: var(--ink);
  border: 1.5px solid #E4D9CB; transition: transform 0.1s;
}
.sugg-btn:active { transform: scale(0.98); }
/* Option sélectionnée (la confirmation vit dans le CTA, pas ici) */
.sugg-btn.on { background: var(--orange); color: #FFFFFF; border-color: var(--orange); }
.sugg-amount { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sugg-sub { font-size: 12.5px; font-weight: 700; opacity: 0.75; }
.auto-box {
  margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--bg);
  border: 1px solid var(--card-line);
}
.auto-title { font-size: 13.5px; font-weight: 800; }
.auto-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.auto-opts { display: flex; gap: 8px; margin-top: 11px; }
.auto-opt {
  flex: 1; text-align: center; padding: 11px 0; border-radius: 12px;
  background: #FFFFFF; border: 1.5px solid #E4D9CB; font-size: 14px;
  font-weight: 800; font-variant-numeric: tabular-nums; transition: transform 0.1s;
}
.auto-opt:active { transform: scale(0.96); }
.auto-active { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
.auto-state { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--green-ink); }
.greendot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); }

/* ---------- Modal de partage ---------- */
.share-pitch {
  margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.55;
}
.share-card {
  margin-top: 14px; display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 16px; background: var(--bg);
  border: 1px solid var(--card-line);
}
.share-thumb { width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; }
.share-info { flex: 1; min-width: 0; }
.share-item-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.share-item-meta {
  font-size: 11.5px; color: var(--muted2); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.share-url {
  margin-top: 12px; padding: 12px 14px; border-radius: 13px; background: var(--chip-bg);
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--chip-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-quick {
  margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.share-app {
  display: flex; align-items: center; justify-content: center; height: 46px;
  border-radius: 13px; background: #FFFFFF; border: 1.5px solid #E4D9CB;
  font-size: 13.5px; font-weight: 800; color: var(--ink); text-decoration: none;
  transition: transform 0.1s;
}
.share-app:active { transform: scale(0.97); }
#share-native { margin-top: 14px; height: 52px; font-size: 15.5px; }
#share-copy { margin-top: 9px; height: 52px; font-size: 15.5px; }

/* ---------- Modal d'authentification ---------- */
#auth-modal { z-index: 38; }
#auth-backdrop { z-index: 37; }
.auth-sub { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.auth-pending {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #FDEEE3;
  border: 1px solid #F5CDAA; font-size: 13.5px; font-weight: 700; color: var(--orange-dark);
}
.auth-pending strong { font-weight: 900; font-variant-numeric: tabular-nums; }
#auth-form .f-label { margin-top: 16px; }
#auth-submit { margin-top: 16px; height: 52px; font-size: 15.5px; }
.auth-note { margin-top: 12px; font-size: 11.5px; color: var(--muted2); text-align: center; line-height: 1.5; }
#auth-step-sent { text-align: center; padding-top: 8px; }
.auth-sent-icon {
  width: 64px; height: 64px; margin: 6px auto 0; border-radius: 999px;
  background: var(--chip-bg); display: flex; align-items: center;
  justify-content: center; font-size: 30px;
}
.auth-sent-title { margin-top: 14px; font-size: 18px; font-weight: 900; }
#auth-demo-link {
  margin-top: 16px; height: 52px; font-size: 15px; text-decoration: none;
}
#auth-retry { margin-top: 14px; }

/* ---------- Carte compte (profil) ---------- */
.account-card {
  margin-top: 16px; background: #FFFFFF; border: 1px solid var(--card-line);
  border-radius: 16px; overflow: hidden;
}
.account-card .menu-item { border-bottom: none; }
.account-info { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--green-ink);
}
.account-email { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
#account-logout { margin: 0; flex-shrink: 0; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 50%;
  z-index: 60; padding: 10px 16px; border-radius: 999px; background: var(--ink);
  color: var(--bg); font-size: 12.5px; font-weight: 700; white-space: nowrap;
  animation: toastIn 0.35s cubic-bezier(0.2,0.9,0.3,1) both;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25); max-width: 90vw;
  overflow: hidden; text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}