/* wf-designer.css — Vue Designer du canevas (essai du 2026-09-24).
   L'éditeur est diagram-js (_vendor/diagram-js/diagram-js.css) ; ici, son
   accord avec le thème sombre d'APS, et le dessin de NOS formes. Toutes les
   couleurs passent par des jetons : le SVG ne porte que la géométrie. */

.dsg-racine { flex: 1; display: flex; min-height: 0; min-width: 0; }
.dsg-hote   { flex: 1; position: relative; min-width: 0; outline: none; }

/* ── diagram-js au thème d'APS ─────────────────────────────────────────────
   Ses composants lisent les jetons `--bio-*` posés sur `.bio-theme-parent`
   (la classe que son canevas pose sur son conteneur). On les redéfinit plus
   spécifiquement, sans toucher au fichier fabriqué. */
.dsg-hote .bio-theme-parent {
  --bio-surface:           var(--bd-canvas-surface, #151718);
  --bio-surface-overlay:   var(--bg3, #1a1d1f);
  --bio-surface-subtle:    var(--bg3, #1a1d1f);
  --bio-surface-medium:    var(--bg3, #1a1d1f);
  --bio-text:              var(--bd-text, #eef0f1);
  --bio-text-subtle:       var(--bd-text-dim, #a6b0b8);
  --bio-text-subtlest:     var(--bd-text-dim, #a6b0b8);
  --bio-border:            var(--bd-panel-border, #262a2e);
  --bio-primary:           var(--accent, #d6d233);
  --bio-focus:             var(--accent, #d6d233);
  --bio-canvas-accent:     var(--accent, #d6d233);
  --bio-canvas-accent-subtle: var(--accent, #d6d233);
  --bio-selected-surface:  var(--bg3, #1a1d1f);
}

/* ── Nos formes ───────────────────────────────────────────────────────── */
.dsg-forme {
  fill: var(--bg3, #1a1d1f);
  stroke: var(--bd-text-dim, #a6b0b8);
  stroke-width: 1.5px;
}
.dsg-declencheur { stroke: var(--ok, #27ae60); stroke-width: 2px; }
.dsg-question    { stroke: var(--info, #3498db); }
.dsg-fin         { stroke: var(--bd-text, #eef0f1); stroke-width: 3px; }
.dsg-parallele   { stroke: var(--warn, #e67e22); stroke-width: 2px; }
.dsg-parallele-plus { fill: none; stroke: var(--warn, #e67e22); stroke-width: 3px; stroke-linecap: round; pointer-events: none; }

.dsg-texte {
  fill: var(--bd-text, #eef0f1);
  font: 500 12.5px/1 system-ui, sans-serif;
  text-anchor: middle; dominant-baseline: central;
  pointer-events: none; user-select: none;
}
.dsg-texte-vide { fill: var(--bd-text-dim, #a6b0b8); font-style: italic; opacity: .7; }
.dsg-texte-fin  { font-size: 11.5px; fill: var(--bd-text-dim, #a6b0b8); }
/* Une case qui porte son mécanisme (2026-10-06) : titre, objet, opération. */
.dsg-titre-meca { font-size: 11px; font-weight: 700; letter-spacing: .04em; fill: var(--bd-text, #eef0f1); }
.dsg-operation  { font-size: 10px; font-weight: 400; fill: var(--bd-text-dim, #a6b0b8); }
.dsg-formule-marque {
  fill: var(--warn, #e67e22); font: italic 700 12px/1 Georgia, serif;
  dominant-baseline: central; text-anchor: middle; cursor: help;
}
.dsg-formule-nommee { fill: var(--bd-text-dim, #a6b0b8); }
/* Une SÉQUENCE (2026-11-04) : une case désigne un workflow (violet) ou un geste humain (pointillé orange). */
.dsg-forme.dsg-role-workflow { stroke: #9b7fe0; stroke-width: 2px; }
.dsg-forme.dsg-role-geste    { stroke: var(--warn, #e8b04a); stroke-width: 2px; stroke-dasharray: 5 4; }
.dsg-titre-workflow { fill: #c9b6ff; }
.dsg-titre-geste    { fill: #e8c25a; }

.dsg-lien   { fill: none; stroke: var(--bd-text-dim, #a6b0b8); stroke-width: 1.5px; }
.dsg-fleche { fill: var(--bd-text-dim, #a6b0b8); stroke: none; }
.dsg-reponse {
  fill: var(--info, #3498db);
  font: 500 11.5px/1 system-ui, sans-serif;
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
  /* Détoure le texte sur le fond, pour qu'il se lise par-dessus le trait. */
  paint-order: stroke; stroke: var(--bd-canvas-surface, #151718); stroke-width: 4px;
}
.dsg-reponse.dsg-texte-vide { fill: var(--bd-text-dim, #a6b0b8); }

/* ── Palette et menu contextuel : des icônes dessinées en CSS ─────────────
   diagram-js pose `className` sur chaque entrée ; on dessine la forme en
   miniature dans ::before, sans police d'icônes à embarquer. */
.dsg-hote .dsg-pal, .dsg-hote .dsg-pad {
  display: flex; align-items: center; justify-content: center;
}
.dsg-pal::before, .dsg-pad::before {
  content: ''; display: block; box-sizing: border-box;
  border: 1.5px solid currentColor;
}
.dsg-pal-declencheur::before { width: 22px; height: 12px; border-radius: 6px; border-color: var(--ok, #27ae60); }
.dsg-pal-action::before      { width: 20px; height: 14px; border-radius: 3px; }
.dsg-pal-question::before    { width: 13px; height: 13px; transform: rotate(45deg); border-color: var(--info, #3498db); }
.dsg-pal-workflow::before    { width: 20px; height: 14px; border-radius: 3px; border-color: #9b7fe0; border-width: 2px; }
.dsg-pal-geste::before       { width: 20px; height: 14px; border-radius: 3px; border-color: var(--warn, #e8b04a); border-style: dashed; }
.dsg-pal-fin::before         { width: 14px; height: 14px; border-radius: 50%; border-width: 3px; }
/* Losange tourné de 45° : son « × » devient le « + » de la porte parallèle. */
.dsg-pal-parallele::before   { content: '×'; width: 14px; height: 14px; transform: rotate(45deg); border-color: var(--warn, #e67e22);
                               color: var(--warn, #e67e22); font-size: 13px; line-height: 11px; text-align: center; }
.aps-pan-en-cours, .aps-pan-en-cours * { cursor: grabbing !important; }
.dsg-pal-lasso::before       { width: 18px; height: 14px; border-style: dashed; border-radius: 2px; }
.dsg-pal-relier::before      { content: '↗'; border: 0; font-size: 16px; line-height: 1; }
.dsg-pad-supprimer::before   { content: '✕'; border: 0; font-size: 13px; line-height: 1; }
.dsg-pad-citer::before       { content: '❝'; border: 0; font-size: 16px; line-height: 1; color: var(--accent, #d6d233); }
.dsg-pad-rattacher::before   { content: '✓'; border: 0; font-size: 15px; line-height: 1; color: var(--accent, #d6d233); }
.dsg-hote .djs-context-pad .entry { color: var(--bd-text, #eef0f1); }

/* ── Le volet ─────────────────────────────────────────────────────────── */
.dsg-volet {
  width: 290px; flex-shrink: 0; overflow: auto;
  padding: 16px 16px 24px;
  background: var(--bd-panel-bg, #151718);
  border-left: 1px solid var(--bd-panel-border, #262a2e);
  color: var(--bd-text, #eef0f1); font-size: 13px;
}
.dsg-bloc { margin-bottom: 22px; }
.dsg-bloc-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dsg-bloc-titre h2 { margin: 0; font-size: 13px; font-weight: 600; }
/* Même motif que .syn-aide (console/synchronisation.css) : le « ? » explique,
   aucun paragraphe d'aide toujours visible. */
.dsg-aide {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--bd-panel-border, #262a2e);
  color: var(--bd-text-dim, #a6b0b8); font-size: 10.5px; cursor: default; user-select: none;
}
.dsg-aide:hover { border-color: var(--bd-text-dim, #a6b0b8); color: var(--bd-text, #eef0f1); }

.dsg-genre { color: var(--bd-text-dim, #a6b0b8); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.dsg-champ {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg, #0f1011); color: var(--bd-text, #eef0f1);
  border: 1px solid var(--bd-panel-border, #262a2e); border-radius: 6px;
  padding: 8px 10px; font: inherit; line-height: 1.45;
}
.dsg-champ:focus { outline: none; border-color: var(--accent, #d6d233); }
.dsg-champ:disabled { opacity: .5; }

.dsg-minimum { list-style: none; margin: 0; padding: 0; }
.dsg-regle {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 4px; border-radius: 5px; line-height: 1.35;
}
.dsg-regle[data-cliquable="1"] { cursor: pointer; }
.dsg-regle[data-cliquable="1"]:hover { background: var(--bg3, #1a1d1f); }
.dsg-regle-pastille { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--warn, #e67e22); }
.dsg-regle[data-etat="ok"] .dsg-regle-pastille { background: var(--ok, #27ae60); }
.dsg-regle[data-etat="ok"] .dsg-regle-texte { color: var(--bd-text-dim, #a6b0b8); }
.dsg-regle-texte { flex: 1; }
.dsg-regle-compte {
  min-width: 18px; padding: 1px 6px; border-radius: 9px; text-align: center;
  background: var(--bg3, #1a1d1f); color: var(--bd-text-dim, #a6b0b8); font-size: 11px;
}
.dsg-note { color: var(--bd-text-dim, #a6b0b8); font-size: 11.5px; opacity: .7; margin: 0; }

/* État d'enregistrement, en pied de volet. La couleur seule change : le texte
   dit déjà ce qui se passe. */
.dsg-etat { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--bd-text-dim, #a6b0b8); }
.dsg-etat[data-etat="ok"]::before { content: '● '; color: var(--ok, #27ae60); }
.dsg-etat[data-etat="attente"]::before { content: '● '; color: var(--warn, #e67e22); }
.dsg-etat[data-etat="erreur"] { color: var(--err, #e74c3c); }
.dsg-etat[data-etat="sans-id"] { color: var(--warn, #e67e22); }

/* ── Vers le Builder ──────────────────────────────────────────────────── */
.dsg-bouton {
  width: 100%; padding: 8px 12px; border-radius: 6px; cursor: pointer;
  background: var(--accent, #d6d233); color: var(--bg, #0f1011);
  border: 1px solid var(--accent, #d6d233); font: 600 12.5px/1.2 system-ui, sans-serif;
}
.dsg-bouton:disabled { cursor: default; background: transparent; color: var(--bd-text-dim, #a6b0b8); border-color: var(--bd-panel-border, #262a2e); }
.dsg-bilan { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--bd-text-dim, #a6b0b8); }
.dsg-bilan:empty { display: none; }
.dsg-bilan[data-etat="erreur"] { color: var(--err, #e74c3c); }
.dsg-lien-bouton {
  margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent, #d6d233); font: 500 12px/1.3 system-ui, sans-serif; text-decoration: underline;
}
.dsg-lien-bouton[hidden] { display: none; }

/* ── Sources d'un élément (2026-10-01, wf-citations.js) ─────────────────── */
.dsg-sources { display: flex; flex-direction: column; gap: 8px; }
.dsg-note-sources { margin: 0 0 6px; color: var(--bd-text-dim, #a6b0b8); font-size: 12px; }
.dsg-note-sources:empty { display: none; }
.dsg-bloc[hidden] { display: none; }
.cit-carte {
  border: 1px solid var(--bd-panel-border, #262a2e); border-radius: 6px; padding: 8px;
  display: flex; flex-direction: column; gap: 6px; background: var(--bg, #0f1011);
}
.cit-carte-titre { font-size: 11.5px; color: var(--bd-text-dim, #a6b0b8); }
.cit-carte-extrait {
  margin: 0; padding-left: 8px; border-left: 2px solid var(--accent, #d6d233);
  font-size: 12px; line-height: 1.45; max-height: 6.2em; overflow: hidden;
}
.cit-carte-figure { display: block; width: 100%; height: auto; border-radius: 4px; background: #fff; }
.cit-carte-etat { font-size: 11.5px; color: var(--bd-text-dim, #a6b0b8); }
.cit-carte-etat:empty { display: none; }
.cit-carte-etat[data-genre="alerte"] { color: var(--warn, #e67e22); }
.cit-carte-actions { display: flex; gap: 12px; }
.cit-lien {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 12px;
  color: var(--accent, #d6d233); text-decoration: none;
}
.cit-lien:hover { text-decoration: underline; }

/* La fenêtre de choix : document, version, partie ; passage ou figure. */
.cit-voile {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.cit-fenetre {
  width: min(1100px, 100%); height: min(780px, 100%);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bd-panel-bg, #151718); color: var(--bd-text, #eef0f1);
  border: 1px solid var(--bd-panel-border, #262a2e); border-radius: 10px;
  font-size: 13px;
}
.cit-tete { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--bd-panel-border, #262a2e); }
.cit-tete h2 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; }
.cit-fermer { background: none; border: 0; color: var(--bd-text-dim, #a6b0b8); font-size: 20px; cursor: pointer; }
.cit-corps { flex: 1; display: flex; min-height: 0; }
.cit-gauche {
  width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border-right: 1px solid var(--bd-panel-border, #262a2e); min-height: 0;
}
.cit-select {
  background: var(--bg, #0f1011); color: inherit; border: 1px solid var(--bd-panel-border, #262a2e);
  border-radius: 6px; padding: 6px 8px; font: inherit; min-width: 0;
}
.cit-parties { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
.cit-partie { padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.cit-partie:hover { background: var(--bg3, #1a1d1f); }
.cit-partie[data-choisie="1"] { background: var(--bg3, #1a1d1f); color: var(--accent, #d6d233); }
.cit-partie[data-figures="1"]::after { content: " ▣"; color: var(--bd-text-dim, #a6b0b8); font-size: 11px; }
.cit-droite { flex: 1; min-width: 0; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.cit-figures { display: flex; flex-direction: column; gap: 10px; }
.cit-figures:empty { display: none; }
.cit-figure { position: relative; border: 1px solid var(--bd-panel-border, #262a2e); border-radius: 6px; overflow: hidden; background: #fff; }
.cit-figure img { display: block; width: 100%; height: auto; }
.cit-bouton-figure { position: absolute; top: 8px; right: 8px; }
.cit-texte { white-space: pre-wrap; line-height: 1.55; user-select: text; }
.cit-pied {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-top: 1px solid var(--bd-panel-border, #262a2e);
}
.cit-message { flex: 1; color: var(--bd-text-dim, #a6b0b8); font-size: 12px; }
.cit-bouton {
  background: var(--accent, #d6d233); color: #0f1011; border: 0; border-radius: 6px;
  padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer;
}
.cit-bouton:disabled { opacity: .4; cursor: default; }

/* ── Exigences, questions, couverture (2026-10-01) ─────────────────────── */
.dsg-en-attente { stroke: var(--warn, #e67e22); stroke-dasharray: 6 4; }
.dsg-regle-detail .dsg-regle-texte { font-size: 12px; color: var(--bd-text-dim, #a6b0b8); }
.cit-carte-element[data-attente="1"] { border-color: rgba(230, 126, 34, .55); }
.cit-carte-tete { display: flex; align-items: center; gap: 8px; }
.cit-pastille {
  padding: 0 6px; border-radius: 999px; border: 1px solid var(--bd-panel-border, #262a2e);
  font-size: 10.5px; white-space: nowrap;
}
.cit-pastille[data-type="exigence"] { color: var(--accent, #d6d233); border-color: rgba(214, 210, 51, .45); }
.cit-pastille[data-type="question"] { color: #5dade2; border-color: rgba(52, 152, 219, .45); }
.cit-element-statut { font-size: 11px; color: var(--bd-text-dim, #a6b0b8); }
.cit-element-titre { font-size: 12.5px; line-height: 1.4; }
.cit-fenetre-etroite { width: min(640px, 100%); height: min(640px, 100%); }
.cit-corps-colonne { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.cit-elements { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.cit-element { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.cit-element:hover { background: var(--bg3, #1a1d1f); }
.cit-element .cit-element-titre { flex: 1; }

/* ── Pastilles, bulle, calques, état (2026-10-01) ──────────────────────
   Le dessin montre des signaux ; la lecture vit dans l'espace Projets. */
.dsg-pastille { pointer-events: none; }
.dsg-pastille rect { fill: var(--bg3, #1a1d1f); stroke: var(--bd-text-dim, #a6b0b8); stroke-width: 1px; }
.dsg-pastille text {
  fill: var(--bd-text, #eef0f1); font: 600 10.5px/1 system-ui, sans-serif;
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
.dsg-pastille[data-nature="sources"] rect   { stroke: var(--accent, #d6d233); }
.dsg-pastille[data-nature="exigences"] rect { stroke: var(--ok, #27ae60); }
.dsg-pastille[data-nature="questions"] rect { stroke: var(--info, #3498db); }
.dsg-pastille-alerte rect { stroke: var(--warn, #e67e22); fill: var(--warn, #e67e22); }
.dsg-pastille-alerte text { fill: #0f1011; }

/* La barre de calques, sous la palette (placée en JS par --haut). */
.dsg-calques {
  position: absolute; left: 20px; top: var(--haut, 360px); z-index: 10;
  display: flex; flex-direction: column; gap: 4px; padding: 4px;
  background: var(--bd-panel-bg, #151718); border: 1px solid var(--bd-panel-border, #262a2e); border-radius: 6px;
}
.dsg-calque {
  width: 38px; height: 34px; border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--bd-text-dim, #a6b0b8); font: 600 15px/1 system-ui, sans-serif; cursor: pointer;
}
.dsg-calque:hover { background: var(--bg3, #1a1d1f); }
.dsg-calque[aria-pressed="true"] { color: var(--accent, #d6d233); border-color: var(--bd-panel-border, #262a2e); background: var(--bg3, #1a1d1f); }

/* Les cartes, au-dessus des formes (overlays de diagram-js). Le bas de la
   carte est à 12 px au-dessus de la forme ; un trait les relie. */
/* Le conteneur posé par diagram-js garde la hauteur de la carte, À PARTIR
   du haut de la forme (la carte n'est remontée que visuellement) : sans
   ceci, il recouvrait la forme et volait ses clics. Seule la carte en reçoit. */
.djs-overlay-dsg-notes { pointer-events: none; }
.djs-overlay-dsg-notes .dsg-carte { pointer-events: auto; }
.dsg-carte {
  width: var(--largeur, 190px); transform: translateY(-100%); position: relative;
  background: var(--bd-panel-bg, #151718); color: var(--bd-text, #eef0f1);
  border: 1px solid var(--bd-panel-border, #262a2e); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35); font: 12px/1.35 system-ui, sans-serif;
}
.dsg-carte::after {
  content: ''; position: absolute; left: 18px; top: 100%; height: 12px;
  border-left: 1px dashed var(--bd-text-dim, #a6b0b8);
}
.dsg-notes { list-style: none; margin: 0; padding: 3px; display: flex; flex-direction: column; gap: 1px; }
.dsg-note {
  display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 4px; min-width: 0;
}
.dsg-note:hover { background: var(--bg3, #1a1d1f); }
.dsg-note-signe { flex-shrink: 0; width: 14px; text-align: center; font-weight: 700; }
.dsg-note[data-nature="sources"] .dsg-note-signe   { color: var(--accent, #d6d233); }
.dsg-note[data-nature="exigences"] .dsg-note-signe { color: var(--ok, #27ae60); }
.dsg-note[data-nature="questions"] .dsg-note-signe { color: var(--info, #3498db); }
.dsg-note[data-alerte="1"] .dsg-note-signe { color: var(--warn, #e67e22); }
.dsg-note-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsg-note-actions { display: none; gap: 2px; flex-shrink: 0; }
.dsg-note:hover .dsg-note-actions { display: flex; }
.dsg-note-action {
  background: none; border: 0; padding: 0 3px; cursor: pointer; font: inherit;
  color: var(--bd-text-dim, #a6b0b8); text-decoration: none;
}
.dsg-note-action:hover { color: var(--bd-text, #eef0f1); }
.dsg-note-alerte { color: var(--warn, #e67e22); flex-shrink: 0; }
.dsg-note-plus { color: var(--bd-text-dim, #a6b0b8); cursor: pointer; font-style: italic; }
.dsg-note-vide { color: var(--bd-text-dim, #a6b0b8); }

/* Le workflow entier, dans le volet. */
.dsg-notes-wf { margin-top: 10px; border: 1px solid var(--bd-panel-border, #262a2e); border-radius: 6px; padding: 4px; }
.dsg-notes-wf[hidden] { display: none; }
.dsg-notes-gestes { display: flex; gap: 14px; padding: 4px 6px 2px; }

/* ── Conformité et « Ensuite » (2026-10-26, refonte marche 1) ─────────────
   Le langage du Deploy : des checks (✓ ! ✗ ·), des libellés, UNE prochaine
   action. Remplace la puce d'état en haut du dessin et ses blocs dépliés. */
.dsg-volet { width: 310px; }
.dsg-conf-resume { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: -4px 0 12px; font-size: 12px; }
.dsg-conf-compte[data-etat="ok"] { color: var(--ok, #58d68d); }
.dsg-conf-compte[data-etat="att"] { color: #f0a04b; }
.dsg-conf-compte[data-etat="ko"] { color: var(--err, #e86a6a); }
.dsg-conf-compte[data-etat="zero"] { color: #6d767e; }
.dsg-ensuite {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; padding: 10px;
  border: 1px solid rgba(214, 210, 51, .55); border-radius: 8px; background: rgba(214, 210, 51, .08);
}
.dsg-ensuite-lib { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bd-text-dim, #a6b0b8); }
.dsg-ensuite-action[data-action="corriger"] { background: transparent; color: var(--err, #e86a6a); border-color: rgba(232, 106, 106, .6); text-align: left; }
.dsg-ensuite-sous { margin: 0; }
.dsg-conf-groupe { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.dsg-conf-titre { font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--bd-text-dim, #a6b0b8); }
.dsg-check {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 7px; align-items: baseline;
  padding: 3px 4px; border-radius: 5px; font-size: 12.5px;
}
.dsg-check-signe { font-weight: 800; text-align: center; color: #6d767e; }
.dsg-check[data-etat="ok"] .dsg-check-signe { color: var(--ok, #58d68d); }
.dsg-check[data-etat="att"] .dsg-check-signe { color: #f0a04b; }
.dsg-check[data-etat="ko"] .dsg-check-signe { color: var(--err, #e86a6a); }
.dsg-check-val { color: var(--bd-text-dim, #a6b0b8); text-align: right; font-size: 12px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsg-check[data-etat="att"] .dsg-check-val { color: #f0a04b; }
.dsg-check[data-etat="ko"] .dsg-check-val { color: var(--err, #e86a6a); }
.dsg-check[data-detail="1"] { padding-left: 22px; font-size: 12px; color: var(--bd-text-dim, #a6b0b8); }
/* Le signe reste dans la grille (invisible) : retiré, il décalait le libellé dans sa colonne de 14 px. */
.dsg-check[data-detail="1"] .dsg-check-signe { visibility: hidden; }
.dsg-check[data-cliquable="1"] { cursor: pointer; }
.dsg-check[data-cliquable="1"]:hover { background: var(--bg3, #1a1d1f); }
.dsg-champ-intention { margin-top: 2px; }
.dsg-retour { margin: 0 0 12px; text-decoration: none; }
.dsg-element .dsg-lecture { margin-top: 12px; }
.dsg-element .dsg-lecture[hidden], .dsg-conf[hidden], .dsg-element[hidden] { display: none; }

/* La lecture d'un scénario tiers (2026-10-05) : alerte = orange (pastille par
   défaut de .dsg-regle), information = discrète, rien à signaler = vert. */
.dsg-lecture-resume { margin: 0 0 8px; color: var(--bd-text-dim, #a6b0b8); line-height: 1.45; }
.dsg-regle[data-gravite="info"] .dsg-regle-pastille { background: var(--bd-text-dim, #a6b0b8); }
.dsg-regle[data-gravite="ok"] .dsg-regle-pastille { background: var(--ok, #27ae60); }
.dsg-lecture .dsg-regle { align-items: flex-start; }
.dsg-lecture .dsg-regle-pastille { margin-top: 5px; }

/* ── Mécanisme de la boîte, dans le volet (2026-10-06) ─────────────────── */
.dsg-meca { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dsg-meca[hidden], .dsg-meca [hidden] { display: none !important; }
.dsg-meca-label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--bd-text-dim, #a6b0b8); }
.dsg-meca-choix {
  background: var(--bg3, #1a1d1f); color: var(--bd-text, #eef0f1);
  border: 1px solid var(--bd-panel-border, #262a2e); border-radius: 4px; padding: 4px 6px; font-size: 12px;
}
.dsg-meca-op { margin: 0; font-size: 11.5px; color: var(--bd-text-dim, #a6b0b8); }
.dsg-meca-formule summary { cursor: pointer; font-size: 11.5px; color: var(--warn, #e67e22); }
.dsg-meca-formule pre {
  margin: 6px 0 0; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-all;
  font-size: 11px; color: var(--bd-text-dim, #a6b0b8);
}

.dsg-regle-champ { min-height: 0; }
.dsg-regle-etat { margin: 0; font-size: 11.5px; color: var(--warn, #e67e22); }
.dsg-regle-etat[data-etat="nommee"] { color: var(--bd-text-dim, #a6b0b8); }
.dsg-regle-etat[data-etat="traduite"] { color: var(--ok, #27ae60); }

/* ── Le bandeau de source d'une esquisse (2026-10-26, marche 2) ─────────── */
.dsg-bandeau {
  position: absolute; top: 0; left: 0; right: 0; z-index: 14;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 14px 7px 70px;
  background: rgba(214, 210, 51, .08); border-bottom: 1px solid rgba(214, 210, 51, .25); font-size: 12.5px;
}
.dsg-bandeau[hidden] { display: none; }
.dsg-bandeau-lib { color: var(--bd-text-dim, #a6b0b8); }
.dsg-bandeau-lien { color: var(--bd-text, #eef0f1); text-decoration: underline; text-underline-offset: 3px; }
.dsg-bandeau-quoi { color: var(--bd-text-dim, #a6b0b8); }
.dsg-bandeau-verifier, .dsg-bandeau-retirer { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.dsg-bandeau-verifier { color: #f0a04b; }
.dsg-bandeau-retirer { color: var(--accent, #d6d233); text-decoration: underline; text-underline-offset: 3px; }
.dsg-bandeau-verifier[hidden] { display: none; }
.dsg-type-label { margin-bottom: 10px; }
.dsg-type-label[hidden], .dsg-genre[hidden] { display: none; }

/* ── Mécanismes déduits et cible (2026-10-26, marche 3) ─────────────────── */
.dsg-deduit { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-style: italic; fill: #8a949c; }
.dsg-deduit-humain { fill: #f0a04b; }
.dsg-cible-choix { justify-self: end; background: var(--bg, #0f1011); color: var(--bd-text, #eef0f1); border: 1px solid var(--bd-panel-border, #262a2e); border-radius: 5px; font: inherit; font-size: 12px; padding: 1px 4px; }
.dsg-check-action { grid-column: 2 / -1; justify-self: start; margin-top: 0; font-size: 12px; }
.dsg-meca-deduit { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding: 6px 8px; border: 1px dashed rgba(214, 210, 51, .45); border-radius: 6px; }
.dsg-meca-deduit[hidden] { display: none; }
.dsg-meca-deduit-texte { margin: 0; font-size: 12px; color: var(--bd-text, #eef0f1); }
.dsg-meca-deduit .dsg-lien-bouton { align-self: flex-start; margin-top: 2px; }
.dsg-meca-cible { margin: 4px 0 0; font-size: 12px; color: #5dade2; font-family: ui-monospace, Menlo, monospace; }
/* Relire une nouvelle version (2026-10-26, marche 4). */
.dsg-bandeau-relire { border: 1px solid rgba(214, 210, 51, .6); background: rgba(214, 210, 51, .12); color: var(--accent, #d6d233); border-radius: 6px; padding: 2px 9px; cursor: pointer; font: inherit; font-size: 12px; }
.dsg-bandeau-fusion { color: var(--bd-text, #eef0f1); }

/* ── Le dernier run du Builder sur le dessin (2026-10-26, marche 5) ─────── */
.djs-element.dsg-run-ok .dsg-forme    { stroke: #58d68d !important; stroke-width: 2.6px !important; }
.djs-element.dsg-run-ko .dsg-forme    { stroke: #e86a6a !important; stroke-width: 2.6px !important; }
.djs-element.dsg-run-cours .dsg-forme { stroke: #d6d233 !important; stroke-width: 2.6px !important; stroke-dasharray: 5 3; }
.djs-element.dsg-run-non              { opacity: .42; }
.dsg-run-colorer { justify-self: end; accent-color: #d6d233; }
.dsg-designe-ouvrir { align-self: flex-start; }