@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 — bandeau d'ouverture bleu nuit pleine largeur, catalogue en "setlist", packs de hauteurs inégales, section compositeur en 5/7. */
:root{
  --paper:#E8EAEF; --surface:#F2F3F6; --ink:#111A2C; --muted:#434D62;
  --brand:#16336E; --brand-ink:#F2F3F6; --gold:#B57B00; --gold-ink:#111A2C; --danger:#A2341F;
  --deep:#0E1B37; --deep-ink:#ECEFF6; --deep-muted:#B4BFD6; --deep-line:rgba(236,239,246,.22); --deep-gold:#F0B83E;
  --line:rgba(17,26,44,.15); --line-strong:rgba(17,26,44,.36);
  --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:#0A1120; --surface:#111A2E; --ink:#E7EBF3; --muted:#AEB8CC;
    --brand:#8DADEB; --brand-ink:#0A1120; --gold:#EDB43A; --gold-ink:#0A1120; --danger:#EC8A72;
    --deep:#132649; --deep-ink:#ECEFF6; --deep-muted:#B9C5DE; --deep-line:rgba(236,239,246,.2); --deep-gold:#F0B83E;
    --line:rgba(231,235,243,.12); --line-strong:rgba(231,235,243,.32); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0A1120; --surface:#111A2E; --ink:#E7EBF3; --muted:#AEB8CC;
  --brand:#8DADEB; --brand-ink:#0A1120; --gold:#EDB43A; --gold-ink:#0A1120; --danger:#EC8A72;
  --deep:#132649; --deep-ink:#ECEFF6; --deep-muted:#B9C5DE; --deep-line:rgba(236,239,246,.2); --deep-gold:#F0B83E;
  --line:rgba(231,235,243,.12); --line-strong:rgba(231,235,243,.32); 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:not(.btn){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:not(.btn):hover{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.add button:not(.btn)[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}}

/* bouton clair / sombre */
.hd-acts{display:flex;gap:8px;align-items:center}
.theme-btn{width:36px;height:36px;flex:none;border:1px solid var(--line-strong);background:transparent;border-radius:var(--r);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:border-color var(--t)}
.theme-btn:hover{border-color:var(--ink)}
.theme-btn svg{width:16px;height:16px}


/* ---- lisibilité : tailles et contrastes relevés ---- */
body{font-size:17px;line-height:1.6}
.label{font-size:12px;letter-spacing:.08em}
nav.main{font-size:15px}
.btn{font-size:15px}
.btn-sm{font-size:14px}
.chip{font-size:16px}
.t-title{font-size:17px}
.t-title small{font-size:14px;line-height:1.45}
.t-tech{font-size:13px}
.tag-b{font-size:12px;padding:5px 7px}
.sec-head p,.hero .lede,.games-hero p{font-size:18px;line-height:1.6}
.p-list li{font-size:15px}
.p-list span{font-size:13px}
.note,.privacy-note{font-size:15px;line-height:1.55}
.step .hint{font-size:15px}
.opt label{font-size:15px}
.quote .row{font-size:15px}
.field>label{font-size:14px}
.lic p{font-size:16px}
.md-items .sub{font-size:13px}
footer{font-size:14px}

/* ---- bandeau d'ouverture bleu nuit ---- */
.hero-band{background:var(--deep);color:var(--deep-ink)}
.hero-band .hero{padding-block:clamp(56px,8vw,112px) clamp(56px,7vw,96px)}
.hero-band .label{color:var(--deep-muted)}
.hero-band h1 em{color:var(--deep-gold)}
.hero-band .lede{color:var(--deep-muted)}
.hero-band .lede strong{color:var(--deep-ink);font-weight:600}
.hero-band .btn{border-color:var(--deep-ink);color:var(--deep-ink)}
.hero-band .btn:hover{background:var(--deep-ink);color:var(--deep)}
.hero-band .btn-gold{background:var(--deep-gold);border-color:var(--deep-gold);color:#0E1B37}
.hero-band .btn-gold:hover{background:var(--deep-ink);border-color:var(--deep-ink);color:var(--deep)}
.hero-band .sheet{background:rgba(255,255,255,.05);border-color:var(--deep-line)}
.hero-band .sheet-head,.hero-band .sheet-foot{border-color:var(--deep-line)}
.hero-band .sheet li{border-bottom-color:var(--deep-line)}
.hero-band .sheet .time,.hero-band .sheet .cue small,.hero-band .sheet-foot{color:var(--deep-muted)}
.hero-band .sheet .tag{color:var(--deep-ink)}
.hero-band .sheet li.now .time{color:var(--deep-gold)}
.human{display:flex;align-items:center;gap:10px;margin-top:28px;font-size:15px;color:var(--deep-ink)}
.human svg{width:18px;height:18px;flex:none;color:var(--deep-gold)}
.hero-band :focus-visible{outline-color:var(--deep-gold)}

/* ---- section compositeur ---- */
.composer-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.composer-grid h2{font-size:clamp(34px,4.4vw,56px);margin-top:16px}
.c-name{font:400 26px/1.2 var(--f-display);margin-top:32px}
.c-tag{color:var(--muted);margin-top:4px}
.c-bio p{font-size:19px;line-height:1.65;max-width:60ch;margin-bottom:16px}
.c-right h3{font-size:26px;margin:40px 0 4px}
.c-steps{list-style:none;margin:0;padding:0;counter-reset:st}
.c-steps li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);counter-increment:st}
.c-steps li::before{content:counter(st);font:400 24px/1.1 var(--f-display);color:var(--brand)}
.c-steps b{display:block;font-weight:600;margin-bottom:2px}
.c-steps span{color:var(--muted)}
.c-pledge{margin-top:32px;border:1px solid var(--brand);border-radius:var(--r);padding:20px 22px;display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
.c-pledge svg{width:24px;height:24px;color:var(--brand);margin-top:2px}
.c-pledge p{font-size:17px}
.c-pledge p b{display:block;font-family:var(--f-display);font-weight:400;font-size:22px;margin-bottom:6px}
.c-tools{margin-top:24px;color:var(--muted);font-size:15px}
.c-tools .label{display:block;margin-bottom:4px}
@media (max-width:860px){.composer-grid{grid-template-columns:1fr}}
.track{grid-template-columns:40px minmax(0,2.4fr) minmax(0,1.4fr) 92px 60px 124px}
.game .track{grid-template-columns:40px minmax(0,2fr) minmax(0,1fr) 60px 124px}
.add .price{white-space:nowrap}
@media (max-width:720px){.track,.game .track{grid-template-columns:40px minmax(0,1fr) auto}}


/* ---- mise en avant du sur mesure ---- */
nav.main a.nav-cta{color:var(--ink);border:1px solid var(--line-strong);padding:5px 10px;border-radius:var(--r)}
nav.main a.nav-cta:hover{border-color:var(--ink)}
nav.main a.nav-cta[aria-current="page"]{border-color:var(--brand);color:var(--brand)}
.cm-band{background:var(--surface);border-bottom:1px solid var(--line)}
.cm-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);padding-block:clamp(48px,7vw,88px);align-items:center}
.cm-pitch h2{font-size:clamp(34px,4.4vw,54px);margin:14px 0 18px}
.cm-pitch h2 em{font-style:italic;color:var(--brand)}
.cm-pitch>p{font-size:18px;color:var(--muted);max-width:44ch}
.cm-facts{display:flex;flex-wrap:wrap;gap:12px 32px;margin:28px 0;padding:16px 0;border-block:1px solid var(--line)}
.cm-facts dt{font:500 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cm-facts dd{margin:6px 0 0;font:400 24px/1.1 var(--f-display)}
.cm-facts dd.mono{font-family:var(--f-display)}
.cm-ideas{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.cm-ideas button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line-strong);padding:20px 4px;cursor:pointer;transition:background var(--t)}
.cm-ideas button:hover{background:var(--paper)}
.cm-ideas b{display:block;font:400 24px/1.2 var(--f-display);margin-bottom:4px}
.cm-ideas small{display:block;color:var(--muted);font-size:15px;line-height:1.5}
.cm-ideas svg,.cm-row svg{width:18px;height:18px;flex:none;color:var(--brand);transition:transform var(--t)}
.cm-ideas button:hover svg,.cm-row:hover svg{transform:translateX(3px)}
.cm-flow{list-style:none;margin:-16px 0 48px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);counter-reset:fl}
.cm-flow li{padding:18px 20px 18px 0;counter-increment:fl}
.cm-flow li+li{padding-left:20px;border-left:1px solid var(--line)}
.cm-flow li::before{content:counter(fl);display:block;font:400 26px/1 var(--f-display);color:var(--gold);margin-bottom:10px}
.cm-flow b{display:block;font-weight:600}
.cm-flow span{color:var(--muted);font-size:15px}
.cm-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:32px;padding:20px 22px;border:1px solid var(--brand);border-radius:var(--r);text-decoration:none;transition:background var(--t)}
.cm-row:hover{background:var(--surface)}
.cm-row b{font-weight:600}
.cm-row-go{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:600;white-space:nowrap}
@media (max-width:900px){.cm-grid{grid-template-columns:1fr}.cm-flow{grid-template-columns:1fr 1fr}.cm-flow li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:520px){.cm-flow{grid-template-columns:1fr}.cm-flow li,.cm-flow li+li{padding:14px 0;border-left:0;border-bottom:1px solid var(--line)}}
.cm-flow li::before{content:"";width:28px;height:2px;background:var(--gold);margin-bottom:14px;font:inherit}

/* ---- packs par thématique ---- */
.pfilters{margin:-16px 0 28px}
.pfilters:empty{display:none}
.p-univ{display:flex;flex-wrap:wrap;gap:6px}
.pack.feat .p-univ .tag-b{border-color:color-mix(in srgb,var(--brand-ink) 45%,transparent);color:var(--brand-ink)}
.pk-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pk-tools input,.pk-tools select{flex:1;min-width:130px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:8px 10px}
.pk-sub{margin-top:16px}
.picks .u{font:400 12px/1.2 var(--f-mono);color:var(--muted)}

/* ---- ciel du barde : constellations et étoiles ---- */
:root{--star:#111A2C;--star-o:.45;--cst-line:rgba(181,123,0,.55);--cst-dot:#B57B00}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--star:#E7EBF3;--star-o:1;--cst-line:rgba(237,180,58,.5);--cst-dot:#F3D27A}}
:root[data-theme="dark"]{--star:#E7EBF3;--star-o:1;--cst-line:rgba(237,180,58,.5);--cst-dot:#F3D27A}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--star);opacity:calc(var(--o) * var(--star-o));animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:calc(var(--o) * var(--star-o) * .35)}50%{opacity:calc(var(--o) * var(--star-o))}}
.sky{position:absolute;top:0;left:0;width:100%;z-index:1;pointer-events:none;overflow:hidden;display:none}
@media (min-width:1400px){.sky{display:block}}
.sky-rail{position:absolute;top:0;bottom:0;width:calc((100% - 1240px) / 2)}
.sky-rail.l{left:0}.sky-rail.r{right:0}
.cst-wrap{position:absolute;left:50%;transform:translateX(-50%);width:min(120px,80%)}
.cst{display:block;width:100%;overflow:visible}
.cst line{stroke:var(--cst-line);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease var(--d)}
.cst circle{fill:var(--cst-dot);opacity:.25;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .4s ease var(--d),transform .4s ease var(--d)}
.cst text{fill:var(--muted);font:500 9px var(--f-mono);letter-spacing:.14em;text-anchor:middle;text-transform:uppercase;opacity:0;transition:opacity .5s ease var(--d)}
.cst-wrap.on .cst line{stroke-dashoffset:0}
.cst-wrap.on .cst circle{opacity:1;transform:scale(1)}
.cst-wrap.on .cst text{opacity:1}
/* en sortant de l'écran, la constellation se défait d'un coup, sans délai */
.cst-wrap:not(.on) .cst line,.cst-wrap:not(.on) .cst circle,.cst-wrap:not(.on) .cst text{transition-delay:0s;transition-duration:.3s}
.hero-band{position:relative;overflow:hidden}
.hero-band .hero{position:relative;z-index:1}
.hero-sky{position:absolute;inset:0;pointer-events:none}
.hero-sky .star{background:#E7EBF3;--star-o:.8}
.sky-still .star{animation:none}
.sky-still .cst line{stroke-dashoffset:0!important;transition:none!important}
.sky-still .cst circle{opacity:1!important;transform:none!important;transition:none!important}
.sky-still .cst text{opacity:1!important}
.gfilters .chip{gap:8px}

/* ---- langues ---- */
.lang-sw{display:flex;border:1px solid var(--line-strong);border-radius:var(--r);height:36px}
.lang-sw a{display:grid;place-items:center;padding:0 8px;font:500 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--muted);text-decoration:none;transition:color var(--t),background var(--t)}
.lang-sw a+a{border-left:1px solid var(--line-strong)}
.lang-sw a:hover{color:var(--ink)}
.lang-sw a[aria-current="true"]{background:var(--ink);color:var(--paper)}
nav.main a.nav-lib{color:var(--ink)}
.tr-note{margin-bottom:28px}
@media (max-width:520px){.hd-acts{gap:6px}.lang-sw a{padding:0 6px}}

/* ---- espace client ---- */
.libpage .loading{padding-block:64px}
.lib-hero{padding-block:clamp(48px,7vw,88px) clamp(40px,6vw,64px)}
.lib-hero h1{font-size:clamp(38px,5.6vw,68px);margin-top:14px;max-width:18ch}
.lib-hero .lede{color:var(--deep-muted);margin-top:20px;max-width:58ch;font-size:18px}
.lib-hero-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
.lib-meta{color:var(--deep-muted);margin-top:14px;font-size:14px}
.gate-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);padding-block:56px 96px;align-items:start}
.gate-grid h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:12px}
.gate-grid form{max-width:440px}
.gate-browse{color:var(--muted);font-size:17px}
.gate-lost{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);max-width:440px}
.gate-lost h3{font-size:22px;margin-bottom:8px}
.lib-acts{display:flex;flex-wrap:wrap;gap:8px}
#pwWrap:empty{display:none}
.pw-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:24px}
.pw-box{margin-top:24px;padding:24px;border:1px solid var(--line-strong);background:var(--surface)}
.pw-box h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:14px}
.pw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pw-go{display:flex;gap:8px;margin-top:14px}
#pwMsg{margin-top:12px}
@media (max-width:820px){.pw-grid{grid-template-columns:1fr}}
@media (max-width:820px){.gate-grid{grid-template-columns:1fr}}
.board-sec{border-top:0}
.board-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 32px;margin-bottom:12px}
.board-head h2{font-size:clamp(32px,4vw,48px);margin-bottom:8px}
.board-head .note{max-width:56ch}
.board-ctl{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.ctl{display:flex;flex-direction:column;gap:6px}
.ctl input[type=range]{width:140px;accent-color:var(--gold)}
.ctl select{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:7px 10px}
.kbd-hint{margin-bottom:24px}
@media (hover:none){.kbd-hint{display:none}}
.scene{padding-block:24px;border-top:1px solid var(--line-strong)}
.scene-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.scene-head h3{font-size:clamp(24px,2.6vw,32px)}
.pads{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.pad{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:132px;padding:16px 16px 18px;text-align:left;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer;overflow:hidden;transition:border-color var(--t),background var(--t)}
.pad:hover:not([disabled]){border-color:var(--ink)}
.pad[disabled]{opacity:.5;cursor:not-allowed}
.pad kbd{font:500 11px/1 var(--f-mono);color:var(--muted);border:1px solid var(--line-strong);border-radius:var(--r);padding:3px 5px;margin-bottom:6px}
.pad-t{font:400 21px/1.15 var(--f-display);color:var(--ink);padding-right:28px}
.pad-s{font-size:13px;color:var(--muted)}
.pad-d{margin-top:auto;font-size:13px;color:var(--muted)}
.pad-p{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
.pad .eq{position:absolute;top:16px;right:14px;opacity:0}
.pad.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--surface))}
.pad.on .eq{opacity:1}
.pad:not(.on) .pad-p{transform:scaleX(0)!important}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{display:block;width:3px;background:var(--gold);border-radius:1px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(1){height:40%;animation-delay:-.2s}.eq i:nth-child(2){height:90%;animation-delay:-.5s}.eq i:nth-child(3){height:60%;animation-delay:-.1s}.eq i:nth-child(4){height:75%;animation-delay:-.7s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.eq i{animation:none}}
.deck{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)}
.deck .wrap{display:flex;align-items:center;gap:16px;padding-block:10px}
.deck-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.deck-txt .label{color:color-mix(in srgb,var(--paper) 65%,transparent)}
.deck-txt b{font:400 20px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-time{font-size:13px;color:color-mix(in srgb,var(--paper) 70%,transparent)}
.deck .btn{border-color:var(--paper);color:var(--paper)}
.deck .btn:hover{background:var(--paper);color:var(--ink)}
body.deck-on{padding-bottom:72px}
.lib-row{grid-template-columns:40px minmax(0,2fr) minmax(0,1.2fr) 60px auto}
.lib-row .dl{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:720px){.lib-row{grid-template-columns:40px minmax(0,1fr)}.lib-row .t-tags,.lib-row .t-dur{display:none}.lib-row .dl{grid-column:2;justify-content:flex-start}}
.ord-tbl td{padding:10px 8px}
/* édition du plateau */
.be-head{margin-bottom:16px}
.be-head h3{font-size:28px;margin-bottom:6px}
.be-scene{border:1px solid var(--line-strong);border-radius:var(--r);padding:16px;margin-bottom:12px;background:var(--surface)}
.be-top{display:flex;gap:12px;align-items:flex-end;margin-bottom:8px}
.be-acts{display:flex;gap:6px}
.be-g{margin:14px 0 6px}
.be-picks{display:flex;flex-wrap:wrap;gap:6px}
.be-pick{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;font-size:14px;cursor:pointer;background:var(--paper)}
.be-pick input{accent-color:var(--brand)}
.be-pick:has(input:checked){border-color:var(--brand)}
.be-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.be-foot .sp{flex:1}

/* ---- admin : couleurs des graphiques (validées : bande de luminosité, chroma, contraste) ---- */
:root{--chart:#2C5BB8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--chart:#5B8DEF}}
:root[data-theme="dark"]{--chart:#5B8DEF}
.linkbtn{background:none;border:0;padding:0;color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;font-size:13px;text-transform:none;letter-spacing:0}
.status.s-new{border-color:var(--gold);color:var(--gold)}
.status.s-wait{border-color:var(--line-strong);color:var(--muted)}
.status.s-go{border-color:var(--brand);color:var(--brand)}
.status.s-ok{border-color:var(--brand);background:var(--brand);color:var(--brand-ink)}
.status.s-idle{border-color:var(--line);color:var(--muted)}
.status.s-late{border-color:var(--danger);color:var(--danger)}
.status.s-off{border-color:var(--line);color:var(--muted);text-decoration:line-through}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--r);margin-block:28px 8px}
.kpis.k6{grid-template-columns:repeat(6,minmax(0,1fr))}
.kpi{background:var(--paper);padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi b{font:400 30px/1.05 var(--f-display);font-variant-numeric:tabular-nums}
.kpi small{font-size:13px;color:var(--muted)}
.kpi .dl.up{color:var(--brand)}
.kpi .dl.down{color:var(--danger)}
.kpi .dl span{color:var(--muted)}
@media (max-width:1100px){.kpis.k6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.kpis,.kpis.k6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ord-tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding-block:12px}
.ord-tools .inbox-filters{padding:0}
.ord-tools input[type=search]{min-width:240px;flex:0 1 320px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:8px 10px}
.ord-list{border-top:1px solid var(--line-strong);padding-bottom:80px}
.ord{border-bottom:1px solid var(--line)}
.ord-row{width:100%;display:grid;grid-template-columns:96px minmax(0,1.3fr) minmax(0,2fr) 120px 150px 24px;gap:16px;align-items:center;background:transparent;border:0;padding:14px 4px;text-align:left;cursor:pointer;transition:background var(--t)}
.ord-row:hover,.ord-row[aria-expanded="true"]{background:var(--surface)}
.ord-row small{display:block;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-row b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o-date{font-size:13px;color:var(--muted)}
.o-amt{text-align:right;font-size:15px}
.o-chev{font:400 20px/1 var(--f-mono);color:var(--muted);text-align:center}
@media (max-width:860px){.ord-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.o-date,.o-chev{display:none}.o-what{grid-column:1/-1;grid-row:2}.o-amt{grid-row:1;grid-column:2}.o-st{grid-row:3}}
.o-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);padding:8px 4px 28px}
.o-detail h4{font:500 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
.o-col>h4:first-child{margin-top:8px}
@media (max-width:860px){.o-detail{grid-template-columns:1fr}}
.o-items{list-style:none;margin:0 0 8px;padding:0}
.o-items li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:15px}
.o-items li.tot{border-bottom:0;font-weight:600}
.o-brief{white-space:pre-wrap;background:var(--surface);border-left:2px solid var(--line-strong);padding:10px 12px;font-size:15px}
.o-hist{list-style:none;margin:0;padding:0}
.o-hist li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.o-hist li .mono{font-size:12px;color:var(--muted);min-width:110px}
.o-steps{display:flex;flex-wrap:wrap;gap:6px}
.o-step{border:1px solid var(--line-strong);background:transparent;border-radius:var(--r);padding:7px 10px;font-size:14px;cursor:pointer;color:var(--muted);transition:border-color var(--t),background var(--t),color var(--t)}
.o-step:hover{border-color:var(--ink);color:var(--ink)}
.o-step.past{color:var(--ink)}
.o-step.cur{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.o-btns{display:flex;flex-wrap:wrap;gap:8px}
.o-files{list-style:none;margin:0 0 10px;padding:0}
.o-files li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.o-files small{display:block;color:var(--muted);font-size:12px}
.o-files audio{height:32px;max-width:220px}
.o-up{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.o-up input:not([type=file]){flex:1;min-width:180px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:7px 10px}
.o-prog{display:flex;align-items:center;gap:10px;margin-top:8px}
.o-prog i{flex:1;height:4px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s;border-radius:2px;box-shadow:inset 0 0 0 100vmax var(--gold)}
.o-prog span{font-size:12px;color:var(--muted);min-width:40px}
/* traductions */
.tr-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;padding-block:28px 8px}
.tr-head h2{font-size:30px;margin-bottom:6px}
.tr-head .hint{max-width:62ch;color:var(--muted);font-size:15px}
.tr-status{display:flex;flex-direction:column;gap:8px;max-width:420px;font-size:15px}
.tr-list{padding-bottom:80px;border-top:1px solid var(--line-strong)}
.tr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.tr-fr p{font-size:15px;margin-top:6px}
.tr-l .label{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tr-l textarea{width:100%;margin-top:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:7px 9px;font-size:15px;resize:vertical;min-height:38px}
@media (max-width:900px){.tr-row{grid-template-columns:1fr}}
/* statistiques */
.stats{padding-bottom:80px}
.st-card{border:1px solid var(--line-strong);border-radius:var(--r);padding:18px;background:var(--paper);min-width:0}
.st-wide{margin-top:16px}
.st-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px}
.st-h h3{font-size:22px}
.st-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:860px){.st-grid2{grid-template-columns:1fr}}
.chart{position:relative;overflow:hidden}
.chart svg{display:block;width:100%;height:auto}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--muted);font:500 11px var(--f-mono)}
.chart .bar{fill:var(--chart)}
.chart .hit{fill:transparent;cursor:pointer}
.chart .hit.on{fill:color-mix(in srgb,var(--chart) 10%,transparent)}
.tip{position:absolute;top:4px;transform:translateX(-50%);background:var(--ink);color:var(--paper);border-radius:var(--r);padding:8px 10px;font-size:13px;display:flex;flex-direction:column;gap:2px;pointer-events:none;white-space:nowrap}
.tip b{font-weight:600}
.hbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hbars li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 70px;gap:12px;align-items:center;font-size:14px}
.hb-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-t{height:10px;background:var(--surface);border-radius:2px;overflow:hidden}
.hb-t i{display:block;height:100%;background:var(--chart);border-radius:0 4px 4px 0}
.hb-v{text-align:right}
.hb-v small{display:block;font-size:11px;color:var(--muted)}
.inbox-filters .chip{gap:8px}
.ord-row{grid-template-columns:96px minmax(0,1.3fr) minmax(0,2fr) 150px 150px 24px}
.o-amt small{overflow:visible;white-space:nowrap}
/* déclaration URSSAF */
.ord-nav{padding-top:24px}
.seg-v{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r)}
.seg-v button{background:transparent;border:0;padding:9px 16px;font-size:15px;color:var(--muted);cursor:pointer;transition:background var(--t),color var(--t)}
.seg-v button+button{border-left:1px solid var(--line-strong)}
.seg-v button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.u-disc{margin-top:20px}
.u-next{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)) auto;gap:16px 28px;align-items:center;border:1px solid var(--gold);border-radius:var(--r);padding:18px 20px;margin-top:16px;background:color-mix(in srgb,var(--gold) 7%,var(--paper))}
.u-next h3{font-size:26px;margin:6px 0 4px;text-transform:capitalize}
.u-fig{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.u-fig b{font:400 30px/1 var(--f-display)}
.u-go{display:flex;flex-direction:column;gap:8px}
@media (max-width:1000px){.u-next{grid-template-columns:1fr 1fr}.u-next>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.u-next{grid-template-columns:1fr}}
.u-set{margin-top:20px;border:1px solid var(--line-strong);border-radius:var(--r)}
.u-set summary{cursor:pointer;padding:12px 16px;font-size:15px}
.u-set-in{padding:0 16px 16px;max-width:720px}
.u-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:28px}
.u-head h3{font-size:24px}
.u-tbl tr.u-cur td{background:color-mix(in srgb,var(--gold) 8%,transparent)}
.u-tbl td,.u-tbl th{white-space:nowrap}
.hb-t.ub{display:block;width:100%;margin-top:2px}
.warn{color:var(--danger)}