@font-face{font-family:"Gloock";src:url(/fonts/gloock/gloock-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Gloock";src:url(/fonts/gloock/gloock-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";src:url(/fonts/figtree/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree/figtree-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree/figtree-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

/* Layout : grille asymétrique — filtres collants à gauche, catalogue en "setlist" ; packs de hauteurs inégales ; jeux en index éditorial 4/8 ; éditeur en maître-détail. */
:root{
  --paper:#E4E3DE; --surface:#ECEBE7; --ink:#1B1D1A; --muted:#5B6058;
  --brand:#1F4A3F; --brand-ink:#ECEBE7; --gold:#C98A00; --gold-ink:#1B1D1A; --danger:#A2341F;
  --line:rgba(27,29,26,.16); --line-strong:rgba(27,29,26,.38);
  --f-display:"Gloock","Georgia","Times New Roman",serif;
  --f-body:"Figtree","Segoe UI","Helvetica Neue",sans-serif;
  --f-mono:"IBM Plex Mono","SFMono-Regular","Consolas",monospace;
  --r:2px; --t:160ms ease;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121412; --surface:#191C19; --ink:#E4E3DE; --muted:#9A9F96;
    --brand:#7FB09C; --brand-ink:#121412; --gold:#E3AA2B; --gold-ink:#121412; --danger:#E0795F;
    --line:rgba(228,227,222,.13); --line-strong:rgba(228,227,222,.34); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121412; --surface:#191C19; --ink:#E4E3DE; --muted:#9A9F96;
  --brand:#7FB09C; --brand-ink:#121412; --gold:#E3AA2B; --gold-ink:#121412; --danger:#E0795F;
  --line:rgba(228,227,222,.13); --line-strong:rgba(228,227,222,.34); color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.label{font:500 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a{color:inherit}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);background:transparent;padding:10px 16px;border-radius:var(--r);cursor:pointer;font-weight:500;font-size:14px;text-decoration:none;transition:background var(--t),color var(--t),border-color var(--t)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.45;cursor:not-allowed;background:transparent;color:inherit}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-sm{padding:6px 10px;font-size:13px}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-danger:hover,.btn-danger[data-armed]{background:var(--danger);color:var(--paper);border-color:var(--danger)}
.btn[data-in="true"]{background:var(--ink);color:var(--paper)}

/* en-tête */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding-block:14px;flex-wrap:wrap}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.logo b{font:400 22px/1 var(--f-display)}
.logo span{font:500 11px/1 var(--f-mono);color:var(--muted);letter-spacing:.08em}
nav.main{display:flex;gap:24px;font-size:14px;align-items:center}
nav.main a{text-decoration:none;color:var(--muted);transition:color var(--t);padding-block:4px;border-bottom:1px solid transparent;white-space:nowrap}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
nav.main a.edit-link{color:var(--brand)}
.cart-btn{border:1px solid var(--line-strong);background:transparent;border-radius:var(--r);padding:8px 12px;cursor:pointer;display:flex;gap:10px;align-items:center;font-size:14px;transition:border-color var(--t)}
.cart-btn:hover{border-color:var(--ink)}
.cart-count{font:500 12px/1 var(--f-mono);background:var(--gold);color:var(--gold-ink);padding:4px 6px;border-radius:var(--r)}
@media (max-width:820px){nav.main{order:3;width:100%;overflow-x:auto;gap:20px;padding-bottom:2px}}

/* barre de modifications */
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);color:var(--paper);padding-bottom:env(safe-area-inset-bottom,0px)}
section.block,#sur-mesure,#catalogue,#packs,#licence{scroll-margin-top:72px}
.savebar .wrap{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding-block:10px;font-size:14px}
.savebar .acts{display:flex;gap:8px;flex-wrap:wrap}
.savebar .btn{border-color:var(--paper);color:var(--paper)}
.savebar .btn:hover{background:var(--paper);color:var(--ink)}
.savebar .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.notice{border-left:2px solid var(--brand);padding:10px 12px;font-size:14px;background:var(--surface)}
.notice.err{border-left-color:var(--danger)}

/* hero */
.hero{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);padding-block:clamp(48px,8vw,104px) clamp(40px,6vw,72px);align-items:end}
.hero h1{font-size:clamp(44px,7.4vw,96px)}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lede{max-width:46ch;margin-top:28px;font-size:18px;color:var(--muted)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sheet{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r)}
.sheet-head{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.sheet ol{list-style:none;margin:0;padding:6px 0}
.sheet li{display:grid;grid-template-columns:52px 1fr auto;gap:14px;padding:11px 18px;align-items:baseline;border-bottom:1px dashed var(--line)}
.sheet li:last-child{border-bottom:0}
.sheet .time{font:500 13px/1 var(--f-mono);color:var(--muted)}
.sheet .cue{font-weight:500}
.sheet .cue small{display:block;color:var(--muted);font-weight:400;font-size:13px}
.sheet .tag{font:500 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--brand)}
.sheet li.now .time{color:var(--gold)}
.sheet-foot{padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:900px){.hero{grid-template-columns:1fr}}

section.block{padding-block:clamp(56px,8vw,112px);border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:4fr 8fr;gap:32px;align-items:end;margin-bottom:48px}
.sec-head h2{font-size:clamp(34px,4.6vw,58px)}
.sec-head p{color:var(--muted);max-width:56ch}
@media (max-width:760px){.sec-head{grid-template-columns:1fr;gap:16px}}

/* catalogue */
.catalog{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.filters{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);display:flex;flex-direction:column;gap:28px}
.fgroup{display:flex;flex-direction:column;gap:2px}
.fgroup .label{margin-bottom:10px}
.chip{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;background:transparent;border:0;border-left:2px solid transparent;padding:6px 10px;cursor:pointer;font-size:15px;color:var(--muted);transition:color var(--t),border-color var(--t),background var(--t)}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink);border-left-color:var(--brand);background:var(--surface)}
.chip .n{font:400 12px/1 var(--f-mono);color:var(--muted)}
.search{width:100%;border:0;border-bottom:1px solid var(--line-strong);background:transparent;padding:8px 0;border-radius:0}
.search::placeholder{color:var(--muted)}
.list-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line-strong)}
.tracks{list-style:none;margin:0;padding:0}
.track{position:relative;display:grid;grid-template-columns:40px minmax(0,2.4fr) minmax(0,1.4fr) 92px 64px 96px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);transition:background var(--t);-webkit-user-select:none;user-select:none}
.track:hover{background:var(--surface)}
.track::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:calc(var(--p,0) * 100%);background:var(--gold)}
.play{width:36px;height:36px;border:1px solid var(--line-strong);background:transparent;border-radius:var(--r);cursor:pointer;display:grid;place-items:center;transition:border-color var(--t),background var(--t)}
.play:hover{border-color:var(--ink)}
.play[data-on="true"]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.play svg{width:12px;height:12px}
.t-title{font-weight:600;min-width:0}
.t-title small{display:block;font-weight:400;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.tag-b{font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-strong);padding:5px 6px;border-radius:var(--r);color:var(--muted)}
.tag-b.loop{border-color:var(--brand);color:var(--brand)}
.t-tech{font:400 12px/1.4 var(--f-mono);color:var(--muted)}
.t-dur{font:500 14px/1 var(--f-mono)}
.add{justify-self:end;display:flex;align-items:center;gap:10px}
.add .price{font:500 14px/1 var(--f-mono)}
.add button{width:32px;height:32px;border:1px solid var(--line-strong);background:transparent;border-radius:var(--r);cursor:pointer;font-size:18px;line-height:1;transition:background var(--t),color var(--t),border-color var(--t)}
.add button:hover{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.add button[data-in="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.empty{padding:40px 0;color:var(--muted)}
@media (max-width:960px){
  .catalog{grid-template-columns:1fr}
  .filters{position:static;gap:18px}
  .fgroup{flex-direction:row;flex-wrap:wrap;gap:6px}
  .fgroup .label{width:100%;margin-bottom:4px}
  .chip{width:auto;border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;gap:8px;font-size:14px}
  .chip[aria-pressed="true"]{border-color:var(--brand)}
}
@media (max-width:720px){
  .track{grid-template-columns:40px minmax(0,1fr) auto;row-gap:8px}
  .track .t-tags{grid-column:2/4;grid-row:2}
  .track .t-tech,.track .t-dur{display:none}
  .track .add{grid-column:3;grid-row:1}
}

/* packs */
.packs{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.pack{border:1px solid var(--line-strong);border-radius:var(--r);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:18px;background:var(--paper);min-width:0}
.pack.feat{grid-column:1/8;background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.pack.feat .label,.pack.feat .p-list span,.pack.feat .p-save{color:inherit;opacity:.78}
.pack.feat h3{font-size:clamp(36px,4vw,54px)}
.pack.side{grid-column:8/13}
.pack.half{grid-column:span 6}
.pack.wide{grid-column:1/13}
.pack.wide .p-list{columns:2;column-gap:32px}
.pack h3{font-size:30px}
.p-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.p-desc{max-width:52ch}
.p-list{list-style:none;margin:0;padding:0}
.p-list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:14px;break-inside:avoid}
.p-list span{font:400 13px/1.4 var(--f-mono);color:var(--muted);white-space:nowrap}
.p-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end}
.p-price{font:400 40px/1 var(--f-display)}
.p-save{font-size:13px;color:var(--muted);margin-top:6px}
.pack.feat .btn{border-color:var(--brand-ink);color:var(--brand-ink)}
.pack.feat .btn:hover{background:var(--brand-ink);color:var(--brand)}
.pack.feat .btn[data-in="true"]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
@media (max-width:900px){.pack.feat,.pack.side,.pack.half,.pack.wide{grid-column:1/-1;grid-row:auto!important}.pack.wide .p-list{columns:1}}

/* sur mesure */
.custom{display:grid;grid-template-columns:7fr 4fr;gap:clamp(32px,5vw,72px);align-items:start}
.step{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:28px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
.step-n{font:400 28px/1 var(--f-display);color:var(--gold)}
.step h3{font-size:24px;margin-bottom:6px}
.step .hint{color:var(--muted);font-size:14px;margin-bottom:16px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt label{display:block;border:1px solid var(--line-strong);border-radius:var(--r);padding:9px 14px;cursor:pointer;font-size:14px;transition:border-color var(--t),background var(--t),color var(--t)}
.opt label:hover{border-color:var(--ink)}
.opt input:checked+label{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt input:focus-visible+label{outline:2px solid var(--gold);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px;min-width:0}
.field>label,.field>.flabel{font-size:13px;color:var(--muted)}
.field input:not([type=checkbox]):not([type=range]):not([type=file]),.field textarea,.field select{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:10px 12px;width:100%;transition:border-color var(--t)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);outline:none}
.field textarea{min-height:110px;resize:vertical}
.range-row{display:flex;align-items:center;gap:16px}
.range-row input{flex:1;accent-color:var(--brand)}
.range-row output{font:500 18px/1 var(--f-mono);min-width:64px;text-align:right}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}
@media (max-width:560px){.two,.three{grid-template-columns:1fr}}
.quote{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);border:1px solid var(--ink);border-radius:var(--r);background:var(--surface)}
.quote-head{padding:18px 20px;border-bottom:1px solid var(--line)}
.quote dl{margin:0;padding:8px 20px}
.quote .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.quote .row dd{margin:0;font-family:var(--f-mono)}
.quote .row dt{color:var(--muted)}
.quote .total{display:flex;justify-content:space-between;align-items:baseline;padding:18px 20px;border-top:1px solid var(--line-strong)}
.quote .total b{font:400 38px/1 var(--f-display)}
.quote .send{padding:0 20px 20px;display:flex;flex-direction:column;gap:10px}
.quote .send .btn{justify-content:center}
.note{font-size:13px;color:var(--muted)}
@media (max-width:960px){.custom{grid-template-columns:1fr}.quote{position:static}}

/* licence */
.licence{display:grid;grid-template-columns:repeat(12,1fr);border-top:1px solid var(--line-strong)}
.lic{padding:28px 28px 28px 0;border-right:1px solid var(--line)}
.lic:last-child{border-right:0}
.lic:nth-child(1){grid-column:span 5}
.lic:nth-child(2){grid-column:span 4;padding-left:28px}
.lic:nth-child(3){grid-column:span 3;padding-left:28px}
.lic h3{font-size:22px;margin:12px 0 8px}
.lic p{color:var(--muted);font-size:15px;max-width:44ch}
@media (max-width:860px){.lic,.lic:nth-child(n){grid-column:1/-1;padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}}

/* jeux de rôle */
.games-hero{padding-block:clamp(48px,7vw,96px) 32px}
.games-hero h1{font-size:clamp(40px,6vw,78px);max-width:14ch}
.games-hero p{color:var(--muted);max-width:56ch;margin-top:20px;font-size:17px}
.gfilters{display:flex;flex-wrap:wrap;gap:6px;margin-top:32px}
.gfilters .chip{width:auto;border:1px solid var(--line);border-radius:var(--r);padding:7px 12px;font-size:14px}
.gfilters .chip[aria-pressed="true"]{border-color:var(--brand)}
.game{display:grid;grid-template-columns:4fr 8fr;gap:clamp(20px,4vw,64px);padding-block:40px;border-top:1px solid var(--line-strong)}
.game h2{font-size:clamp(28px,3.4vw,42px);margin-top:10px}
.game .pitch{color:var(--muted);margin-top:14px;max-width:38ch}
.g-pack{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;border:1px solid var(--line-strong);border-radius:var(--r);padding:16px 18px;margin-bottom:8px}
.g-pack b{font:400 22px/1.1 var(--f-display)}
.g-pack .mono{font-size:14px}
.g-pack .meta{color:var(--muted);font-size:13px}
.game .track{grid-template-columns:40px minmax(0,2fr) minmax(0,1fr) 64px 96px}
@media (max-width:820px){.game{grid-template-columns:1fr}}
@media (max-width:720px){.game .track{grid-template-columns:40px minmax(0,1fr) auto}}

/* éditeur */
.ed-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;padding-block:clamp(36px,5vw,64px) 24px}
.ed-head h1{font-size:clamp(36px,5vw,60px)}
.ed-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-strong);overflow-x:auto}
.ed-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:12px 14px;cursor:pointer;color:var(--muted);font-size:15px;white-space:nowrap;transition:color var(--t),border-color var(--t)}
.ed-tabs button:hover{color:var(--ink)}
.ed-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.ed-tabs .n{font:400 12px/1 var(--f-mono);color:var(--muted);margin-left:6px}
.md{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);padding-block:28px 80px;align-items:start}
.md-list{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);position:sticky;top:calc(env(safe-area-inset-top,0px) + 130px)}
.md-tools{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.md-tools input,.md-tools select{flex:1;min-width:120px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r);padding:8px 10px}
.md-items{list-style:none;margin:0;padding:0;max-height:62vh;overflow:auto}
.md-items li button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);border-left:2px solid transparent;padding:10px 14px;cursor:pointer;transition:background var(--t)}
.md-items li button:hover{background:var(--paper)}
.md-items li button[aria-current="true"]{background:var(--paper);border-left-color:var(--brand)}
.md-items .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-items .sub{grid-column:1;font-size:12px;color:var(--muted)}
.md-items .rt{grid-row:1/3;grid-column:2;align-self:center;text-align:right;font:400 12px/1.5 var(--f-mono);color:var(--muted)}
.md-items .rt b{display:block;color:var(--ink);font-weight:500;font-size:13px}
.md-detail{min-width:0}
.md-detail h2{font-size:32px}
.d-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.d-acts{display:flex;gap:8px;flex-wrap:wrap}
.d-sec{padding-block:20px;border-bottom:1px solid var(--line)}
.d-sec>.label{display:block;margin-bottom:4px}
.check{display:flex;gap:10px;align-items:center;cursor:pointer;font-size:15px;margin-top:14px}
.check input{width:16px;height:16px;accent-color:var(--brand)}
.picks{list-style:none;margin:10px 0 0;padding:0;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.picks li label{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px}
.picks li:last-child label{border-bottom:0}
.picks li label:hover{background:var(--surface)}
.picks input{accent-color:var(--brand);width:16px;height:16px}
.picks .mono{font-size:12px;color:var(--muted)}
.sumline{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;font-size:14px}
.sumline b{font-family:var(--f-mono);font-weight:500}
.warn{color:var(--danger)}
.pv{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.pv-state{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.pv-wave{height:46px;width:100%;display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.tbl-wrap{overflow-x:auto}
table.st{width:100%;border-collapse:collapse;font-size:14px}
table.st th{text-align:left;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 8px;border-bottom:1px solid var(--line-strong)}
table.st td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.st input{width:100%;min-width:90px;background:transparent;border:1px solid transparent;border-radius:var(--r);padding:7px 8px;transition:border-color var(--t)}
table.st input:hover{border-color:var(--line-strong)}
table.st input:focus{border-color:var(--ink);background:var(--surface);outline:none}
table.st .uses{font:400 12px/1 var(--f-mono);color:var(--muted);white-space:nowrap}
.ib{width:30px;height:30px;border:1px solid var(--line);background:transparent;border-radius:var(--r);cursor:pointer;transition:border-color var(--t),background var(--t)}
.ib:hover:not(:disabled){border-color:var(--ink)}
.ib:disabled{opacity:.35;cursor:not-allowed}
.ib.del:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}
.st-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,56px);padding-block:28px 80px}
.st-grid h2{font-size:28px;margin-bottom:6px}
.st-grid .hint{color:var(--muted);font-size:14px;margin-bottom:14px}
@media (max-width:900px){.md,.st-grid{grid-template-columns:1fr}.md-list{position:static}.md-items{max-height:40vh}}
textarea.json{font:400 12px/1.5 var(--f-mono);min-height:220px}

footer{border-top:1px solid var(--line);padding-block:32px;color:var(--muted);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* panier */
.drawer{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background:color-mix(in srgb,var(--ink) 35%,transparent)}
.drawer-in{width:min(440px,100%);height:100%;background:var(--paper);border-left:1px solid var(--line-strong);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:28px}
.x{background:transparent;border:1px solid var(--line-strong);border-radius:var(--r);width:34px;height:34px;cursor:pointer;font-size:18px;transition:border-color var(--t)}
.x:hover{border-color:var(--ink)}
.c-items{list-style:none;margin:0;padding:0 20px;overflow:auto;flex:1}
.c-items li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.c-items li small{display:block;color:var(--muted);font-size:12px}
.c-items .rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.c-items .rm:hover{color:var(--ink)}
.c-foot{padding:20px;border-top:1px solid var(--line-strong);display:flex;flex-direction:column;gap:12px}
.c-total{display:flex;justify-content:space-between;align-items:baseline}
.c-total b{font:400 32px/1 var(--f-display)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- ajouts version serveur ---- */
html{scroll-behavior:auto}
.pack.feat.span2{grid-row:span 2}
.pack.feat.span1{grid-row:span 1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
footer .legal-links{display:flex;flex-wrap:wrap;gap:8px 20px}
footer .legal-links a{color:var(--muted);text-decoration:none;transition:color var(--t)}
footer .legal-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
footer .wrap{flex-direction:column;align-items:flex-start;gap:16px}
footer .foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;width:100%}
.c-form{display:flex;flex-direction:column;gap:2px}
.c-form .field{margin-top:10px}
.c-form .check{font-size:13px;align-items:flex-start;margin-top:12px;line-height:1.45}
.c-form .check input{margin-top:2px;flex:none}
.c-form .check a{color:inherit}
.privacy-note{font-size:13px;color:var(--muted);margin-top:4px}
.privacy-note a{color:inherit}
.loading{padding:48px 0;color:var(--muted)}

/* pages légales */
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,5vw,72px);padding-block:clamp(40px,6vw,80px) 96px;align-items:start}
.legal nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);display:flex;flex-direction:column;gap:2px}
.legal nav a{padding:7px 10px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:15px;transition:color var(--t),border-color var(--t)}
.legal nav a:hover{color:var(--ink)}
.legal nav a[aria-current="page"]{color:var(--ink);border-left-color:var(--brand);background:var(--surface)}
.legal article{max-width:68ch}
.legal h1{font-size:clamp(34px,4.6vw,54px);margin-bottom:12px}
.legal h2{font-size:26px;margin:44px 0 12px}
.legal h3{font-family:var(--f-body);font-weight:600;font-size:16px;margin:24px 0 8px;letter-spacing:0}
.legal p,.legal li{color:var(--ink);margin-bottom:10px}
.legal ul{padding-left:20px}
.legal .upd{color:var(--muted);font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.legal dl{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:8px 20px;margin:12px 0;border-top:1px solid var(--line);padding-top:12px}
.legal dt{color:var(--muted);font-size:14px}
.legal dd{margin:0}
.legal table{border-collapse:collapse;width:100%;font-size:14px;margin:12px 0}
.legal th,.legal td{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.legal th{font:500 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.legal .box{border:1px solid var(--line-strong);padding:16px 18px;border-radius:var(--r);background:var(--surface);margin:16px 0}
mark.todo{background:var(--gold);color:var(--gold-ink);padding:0 4px;border-radius:var(--r)}
@media (max-width:820px){.legal{grid-template-columns:1fr}.legal nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}.legal nav a{border:1px solid var(--line);border-radius:var(--r)}.legal dl{grid-template-columns:1fr}}

/* admin */
.login{max-width:420px;margin:12vh auto 0;padding-inline:16px}
.login h1{font-size:44px;margin:12px 0 24px}
.ed-top{display:flex;gap:12px;align-items:center}
.inbox{list-style:none;margin:0;padding:0}
.inbox>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.inbox .ib-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline}
.inbox .ib-head b{font:400 22px/1.1 var(--f-display)}
.inbox .ib-meta{font-size:13px;color:var(--muted)}
.inbox .ib-body{grid-column:1/-1;font-size:14px;white-space:pre-wrap;max-width:80ch}
.inbox .ib-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.inbox select{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:6px 8px}
.inbox .ib-lines{grid-column:1/-1;font:400 13px/1.6 var(--f-mono);color:var(--muted)}
.status{font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 6px;border:1px solid var(--line-strong);border-radius:var(--r)}
.status.s-nouveau{border-color:var(--gold);color:var(--gold)}
.status.s-payé,.status.s-livré{border-color:var(--brand);color:var(--brand)}
.inbox-filters{display:flex;gap:6px;flex-wrap:wrap;padding-block:24px 8px}
.inbox-filters .chip{width:auto;border:1px solid var(--line);border-radius:var(--r);padding:7px 12px;font-size:14px}
.inbox-filters .chip[aria-pressed="true"]{border-color:var(--brand)}
@media (max-width:640px){.inbox>li{grid-template-columns:1fr}.inbox .ib-acts{justify-content:flex-start}}