/* Façade graphe (cas d'étude « circuits »). Palette, typographie et traits viennent de common/da.css.
   Aucune transition sur ce qui bouge par image : la capture pas à pas doit rendre deux fois la même image. */
: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; }
#g { position:fixed; inset:0; width:100vw; height:100vh; display:block; }

/* --------------------------------------------------- le graphe */
#g .lien { fill:none; }
#g .noeud { cursor:pointer; }
#g .rangee { stroke:var(--gris-trait); stroke-width:var(--trait-fin); }
#g .rangeeLab { fill:var(--texte-sourd); font:10px var(--mono); }
#g .jetonLab { fill:var(--texte-clair); font:300 15px var(--serif); letter-spacing:.03em; text-anchor:middle; }
#g .jetonLab.cible { fill:var(--neutre); }
/* les étiquettes passent parfois par-dessus des nœuds : un liseré de fond les garde lisibles */
#g .noeudLab { fill:#a3a199; font:9px var(--mono); paint-order:stroke; stroke:var(--fond); stroke-width:3px; stroke-linejoin:round; }
#g .halo { fill:none; stroke:var(--neutre); stroke-width:var(--trait-fin); opacity:.75; }
/* l'anneau du nœud intervenu : même famille que le halo de la visée, plus épais (on y a écrit) */
#g .anneau { fill:none; stroke-width:var(--trait); opacity:.9; }
#g .rappel { fill:none; stroke:var(--gris-trait-clair); stroke-width:var(--trait-fin); }
body[data-mode="plateau"] #g .jetonLab, body[data-mode="nu"] #g .jetonLab { font-size:clamp(22px, 2.2vw, 52px); }
body[data-mode="plateau"] #g .rangeeLab, body[data-mode="nu"] #g .rangeeLab { font-size:15px; }
body[data-mode="plateau"] #g .noeudLab, body[data-mode="nu"] #g .noeudLab { font-size:15px; }

/* --------------------------------------------------- panneaux (mode travail) */
#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 var(--gris-trait); }
#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 var(--gris-trait); }
body:not([data-mode="travail"]) #ui, body:not([data-mode="travail"]) #right { display:none; }
#showChrome { position:fixed; left:8px; top:8px; z-index:6; display:none; }
body:not([data-mode="travail"]) #showChrome { display:block; }
body[data-mode="nu"] #showChrome, body.capture #showChrome { display:none; }
h1 { font-size:14px; font-weight:normal; letter-spacing:.2em; margin:0 0 10px; color:var(--dim); }
button { background:#15151b; color:var(--fg); border:1px solid #2a2a33; padding:6px 10px; font:inherit; cursor:pointer; }
button:hover { border-color:#555; }
input[type=text] { background:#0f0f14; color:var(--fg); border:1px solid var(--gris-trait-clair); font:inherit; padding:3px 6px; flex:1; min-width:60px; }
.row { display:flex; gap:8px; margin:8px 0; align-items:center; flex-wrap:wrap; }
.row input[type=range] { flex:1 1 120px; min-width:100px; }
.small { font-size:11px; color:var(--dim); }
.w120 { width:120px; flex:none; }
.hideBtn { float:right; font-size:10px; padding:2px 6px; }
.note { line-height:1.5; }
#meta { margin:6px 0; line-height:1.5; color:#8d8b82; }
#meta b { color:var(--texte-clair); font-weight:normal; }
#focusBox { margin:10px 0; min-height:2em; border-left:2px solid var(--neutre); padding-left:8px; }
#focusBox:empty { border-left-color:var(--gris-trait); }
h2.sub { font-size:11px; font-weight:normal; letter-spacing:.2em; color:var(--dim); margin:16px 0 4px; border-top:1px solid var(--gris-trait); padding-top:10px; }
input[type=number] { background:#0f0f14; color:var(--fg); border:1px solid var(--gris-trait-clair); font:inherit; padding:3px 6px; width:90px; }
select { background:#0f0f14; color:var(--fg); border:1px solid var(--gris-trait-clair); font:inherit; padding:3px 6px; }
#interBox { margin:8px 0; line-height:1.6; }
#interBox .inter { border-left:2px solid var(--froid); padding-left:8px; margin:6px 0; color:var(--texte-clair); }
#interBox .inter.on { border-left-color:var(--neutre); }
#interBox .inter b { font-weight:normal; color:var(--neutre); }
#interBox .inter .ex { color:var(--dim); }
#interBox .inter button { padding:0 5px; font-size:10px; margin-left:4px; }
#interBox .err { color:#d08a6a; }
.legend { margin:10px 0; font-size:11px; color:var(--dim); line-height:2; }
.legend .lg { display:inline-block; width:10px; height:10px; margin-right:4px; vertical-align:-1px; }
.legend .feat { background:var(--neutre); border-radius:50%; }
.legend .err { border:1px solid var(--texte-sourd); border-radius:50%; }
.legend .emb { background:var(--texte-clair); }
.legend .log { background:var(--texte-clair); transform:rotate(45deg); }
.legend .pos { background:var(--neutre); height:3px; }
.legend .neg { background:var(--froid); height:3px; }

/* --------------------------------------------------- survol */
#tip { position:fixed; z-index:8; display:none; max-width:320px; padding:6px 8px; background:var(--voile);
       border:1px solid var(--gris-trait-clair); color:var(--texte-clair); font-size:12px; line-height:1.4; pointer-events:none; }
#tip .k { color:var(--texte-sourd); }

/* --------------------------------------------------- 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 var(--gris-trait); padding:6px 12px 8px; max-height:38vh; overflow:auto; }
body.score #score { display:flex; }
body:not([data-mode="travail"]) #score { left:0; right:0; }
#score .bar { display:flex; gap:8px; align-items:center; }
#score .bar input[type=range] { flex:1; min-width:120px; }
#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:var(--gris-trait); 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; }

/* --------------------------------------------------- props : registre traits, 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, #props svg.flux polyline { stroke-width:var(--trait); stroke-linecap:round; fill:none; }
#props .prop { position:absolute; white-space:nowrap; }
#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) : 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 .hamorce { position:absolute; left:3vw; top:5vh; max-width:44vw; font:300 1em/1.4 var(--serif); }
#hud .hamorce .t { margin-right:.35em; }
#hud .hamorce .t .sp { color:#7a7770; }
#hud .hcible { position:absolute; right:3vw; top:5vh; width:28vw; text-align:right; }
#hud .hcible .hv { font:300 1.6em/1.1 var(--serif); color:var(--neutre); }
#hud .hfoyer { position:absolute; left:3vw; top:17vh; width:32vw; border-left:.3em solid var(--neutre); padding-left:.6em; }
#hud .hfoyer .hex { font:300 1.1em/1.25 var(--serif); color:var(--texte-clair); }
#hud .hseuil { position:absolute; right:3vw; bottom:6vh; width:22vw; text-align:right; }
#hud .hseuil .hn { font:300 .9em/1.2 var(--serif); color:var(--texte-clair); margin-top:.15em; }
#hud .hseuil .hbar { height:.28em; background:rgba(216,216,208,.12); position:relative; margin-top:.35em; }
#hud .hseuil .hbar i { position:absolute; left:0; top:0; bottom:0; background:var(--neutre); }
/* l'intervention active et les deux distributions du jeton suivant : dérivés, jamais saisis */
#hud .hinter { position:absolute; left:3vw; top:17vh; width:36vw; border-left:.3em solid var(--froid); padding-left:.6em; }
#hud .hinter.on { border-left-color:var(--neutre); }
#hud .hinter .hex { font:300 1em/1.25 var(--serif); color:var(--texte-clair); }
#hud .hinter .hv { font:300 1.5em/1.1 var(--serif); color:var(--froid); }
#hud .hinter.on .hv { color:var(--neutre); }
#hud .hdist { position:absolute; left:3vw; bottom:6vh; width:38vw; }
#hud .hdist .hcand { display:flex; align-items:center; gap:.5em; margin-top:.25em; }
#hud .hdist .htok { font:300 1em/1.1 var(--serif); min-width:5em; }
#hud .hdist .htok .sp { color:#7a7770; }
#hud .hdist .hbars { position:relative; flex:1; height:1em; }
#hud .hdist .hbars i, #hud .hdist .hbars b { position:absolute; left:0; height:.34em; }
#hud .hdist .hbars i { top:.06em; background:rgba(216,216,208,.45); }
#hud .hdist .hbars b { top:.5em; background:var(--neutre); }
#hud .hdist .hp { min-width:3.6em; text-align:right; font-size:.75em; color:var(--texte-clair); }
#hud .hdist .hent { margin-top:.5em; font-size:.75em; color:var(--texte-clair); }
#hud .dim { opacity:.25; }
#hud .focus { opacity:1; }
#hud[data-attention="noeuds"] > * { opacity:.15; }