/* Desktop redesign (≥1024px) — foundation shared by every page: design tokens, the 1280px container,
   the extra font weights, the one header (brand · Local/Importer · links · + Vendre · bell · account)
   and the one footer. Below 1024px this file only hides the desktop-only pieces it introduces, so
   phones, tablets and today's 900–1023px layout stay exactly as they were.
   Header markup: the home header (index.html, #modeSeg buttons), the [data-platform-header] header
   filled by platform-header.js, and desktop-header.html on the light pages (no Clerk, no dock).
   Footer markup: site-footer.html (desktop-only entries carry .sf-dk, phone/tablet-only ones .sf-nodk).
   Page bodies live in the section files (desktop-importer/-local/-car/-sell/-account/-pages.css).
   Layout is logical (Arabic mirrors); the logo, flags and stickers are images and never flip. */

/* Manrope 400/500 and Sora 600 only exist on desktop: a global load would change phone text rendering. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap") screen and (min-width: 1024px);

/* ---- desktop-only pieces stay out of the phone / tablet layouts ---- */
.tm-dh,.platform-links,.site-footer.sf-desktop-only,.site-footer .sf-dk{display:none}
/* Page bodies: .dk-only pieces exist only at ≥1024px, .dk-no pieces only below (phone copy kept as is). */
@media (max-width: 1023.98px){.dk-only{display:none!important}}
@media screen and (min-width: 1024px){.dk-no{display:none!important}}

@media screen and (min-width: 1024px) {
  :root{
    --tm-orange:#FF5400;--tm-orange-hover:#E04A00;--tm-ink:#0B0F14;--tm-cream:#F5F3EE;--tm-surface:#FFFFFF;
    --tm-border:#E7E4DC;--tm-border-strong:#E2DED5;--tm-muted:#5C6167;--tm-amber:#FFBD00;--tm-lime:#40FF00;
    --tm-radius-card:18px;--tm-radius-ctl:12px;--tm-container:1280px;--tm-gutter:40px;--tm-header-h:72px;
    --tm-font-display:"Sora","Manrope",system-ui,sans-serif;--tm-font-sans:"Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;
    /* Side padding that keeps content inside the 1280px container while backgrounds run full width. */
    --tm-pad-inline:max(var(--tm-gutter),calc((100% - var(--tm-container)) / 2 + var(--tm-gutter)));
    /* Field text everywhere (search bars, filter columns, forms): the small label above, then the value
       or the typed text. One size for all fields (user request, 2026-11-11: field text was too big). */
    --tm-field-label-size:12px;--tm-field-label-weight:600;
    --tm-field-size:14px;--tm-field-weight:600;--tm-field-input-weight:500;
  }
  /* Arabic: Cairo for the Sora roles, IBM Plex Sans Arabic for the Manrope roles (arabic-type.css);
     the Latin wordmark keeps Sora there. Arabic field text one step up so it reads at the same scale. */
  html[lang="ar"]{--tm-font-display:"Cairo","Sora",sans-serif;--tm-font-sans:"IBM Plex Sans Arabic","Manrope",system-ui,sans-serif;
    --tm-field-label-size:13px;--tm-field-size:15px}
  /* The container for later sections: 1280px, 40px side padding. */
  .tm-wrap{box-sizing:border-box;width:100%;max-width:var(--tm-container);margin-inline:auto;padding-inline:var(--tm-gutter)}

  /* ================================ header ================================ */
  /* One selector for every variant: the home header (lent to the results screens), the generic header
     and the light pages' header. :is() weighs as an id, so it outranks the per-page header rules. */
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header{
    position:sticky;top:0;z-index:60;display:flex!important;align-items:center;justify-content:flex-start;gap:24px;flex-wrap:nowrap;
    box-sizing:border-box;width:auto;max-width:none;height:calc(var(--tm-header-h) + 1px);min-height:0;margin:0;
    padding:0 var(--tm-pad-inline);border:0;border-bottom:1px solid var(--tm-border);border-radius:0;box-shadow:none;
    background:rgba(245,243,238,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    color:var(--tm-ink);font-family:var(--tm-font-sans);
  }
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header > *{flex:none}
  /* The light pages load neither auth.css nor platform-header.css: hidden stays hidden here too. */
  .platform-header [hidden]{display:none!important}
  .platform-header :is(a,button):focus-visible{outline:2px solid var(--tm-orange);outline-offset:2px}
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .platform-brand{
    display:flex;align-items:center;gap:9px;color:var(--tm-ink);text-decoration:none;
    font-family:var(--tm-font-display);font-size:22px;font-weight:800;line-height:1;letter-spacing:-.02em;
  }
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .platform-brand img{width:28px;height:28px;display:block}

  /* Local / Importer (/ Trader when the flag is on): segmented switch. */
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header :is(#modeSeg,.platform-tabs){
    display:flex!important;gap:2px;width:auto;padding:4px;border:0;border-radius:999px;background:#ECE9E2;box-shadow:none;grid-column:auto;
  }
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header :is(#modeSeg button,.platform-tabs a){
    display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:0;height:auto;margin:0;
    padding:8px 18px;border:0;border-radius:999px;background:transparent;box-shadow:none;
    color:#4A4F55;text-decoration:none;white-space:nowrap;font-family:var(--tm-font-sans);font-size:14px;font-weight:600;line-height:1.2;letter-spacing:0;
    cursor:pointer;transition:background-color .15s ease,color .15s ease;
  }
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header :is(#modeSeg button,.platform-tabs a):hover{color:var(--tm-ink)}
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header :is(#modeSeg button.on,.platform-tabs a[aria-current="page"]){background:var(--tm-ink);color:#fff}
  /* The account views keep today's rule: no tab is current there. */
  body[data-account-page="true"] :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header #modeSeg button.on{background:transparent;color:#4A4F55}
  /* The Vendre landing hides the switch below 1024px; on desktop it has it, Local current (the design). */
  body[data-mode="sell"] #s-search > .platform-header #modeSeg{display:flex!important}
  body[data-mode="sell"]:not([data-account-page="true"]) #s-search > .platform-header #modeSeg button[data-m="local"]{background:var(--tm-ink);color:#fff}
  html[data-trader="off"] .platform-header :is(#modeSeg [data-m="eu"],.platform-tabs a[href="/?mode=eu"]){display:none!important}

  /* Vérifier un sticker · Règles douane — never wrap; "Règles douane" goes under 1180px, both under 1040px. */
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .platform-links{
    display:flex;align-items:center;gap:24px;flex:0 1 auto;flex-wrap:nowrap;min-width:0;overflow:hidden;white-space:nowrap;
  }
  .platform-header .platform-links a{flex:none;color:#3D4247;text-decoration:none;font-family:var(--tm-font-sans);font-size:14px;font-weight:600;line-height:1.2;transition:color .15s ease}
  .platform-header .platform-links a:hover{color:var(--tm-orange)}

  /* Right side: + Vendre · bell · account, pushed to the end. */
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .platform-actions{
    display:flex;align-items:center;gap:24px;margin-inline-start:auto;grid-column:auto;grid-row:auto;justify-self:auto;
  }
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .platform-sell{
    display:inline-flex!important;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;box-sizing:border-box;
    border:0;border-radius:var(--tm-radius-ctl);background:var(--tm-ink);color:#fff;text-decoration:none;white-space:nowrap;
    font-family:var(--tm-font-sans);font-size:15px;font-weight:700;line-height:1;letter-spacing:0;transform:none;
    transition:background-color .15s ease;
  }
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .platform-sell:hover{background:#22272D;color:#fff}
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .platform-sell ph-icon{display:none}
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .platform-sell::before{
    content:"";flex:none;width:18px;height:18px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .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:var(--tm-radius-ctl);background:transparent;color:var(--tm-ink);text-decoration:none;cursor:pointer;transition:background-color .15s ease;
  }
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .platform-bell:hover{background:rgba(11,15,20,.05)}
  .platform-header .platform-bell .nav-badge{position:absolute;top:3px;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:2px solid var(--tm-cream);border-radius:9px;background:var(--tm-orange);color:#fff;
    font:700 11px/1 "Manrope",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;direction:ltr;pointer-events:none}

  /* Account: white pill (avatar initial · first name · chevron); visitors keep the sign-in button. */
  .platform-header .auth-shell{display:flex;align-items:center;min-width:0}
  .platform-header .auth-loading{width:150px;height:44px;min-height:44px;border-radius:999px}
  .platform-header .auth-primary{display:inline-flex;align-items:center;justify-content:center;border:0;white-space:nowrap;cursor:pointer;height:42px;padding:0 20px;border-radius:var(--tm-radius-ctl);background:var(--tm-orange);color:#fff;box-shadow:none;
    font-family:var(--tm-font-sans);font-size:15px;font-weight:700;letter-spacing:0;text-decoration:none;transform:none;transition:background-color .15s ease}
  .platform-header .auth-primary:hover{background:var(--tm-orange-hover);color:#fff;box-shadow:none}
  .platform-header .auth-primary:active{transform:none;box-shadow:none}
  .platform-header .auth-account-button{
    display:flex;align-items:center;gap:10px;width:auto;max-width:220px;height:44px;min-height:0;box-sizing:border-box;
    padding-block:0;padding-inline:4px 14px;border:1px solid var(--tm-border-strong);border-radius:999px;background:#fff;
    color:var(--tm-ink);text-decoration:none;font-family:var(--tm-font-sans);font-size:14px;font-weight:700;line-height:1;cursor:pointer;
    transition:border-color .15s ease;
  }
  .platform-header .auth-account-button:hover{border-color:#CFCAC0}
  .platform-header .auth-account-button::after{
    content:"";flex:none;width:16px;height:16px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .platform-header :is(.auth-avatar,.auth-avatar-fallback){width:36px;height:36px;border-radius:50%;flex:none}
  .platform-header .auth-avatar-fallback{display:flex;align-items:center;justify-content:center;background:var(--tm-ink);color:#fff;font-size:14px;font-weight:800;line-height:1}
  /* Clerk's generated picture is not a photo: the initial stands in for it, as in the design. */
  .platform-header [data-auth-default-image] .auth-avatar{display:none!important}
  .platform-header [data-auth-default-image] .auth-avatar-fallback[hidden]{display:flex!important}
  .platform-header .auth-account-name{display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:14px}
  .platform-header .auth-menu{top:calc(100% + 10px)}

  /* Pages whose own top bar the header replaces on desktop: the sticker car page's minimal bar, the
     back + title bars of /code and the legal pages. */
  body > .pl-top,body.code-page > .auth-header,body.legal-page > .auth-header{display:none!important}
  /* Existing fixed or sticky bars sit under the header instead of behind it. */
  .lx-page .lx-bar{top:calc(var(--tm-header-h) + 1px)}
  #s-results > .platform-header ~ .rr-top-bar{top:calc(var(--tm-header-h) + 1px)}

  /* Loading skeleton of the home page: same height and container as the header it stands for. */
  #pageLoading .pl-header{height:calc(var(--tm-header-h) + 1px);min-height:0;box-sizing:border-box;align-items:center;padding:0 var(--tm-pad-inline);border-bottom:1px solid var(--tm-border);box-shadow:none}

  /* ================================ footer ================================ */
  body .site-footer{
    display:block!important;margin-top:96px;border-top:1px solid var(--tm-border);background:#EFECE5;color:var(--tm-ink);
    font-family:var(--tm-font-sans);font-size:16px;
  }
  /* The sell flow steps keep their own screen (no footer), as before. */
  body[data-mode="sell"]:is([data-seller-screen="flow"],[data-seller-screen="camera"],[data-seller-screen="edit"],[data-seller-screen="order"]):not([data-account-page="true"]) .site-footer{display:none!important}
  /* Imported car page: its fixed price bar must not cover the footer's bottom row. */
  .lx-page .site-footer{padding-bottom:var(--lx-foot-h,0px)}
  .site-footer .sf-inner{box-sizing:border-box;max-width:var(--tm-container);margin:0 auto;padding:56px var(--tm-gutter) 0}
  .site-footer .sf-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;padding-bottom:40px}
  .site-footer .sf-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:none;grid-column:auto}
  .site-footer .sf-logo{display:flex;align-items:center;gap:9px;color:var(--tm-ink);text-decoration:none;font-family:var(--tm-font-display);font-size:22px;font-weight:800;line-height:1;letter-spacing:-.02em}
  .site-footer .sf-logo img{width:26px;height:26px}
  /* .sf-tag and .sf-bottom also exist in saved-flow.css (a pill, a fixed bar): reset what leaks in. */
  .site-footer .sf-tag{display:block;align-self:auto;padding:0;border-radius:0;background:none;max-width:300px;margin:0;color:var(--tm-muted);font-size:14px;font-weight:400;line-height:1.55}
  .site-footer .sf-loc{display:flex;align-items:center;gap:6px;margin:0;color:var(--tm-muted);font-size:14px;font-weight:400}
  .site-footer .sf-loc ph-icon{color:var(--tm-muted)}
  .site-footer .sf-col{display:flex;flex-direction:column;gap:12px;min-width:0}
  .site-footer .sf-col h3{margin:0;color:var(--tm-muted);font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase}
  .site-footer .sf-col a{display:block;width:fit-content;color:var(--tm-ink);text-decoration:none;font-size:16px;font-weight:600;line-height:1.35;transition:color .15s ease}
  .site-footer .sf-col a:hover,.site-footer .sf-col a:hover strong{color:var(--tm-orange)}
  .site-footer .sf-col a strong{font-weight:inherit}
  .site-footer .sf-col a small,.site-footer .sf-nodk,.site-footer .sf-sell,.site-footer .sf-note,.site-footer .sf-top-btn{display:none!important}
  .site-footer .sf-col a.sf-dk{display:block}
  /* Mode-specific pieces of the 900–1023px footer are the same on every desktop page. */
  body[data-mode="sell"] .site-footer .sf-sources{display:flex}
  body[data-mode="sell"] .site-footer #rulesLink{display:block}
  .site-footer .sf-sources p{margin:0;color:var(--tm-muted);font-size:14px;font-weight:400;line-height:1.45}
  /* the source sites' icons: white rounded tiles, five per row */
  .site-footer .sf-logos{display:grid;grid-template-columns:repeat(5,34px);gap:10px;margin:2px 0 0}
  .site-footer .sf-logos img{width:34px;height:34px;box-sizing:border-box;padding:4px;border:1px solid var(--tm-border);border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(17,17,17,.05);object-fit:contain}
  .site-footer .sf-bottom{position:static;inset:auto;z-index:auto;width:auto;transform:none;border-radius:0;background:none;box-shadow:none;display:flex!important;flex-wrap:wrap;align-items:center;gap:24px;margin:0;padding:0 0 32px;border:0;color:var(--tm-muted);font-size:13px;font-weight:400}
  .site-footer .sf-copy{color:var(--tm-muted);font-weight:400}
  .site-footer .sf-legal{display:flex;flex-wrap:wrap;gap:24px}
  .site-footer .sf-legal a{color:var(--tm-muted);font-weight:400;text-decoration:none}
  .site-footer .sf-legal a:hover{color:var(--tm-orange);text-decoration:none}
  /* FR · EN · AR: plain words, the current one in ink. */
  .site-footer .sf-lang{display:flex;align-items:center;height:auto;margin-inline-start:auto;padding:0;border:0;border-radius:0;background:none}
  .site-footer .sf-lang button{display:inline-flex;align-items:center;min-height:28px;padding:0;border:0;border-radius:0;background:none;color:var(--tm-muted);
    font-family:var(--tm-font-sans);font-size:13px;font-weight:400;letter-spacing:0;cursor:pointer;transition:color .15s ease}
  .site-footer .sf-lang button + button::before{content:"·";display:inline-block;padding:0 6px;color:var(--tm-muted);font-weight:400}
  .site-footer .sf-lang button:hover{color:var(--tm-ink)}
  .site-footer .sf-lang button.on{background:none;color:var(--tm-ink);font-weight:700}
  .site-footer :is(a,button):focus-visible{outline:2px solid var(--tm-orange);outline-offset:2px}
}

/* Narrow desktops: the header links never wrap — "Règles douane" goes first, then both links and the
   account name. */
@media screen and (min-width: 1024px) and (max-width: 1180px) {
  .platform-header .platform-links .platform-link-customs{display:none}
}
@media screen and (min-width: 1024px) and (max-width: 1040px) {
  :is(#s-search,#s-results,#s-scan,#s-local-results,body) > .platform-header .platform-links{display:none}
  .platform-header .auth-account-name{display:none!important}
}

/* ---- hero animations of the design (shared by the section files): one card at a time on a 9s loop,
   3s apart (animation-delay inline), pulses, scan line, travelling dashes, typing caret. CSS only,
   paused for reduced motion (the first card stays). ---- */
@keyframes tmcycle{0%{opacity:0;transform:translateY(10px)}4%{opacity:1;transform:translateY(0)}30%{opacity:1;transform:translateY(0)}34%{opacity:0;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-6px)}}
@keyframes tmon{0%{opacity:0}4%{opacity:1}30%{opacity:1}34%{opacity:0}100%{opacity:0}}
@keyframes tmpulse{0%{transform:scale(.15);opacity:.9}100%{transform:scale(1);opacity:0}}
@keyframes tmscan{0%{transform:translateY(2px)}50%{transform:translateY(var(--tm-scan,42px))}100%{transform:translateY(2px)}}
@keyframes tmdash{to{stroke-dashoffset:-120}}
@keyframes tmblink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media screen and (min-width: 1024px) {
  .tmcard{opacity:0;animation:tmcycle 9s linear infinite}
  .tmpinon{opacity:0;animation:tmon 9s linear infinite}
  .tmpulse{animation:tmpulse 3s linear infinite}
  .tmscan{animation:tmscan 2.4s ease-in-out infinite}
  .tmdash{animation:tmdash 6s linear infinite}
  .tmcaret{animation:tmblink 1s step-end infinite}
}
@media screen and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .tmcard,.tmpinon,.tmpulse,.tmscan,.tmdash,.tmcaret{animation:none}
  .tmcard{opacity:0}
  .tmcard:first-child{opacity:1}
}