/* Adjugé! — front. Adaptation DESKTOP (et tablette) de l'app mobile-first.
   CHARGÉE EN DERNIER : toutes les règles vivent dans des @media (min-width:…)
   → le mobile, et les tests E2E qui tournent en viewport 390×844
   (tests/browser/conftest.py), restent STRICTEMENT inchangés (plancher
   desktop = 600 px). Aucune modif JS : le front ne lit aucune largeur codée
   en dur (les rares mesures — clientWidth galerie/carte/crop, innerHeight
   sentinelle — s'adaptent au conteneur).

   Paliers :
   - ≥600px (tablette & +) : feuilles du bas → dialogues centrés, panneaux
     plein écran → cartes centrées, grilles multi-colonnes, états :hover.
   - 600–899px : colonne élargie (~760), tabbar du bas conservée.
   - ≥900px (desktop) : la tabbar (pilule 5 onglets + bulle Profil) devient un
     RAIL vertical à gauche (--rail) avec le LOGO en tête, l'autohide est
     neutralisé, les en-têtes flottants perdent leur logo (le rail l'a), les
     écrans deviennent des surfaces crème centrées sur la toile, la fiche passe
     en 2 colonnes (photo collante | enchère), dialogues/toast recentrés sur la
     zone de contenu décalée par le rail. */

:root { --rail: 248px; }

/* ============================================================
   ≥600px — enrichissements partagés tablette + desktop
   ============================================================ */
@media (min-width: 600px) {

  /* ---------- Grilles d'annonces : multi-colonnes responsives ---------- */
  .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

  /* ---------- Rangées d'aperçu du feed (.fs-row) : cartes BORNÉES ----------
     En mobile-first la carte « hero » d'une section à UNE annonce (fs-solo)
     prend toute la largeur (flex:1 1 auto; max-width:none; photo height:210px)
     pour remplir l'étroit écran téléphone. Sur desktop cette même règle étire
     la photo sur toute la largeur de contenu (bandeau démesuré). On la ramène
     à une taille de carte normale, alignée à gauche : un seul élément ne doit
     pas occuper une ligne entière. Idem pour les rangées à 2 cartes (44% =
     trop large à grand écran), bornées à la même largeur. */
  .fs-row .g-card, .fs-row.fs-solo .g-card {
    flex: 0 0 240px; width: 240px; min-width: 0; max-width: 240px;
  }
  .fs-row.fs-solo .g-photo { aspect-ratio: 1 / 1; height: auto; }

  /* ---------- Écrans victoire / défaite : contenu borné et centré ---------- */
  .result-wrap { max-width: 560px; margin-left: auto; margin-right: auto; }

  /* ---------- Feuilles du bas → dialogues CENTRÉS ----------
     Liste EXHAUSTIVE des feuilles bottom-anchored (border-radius 26px 26px 0 0)
     repérées dans app.nav / app.messages / app.support / app.feedback. On les
     centre verticalement, coin arrondi complet, pop centré (qui conserve le
     translateX(-50%)). */
  #sheet, #share-modal, #auth-modal, #report-modal, #delivery-sheet,
  #protection-sheet, #pricedetail-sheet, #pseudo-modal, #buynow-sheet, #offer-sheet,
  #review-modal, #rules-consent-modal, #pending-sheet,
  #sort-sheet, #renew-sheet, #boost-sheet, #lang-sheet, #feedprefs-sheet,
  #feedback-sheet, #notif-sheet, #thread-details-sheet,
  #support-human-sheet, #support-tickets-sheet, #dispute-sheet {
    bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 64px); max-width: 460px;
    border-radius: 22px;
    max-height: 88vh; overflow: auto;
    animation: dialogPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both;
    box-shadow: 0 30px 80px rgba(24, 17, 9, 0.32);
  }

  /* ---------- Panneaux plein écran → cartes centrées ----------
     #filters-sheet / #geo-sheet / #cat-picker / overlays Stripe n'ont PAS de
     backdrop dédié : on simule le voile par une ombre à spread géant
     (0 0 0 100vmax) — backdrop instantané, sans toucher au JS. Lightbox et
     crop-overlay restent plein écran (visionneuse / recadrage). */
  #filters-sheet, #geo-sheet, #cat-picker, #onboard-overlay, #checkout-overlay,
  #verify-overlay, #welcome-overlay {
    inset: auto; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 64px); max-width: 480px;
    height: auto; max-height: 88vh;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(24, 17, 9, 0.3),
                0 0 0 100vmax rgba(24, 17, 9, 0.45);
    animation: dialogPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }

  #sell-leave-modal { max-width: 380px; }
}

/* Entrée des dialogues centrés (conserve le centrage translate(-50%,-50%)). */
@keyframes dialogPop {
  from { opacity: 0; transform: translate(-50%, -47%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- États :hover (souris uniquement) ---------- */
@media (hover: hover) and (min-width: 600px) {
  .g-card { transition: transform 0.12s ease; }
  .g-card:hover { transform: translateY(-3px); }
  .g-card:hover .g-photo { box-shadow: 0 12px 26px rgba(34, 26, 18, 0.16); }
  .cta:not(:disabled):hover { filter: brightness(1.06); }
  .cta.dark:hover { filter: brightness(1.18); }
  .icon-btn:hover, .filters-btn:hover, .home-search:hover { border-color: var(--muted2); }
  .sugg-btn:hover, .auto-opt:hover, .boost-opt:hover { border-color: var(--orange); }
  .menu-item:hover, .p-menu-item:hover { background: var(--bg); }
  .p-row:hover, .seller-card:hover, .quick-tile:hover, .draft-card:hover,
  .alert-row:hover, .recap-row:hover, .conv-row:hover, .notif-row:hover,
  .tx-row:hover { box-shadow: 0 6px 16px rgba(34, 26, 18, 0.08); }
  .cat-pill:hover, .filter-chip:hover, .filters-pill:hover, .feed-cat:hover,
  .bids-tab:hover { border-color: var(--muted2); }
  .deliv-opt:hover, .relay-row:hover, .report-reason:hover { border-color: var(--muted2); }
  .sheet-close:hover { background: #E9DECF; }
  .float-btn:hover { background: #FFFFFF; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
  .cat-row:hover, .recent-row:hover, .sort-opt:hover, .cat-sugg:hover,
  .search-cat-row:hover, .lang-opt:hover, .faq-q:hover { color: var(--orange); }
  .share-app:hover, .share-url-row:hover { border-color: var(--orange); }
}

/* ============================================================
   600–899px — TABLETTE : colonne élargie, tabbar du bas conservée
   ============================================================ */
@media (min-width: 600px) and (max-width: 899px) {
  #app { max-width: 760px; }
  #tabbar { max-width: 760px; }
  .float-header { max-width: 760px; }
}

/* ============================================================
   ≥900px — DESKTOP : rail de navigation à gauche + contenu large
   ============================================================ */
@media (min-width: 900px) {

  /* Fond crème EDGE-TO-EDGE : aucune toile neutre, aucune gouttière grise. */
  body, html { background: var(--bg); }
  #app {
    max-width: none; margin: 0;
    padding-left: var(--rail);
    overflow: visible;
    background: var(--bg);
  }

  /* Le JS masque la tabbar (#tabbar[hidden]) sur les sous-écrans empilés
     (porte-monnaie, transactions, favoris, fiche, fil…) — sur mobile on y montre
     un bouton « retour ». Sur desktop le rail est une NAVIGATION PERMANENTE : on
     le force visible partout (le contenu est déjà décalé par #app padding-left,
     donc sans ce force-show ces écrans laissaient une gouttière vide à gauche). */
  #tabbar[hidden] { display: flex !important; }

  /* ---------- Tabbar (pilule + bulle Profil) → RAIL vertical à gauche ---------- */
  #tabbar {
    top: 0; bottom: 0; left: 0; transform: none;
    width: var(--rail); max-width: none; height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 5px; padding: 22px 16px calc(22px + var(--sab));
    background: #FFFFFF; border-right: 1px solid var(--line);
    pointer-events: auto;
  }
  /* LOGO en tête du rail (à la place de l'ancien mot-clé texte). */
  #tabbar::before {
    content: ""; display: block; flex: none;
    height: 56px; margin: 2px 6px 20px;
    background: url("/static/logo-mark.png") left center / contain no-repeat;
  }
  /* Autohide NEUTRALISÉ sur desktop : le rail (et ses clics) restent toujours
     là, même quand le JS pose .tabbar-hidden au scroll. */
  #tabbar.tabbar-hidden { transform: none; opacity: 1; }
  #tabbar.tabbar-hidden .tabbar-pill,
  #tabbar.tabbar-hidden .tabbar-solo { pointer-events: auto; }

  /* La pilule et la bulle perdent leur « verre » : ce sont des lignes du rail. */
  .tabbar-pill, .tabbar-solo {
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: none; box-shadow: none;
  }
  .tabbar-pill {
    flex-direction: column; align-items: stretch; gap: 5px;
    padding: 0; border-radius: 0;
  }
  /* Profil = bouton de bas de rail (patron « compte en pied de sidebar »). */
  .tabbar-solo {
    width: 100%; height: auto; margin-top: auto;
    padding-top: 12px; border-top: 1px solid var(--line);
  }
  .tab {
    width: 100%; height: auto; min-height: 42px;
    display: grid; grid-template-columns: 26px 1fr auto;
    align-items: center; column-gap: 12px;
    padding: 9px 14px; border-radius: 14px; color: #6B5E4F;
  }
  /* Icône centrée dans une colonne de largeur FIXE (26px) → tous les libellés
     démarrent au MÊME x. Sinon les icônes de tailles différentes (diamant 12px,
     maillet 24px, +/loupe 16px…) décalent « Enchères » par rapport au reste. */
  .tab > :first-child { justify-self: center; }
  .tab.on { background: #FDEEE3; color: var(--orange); }
  .tab:not(.on):hover { background: var(--bg); color: var(--ink); }
  .tab-label { display: inline; font-size: 15px; font-weight: 800; }
  /* Icônes : on défait l'agrandissement ×1,55 (pensé pour la pilule compacte)
     et on les ramène à une taille de rangée. */
  .tabbar-pill .ic-home { transform: rotate(45deg) scale(1.1); }
  .tabbar-pill .ic-plus, .tabbar-pill .ic-msg, .tabbar-pill .ic-search { transform: scale(1.1); }
  .tabbar-solo .ic-user { transform: scale(1.2); }
  /* Le maillet « Mes enchères » est ramené à la taille des autres icônes (sinon
     sa rangée était plus haute → décalage vertical perçu). min-height uniforme
     sur .tab verrouille des rangées de hauteur IDENTIQUE. */
  .ic-bids svg { width: 18px; height: 18px; }
  /* Badge (Mes enchères / Messages) : à DROITE de la rangée, plus au centre. */
  .tab-badge {
    position: static; margin-left: auto;
    box-shadow: none;
  }

  /* ---------- En-têtes flottants : logo retiré, contenu aligné au contenu ----------
     Le rail porte déjà la marque → on masque le logo flottant. La barre
     (chips de catégories / pilules d'état) se cale en haut de la zone de
     contenu, opaque, autohide neutralisé. Le profil n'a QUE le logo → masqué. */
  .float-header {
    left: var(--rail); right: 0; width: auto; max-width: none; transform: none;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 14px 28px; z-index: 25; pointer-events: auto;
    justify-content: flex-start;
  }
  .float-header.float-hidden { transform: none; opacity: 1; }
  .float-header .feed-brand { display: none; }
  #profile-header { display: none; }
  /* Logos de marque posés dans les barres de titre (recherche/vendre/messages) :
     le rail à gauche porte déjà la marque → on les masque pour éviter le doublon. */
  .head-logo { display: none; }
  .feed-cats { flex-wrap: wrap; overflow: visible; }

  /* ---------- Écrans = PLEINE LARGEUR de la zone de contenu (à droite du rail) ----------
     Pas de panneau centré ni de gouttière : le contenu occupe TOUT l'espace,
     fond crème bord à bord, même largeur sur tous les écrans (= la zone). */
  .screen {
    background: var(--bg);
    min-height: 100dvh;
  }

  /* Paddings : on retire la bande basse mobile (110px réservée à la tabbar).
     Le feed et « Mes enchères » dégagent la hauteur de leur barre d'en-tête. */
  #screen-feed, #screen-search, #screen-sell, #screen-profile, #screen-list,
  #screen-wallet, #screen-transactions, #screen-notifications, #screen-rules,
  #screen-faq, #screen-messages, #screen-bids, #screen-mine {
    padding-top: 26px;
    padding-bottom: 56px;
  }
  #screen-feed { padding-top: 74px; }
  /* « Mes enchères » et « Mes annonces » : en-tête sur DEUX lignes (titre +
     pilules d'état) → bande haute plus généreuse que le feed (une seule ligne). */
  #screen-bids, #screen-mine { padding-top: 112px; }

  /* Un peu plus d'air horizontal sur les écrans larges. */
  .feed-head, .cats, .grid, .page-pad, .search-grid, .list-grid,
  .feed-recent-head, .feed-section-head, .fs-row {
    padding-left: 28px; padding-right: 28px;
  }
  /* Desktop honore le padding du conteneur (pas de bug WebKit iOS) → l'inset
     latéral du carrousel vient du padding ci-dessus, on annule les marges de bord
     ajoutées en mobile pour ne pas cumuler (28px + 8px). */
  .fs-row > .g-card:first-child { margin-left: 0; }
  .fs-row > .g-card:last-child { margin-right: 0; }
  .home-search { max-width: 560px; }
  .search-row, .search-toolbar, .search-count-row { max-width: 680px; }
  .search-toolbar { flex-wrap: wrap; overflow: visible; }

  /* ---------- Fiche en 2 colonnes (photo collante | enchère) ----------
     .detail-scroll devient la grille ; la barre d'enchère (frère absolu de
     #screen-detail centré, position:relative) se cale sous la colonne info
     (right:0, largeur = colonne info). */
  /* Mobile : la fiche a son PROPRE scroll interne (#screen-detail height:100dvh +
     .detail-scroll overflow:auto) + bidbar absolue. Desktop : on laisse la PAGE
     défiler normalement (la molette marche PARTOUT, y compris au-dessus de la
     photo) — sinon, la photo collante interceptant la molette à gauche, on ne
     pouvait pas faire défiler pour voir tout l'historique d'enchères. La photo
     reste COLLANTE, la bidbar passe en FIXE en bas. */
  #screen-detail { height: auto; min-height: 100dvh; overflow: visible; }
  #screen-detail .detail-scroll {
    height: auto; overflow: visible; padding-bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    column-gap: 32px;
    align-items: start;
  }
  #screen-detail .d-photo {
    position: sticky; top: 0; height: 100dvh; border-radius: 0;
  }
  /* Flèches de navigation de la galerie : sur desktop il n'y a pas de swipe ni
     de geste tactile pour changer de photo → on expose des flèches latérales,
     centrées verticalement, dès que la galerie a plusieurs médias (.multi posée
     par renderDetailPhoto). Mobile : invisibles (display:none par défaut). */
  #screen-detail .d-photo.multi .float-btn.d-nav {
    display: flex; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; font-size: 26px; line-height: 1; padding-bottom: 3px;
  }
  #screen-detail .d-photo.multi .float-btn.d-nav.prev { left: 14px; right: auto; }
  #screen-detail .d-photo.multi .float-btn.d-nav.next { right: 14px; left: auto; }
  #screen-detail .d-photo.multi .float-btn.d-nav:active { transform: translateY(-50%) scale(0.94); }
  /* Glissement à la souris (clic maintenu, façon Instagram) : curseur « main »
     sur le rail quand il y a plusieurs médias, « poing fermé » pendant le drag.
     La logique vit dans app.detail.js (pointer events, souris seulement). */
  #screen-detail .d-photo.multi .d-photo-track { cursor: grab; }
  #screen-detail .d-photo-track.dragging { cursor: grabbing; }
  /* La vidéo est désormais la 1ʳᵉ diapo de la galerie (en absolu dans .d-photo,
     la colonne photo collante) — plus un bandeau de grille à part : elle hérite
     de la colonne photo, rien de spécifique à régler ici. */
  /* padding-bottom : l'historique en bas de la colonne dégage la bidbar fixe. */
  #screen-detail .d-body { padding: 26px 28px 120px 0; }
  #screen-detail .bidbar {
    position: fixed; bottom: 0; left: auto; right: 0; width: 440px;
    border-left: 1px solid var(--line);
  }
  /* Chrome persistant (retour/partager) : sur desktop la PAGE défile (#screen-
     detail overflow:visible), donc l'ancrage absolu sur #screen-detail partirait
     au scroll → on les FIXE au viewport (retour après le rail, partager à droite).
     Sur mobile ils restent absolus sur #screen-detail non défilant (déjà fixes). */
  #screen-detail .float-btn.back, #screen-detail .float-btn.share {
    position: fixed; top: calc(14px + var(--sat));
  }
  #screen-detail .float-btn.back { left: calc(var(--rail) + 14px); right: auto; }
  #screen-detail .float-btn.share { right: 14px; left: auto; }
  /* Anim d'entrée d'écran SANS transform sur desktop. Le chrome fixe ci-dessus
     (retour/partager/bidbar ancrés au viewport) exige qu'AUCUN ancêtre n'ait de
     `transform` : sinon `#screen-detail` devient leur bloc conteneur le temps de
     l'anim → le bouton retour se positionne par rapport à la surface CENTRÉE
     (« au centre ») puis SAUTE à sa place quand le transform tombe. On redéfinit
     donc `screenIn` en FONDU seul ici (même NOM → les écouteurs `animationend`
     filtrés sur 'screenIn' de app.core.js/app.detail.js restent valides) ; ce
     keyframe ne s'applique qu'à ≥900 px, le mobile garde le glissé translate3d
     de app.base.css (fiche = viewport, aucun enfant fixe à déplacer). */
  @keyframes screenIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Les écrans chat (thread / support) sont déjà en flex-column height:100dvh ;
     ils héritent de la largeur unique --page (composer + fil en pied). */

  /* ---------- Dialogues / toast : recentrés sur la zone de CONTENU ----------
     Le rail occupe les --rail premiers pixels ; on décale le centre des
     éléments fixes de +rail/2. Les voiles (backdrops + ombre-spread) restent
     plein écran : ils assombrissent aussi le rail (comportement d'une modale). */
  #sheet, #share-modal, #auth-modal, #report-modal, #delivery-sheet,
  #protection-sheet, #pricedetail-sheet, #pseudo-modal, #buynow-sheet, #offer-sheet,
  #review-modal, #rules-consent-modal, #pending-sheet,
  #sort-sheet, #renew-sheet, #boost-sheet, #lang-sheet, #feedprefs-sheet,
  #feedback-sheet, #notif-sheet, #thread-details-sheet,
  #support-human-sheet, #support-tickets-sheet, #dispute-sheet,
  #filters-sheet, #geo-sheet, #cat-picker, #onboard-overlay, #checkout-overlay,
  #verify-overlay, #sell-leave-modal {
    left: calc(50% + var(--rail) / 2);
  }
  /* L'accueil de 1re visite est un TAKEOVER plein écran (≠ dialogue de travail) :
     il ignore le rail et se centre sur le VIEWPORT ENTIER (« centre du centre »),
     son voile recouvrant aussi le rail. Il garde donc `left: 50%` (pas l'offset
     rail des dialogues ci-dessus). */
  #toast { left: calc(50% + var(--rail) / 2); }

  /* ---------- Barres de scroll affinées (desktop) ---------- */
  *::-webkit-scrollbar { width: 11px; height: 11px; }
  *::-webkit-scrollbar-thumb {
    background: #D8CCBA; border-radius: 8px; border: 3px solid var(--bg);
  }
  *::-webkit-scrollbar-thumb:hover { background: #C9BCA9; }
  *::-webkit-scrollbar-track { background: transparent; }
}