/* Static first-paint placeholders; removed only after the destination is ready.
   index.html: one skeleton per landing (html[data-page-loading="local|dz|eu|sell|account"]), shaped like the
   real header + hero so the page does not jump when the content replaces it. listing.html keeps
   the generic photo + specs skeleton below. */
#pageLoading {display:none}
html[data-page-loading] body > :not(#pageLoading):not(script):not(noscript) {display:none!important}
html[data-page-loading] #pageLoading {display:block}
.page-loading {max-width:1100px;margin:0 auto;padding:28px 20px;background:#f6f5f2;color:#525c66;box-sizing:border-box}
.page-loading-label {font:500 14px/1.5 "Manrope",sans-serif;margin:0 0 24px}
.pl-sr {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.loading-block,.pl-b {display:block;background:#e6e3dc;border-radius:10px;animation:page-loading-pulse 1.5s ease-in-out infinite}
.pl-b {box-sizing:border-box}
@keyframes page-loading-pulse {50% {opacity:.45}}
@media(prefers-reduced-motion:reduce) {.loading-block,.pl-b {animation:none}}

/* ---- Landing skeletons (index.html) ---- */
#pageLoading {max-width:none;padding:0;background:#f6f5f2}
/* Header: brand row + full-width 3-tab pill on phones; brand · tabs · auth on desktop. */
.pl-header {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:12px 14px 12px;background:#f5f3ee}
.pl-brand {grid-column:1;grid-row:1;display:flex;align-items:center;gap:8px}
.pl-brand .pl-b {width:35px;height:35px;border-radius:50%}
.pl-brand .pl-word {width:132px;height:24px;border-radius:7px}
.pl-tabs {grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border-radius:16px;background:#fff}
.pl-tabs i {display:block;height:48px;border-radius:12px;background:var(--pl-tab,#f2f0ea);animation:page-loading-pulse 1.5s ease-in-out infinite}
.pl-tabs i:first-child {background:#e6e3dc}
/* Signed-out device: the sign-in call to action (phones hide it: the account lives in the tab bar).
   Signed-in device: the header bell (+ avatar on desktop) — same shapes as the real header. */
.pl-auth {grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.pl-auth .pl-b {display:none}
.pl-auth .pl-cta {width:104px;height:36px;border-radius:999px;background:#ffcdb4}
.pl-auth .pl-bell {width:32px;height:32px;border-radius:50%;margin:6px}
.pl-auth .pl-avatar {width:36px;height:36px;border-radius:50%}
html[data-auth-hint="in"] .pl-auth .pl-bell {display:block}
@media(min-width:601px) {
  html:not([data-auth-hint="in"]) .pl-auth .pl-cta {display:block}
}
/* The seller landing keeps its sign-in button on phones too. */
html[data-page-loading="sell"]:not([data-auth-hint="in"]) .pl-auth .pl-cta {display:block}
/* Content column matches .wrap (820px, 14px gutters) and the seller canvas on phones. */
.pl-buy,.pl-sell,.pl-account,.pl-local {max-width:820px;margin:0 auto;padding:4px 14px 40px}
/* Local marketplace: title, search row, location chips, card grid (two columns on phones). */
.pl-local {max-width:1120px;padding-top:18px}
.pl-local .pl-h1 {width:70%;height:28px}
.pl-local .pl-sub {width:90%;margin-bottom:16px}
.pl-lsearch {display:flex;gap:8px;margin-bottom:12px}
.pl-lfield {flex:1;height:52px;border-radius:16px;background:#fff}
.pl-lfilter {width:52px;height:52px;border-radius:16px;background:#fff}
.pl-local .pl-chips {margin:0 0 18px}
.pl-local .pl-chips .pl-b {width:140px}
.pl-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pl-cards .pl-b {aspect-ratio:3/4;border-radius:16px;background:#fff}
.pl-hero {display:flex;flex-direction:column}
.pl-scene {order:1;width:100%;height:230px;border-radius:24px;margin:8px 0 6px;background:#ece9e2}
.pl-pitch {order:2;display:flex;flex-direction:column;align-items:flex-start;padding:22px 2px 12px}
.pl-h1 {width:78%;height:30px;border-radius:8px;margin-bottom:8px}
.pl-h1b {width:46%;margin-bottom:12px}
.pl-sub {width:88%;height:14px;border-radius:6px;margin-bottom:8px}
.pl-chips {display:flex;gap:8px;overflow:hidden;margin-top:6px}
.pl-chips .pl-b {flex:none;width:112px;height:36px;border-radius:22px;background:#fff}
.pl-search {display:flex;flex-direction:column;gap:1px;margin-top:10px;padding:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 8px 25px rgba(0,0,0,.02)}
.pl-field {height:68px;border-radius:0;background:#fff;position:relative}
.pl-field::before,.pl-field::after {content:"";position:absolute;inset-inline-start:16px;border-radius:5px;background:#e6e3dc}
.pl-field::before {top:14px;width:54px;height:11px}
.pl-field::after {top:34px;width:150px;height:16px}
.pl-field + .pl-field {border-top:1px solid #f0eee8}
.pl-go {height:50px;margin:8px 12px 12px;border-radius:12px;background:#ffcdb4}
.pl-steps {margin-top:32px;display:flex;flex-direction:column;align-items:flex-start}
.pl-over {width:130px;height:11px;border-radius:5px;margin-bottom:12px}
.pl-h2 {width:70%;height:26px;border-radius:8px;margin-bottom:20px}
.pl-step {width:100%;height:150px;border-radius:24px;background:#ece9e2}
/* Vendre: carte-grise animation on top, centred pitch + CTA under it (phones). */
.pl-sell .pl-scene {height:320px;background:transparent;border-radius:0;position:relative;margin:0}
.pl-sell .pl-scene::before,.pl-sell .pl-scene::after {content:"";position:absolute;border-radius:14px;background:#e6e3dc;animation:page-loading-pulse 1.5s ease-in-out infinite}
.pl-sell .pl-scene::before {inset-inline-start:8%;top:6%;width:33%;height:56%;transform:rotate(-8deg);background:#ece9e2}
.pl-sell .pl-scene::after {inset-inline-start:10%;inset-inline-end:14%;top:74%;height:48px;border-radius:999px;background:#fff;box-shadow:0 12px 30px rgba(11,15,20,.06)}
.pl-sell .pl-pitch {align-items:center;padding:40px 8px 0}
.pl-eyebrow {display:none;width:220px;height:32px;border-radius:999px;background:#fff;margin-bottom:22px}
.pl-sell .pl-h1 {width:70%;height:34px}
.pl-sell .pl-h1b {width:62%;margin-bottom:22px}
.pl-sell .pl-sub,.pl-sell .pl-sub2 {display:none}
.pl-btn {width:100%;height:56px;border-radius:999px;background:#ffcdb4;margin:0 0 18px}
.pl-link {width:130px;height:14px;border-radius:6px}
.pl-proof {display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px;padding-top:28px;border-top:1px solid #e3e0d8}
.pl-proof .pl-b {height:44px;border-radius:12px}
/* Account: heading + settings rows. */
.pl-account {padding-top:28px}
.pl-account .pl-h2 {width:180px}
.pl-list {display:flex;flex-direction:column;gap:10px}
.pl-list .pl-b {height:60px;border-radius:14px;background:#fff}
/* Only the skeleton for the landing that is about to render. */
html[data-page-loading="dz"] .pl-sell,html[data-page-loading="dz"] .pl-account,html[data-page-loading="dz"] .pl-local,
html[data-page-loading="eu"] .pl-sell,html[data-page-loading="eu"] .pl-account,html[data-page-loading="eu"] .pl-local,
html[data-page-loading="local"] .pl-sell,html[data-page-loading="local"] .pl-account,html[data-page-loading="local"] .pl-buy,
html[data-page-loading="sell"] .pl-buy,html[data-page-loading="sell"] .pl-account,html[data-page-loading="sell"] .pl-local,
html[data-page-loading="account"] .pl-buy,html[data-page-loading="account"] .pl-sell,html[data-page-loading="account"] .pl-local {display:none}
/* Tabs: Local · Importer · Trader — the active pill follows the landing; the seller landing has no tabs. */
html[data-page-loading="dz"] .pl-tabs i:first-child,html[data-page-loading="eu"] .pl-tabs i:first-child {background:var(--pl-tab,#f2f0ea)}
html[data-page-loading="dz"] .pl-tabs i:nth-child(2),html[data-page-loading="eu"] .pl-tabs i:nth-child(3) {background:#e6e3dc}
html[data-page-loading="sell"] .pl-tabs {display:none}
html[data-page-loading="sell"] #pageLoading,html[data-page-loading="sell"] .pl-header {background:#f5f4f0}
/* The account page has no brand header on phones and tablets (its own title bar instead). */
@media(max-width:899px) {html[data-page-loading="account"] .pl-header {display:none}}
/* Tablets: the real header is already one row (brand · tabs · account) above 600px. */
@media(min-width:601px) and (max-width:899px) {
  .pl-header {display:flex;justify-content:space-between;gap:12px;min-height:62px;padding:12px 16px 8px}
  .pl-brand .pl-b {width:30px;height:30px}
  .pl-brand .pl-word {width:118px;height:22px}
  .pl-tabs {--pl-tab:transparent;grid-column:auto;width:270px;gap:4px;padding:4px;border-radius:999px;background:#eeece6}
  .pl-tabs i {height:36px;border-radius:999px}
}

@media(min-width:900px) {
  .pl-header {display:flex;justify-content:space-between;gap:12px;min-height:62px;padding:12px max(16px,calc((100% - 1120px) / 2 + 16px)) 8px;box-shadow:0 1px 0 rgba(11,15,20,.06)}
  .pl-brand .pl-b {width:30px;height:30px}
  .pl-brand .pl-word {width:118px;height:22px}
  .pl-tabs {--pl-tab:transparent;grid-column:auto;width:270px;gap:4px;padding:4px;border-radius:999px;background:#eeece6}
  .pl-tabs i {height:36px;border-radius:999px}
  html[data-auth-hint="in"] .pl-auth .pl-avatar {display:block}
  .pl-auth .pl-cta {width:130px;height:38px}
  /* Vendre desktop: pitch left, animation right, proof strip below (the welcome grid). */
  .pl-sell {max-width:1120px;padding:28px clamp(32px,4vw,64px) 40px}
  .pl-sell .pl-hero {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;align-items:center}
  .pl-sell .pl-pitch {order:1;align-items:flex-start;padding:0}
  .pl-sell .pl-scene {order:2;height:360px;justify-self:center;width:min(100%,500px)}
  .pl-eyebrow {display:block}
  .pl-sell .pl-h1 {width:80%;height:46px}
  .pl-sell .pl-h1b {width:88%;margin-bottom:26px}
  .pl-sell .pl-sub {display:block;width:92%;height:16px}
  .pl-sell .pl-sub2 {display:block;width:60%;margin-bottom:32px}
  .pl-btn {width:300px;height:56px;border-radius:14px}
  .pl-link {display:none}
  .pl-proof {display:grid}
}
@media(min-width:900px) {
  .pl-local {padding:28px 16px 40px}
  .pl-cards {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}
@media(min-width:1000px) {
  /* Importer / Trader desktop: 940px hero band (pitch left, 440px animation right) over the 820px search column. */
  .pl-buy .pl-hero {display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:28px;align-items:center;padding:16px 2px 40px;margin-inline:calc(-1 * min(74px,(100vw - 880px) / 2))}
  .pl-buy .pl-pitch {order:1;padding:0}
  .pl-buy .pl-scene {order:2;width:440px;height:300px;margin:0}
  .pl-buy .pl-h1 {height:40px;width:86%}
  .pl-buy .pl-h1b {width:34%}
  .pl-search {flex-direction:row;align-items:stretch;gap:0}
  .pl-field {flex:1;height:78px;border-radius:0}
  .pl-field + .pl-field {border-top:0;border-inline-start:1px solid #f0eee8}
  .pl-go {flex:none;width:160px;height:auto;margin-block:10px 10px;margin-inline:0 10px;border-radius:12px}
  .pl-steps {margin-top:48px}
  .pl-h2 {height:40px;width:52%}
  .pl-step {height:260px}
}

/* ---- Listing page skeleton (listing.html) ---- */
.loading-heading {width:60%;height:28px;margin-bottom:16px}
.loading-subtitle {width:40%;height:16px;margin-bottom:28px}
.loading-photo {height:180px;margin-bottom:16px}
.listing-loading {width:100%;max-width:900px}
.listing-loading .loading-photo {height:clamp(200px,32vw,360px)}
.loading-specs {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.loading-specs .loading-block {height:76px}
@media(max-width:767px) {.page-loading {padding:24px 16px}}