/* Reserve the scrollbar gutter on every page so fixed chrome (bottom nav, header) keeps the
   exact same width whether or not the current view scrolls — otherwise the five nav items
   shift a few pixels between pages on browsers with classic scrollbars. */
html{scrollbar-gutter:stable}
.platform-header{
  box-sizing:border-box;width:100%;max-width:1120px;margin:0 auto;
  padding:12px 16px 8px;min-height:62px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;background:#f5f3ee;color:#0b0f14;
  position:relative;z-index:60;font-family:"Manrope",system-ui,sans-serif;
}
.platform-header .platform-brand{
  display:flex;align-items:center;gap:8px;text-decoration:none;color:#0b0f14;
  font-family:"Sora",sans-serif;font-size:20px;font-weight:800;
  letter-spacing:-.04em;flex-shrink:0;gap:9px;
}
.platform-header .platform-brand img{width:30px;height:30px}
.platform-header .platform-tabs{
  display:inline-flex;padding:3px;border:1px solid #e3e1da;border-radius:999px;
  background:#efece4;
}
.platform-header .platform-tabs a{
  padding:8px 16px;border-radius:999px;color:#5b6470;text-decoration:none;
  font-size:14px;font-weight:700;line-height:normal;
}
.platform-header .platform-tabs a[aria-current="page"]{color:#f5f3ee;background:#0b0f14}
.platform-header a:focus-visible{outline:2px solid #ff5400;outline-offset:2px}
@media(max-width:600px){
  .platform-header{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;
    padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  }
  .platform-header .platform-brand{grid-column:1;grid-row:1}
  .platform-header [data-clerk-auth]{display:none!important}
  .platform-header .platform-tabs{
    grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    border-radius:16px;width:100%;gap:3px;
  }
  .platform-header .platform-tabs a{
    display:flex;align-items:center;justify-content:center;min-height:48px;
    box-sizing:border-box;padding:6px 4px;border-radius:12px;
  }
}
/* Header actions: the bell + the account shell, top-right on every layout. */
.platform-header .platform-actions,[data-platform-header] .platform-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.platform-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;
  background:transparent;color:#0b0f14;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;outline:none}
.platform-bell svg{color:#0b0f14}
.platform-bell:active{background:rgba(11,15,20,.06)}
.platform-bell[hidden]{display:none!important}
.platform-bell .nav-badge{position:absolute;top:4px;inset-inline-start:calc(50% + 2px);min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#ff5400;color:#fff;
  font:700 11px/1 "Manrope",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;border:2px solid #f5f3ee;direction:ltr;pointer-events:none}
.platform-bell .nav-badge[hidden]{display:none}
@media(max-width:600px){
  .platform-header .platform-actions{grid-column:2;grid-row:1;justify-self:end}
}
/* "Vendre" lives in the header actions on desktop only (phones reach it from the tab bar). */
/* Desktop "Vendre": secondary next to the orange sign-in — ink button, same 12px radius and weight. */
.platform-sell{display:none;align-items:center;gap:7px;height:42px;padding-block:0 0;padding-inline:14px 18px;border-radius:12px;background:#0b0f14;color:#fff;
  text-decoration:none;font:800 14.5px/1 "Manrope",system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background .15s ease,transform .1s ease}
.platform-sell:hover{background:#1c232c}
.platform-sell:active{background:#000;transform:translateY(1px)}
@media(min-width:900px){.platform-sell{display:inline-flex}}
body[data-mode="sell"] .platform-sell,body[data-account-page="true"] .platform-sell{display:none}
/* The seller landing has no mode tabs at all. */
body[data-mode="sell"] #s-search #modeSeg{display:none!important}
@media print{.platform-header{display:none!important}}
/* Mobile: the brand header stays pinned while the tab content scrolls. Only on top-level
   tab screens (those with the bottom nav); nested flows keep their own sticky back bar. */
@media(max-width:899px){
  body.has-primary-mobile-nav :is(#s-search, #s-local-results) > .platform-header{position:sticky;top:0;z-index:60}
}
/* Desktop: the brand + tabs bar stays pinned too. The header is the full-width sticky box;
   its content keeps the 1120px centred column so it lines up with the page. */
@media(min-width:900px){
  :is(#s-search, #s-local-results) > .platform-header{position:sticky;top:0;z-index:60;max-width:none;box-shadow:0 1px 0 rgba(11,15,20,.06)}
  :is(#s-search, #s-local-results) > .platform-header{padding-inline-start:max(16px,calc((100% - 1120px) / 2 + 16px));padding-inline-end:max(16px,calc((100% - 1120px) / 2 + 16px))}
}

:root {
  /* Material-style navigation bar: 76px bar, 26px icons, 12px labels, ≥48px targets, pill indicator on the active tab. */
  --bottom-nav-height: calc(76px + env(safe-area-inset-bottom, 0px));
}
.platform-bottom-nav{display:none}
.platform-bottom-nav[hidden]{display:none!important}
[data-seller-bottom-nav], .seller-bottom-nav { display: none !important; }
@media (max-width:899px){
  body[data-account-page="true"] .platform-header{display:none!important}
  /* Signed-in account menu lives in the Compte tab on mobile; the header avatar + dropdown duplicated it. */
  body:has(.platform-bottom-nav:not([hidden])) .platform-header [data-auth-signed-in]{display:none!important}
  body.has-primary-mobile-nav{padding-bottom:var(--bottom-nav-height)}
  body.lock .platform-bottom-nav{display:none}
  .platform-bottom-nav{
    position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:90;display:grid;
    grid-template-columns:repeat(5,1fr);
    padding:6px 4px env(safe-area-inset-bottom, 0px);
    height:var(--bottom-nav-height);
    border-top:1px solid #e3e1da;background:#fff;font-family:"Manrope",system-ui,sans-serif;
    box-shadow:0 -4px 12px rgba(0,0,0,0.03);
    box-sizing:border-box;
  }
  .platform-bottom-nav a,.platform-bottom-nav button{
    display:flex;min-width:0;width:100%;height:64px;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    -webkit-tap-highlight-color:transparent;transform:none;transition:none;
    border:0;background:transparent;color:#5b6470;text-decoration:none;font:600 12px/1.25 "Manrope",system-ui,sans-serif;letter-spacing:0;cursor:pointer;
    border-radius:12px;align-self:center;
  }
  .platform-bottom-nav span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
  /* The icon sits in a 60×32 pill; the pill is tinted for the active tab (Material navigation-bar indicator). */
  .platform-bottom-nav ph-icon{position:relative;width:60px;height:32px;border-radius:16px;transition:background-color .2s ease}
  /* Unread count, top corner of the icon like a native tab bar; hidden when zero. */
  .platform-bottom-nav a,.platform-bottom-nav button{position:relative}
  .platform-bottom-nav .nav-badge{position:absolute;top:3px;inset-inline-start:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#ff5400;color:#fff;
    font:700 11px/1 "Manrope",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;border:2px solid #fff;direction:ltr;pointer-events:none}
  .platform-bottom-nav .nav-badge[hidden]{display:none}
  .platform-bottom-nav svg{color:#5b6470;}
  .platform-bottom-nav .active{color:#ff5400;font-weight:700;}
  .platform-bottom-nav .active ph-icon{background:rgba(255,84,0,.13);}
  .platform-bottom-nav .active svg{color:#ff5400;}
  .platform-bottom-nav a:active ph-icon,.platform-bottom-nav button:active ph-icon{background:rgba(11,15,20,.06);}
}
@media print{.platform-bottom-nav{display:none!important}}
body[data-active-tab="sell"] #s-search>.wrap{display:none}
#seller-panel[hidden]{display:none!important}
.platform-header #modeSeg button,.platform-header .platform-tabs a{
  transition:background-color .16s ease,color .16s ease;
}
@media(prefers-reduced-motion:reduce){
  .platform-header #modeSeg button,.platform-header .platform-tabs a{transition:none}
}
/* Mobile brand: same size on every tab (Importer, Trader, Vendre) — the seller landing
   sizing below is the reference. */
@media(max-width:760px){
  body :is(#s-search, #s-local-results) > .platform-header{padding:calc(20px + env(safe-area-inset-top)) 20px 10px;gap:16px 12px}
  .platform-header .platform-brand{font-size:27px;font-weight:900;letter-spacing:-1px}
  .platform-header .platform-brand img{width:35px;height:35px}
}
/* The seller landing has its own branded header; nested seller screens keep local back controls. */
body[data-mode="sell"][data-seller-screen="welcome"]:not([data-account-page="true"]),
body[data-mode="sell"][data-seller-screen="welcome"]:not([data-account-page="true"]) #s-search,
body[data-mode="sell"][data-seller-screen="welcome"]:not([data-account-page="true"]) #seller-panel,
body[data-mode="sell"][data-seller-screen="welcome"]:not([data-account-page="true"]) .platform-header {
  background:#f5f4f0;
  box-shadow:none;
}
@media(max-width:760px) {
  body[data-mode="sell"][data-seller-screen="welcome"]:not([data-account-page="true"]) { background:#f5f4f0; }
  body[data-mode="sell"][data-seller-screen="welcome"]:not([data-account-page="true"]) :is(#s-search, #s-local-results) > .platform-header {
    display:grid !important; grid-template-columns:1fr auto; gap:16px 12px;
    padding:20px 20px 10px; min-height:0; background:#f5f4f0; border:0;
  }
  body[data-mode="sell"][data-seller-screen="welcome"] .platform-header .platform-brand { display:flex; grid-row:1; grid-column:1; font-size:27px; font-weight:900; letter-spacing:-1px; }
  body[data-mode="sell"][data-seller-screen="welcome"] .platform-header .platform-brand img { width:35px; height:35px; }
  body[data-mode="sell"][data-seller-screen="welcome"] .platform-header .platform-actions { grid-row:1; grid-column:2; }
  body[data-mode="sell"][data-seller-screen="welcome"] .platform-header [data-clerk-auth] { display:flex !important; }
}