/* Outil · Plages dynamiques (Dynamic range), id dynamique : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : dy-
   À gauche : le schéma (toutes les plages sur une échelle de 0 à 24 stops ; la source en orange, la cible en blanc ; en
   bas, les deux centrées l'une sur l'autre, ce qui dépasse hachuré), puis le texte (3 lignes fixes). À droite : ce que
   tu captes et où c'est montré (puces par famille). */
.dy .outil-fixe { align-items: stretch; }
.dy-schema { width: 100%; height: auto; display: block; }
.dy-grille { stroke: var(--filet-doux); stroke-width: 1; }
.dy-axe { font: 500 12px var(--mono); fill: var(--texte2); text-anchor: middle; }
.dy-nom { font: 500 12.5px var(--corps); fill: var(--texte2); text-anchor: end; }
.dy-nom.dy-src { fill: var(--peche); }
.dy-nom.dy-cib { fill: var(--papier); }
.dy-barre { fill: rgba(242, 240, 235, .14); }
.dy-barre.dy-floue { fill: rgba(242, 240, 235, .09); }
.dy-sur { fill: rgba(242, 240, 235, .07); }
.dy-barre.dy-src, .dy-sur.dy-src { fill: var(--orange); }
.dy-sur.dy-src { opacity: .45; }
.dy-barre.dy-cib, .dy-sur.dy-cib { fill: var(--papier); }
.dy-sur.dy-cib { opacity: .45; }
.dy-comp-src { fill: var(--orange); opacity: .9; }
.dy-comp-cib { fill: var(--papier); }
.dy-texte { margin: 0; height: 12.5em; display: flex; flex-direction: column; gap: 6px; font: 400 13.5px/1.45 var(--corps); color: var(--papier); overflow: hidden; }
.dy-texte span { opacity: .9; }
.dy-texte .dy-src b { color: var(--peche); }
.dy-texte i { font-style: normal; color: var(--texte2); font: 500 11px var(--mono); }
.dy-liste { display: flex; flex-direction: column; gap: 10px; }
.dy-famille { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dy-famille span { width: 100%; font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; color: var(--texte2); }
.dy-famille .puce { cursor: pointer; padding: 7px 12px; }