/* L'arbre : scène, connecteurs SVG, sujets (lot E). Reprise du bloc « Arbre » de la maquette
   validée le 4 septembre 2026 (`docs/maquettes/support/maquette.css`). Jetons du design system
   seulement : aucune couleur, aucun rayon, aucune ombre écrits en dur. `index.html` la charge
   après `app.css`, dont elle remplace les règles de squelette du lot A. */

.sb-arbre { display: flex; flex-direction: column; min-height: 0; }

/* La barre de l'arbre : les gestes de vue à gauche, le zoom à droite. */
.sb-arbre-barre { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border-subtle); }
.sb-arbre-barre .sb-fin { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* Le facteur de zoom : une donnée, tabulaire, encre 2. */
.sb-zoom { min-width: 46px; text-align: right; font: 500 12px/1 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* La scène : elle rogne, elle ne déborde pas la page (jamais de défilement horizontal). */
.sb-scene { position: relative; flex: 1 1 auto; overflow: hidden; cursor: grab; }
.sb-scene:active { cursor: grabbing; }
/* Le calque déplacé et zoomé d'un seul `transform` : les sujets ne se redisposent pas. */
.sb-calque { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.sb-liens { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.sb-lien-trait { fill: none; stroke: var(--border-strong); stroke-width: 1; }

/* La place d'un sujet dans le calque. La maquette posait `left` et `top` sur le bouton lui-même ;
   ici la position vient de l'arbre, et les props de `SujetArbre` ne la portent pas : elle vit sur
   ce conteneur, et le sujet le remplit. */
.sb-place { position: absolute; }

/* Un sujet : 48 px de haut, le point d'état, le titre sur deux lignes, le compte de documents, le chevron. */
.sb-sujet {
  box-sizing: border-box; width: 208px; height: 48px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  padding: 0 10px; text-align: left; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--ds-radius-control);
  box-shadow: var(--shadow-1); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
/* Le survol reste une teinte : il propose, il ne désigne pas. */
.sb-sujet:hover { border-color: var(--accent-border); }
/* Le sujet choisi : le liseré d'accent et un fond à peine teinté. Jamais la couleur du titre.
   Le liseré prend `--accent-ink`, l'accent qui porte du texte (choix 1 des maquettes, dans le
   design system depuis sa synchronisation du 4 septembre 2026), pas la version translucide :
   mesuré sur la page rendue, un `--accent-border` composé sur la surface donne 1,43:1 en clair
   et 1,18:1 en sombre, où le liseré normal en donne 1,21 et 1,13 — en sombre le sujet choisi
   ressortait moins que ses voisins. `--accent-ink` monte à 6,50:1 et 5,23:1. */
.sb-sujet.est-choisi { border-color: var(--accent-ink); background: var(--accent-softer); }
/* La colonne du point garde sa largeur même quand le point n'est pas rendu — le design system
   n'en met aucun sur un sujet fait —, sinon les titres d'une même colonne ne s'alignent plus. */
.sb-sujet-etat { display: flex; align-items: center; justify-content: center; width: 12px; flex: none; }
.sb-sujet-titre {
  font: 500 13px/1.25 var(--font-sans); color: var(--text-1);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* Le chevron : il désigne le repli, il ne décore pas. */
.sb-sujet-chevron { display: flex; align-items: center; color: var(--text-3); }
/* Le chevron du sujet choisi prend la même encre d'accent que son liseré. */
.sb-sujet.est-choisi .sb-sujet-chevron { color: var(--accent-ink); }
/* Une branche repliée annonce ce qu'elle cache. */
.sb-sujet-caches { font: 500 11px/1 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Mouvement refusé : le survol change de couleur d'un coup, sans transition. Le design system le
   fait déjà pour ses propres surfaces ; l'arbre est à nous, il le dit ici pour lui-même. */
@media (prefers-reduced-motion: reduce) {
  .sb-sujet { transition: none; }
}