/* Outil · Distance de projection (Projector throw), id projection : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : pj-
   À gauche : le plan vu de dessus à l'échelle (projecteur, faisceau, écran ; la plage du zoom), le résultat en grand
   (distance ou largeur), hauteur, diagonale en m et en pouces, l'info. À droite : ce que je connais, les deux rapports
   de projection, la largeur ou la distance (l'autre grisée), le format de l'image. */
.pj .outil-fixe { align-items: stretch; }
.pj-plan { width: 100%; height: auto; display: block; border-radius: 16px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--filet-doux); }
.pj-faisceau { fill: rgba(255, 210, 160, .16); stroke: rgba(255, 210, 160, .5); stroke-width: 1; }
.pj-faisceau.pj-loin { fill: none; stroke-dasharray: 4 4; }
.pj-proj { fill: rgba(242, 240, 235, .1); stroke: var(--papier); stroke-width: 1.4; }
.pj-proj.pj-fantome { stroke-dasharray: 3 3; opacity: .6; }
.pj-ecran { stroke: var(--orange); stroke-width: 4; stroke-linecap: round; }
.pj-plage { stroke: var(--texte2); stroke-width: 1; stroke-dasharray: 2 3; }
.pj-plan text { font: 500 11.5px var(--mono); fill: var(--texte2); text-anchor: middle; }
.pj-plan text.pj-droite { text-anchor: end; fill: var(--peche); }
.pj-carte { display: flex; flex-direction: column; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 6px 18px 4px; }
.pj-grand { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 74px; border-bottom: 1px solid var(--filet-doux); }
.pj-grand span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); white-space: nowrap; }
.pj-grand b { font: 700 clamp(22px, 6.5vw, 32px)/1 var(--display); letter-spacing: -.03em; color: var(--peche); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-rangee { cursor: default; height: 44px; align-items: center; }
.pj-rangee:last-child { border-bottom: 0; }
.pj-rangee:hover .nom { color: var(--papier); }
.pj-rangee .val { font-variant-numeric: tabular-nums; }
.pj-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.pj-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.pj-gris { opacity: .3; pointer-events: none; transition: opacity .4s var(--courbe); }