/* les alias historiques pointent vers la DA commune (common/da.css, chargée avant) */
:root { --bg:var(--fond); --fg:var(--texte); --dim:var(--texte-sourd); --warm:var(--neutre); --cold:var(--froid); }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:var(--corps-travail)/1.4 var(--mono); overflow:hidden; }
#c { position:fixed; inset:0; width:100vw; height:100vh; display:block; }
#ui { position:fixed; left:0; top:0; bottom:0; width:340px; padding:14px; box-sizing:border-box; background:rgba(7,7,10,.82); overflow-y:auto; border-right:1px solid #1c1c22; }
#right { position:fixed; right:0; top:0; bottom:0; width:300px; padding:14px; box-sizing:border-box; background:rgba(7,7,10,.82); overflow-y:auto; border-left:1px solid #1c1c22; }
h1 { font-size:14px; font-weight:normal; letter-spacing:.2em; margin:0 0 10px; color:var(--dim); }
textarea { width:100%; box-sizing:border-box; background:#0f0f14; color:var(--fg); border:1px solid #26262e; padding:8px; font:inherit; resize:vertical; min-height:60px; }
button { background:#15151b; color:var(--fg); border:1px solid #2a2a33; padding:6px 10px; font:inherit; cursor:pointer; }
button:hover { border-color:#555; }
.row { display:flex; gap:8px; margin:8px 0; align-items:center; }
#tokens { margin:10px 0; line-height:1.9; word-break:break-all; }
#tokens span { background:#141419; padding:1px 4px; margin:1px; border-radius:2px; color:#bdbdb5; transition:background .15s, color .15s, box-shadow .15s; }
#tokens span.cur { outline:1px solid var(--warm); }
#tokens span.lit { color:#111; }
.cand { display:flex; align-items:center; gap:8px; margin:3px 0; cursor:pointer; }
.cand .tok { width:90px; white-space:pre; color:#e8e8e0; }
.cand .bar { flex:1; height:10px; background:#141419; position:relative; }
.cand .bar i { position:absolute; left:0; top:0; bottom:0; background:#8a8a80; }
.cand .bar b { position:absolute; left:0; top:0; bottom:0; background:var(--warm); opacity:.55; }
.cand:hover .tok { color:var(--warm); }
.fader { margin:10px 0; padding:8px; background:#0e0e13; border:1px solid #1c1c22; }
.fader .lab { color:#bdbdb5; font-size:12px; min-height:2.8em; }
.fader .meta { color:var(--dim); font-size:11px; }
.fader input[type=range] { width:100%; }
.ent { margin:6px 0; }
.ent .bar { height:6px; background:#141419; position:relative; margin-top:2px; }
.ent .bar i { position:absolute; left:0; top:0; bottom:0; background:#8a8a80; }
.ent .bar b { position:absolute; left:0; top:0; bottom:0; background:var(--warm); opacity:.7; }
.ent .bar em { position:absolute; top:-2px; bottom:-2px; width:2px; opacity:.95; }
.cand .bar.attr { height:auto; min-height:10px; }
.cand .bar .stripe { position:relative; height:4px; margin-top:1px; }
.cand .bar .stripe s { position:absolute; left:0; top:0; bottom:0; text-decoration:none; opacity:.9; }
.cand .bar u { position:absolute; top:-2px; bottom:-2px; width:2px; background:#fff; }
#stats { color:var(--dim); font-size:11px; margin-top:10px; white-space:pre-line; }
label.small { color:var(--dim); font-size:11px; }
.legend i { display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:50%; }
input.lay { width:44px; background:#0f0f14; color:var(--fg); border:1px solid #26262e; }
.fader select, .fader input[type=text], .fader textarea, .fader input[type=number] { background:#0f0f14; color:var(--fg); border:1px solid #26262e; font:inherit; font-size:11px; }
.fader input[type=text], .fader textarea { width:100%; box-sizing:border-box; margin:3px 0; }
.fader textarea { min-height:40px; resize:vertical; }
.fader .src { margin-top:6px; border-top:1px dashed #1f1f26; padding-top:5px; }
.fader .res { cursor:pointer; padding:2px 4px; font-size:11px; color:#bdbdb5; }
.fader .res:hover { color:var(--warm); }
.fader .res small { color:var(--dim); }
.fader button { padding:2px 7px; font-size:11px; }
#badge { position:fixed; bottom:6vh; left:340px; right:300px; display:flex; justify-content:center; pointer-events:none; }
#badge[hidden] { display:none; }
/* modes d'affichage : travail (panneaux), plateau (volume plein cadre + HUD), nu (volume seul) */
body:not([data-mode="travail"]) #ui, body:not([data-mode="travail"]) #right { display:none; }
body:not([data-mode="travail"]) #badge { left:0; right:0; }
#showChrome { position:fixed; top:10px; left:10px; z-index:5; opacity:.25; display:none; }
#showChrome:hover { opacity:1; }
body:not([data-mode="travail"]) #showChrome { display:block; }
.hideBtn { float:right; padding:2px 7px; font-size:11px; color:var(--dim); }
#tip { position:fixed; z-index:6; pointer-events:none; max-width:320px; padding:6px 9px; background:rgba(10,10,14,.9); border:1px solid #2a2a33; color:#e8e8e0; font-size:12px; display:none; }
#tip small { color:var(--dim); display:block; margin-top:2px; }
#labels { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
#labels div { position:absolute; transform:translate(8px,-50%); max-width:220px; font-size:11px; line-height:1.25; color:#d8d8d0; text-shadow:0 0 6px #000, 0 0 2px #000; white-space:normal; }
#labels div.lit { color:#ffb56b; }
#labels div.region { font:300 clamp(10px, 1vw, 15px)/1.1 "Iowan Old Style", Palatino, Georgia, serif; color:rgba(236,233,220,.75); letter-spacing:.05em; transform:translate(-50%,-50%); text-align:center; max-width:150px; }
#badge div { display:flex; align-items:center; justify-content:center; min-width:3.2em; padding:0 .7em; height:1.9em; border-radius:999px; box-sizing:border-box; background:rgba(10,10,14,.72); border:1px solid rgba(216,216,208,.18); backdrop-filter:blur(6px);
             font:300 var(--corps-badge)/1.1 var(--serif); color:var(--texte-clair); letter-spacing:.04em;
             box-shadow:0 10px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03); transition:opacity .25s; }
#badge div span#badgeText { display:block; line-height:1; text-align:center; transform:translateY(-.04em); }
#badge div .sp { color:#7a7770; font-weight:200; }

/* --------------------------------------------------- gabarit des lignes de réglage */
.row .small.w110 { width:110px; flex:none; }
.row .small.w120 { width:120px; flex:none; }
.row input[type=range] { flex:1; min-width:0; }
select, input[type=number] { background:#0f0f14; color:var(--fg); border:1px solid #26262e; font:inherit; }
#ui select, #stage select { font-size:12px; }
.legend { margin-top:12px; color:var(--dim); font-size:11px; }

/* --------------------------------------------------- groupes repliables */
details.grp { margin:6px 0; border:1px solid #1c1c22; background:#0b0b10; }
details.grp > summary { list-style:none; cursor:pointer; padding:6px 9px; color:var(--dim); font-size:11px; letter-spacing:.12em; text-transform:uppercase; user-select:none; }
details.grp > summary::-webkit-details-marker { display:none; }
details.grp > summary:hover { color:var(--fg); }
details.grp > summary::before { content:"▸ "; }
details.grp[open] > summary::before { content:"▾ "; }
details.grp > *:not(summary) { padding:0 9px; }
details.grp > *:last-child { padding-bottom:8px; }
/* point allumé : un groupe fermé ne cache jamais un effet actif */
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-left:6px; background:transparent; vertical-align:middle; }
.dot.on { background:var(--warm); box-shadow:0 0 6px var(--warm); }
.keys { color:var(--dim); font-size:11px; line-height:1.7; }
.keys b { color:#bdbdb5; font-weight:normal; display:inline-block; min-width:4.5em; }

/* --------------------------------------------------- tiroir de mise en scène */
#stage { position:fixed; left:340px; right:300px; bottom:0; z-index:4; display:flex; flex-direction:column; align-items:stretch; pointer-events:none; }
#stageTab { pointer-events:auto; align-self:center; padding:3px 14px; font-size:11px; letter-spacing:.12em; color:var(--dim); background:rgba(7,7,10,.9); border:1px solid #1c1c22; border-bottom:none; }
#stageTab:hover { color:var(--fg); }
#stageBody { pointer-events:auto; display:none; flex-wrap:wrap; gap:0 14px; max-height:42vh; overflow:auto; padding:10px 14px; background:rgba(7,7,10,.92); border-top:1px solid #1c1c22; }
#stage.open #stageBody { display:flex; align-items:flex-start; }
#stageTab .arw { display:inline-block; margin-right:6px; }
#stage.open #stageTab .arw { transform:rotate(180deg); }
#stageBody > details.grp { flex:1 1 240px; min-width:240px; margin:4px 0; }
body:not([data-mode="travail"]) #stage { display:none; }
/* colonnes étroites : les lignes se replient plutôt que d'écraser curseurs et libellés */
#stage .row { flex-wrap:wrap; }
#stage .row input[type=range] { flex:1 1 130px; min-width:120px; }
#stage .row label.small:not(.w120) { flex:1 1 100%; }
/* --------------------------------------------------- frise de la partition (régime p) */
#score { position:fixed; left:340px; right:300px; bottom:0; z-index:5; display:none; flex-direction:column; background:rgba(7,7,10,.94); border-top:1px solid #1c1c22; padding:6px 12px 8px; max-height:38vh; overflow:auto; }
body.score #score { display:flex; }
body.score #stage { display:none; }
body:not([data-mode="travail"]) #score { left:0; right:0; }

/* --------------------------------------------------- props : registre traits (jamais des points), provenance auteur */
#props { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
#props svg.flux { position:absolute; inset:0; width:100%; height:100%; }
#props svg.flux line { stroke-width:var(--trait); stroke-linecap:round; }
#props .prop { position:absolute; white-space:nowrap; transition:opacity .3s; }
#props .prop.card { padding:.25em .6em; border:var(--trait) solid; border-radius:4px; background:var(--voile);
                    font:300 var(--corps-carte)/1.15 var(--serif); letter-spacing:.03em; }
#props .prop.card .sp { color:#7a7770; }
#props .prop.label { transform:translate(0,-50%); font:300 var(--corps-etiquette)/1.1 var(--serif); letter-spacing:.08em; text-transform:uppercase; }

/* --------------------------------------------------- HUD (mode plateau) : afficheur dérivé, taille vidéo, sans champ */
#hud { position:fixed; inset:0; pointer-events:none; display:none; font-size:var(--corps-plateau); line-height:1.25; color:var(--texte-clair); }
body[data-mode="plateau"] #hud { display:block; }
#hud .hk { color:#8d8b82; font-size:.6em; letter-spacing:.12em; text-transform:uppercase; }
#hud .hbar { height:.28em; background:rgba(216,216,208,.12); position:relative; margin:.2em 0 .5em; }
#hud .hbar i, #hud .hbar b { position:absolute; left:0; top:0; bottom:0; background:#cfcfc6; }
#hud .hbar b { background:var(--warm); }
#hud .hfaders { position:absolute; left:3vw; top:6vh; width:26vw; }
#hud .hfader { margin-bottom:1.2em; border-left:.3em solid var(--c); padding-left:.6em; transition:opacity .4s, transform .4s; }
#hud .hfader .hlab { font-size:.72em; color:#cfcdc2; }
#hud .hfader .halpha { font:300 1.9em/1.1 var(--serif); color:var(--c); letter-spacing:.02em; }
#hud .hfader .hbar i { background:var(--c); }
#hud .hent { position:absolute; right:3vw; top:6vh; width:24vw; }
#hud .hent .hv { float:right; font-size:.8em; }
#hud .hcands { position:absolute; right:3vw; top:26vh; width:24vw; }
#hud .hcand { display:flex; align-items:center; gap:.5em; margin:.18em 0; font-size:.72em; }
#hud .hcand .htok { width:5em; white-space:pre; text-align:right; }
#hud .hcand .htok.novel { color:var(--warm); }
#hud .hcand .hbars { flex:1; position:relative; height:1.1em; }
#hud .hcand .hbars i, #hud .hcand .hbars b { position:absolute; left:0; top:0; height:.45em; background:#8a8a80; }
#hud .hcand .hbars b { top:.55em; background:var(--warm); }
#hud .hcand .hbars s { position:absolute; left:0; top:.55em; height:.45em; opacity:.9; text-decoration:none; }
#hud .hcand .hp { width:3em; text-align:right; color:#8d8b82; font-size:.8em; }
#hud .hjeton { position:absolute; left:3vw; bottom:6vh; font-size:.9em; }
#hud .hjeton .sp { color:#7a7770; }
#hud .dim { opacity:.25; }
#hud .focus { opacity:1; }
#hud .hfader.focus { transform:scale(1.12); transform-origin:left center; }
#hud[data-attention="points"] > * { opacity:.15; }
#score .bar { display:flex; gap:8px; align-items:center; }
#score .bar input[type=text] { width:150px; background:#0f0f14; color:var(--fg); border:1px solid #26262e; font:inherit; padding:3px 6px; }
#score .bar input[type=range] { flex:1; min-width:120px; }
#score .bar select.sadd { max-width:160px; background:#0f0f14; color:var(--fg); border:1px solid #26262e; font:inherit; padding:2px 4px; }
#score .stime { color:var(--dim); font-size:11px; white-space:nowrap; min-width:8em; }
#score .tracks { margin-top:6px; }
#score .track { display:flex; align-items:center; height:12px; font-size:10px; color:var(--dim); }
#score .track .lab { width:150px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#score .track .line { position:relative; flex:1; height:1px; background:#1c1c22; margin-right:50px; }
#score .track .line i, #score .track .line b { position:absolute; top:-3px; width:7px; height:7px; margin-left:-3px; border-radius:50%; background:#8a8a80; }
#score .track .line b { background:var(--warm); border-radius:1px; }
#score .track .line u { position:absolute; top:-6px; width:1px; height:13px; background:var(--warm); }
#score .track.cursor .line { background:transparent; }

/* le sélecteur de source porte de longs libellés : il doit rester dans le panneau */
#right select, .fader select, .fader input[type=range] { max-width:100%; box-sizing:border-box; }
.fader .srcsel { width:100%; }

/* rangée : le jeton écrit sous son cube (HTML projeté, comme les étiquettes) */
#labels div.rowtok { transform:translate(-50%,0); text-align:center; max-width:120px; font-size:13px; color:rgba(216,216,208,.5); letter-spacing:.02em; }
#labels div.rowtok.cur { color:#f0ead8; text-shadow:0 0 10px rgba(255,200,120,.5), 0 0 2px #000; }
#labels div.rowtok .sp { opacity:.4; }