@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* Layout : atelier de démontage — plaque "Ma moto" en tête, catalogue à filtres latéraux, fiches pièce façon étiquette d'atelier */
:root{
  --paper:#F2F3F0; --surface:#FFFFFF; --ink:#16191C; --steel:#5B6570; --line:#D6DAD6; --soft:#E7E9E4;
  --accent:#D4520E; --accent-ink:#FFFFFF; --accent-soft:#FBE7DB;
  --pro:#2C5C8A; --pro-soft:#E1EAF3; --good:#2E7A4E; --good-soft:#E0F0E6; --warn:#9A6400; --warn-soft:#F6ECD6; --crit:#B3261E;
  --plate:#1D2227; --plate-ink:#F2F3F0;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#121518; --surface:#1A1E22; --ink:#E9ECE8; --steel:#9AA4AD; --line:#2C3238; --soft:#22272C;
  --accent:#FF7B2E; --accent-ink:#1A0E05; --accent-soft:#3A2214;
  --pro:#8DB8E3; --pro-soft:#1E2B38; --good:#7FCB9C; --good-soft:#1B2C22; --warn:#E8B860; --warn-soft:#2E2617; --crit:#F2877F;
  --plate:#0B0D0F; --plate-ink:#E9ECE8; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#121518; --surface:#1A1E22; --ink:#E9ECE8; --steel:#9AA4AD; --line:#2C3238; --soft:#22272C;
  --accent:#FF7B2E; --accent-ink:#1A0E05; --accent-soft:#3A2214;
  --pro:#8DB8E3; --pro-soft:#1E2B38; --good:#7FCB9C; --good-soft:#1B2C22; --warn:#E8B860; --warn-soft:#2E2617; --crit:#F2877F;
  --plate:#0B0D0F; --plate-ink:#E9ECE8; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--plate)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono);font-size:.88em}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:.01em;line-height:1.05;text-wrap:balance;margin:0}
.label{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);font-weight:600}
.note{font-size:.85rem;color:var(--steel)}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--plate);color:var(--plate-ink)}
.topbar{display:flex;align-items:center;gap:16px;padding-block:10px}
.logo{display:flex;align-items:baseline;gap:8px;cursor:pointer;background:none;border:0;color:inherit;padding:0;flex:none}
.logo b{font-family:var(--f-display);font-size:1.9rem;font-weight:800;letter-spacing:.02em}
.logo b span{color:var(--accent)}
.search{flex:1 1 auto;min-width:0}
.search input{width:100%;min-width:0;border:1px solid transparent;background:color-mix(in srgb,var(--plate-ink) 10%,transparent);color:var(--plate-ink);border-radius:var(--r);padding:9px 12px}
.search input::placeholder{color:color-mix(in srgb,var(--plate-ink) 55%,transparent)}
nav.main{display:flex;gap:4px;flex:none}
nav.main button{background:none;border:0;color:var(--plate-ink);padding:8px 10px;border-radius:var(--r);cursor:pointer;font-weight:600;opacity:.8;white-space:nowrap}
nav.main button[aria-current="true"]{opacity:1;background:color-mix(in srgb,var(--plate-ink) 12%,transparent)}
nav.main .sell,nav.main .sell[aria-current="true"]{background:var(--accent);color:var(--accent-ink);opacity:1}
.catbar{display:flex;gap:2px;overflow-x:auto;padding-block:0 8px;scrollbar-width:thin}
.catbar button{flex:none;background:none;border:0;color:var(--plate-ink);opacity:.72;padding:6px 10px;font-size:.88rem;cursor:pointer;border-radius:4px;white-space:nowrap}
.catbar button:hover,.catbar button[aria-pressed="true"]{opacity:1;background:color-mix(in srgb,var(--plate-ink) 10%,transparent)}
.catbar .sep{width:1px;background:color-mix(in srgb,var(--plate-ink) 20%,transparent);margin:4px 6px;flex:none}
.trust{background:var(--surface);border-bottom:1px solid var(--line);font-size:.84rem}
.trust .wrap{display:flex;gap:22px;flex-wrap:wrap;padding-block:8px;justify-content:space-between}
.trust span{display:flex;gap:6px;align-items:center}
.trust svg{width:16px;height:16px;color:var(--accent);flex:none}

/* plate */
.hero{background:var(--plate);color:var(--plate-ink);padding-block:18px 22px}
.hero h1{font-size:clamp(1.9rem,4vw,2.9rem)}
.hero p{margin:4px 0 14px;opacity:.75;max-width:62ch}
.picker{display:grid;grid-template-columns:1.1fr .9fr 1.5fr .8fr auto;gap:10px;align-items:end}
.picker label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85;min-width:0}
.picker select,.picker input{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-width:0;width:100%;text-transform:none;letter-spacing:0;font-size:1rem}
.btn{border:0;border-radius:var(--r);padding:10px 16px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.hero .btn.ghost{color:var(--plate-ink);border-color:color-mix(in srgb,var(--plate-ink) 30%,transparent)}
.myplate{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.plaque{font-family:var(--f-mono);font-size:.9rem;background:var(--plate-ink);color:var(--plate);padding:5px 12px;border-radius:4px;border:2px solid var(--accent);letter-spacing:.03em}
.stats{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap;font-size:.85rem;opacity:.8}
.stats b{font-family:var(--f-display);font-size:1.35rem;display:block;font-variant-numeric:tabular-nums}

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem;color:var(--steel);padding-block:14px 4px;list-style:none;margin:0;padding-left:0}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs button{background:none;border:0;padding:0;color:var(--steel);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.crumbs li:last-child{color:var(--ink);font-weight:600}

.universe{display:flex;gap:6px;margin-block:8px 4px;flex-wrap:wrap}
.universe button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;font-weight:600;cursor:pointer}
.universe button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.universe .soon{font-size:.7rem;margin-left:6px;color:var(--steel);font-weight:500}

.browse{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;padding-block:10px 30px}
aside.filters{align-self:start;position:sticky;top:calc(env(safe-area-inset-top,0px) + 112px);max-height:calc(100vh - 130px);overflow:auto;padding-right:2px}
.fbody{display:flex;flex-direction:column;gap:16px}
.fgroup{display:flex;flex-direction:column;gap:6px}
.fgroup select,.fgroup input{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:8px 10px;width:100%;min-width:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cats{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:4px}
.cats button{text-align:left;background:none;border:0;padding:5px 8px;border-radius:4px;cursor:pointer;display:flex;justify-content:space-between;gap:8px;font-size:.93rem}
.cats button.sub{padding-left:20px;font-size:.86rem}
.cats button[aria-pressed="true"]{background:var(--accent-soft);font-weight:600}
.cats button span{color:var(--steel);font-variant-numeric:tabular-nums}
.check{display:flex;gap:8px;align-items:center;font-size:.92rem}
.alertbox{border:1px dashed var(--line);border-radius:var(--r);padding:10px;font-size:.88rem;background:var(--surface)}

.results-head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.results-head h1{font-size:clamp(1.6rem,3vw,2.3rem)}
.results-head p{margin:4px 0 0;color:var(--steel);font-size:.92rem}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:.9rem}
.toolbar select{border:1px solid var(--line);border-radius:4px;padding:5px 8px;background:var(--paper)}
.toolbar label{display:flex;gap:6px;align-items:center}
.activef{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.fchip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 6px 3px 10px;font-size:.85rem}
.fchip button{border:0;background:var(--soft);border-radius:50%;width:20px;height:20px;cursor:pointer;line-height:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer}
.card:hover{border-color:var(--steel)}
.thumb{aspect-ratio:4/3;background:var(--soft);display:grid;place-items:center;position:relative;max-width:100%}
.thumb svg{width:42%;height:auto;color:var(--steel)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumbs{flex-wrap:wrap;margin-top:8px}
.thumbs img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.badge-demo,.badge-mine{position:absolute;top:8px;left:8px;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:3px}
.badge-demo{background:var(--surface);border:1px solid var(--line);color:var(--steel)}
.badge-mine{background:var(--accent);color:var(--accent-ink)}
.cbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.cbody h3{font-family:var(--f-body);font-weight:700;font-size:.98rem;line-height:1.25}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{font-size:.72rem;padding:2px 7px;border-radius:3px;background:var(--soft);color:var(--ink);font-weight:600}
.chip.pro{background:var(--pro-soft);color:var(--pro)}
.chip.part{background:var(--good-soft);color:var(--good)}
.chip.ok{background:var(--good-soft);color:var(--good)}
.chip.mid{background:var(--warn-soft);color:var(--warn)}
.cfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:end;gap:8px}
.price{font-family:var(--f-display);font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.stock{font-size:.78rem;color:var(--good);display:flex;align-items:center;gap:5px}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good)}
.pager{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.pager button{min-width:38px;border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:6px 10px;cursor:pointer;font-variant-numeric:tabular-nums}
.pager button[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager button:disabled{opacity:.4;cursor:default}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:28px;text-align:center;color:var(--steel);background:var(--surface)}
.empty b{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:6px}
.seotext{border-top:1px solid var(--line);margin-top:28px;padding-top:16px;color:var(--steel);font-size:.92rem;max-width:80ch}
.seotext h2{font-size:1.4rem;color:var(--ink);margin-bottom:6px}

/* item page */
.item{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;padding-block:8px 20px}
.gallery{display:flex;flex-direction:column;gap:8px}
.gallery .main{aspect-ratio:4/3;border-radius:var(--r);border:1px solid var(--line)}
.gallery .main svg{width:38%}
.thumbs{display:flex;gap:8px}
.thumbs button{width:72px;aspect-ratio:1;border:1px solid var(--line);border-radius:4px;background:var(--soft);cursor:pointer;display:grid;place-items:center;padding:0}
.thumbs button[aria-pressed="true"]{border:2px solid var(--accent)}
.thumbs svg{width:50%;color:var(--steel)}
.buy{display:flex;flex-direction:column;gap:12px;min-width:0}
.buy h1{font-size:clamp(1.7rem,3vw,2.4rem)}
.pricebox{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:10px}
.pricebox .price{font-size:2.4rem}
.bill{display:grid;grid-template-columns:1fr auto;gap:3px 12px;font-size:.92rem;font-variant-numeric:tabular-nums}
.bill .tot{font-weight:700;border-top:1px solid var(--line);padding-top:6px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.facts{display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.facts div{display:flex;gap:8px;align-items:flex-start}
.facts svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:2px}
.sections{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;padding-block:10px 20px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.box h2{font-size:1.45rem;margin-bottom:10px}
dl.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 14px;margin:0;font-size:.93rem}
dl.kv dt{color:var(--steel)}
dl.kv dd{margin:0;min-width:0}
ul.compat{margin:0;padding-left:18px;columns:2 220px;font-size:.93rem}
.seller{display:flex;gap:12px;align-items:center}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-family:var(--f-display);font-size:1.3rem;font-weight:800;flex:none}
.msg{font-size:.88rem;padding:8px 10px;border-radius:var(--r);background:var(--warn-soft);color:var(--warn)}
.msg.ok{background:var(--good-soft);color:var(--good)}
.msg.err{background:color-mix(in srgb,var(--crit) 14%,var(--surface));color:var(--crit)}

/* sell, brands, how */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.sell-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;padding-block:24px 40px}
form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600;min-width:0}
form label.full{grid-column:1/-1}
form input,form select,form textarea{border:1px solid var(--line);border-radius:var(--r);padding:9px 10px;background:var(--paper);font-weight:400;width:100%;min-width:0}
form .hint{font-weight:400;color:var(--steel);font-size:.78rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.seg button{border:0;background:var(--surface);padding:8px 16px;cursor:pointer;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.fees{display:grid;grid-template-columns:1fr auto;gap:6px;font-variant-numeric:tabular-nums;font-size:.95rem}
.fees .big{font-family:var(--f-display);font-size:2rem;font-weight:800}
.brands{columns:4 200px;column-gap:24px;padding-block:10px 40px}
.brands h3{font-size:1.6rem;color:var(--accent);margin-top:10px;break-after:avoid}
.brands button{display:flex;justify-content:space-between;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:6px 2px;cursor:pointer;text-align:left}
.brands button span{color:var(--steel);font-variant-numeric:tabular-nums;font-size:.85rem}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-block:24px}
.how h3{font-size:1.5rem;margin:6px 0}
.feetable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.feetable th,.feetable td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.feetable th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
footer{border-top:1px solid var(--line);padding-block:20px 30px;color:var(--steel);font-size:.85rem;margin-top:20px}
/* pied de page complet */
footer.site{background:var(--plate);color:#B9C1C8;border-top:4px solid var(--accent);padding-block:36px 0;margin-top:48px;font-size:.9rem}
footer.site a{color:#E4E8EB;text-decoration:none}
footer.site a:hover{color:var(--accent);text-decoration:underline}
footer.site h2{font-family:var(--f-display);font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;margin:0 0 12px}
footer.site .logo b{color:#FFFFFF}
.fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr) 1.3fr;gap:28px}
.fcols nav{display:flex;flex-direction:column;gap:7px}
.fbrand p{margin:10px 0 0;max-width:34ch;line-height:1.45}
.fpay{display:flex;flex-wrap:wrap;gap:6px}
.fpay span{border:1px solid #3A434B;border-radius:4px;padding:2px 8px;font-size:.75rem;color:#C9D0D5}
.fcontact p{margin:0 0 14px;line-height:1.55}
.fcontact .note{color:#9AA4AD}
.socs{display:flex;gap:10px}
.soc{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#2A3137;color:#FFFFFF}
.soc svg{width:20px;height:20px}
a.soc:hover{background:var(--accent);color:#FFFFFF;text-decoration:none}
.soc.off{opacity:.45}
.fbottom{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border-top:1px solid #2F363C;margin-top:30px;padding-block:16px 22px;font-size:.78rem;color:#8E98A1}
mark.todo{background:#FFE7A3;color:#5A3D00;padding:0 4px;border-radius:3px;font-size:.92em}
footer.site mark.todo{background:#5A4410;color:#FFE7A3}
/* pages d'aide et pages légales */
.legal{padding-block:8px 20px;max-width:1100px}
.legal.has-toc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;align-items:start}
.legal-body{max-width:78ch;min-width:0}
.legal-body h1{font-size:2.4rem;margin-bottom:8px}
.legal-body h2{font-size:1.45rem;margin:28px 0 8px;scroll-margin-top:90px}
.legal-body p,.legal-body li{line-height:1.6}
.legal-body ul,.legal-body ol{padding-left:22px}
.legal-body li{margin-bottom:6px}
.legal-body .feetable{font-size:.9rem;margin:8px 0}
.legal-body .panel{margin:8px 0}
.lead{font-size:1.12rem;color:var(--ink)}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line);padding-left:12px;font-size:.88rem}
.toc a{color:var(--steel);text-decoration:none;padding:4px 0}
.toc a:hover{color:var(--accent)}
dl.ident{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:10px 0}
dl.ident dt{color:var(--steel);font-size:.9rem}
dl.ident dd{margin:0}
.steps li::marker{font-weight:700;color:var(--accent)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:600}
.faq details p{margin:0;padding:0 16px 14px;color:var(--steel)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;margin-top:12px}
.contact-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.contact-form label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}
.contact-form .full{grid-column:1/-1}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;font-weight:400;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.formcopy p{margin:0 0 10px}
@media (max-width:1000px){ .fcols{grid-template-columns:repeat(3,1fr)} .fbrand,.fcontact{grid-column:span 3} .fcontact{display:grid;grid-template-columns:1fr 1fr;gap:0 24px} .fcontact h2:last-of-type{grid-column:2;grid-row:1} .socs{grid-column:2;grid-row:2;align-self:start} }
@media (max-width:760px){
  .legal.has-toc{grid-template-columns:1fr;gap:12px}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 14px;border-left:0;padding-left:0;border-bottom:1px solid var(--line);padding-bottom:10px}
  .contact-grid,.contact-form .fields{grid-template-columns:1fr}
  .legal-body h1{font-size:1.9rem}
  dl.ident{grid-template-columns:1fr;gap:0}
  dl.ident dd{margin-bottom:8px}
}
@media (max-width:560px){ .fcols{grid-template-columns:1fr 1fr} .fbrand,.fcontact{grid-column:1/-1} .fcontact{display:block} }
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r);z-index:50;max-width:calc(100vw - 32px)}
.filters-toggle{display:none}

@media (max-width:1060px){ nav.main .hide-md{display:none} }
@media (max-width:900px){
  header.top{position:relative;top:0}
  .topbar{flex-wrap:wrap}
  .search{order:3;flex-basis:100%}
  .picker{grid-template-columns:1fr 1fr}
  .browse{grid-template-columns:1fr}
  aside.filters{position:static;max-height:none}
  aside.filters[data-open="false"] .fbody{display:none}
  .filters-toggle{display:inline-block}
  .item,.sections,.sell-wrap{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}
}
@media (max-width:520px){
  .picker{grid-template-columns:1fr}
  form .fields{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}
  nav.main button:not(.sell){padding:8px 6px}
  .trust .wrap{gap:8px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- ajouts application --- */
a.card,a.btn{text-decoration:none;color:inherit}
a.btn.primary{color:var(--accent-ink)}
.crumbs a{color:var(--steel)}
.cats a{text-align:left;padding:5px 8px;border-radius:4px;display:flex;justify-content:space-between;gap:8px;font-size:.93rem;text-decoration:none}
.cats a.sub{padding-left:20px;font-size:.86rem}
.cats a[aria-current="true"]{background:var(--accent-soft);font-weight:600}
.cats a span{color:var(--steel);font-variant-numeric:tabular-nums}
.catbar a{flex:none;color:var(--plate-ink);opacity:.72;padding:6px 10px;font-size:.88rem;border-radius:4px;white-space:nowrap;text-decoration:none}
.catbar a:hover{opacity:1;background:color-mix(in srgb,var(--plate-ink) 10%,transparent)}
nav.main a{color:var(--plate-ink);padding:8px 10px;border-radius:var(--r);font-weight:600;opacity:.85;white-space:nowrap;text-decoration:none}
nav.main a.sell{background:var(--accent);color:var(--accent-ink);opacity:1}
.pager a,.pager span{min-width:38px;border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:6px 10px;text-align:center;text-decoration:none;font-variant-numeric:tabular-nums}
.pager a[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager span{opacity:.4}
.universe a{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;font-weight:600;text-decoration:none}
.universe a[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.universe .u-soon{border:1px dashed var(--line);border-radius:999px;padding:7px 15px;font-weight:600;color:var(--steel);cursor:default}
.navband{padding-bottom:14px}
.universe a.u-brands{border:0;background:none;color:var(--accent);padding-inline:6px;align-self:center}
.navband .universe{margin:8px 0 0}
.hero-title{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.05;margin:0 !important;opacity:1 !important}
.fchip a{border:0;background:var(--soft);border-radius:50%;width:20px;height:20px;display:grid;place-items:center;text-decoration:none;line-height:1}
.brands a{display:flex;justify-content:space-between;width:100%;border-bottom:1px solid var(--line);padding:6px 2px;text-decoration:none}
.brands a span{color:var(--steel);font-variant-numeric:tabular-nums;font-size:.85rem}
.homecats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-block:10px 26px}
.homecats a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:6px;text-decoration:none}
.homecats svg{width:34px;height:34px;color:var(--steel)}
.section-title{font-size:1.7rem;margin:22px 0 10px}
.logo,.logo:hover{text-decoration:none}
form label.check{flex-direction:row;align-items:center;font-weight:400}
form.toolbar label{flex-direction:row;align-items:center;font-weight:400;font-size:.9rem}
@media (max-width:900px){ .cats{max-height:46vh;overflow:auto} }

/* ---------- comptes vendeurs (lot 2) ---------- */
.badge-demo,.badge-mine{z-index:1}
form label.check{flex-direction:row;align-items:flex-start;font-weight:400}
form label.check input{width:auto;margin-top:3px}
.flabel{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.msg ul{margin:4px 0 0;padding-left:18px}
.chip.err{background:color-mix(in srgb,var(--crit) 14%,var(--surface));color:var(--crit)}
.btn.danger{color:var(--crit)}
.btn:disabled{opacity:.55;cursor:wait}
nav.main .account{white-space:nowrap}
.auth-wrap{display:grid;place-items:start center;padding:10px 0 50px}
.auth-card{width:100%;max-width:440px}
.auth-card form{display:flex;flex-direction:column;gap:12px}
.auth-card h1{font-size:1.9rem}
.auth-card .seg{display:flex}
.auth-card .seg button{flex:1}
.acc-welcome{padding:6px 0 14px}
.acc-welcome h1{font-size:2.2rem;margin-bottom:6px}
.acc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:6px 0 12px}
.acc-head h1{font-size:2.2rem}
.acc-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:8px 0 16px;overflow-x:auto}
.acc-tabs a{padding:10px 14px;text-decoration:none;color:var(--steel);font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.acc-tabs a[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.mylist{display:flex;flex-direction:column;gap:8px;margin-bottom:40px}
.myitem{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.mythumb{width:84px;aspect-ratio:4/3;border-radius:4px;background:var(--soft);overflow:hidden;display:grid;place-items:center}
.mythumb img{width:100%;height:100%;object-fit:cover}
.mythumb svg{width:50%;color:var(--steel)}
.myinfo a{color:inherit}
.myactions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.myactions .btn{padding:7px 11px;font-size:.85rem;text-decoration:none}
.price-sm{font-weight:700;font-variant-numeric:tabular-nums}
.keybox{margin-top:16px;border:2px solid var(--accent);border-radius:var(--r);padding:14px;background:var(--accent-soft)}
.keybox p{margin:6px 0}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.ph{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph-main{position:absolute;left:6px;bottom:6px;background:var(--ink);color:var(--paper);font-size:.66rem;padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:.06em}
.ph-tools{position:absolute;top:4px;right:4px;display:flex;gap:4px}
.ph-tools button{width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;font-size:1rem;line-height:1}
.ph-add{display:grid;place-items:center;align-content:center;gap:2px;cursor:pointer;border-style:dashed;color:var(--steel);text-align:center;padding:6px}
form label.ph-add{flex-direction:column;font-weight:600}
.ph-add span{font-size:1.8rem;line-height:1}
.ph-add small{font-size:.75rem}
.ph-status{min-height:1em;margin:6px 0 0}
.compat{border-top:1px solid var(--line);padding-top:12px}
pre.code{background:var(--plate);color:#E4E8EB;border-radius:var(--r);padding:12px 14px;overflow-x:auto;font-size:.82rem;line-height:1.5;margin:8px 0 14px}
pre.code code{font-family:var(--f-mono)}
.apitable td{vertical-align:top}
.verb{font-family:var(--f-mono);font-size:.72rem;font-weight:700;padding:2px 6px;border-radius:3px;background:var(--soft)}
.verb-get{background:var(--good-soft);color:var(--good)}
.verb-put,.verb-post{background:var(--pro-soft);color:var(--pro)}
.verb-patch{background:var(--warn-soft);color:var(--warn)}
.verb-delete{background:color-mix(in srgb,var(--crit) 14%,var(--surface));color:var(--crit)}
.legal-body h3{font-size:1.1rem;margin:18px 0 4px}
@media (max-width:640px){
  .myitem{grid-template-columns:64px minmax(0,1fr)}
  .mythumb{width:64px}
  .myactions{grid-column:1/-1;justify-content:flex-start}
  .acc-head h1{font-size:1.8rem}
}
form .fields > .full{grid-column:1/-1}

/* ---------- application installable ---------- */
.installbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;background:var(--plate);color:#F2F3F0;border-radius:10px;padding:10px 10px 10px 12px;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.installbar img{border-radius:9px;flex:none}
.installbar div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.installbar span{font-size:.8rem;opacity:.75}
.installbar .btn{padding:8px 12px}
.installbar .close{background:none;border:0;color:inherit;font-size:1.4rem;cursor:pointer;padding:0 4px;opacity:.7}
.app-cta{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.danger-zone{border-color:color-mix(in srgb,var(--crit) 40%,var(--line))}
html.app header.top{padding-top:env(safe-area-inset-top,0px)}