/* Adjugé! — front. Extrait de app.css (Feed (cartes, grille, compte à rebours)).
   Les app.*.css sont chargés DANS L'ORDRE (la cascade en dépend) ;
   ne pas réordonner les <link>. */
/* ---------- En-têtes flottants PARTAGÉS (façon Betclic) : logo épinglé en haut
   à GAUCHE + chips/titre, flottant PAR-DESSUS le contenu ----------
   `.float-header` est FIXÉ en haut, CENTRÉ sur la colonne max-480 (comme #tabbar).
   Conteneur TRANSPARENT (aucune barre derrière les bulles) : seuls le logo et les
   bulles flottent. Se cachent au scroll vers le BAS et réapparaissent au scroll
   vers le HAUT EN MÊME TEMPS que la tabbar (.float-hidden + .tabbar-hidden posées
   ensemble par initTabbarAutoHide). Le conteneur laisse passer les taps dans ses
   vides (pointer-events:none) ; logo + bulles les captent (auto). Le
   translateX(-50%) de centrage est CONSERVÉ dans le transform composé (caché = on
   glisse vers le HAUT). Réutilisé par l'accueil (#feed-header) et le profil
   (#profile-header) via `data-screen`. */
.float-header {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 25;
  display: flex; align-items: center; gap: 10px;
  padding: calc(7px + var(--sat)) 12px 7px;
  background: none; pointer-events: none;
  transition: transform 0.36s cubic-bezier(0.22,0.9,0.32,1), opacity 0.26s ease;
}
.float-header.float-hidden { transform: translate(-50%, -100%); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .float-header { transition: none; } }
/* Logo : badge blanc arrondi (façon icône d'app), épinglé à gauche, ne scrolle
   jamais avec les chips (flex:none). AUCUNE ombre → rien « autour » (fond vide). */
.feed-brand { flex: none; display: flex; align-items: center; pointer-events: auto; }
.feed-brand-logo {
  width: 40px; height: 40px; border-radius: 12px; object-fit: cover;
  background: #FFFFFF; border: 1px solid rgba(255,255,255,0.55);
}
/* Chips de catégories : rangée scrollable horizontalement (scrollbar masquée),
   remplit l'espace à droite du logo. Peintes par renderFeedCats. */
.feed-cats {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 3px 2px; pointer-events: auto;
}
.feed-cats::-webkit-scrollbar { display: none; }
/* Bulle : MÊME verre dépoli translucide que les pilules de la tabbar (fond
   translucide + flou + bordure claire) — MAIS AUCUNE ombre portée : c'est l'ombre
   qui, dans les espaces étroits entre deux bulles, se chevauchait et formait le
   « gris entre les bulles ». Sans elle : rien dans les vides, bulles propres. */
.feed-cat {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,253,250,0.55);
  backdrop-filter: saturate(170%) blur(14px);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  border: 1px solid rgba(255,255,255,0.55);
  font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}
/* Catégorie active = pastille orange pleine (l'accent de l'onglet actif de la
   tabbar), bien distincte du verre des inactives. */
.feed-cat.on { background: var(--orange); color: #FFFFFF; border-color: transparent; }
.feed-cat:active { transform: scale(0.95); }
.feed-cat-ic { font-size: 15px; line-height: 1; }

/* ---------- Onglet « Mes enchères » : pilules d'état (façon Betclic « Mes
   paris » : En cours / Terminées / Gagnées) dans l'en-tête flottant #bids-header,
   à droite du logo. Pilule SOMBRE active, blanches translucides inactives.
   Rangée scrollable (scrollbar masquée), comme .feed-cats. ---------- */
/* En-tête « Mes enchères » sur DEUX lignes : ligne 1 = logo + titre (comme
   #mine-header, pour la cohérence), ligne 2 = pilules d'état. On bascule le
   flex du #bids-header en colonne ; #bids-head-top reste une rangée (logo +
   titre alignés au centre, comme #mine-header). */
#bids-header, #mine-header { flex-direction: column; align-items: stretch; gap: 6px; }
.bids-head-top { display: flex; align-items: center; gap: 10px; pointer-events: none; }
.bids-tabs {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 3px 2px; pointer-events: auto;
}
.bids-tabs::-webkit-scrollbar { display: none; }
/* AUCUNE ombre portée sur les pilules inactives : comme pour `.feed-cat`
   (cf. ci-dessus), c'est l'ombre qui, dans les vides étroits entre deux
   pilules, se chevauchait et formait le « gris entre les bulles ». Sans elle :
   rien dans les vides, fond 100 % propre. */
.bids-tab {
  flex: none; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,253,250,0.78);
  backdrop-filter: saturate(170%) blur(14px);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  border: 1px solid rgba(255,255,255,0.6);
  font-size: 14px; font-weight: 800; color: var(--ink-soft);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}
/* Active = pilule pleine ORANGE + texte blanc, comme les chips de l'accueil
   (.feed-cat.on) et l'onglet actif de la tabbar (.tab.on) — accent unique. */
.bids-tab.on {
  background: var(--orange); color: #FFFFFF; border-color: var(--orange);
}
.bids-tab:active { transform: scale(0.96); }

/* L'écran « Mes enchères » porte un en-tête flottant sur DEUX lignes (logo +
   titre, puis pilules, ≈ 92px) → on dégage une bande haute plus généreuse que
   l'accueil pour que la liste ne passe pas dessous. */
#screen-bids {
  padding-top: calc(108px + var(--sat));
  padding-bottom: calc(110px + var(--sab));
}
/* Liste d'enchères : un peu d'air sous l'en-tête flottant. */
#bids-rows { margin-top: 4px; }
/* Invite de connexion (déconnecté) : bouton centré sous le sous-titre, façon
   Betclic « Mes paris » (l'état vide .empty centre déjà titre + sous-titre). */
#bids-login .cta { margin-top: 18px; }

/* ---------- Onglet « Mes annonces » : en-tête flottant SUR DEUX LIGNES (logo +
   titre, puis pilules d'état En cours / Terminées / Vendues, comme
   « Mes enchères ») et grille des annonces du statut courant. */
.mine-head-title {
  flex: 1; min-width: 0; font-size: 18px; font-weight: 900; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#screen-mine {
  padding-top: calc(108px + var(--sat));
  padding-bottom: calc(110px + var(--sab));
}
#mine-grid { padding-top: 4px; }

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

.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. Gouttière latérale RÉDUITE (8px) pour que les cartes de
   l'accueil remplissent l'écran bord-à-bord (un gros gutter laissait des bandes
   vides à droite/gauche, « effet coupé »). N'impacte QUE #feed-grid : les autres
   grilles (.search-grid/.list-grid/.sim-grid) écrasent ce padding horizontal. */
.grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 0 8px;
}
.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;
}
/* La cover d'annonce est peinte en BACKGROUND-IMAGE sur .g-photo (cf. coverImg) :
   un <img object-fit:cover absolu dans cette boîte flex ne se rendait pas sur
   Safari iOS (cadre blanc). Plus d'élément .g-cover. Les pastilles (chips, badge
   favoris…) restent en position:absolute par-dessus le fond. */
.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; white-space: nowrap;
}
.g-chip.urgent { background: var(--red); animation: urgentPulse 1s ease-in-out infinite; }
.g-chip.over { background: rgba(34,26,18,0.5); }
/* Vente à prix fixe : pastille verte (« on achète au prix »), distincte du
   chrono sombre des enchères — repère immédiat dans le feed. */
.g-chip.fixed { background: var(--green, #2F9E44); }
/* Annonce PROGRAMMÉE (démarrage différé) : pastille bleutée « Programmée »,
   distincte du chrono et du prix fixe — l'annonce n'a pas encore commencé. */
.g-chip.scheduled { background: var(--blue, #1971C2); }
/* Achat immédiat (Buy It Now) : pastille sombre « ⚡ Immédiat » en bas à gauche
   de la photo. Texte COURT + nowrap → elle tient sur une ligne et ne chevauche
   pas le badge favoris (bas-droite). */
.g-buynow {
  position: absolute; bottom: 9px; left: 9px; padding: 5px 9px;
  border-radius: 999px; background: rgba(34,26,18,0.82);
  font-size: 10.5px; font-weight: 800; color: #FFFFFF; letter-spacing: 0.2px;
  white-space: nowrap;
}
.g-fav-badge { bottom: 9px; right: 9px; padding: 5px 9px; font-size: 12px; }
.g-fav-badge .fav-heart { font-size: 14px; }
/* Mise en avant payante (« boost ») : pastille DORÉE « ⭐ À la une » en haut à
   droite, sur la MÊME LIGNE que le chrono (haut-gauche). Compacte (padding et
   police resserrés) pour laisser un ESPACE net entre le chrono et elle sur une
   carte étroite (grille 2 colonnes feed/recherche), sans troncature. Dégradé
   ambré + ombre douce pour la distinguer des pastilles sombres. */
.g-boost {
  position: absolute; top: 9px; right: 9px; padding: 4px 8px;
  border-radius: 999px; background: linear-gradient(135deg, #F6A623, #E8830F);
  font-size: 10px; font-weight: 800; color: #FFFFFF;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(232,131,15,0.4);
}
.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); }
/* Avatar + note moyenne du vendeur, poussés à DROITE de la ligne de prix
   (façon Vinted) : repère social rapide. `align-self` recentre le bloc malgré
   le `align-items: baseline` de la ligne de prix. */
.g-seller { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 4px; }
.g-seller-av {
  width: 19px; height: 19px; border-radius: 999px; flex: none; overflow: hidden;
  background: var(--ink); color: var(--bg);
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; text-transform: uppercase;
}
.g-seller-rating {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Prix « protection acheteur incluse » (façon Vinted) : petit, discret,
   sous le prix vendeur. Tapable → feuille « Détails du prix » (le ⓘ le signale). */
.g-price-incl {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--muted2);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.g-price-incl::after { content: 'ⓘ'; font-size: 10px; opacity: 0.8; }
.g-title { font-size: 12px; font-weight: 500; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }

.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; }
/* Spinner de chargement des listes (favoris/abonnements) : centré, même
   spinner de marque (.feed-spinner) que le chargement du feed. */
.list-loading { display: flex; justify-content: center; padding: 48px 0; }
/* Révélation EN DOUCEUR des résultats du feed après un changement de filtre
   (fondu + légère montée) — réutilise la keyframe contentRise (app.extras.css).
   Évite le « pop » sec quand le spinner laisse place aux résultats filtrés. */
#feed-grid.results-enter { animation: contentRise 0.4s cubic-bezier(0.22, 0.9, 0.32, 1) both; }
@media (prefers-reduced-motion: reduce) {
  #feed-grid.results-enter { animation: none; }
}
/* « Réessayer » des listes (favoris/abonnements) en cas d'échec réseau —
   montré uniquement en mode erreur, jamais sur un vrai état vide. */
.list-retry {
  margin-top: 16px; padding: 12px 22px; font-size: 16px; font-weight: 700;
  color: var(--ink); background: #fff; border: 1.5px solid var(--ink);
  border-radius: 999px; cursor: pointer;
}