/* Q33b (spec §40.2, §40.6) — le schéma du processus, dans le style de PROMPT_STYLE_SVG_JS_HTMX : le schéma à gauche,
   la fiche de l'objet choisi à droite. Survol ou focus : un aperçu ; clic : la sélection reste. Jetons seulement. */
/* le graphe : sa propre bande, qui défile de côté quand l'écran est plus étroit que le SVG — jamais la page */
.pm-band { overflow-x: auto; max-width: 100%; overscroll-behavior-x: contain; padding: 2px 0 6px; }
.pm-svg { display: block; width: 100%; height: auto; min-width: 940px; font-family: var(--font); }
.pm-head { fill: var(--text-bright); font-size: 13px; font-weight: 600; }
.pm-head-n { fill: var(--text-muted); font-weight: 400; font-size: 11px; }
.pm-head-sub { fill: var(--text-secondary); font-size: 10.5px; }
.pm-box .pm-bg { fill: var(--bg-elevated); stroke: var(--border-strong); stroke-width: 1; }
.pm-box .pm-bar { fill: var(--border-strong); }
.pm-box .pm-num { fill: var(--text-bright); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-box .pm-sign { font-size: 13px; font-weight: 700; }
.pm-box .pm-name { fill: var(--text-primary); font-size: 10.6px; }
.pm-box.is-done .pm-bg { fill: var(--success); fill-opacity: .1; stroke: var(--success); stroke-opacity: .7; }
.pm-box.is-done .pm-bar, .pm-box.is-done .pm-sign { fill: var(--success); }
.pm-box.is-action .pm-bg { fill: var(--danger); fill-opacity: .16; stroke: var(--danger); }
.pm-box.is-action .pm-bar, .pm-box.is-action .pm-sign { fill: var(--danger); }
.pm-box.is-pending .pm-bg { fill: var(--pending); fill-opacity: .08; stroke: var(--pending); stroke-opacity: .6; }
.pm-box.is-pending .pm-bar, .pm-box.is-pending .pm-sign { fill: var(--pending); }   /* Q28 : --pending, un orange vif dans le clair */
.pm-box.is-current .pm-bg { stroke-width: 2.5; }
.pm-box:hover .pm-bg { fill-opacity: .3; }
.pm-box:focus:not(:focus-visible) { outline: none; }
.pm-box:focus-visible .pm-bg { stroke: var(--accent); stroke-width: 3; stroke-opacity: 1; }
.pm-reserved .pm-head, .pm-reserved .pm-head-sub { fill: var(--text-muted); }
.pm-res-bg { fill: var(--bg-secondary); stroke: var(--border); stroke-dasharray: 4 3; }
.pm-res-word { fill: var(--text-muted); font-size: 10.5px; font-style: italic; }
.pm-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; list-style: none; margin: 0 0 .75rem; padding: 0;
  color: var(--text-secondary); font-size: var(--fs-sm); }
.pm-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.pm-legend strong { color: var(--text-bright); font-variant-numeric: tabular-nums; }
.pm-key { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 4px; font-size: .75rem;
  font-weight: 700; border: 1px solid var(--border-strong); background: var(--bg-elevated); }
.pm-key.is-done { color: var(--success); border-color: var(--success); }
.pm-key.is-action { color: var(--danger); border-color: var(--danger); }
.pm-key.is-pending { color: var(--pending); border-color: var(--pending); }
.pm-key.is-reserved { background: var(--bg-secondary); border-style: dashed; }

/* une page qui montre le schéma s'élargit (l'accueil, /cases/), comme .advice-wide */
.main-content.scheme-wide { max-width: 1500px; }

/* la disposition : schéma | fiche ; sous 1 180 px, la fiche passe sous le schéma */
.ps-plan { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.ps-cadre { min-width: 0; }
.ps-fiche { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; font-size: .9rem; }
/* dans l'atelier (Q33e), le schéma seul : la colonne B tient lieu de fiche */
.ps-plan.is-bare { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1180px) { .ps-plan { grid-template-columns: minmax(0, 1fr); } .ps-fiche { position: static; max-height: none; } }

/* les colonnes des phases : un fond teinté de leur couleur, la tête en couleur */
.pm-col { stroke: none; }
.pm-col.band-1 { fill: color-mix(in srgb, var(--band-1) 7%, transparent); }
.pm-col.band-2 { fill: color-mix(in srgb, var(--band-2) 7%, transparent); }
.pm-col.band-3a { fill: color-mix(in srgb, var(--band-3a) 8%, transparent); }
.pm-col.band-3b { fill: color-mix(in srgb, var(--band-3b) 8%, transparent); }
.pm-col.band-4a { fill: color-mix(in srgb, var(--band-4a) 8%, transparent); }
.pm-col.band-4b { fill: color-mix(in srgb, var(--band-4b) 8%, transparent); }
.pm-phase[data-phase="1"] .pm-head, .pm-phase[data-phase="2"] .pm-head { fill: var(--band-1); }
.pm-phase[data-phase="3a"] .pm-head, .pm-phase[data-phase="3b"] .pm-head { fill: var(--band-3a); }
.pm-phase[data-phase="4a"] .pm-head, .pm-phase[data-phase="4b"] .pm-head { fill: var(--band-4a); }
.pm-head { font-family: var(--serif); }

/* une étape sans cas (l'accueil d'un visiteur) : le trait de sa phase, aucun état */
.pm-box.is-doctrine .pm-bg { fill: var(--bg-elevated); stroke-width: 1.2; }
.pm-phase[data-phase="1"] .is-doctrine .pm-bg, .pm-phase[data-phase="2"] .is-doctrine .pm-bg { stroke: var(--band-1); }
.pm-phase[data-phase="3a"] .is-doctrine .pm-bg, .pm-phase[data-phase="3b"] .is-doctrine .pm-bg { stroke: var(--band-3a); }
.pm-phase[data-phase="4a"] .is-doctrine .pm-bg, .pm-phase[data-phase="4b"] .is-doctrine .pm-bg { stroke: var(--band-4a); }
.pm-phase[data-phase="1"] .is-doctrine .pm-bar, .pm-phase[data-phase="2"] .is-doctrine .pm-bar { fill: var(--band-1); }
.pm-phase[data-phase="3a"] .is-doctrine .pm-bar, .pm-phase[data-phase="3b"] .is-doctrine .pm-bar { fill: var(--band-3a); }
.pm-phase[data-phase="4a"] .is-doctrine .pm-bar, .pm-phase[data-phase="4b"] .is-doctrine .pm-bar { fill: var(--band-4a); }
.pm-box { cursor: pointer; }

/* les flèches : deux chemins, le trait visible (.tr) et la prise large et transparente (.hit) */
.fl .tr { fill: none; stroke-width: 1.4; }
.fl .hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.fl.down .tr { stroke: var(--flow-down); }
.fl.proposal .tr { stroke: var(--flow-up); }
.fl.sequence .tr { stroke: var(--text-muted); stroke-width: 1; }
.fl.reserved .tr { stroke: var(--band-res); stroke-dasharray: 4 3; }
.pm-links .fl.down, .pm-links .fl.proposal, .pm-links .fl.reserved { opacity: .45; }
.pm-links .fl.sequence { opacity: .6; }
.fl:focus { outline: none; }
.fl:focus-visible .tr, .fl.is-sel .tr { stroke-width: 2.6; }
.mk-down { fill: var(--flow-down); } .mk-proposal { fill: var(--flow-up); }
.mk-sequence { fill: var(--text-muted); } .mk-reserved { fill: var(--band-res); }

/* les frères : des boîtes grises au bord du schéma */
.pm-sib { cursor: pointer; }
.pm-sib rect { fill: var(--bg-secondary); stroke: var(--band-res); stroke-width: 1; }
.pm-sib text { fill: var(--text-secondary); font-size: 10.5px; }
.pm-sib:focus { outline: none; }
.pm-sib:focus-visible rect, .pm-sib.is-sel rect { stroke: var(--accent); stroke-width: 2.5; }
.pm-band-label { fill: var(--text-muted); font-size: 10px; font-style: italic; }

/* l'éclairage : ce qui n'est pas choisi s'efface */
.pm-svg.foc .pm-box, .pm-svg.foc .fl, .pm-svg.foc .pm-sib { opacity: .22; transition: opacity .15s; }
.pm-svg.foc .pm-box.on, .pm-svg.foc .fl.on, .pm-svg.foc .pm-sib.on { opacity: 1; }
.pm-box.is-sel .pm-bg { stroke: var(--accent); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .pm-svg.foc .pm-box, .pm-svg.foc .fl, .pm-svg.foc .pm-sib { transition: none; } }

/* la légende des traits */
.ps-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; list-style: none; margin: .6rem 0 0; padding: 0;
  font-size: .82rem; color: var(--text-secondary); }
.ps-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.ps-legend svg { width: 34px; height: 10px; overflow: visible; }
.fl-key { fill: none; stroke-width: 2; }
.fl-key.down { stroke: var(--flow-down); } .fl-key.proposal { stroke: var(--flow-up); }
.fl-key.sequence { stroke: var(--text-muted); stroke-width: 1.2; } .fl-key.reserved { stroke: var(--band-res); stroke-dasharray: 4 3; }
.home-scheme { margin: 1.5rem 0 2rem; }

/* la fiche */
.ps-empty-k { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--text-bright); margin: 0 0 .3rem; }
.ps-fiche h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.25; margin: 0 0 .2rem;
  color: var(--text-bright); }
.ps-id { font-family: var(--mono); font-size: .78rem; color: var(--text-muted); margin: 0 0 .7rem; }
.ps-fiche dl { margin: 0; display: grid; gap: .55rem; }
.ps-fiche dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.ps-fiche dd { margin: .1rem 0 0; color: var(--text-primary); }
.ps-fiche ul { margin: .15rem 0 0; padding-left: 1.05rem; }
.ps-fiche li { margin: .1rem 0; }
.ps-go { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-align: left; font: inherit; }
.ps-go:hover, .ps-go:focus-visible { text-decoration: underline; }
.ps-sense { font-family: var(--mono); font-size: .72rem; padding: 0 .3rem; border-radius: 3px; border: 1px solid currentColor;
  margin-right: .3rem; }
.ps-sense.down { color: var(--flow-down); } .ps-sense.proposal { color: var(--flow-up); }
.ps-sense.reserved { color: var(--band-res); } .ps-sense.sequence { color: var(--text-muted); }
.ps-actions { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.prov { display: inline-block; font-family: var(--mono); font-size: .7rem; letter-spacing: .03em; padding: .05rem .35rem;
  border: 1px solid currentColor; border-radius: 3px; }
.prov.I { color: var(--prov-illustrative); } .prov.M { color: var(--prov-measured); }
.prov.E { color: var(--prov-estimated); } .prov.V { color: var(--prov-empty); }