/* Outil · Valeurs de plan (Shot sizes), id plans : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : vp-
   À gauche : l'image (16:9), où la scène se recadre ; le nom du plan ; à quoi il sert (2 lignes
   fixes). À droite : les 9 valeurs (liste fixe). */
.vp .outil-fixe { align-items: stretch; }
.vp-zone { position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 16px; background: #0a0908; box-shadow: inset 0 0 0 1px var(--filet-doux); overflow: hidden; }
.vp-cadre { position: relative; overflow: hidden; transition: width .45s var(--courbe), height .45s var(--courbe); }
.vp-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vp-legende { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vp-legende b { font: 700 22px/1.2 var(--display); letter-spacing: -.02em; color: var(--peche); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 1.2em; }
.vp-role { margin: 0; height: 2lh; font: 400 14px/1.5 var(--corps); color: var(--papier); opacity: .85; overflow: hidden; }

.vp-liste { display: flex; flex-direction: column; gap: 4px; }
.vp-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--papier); text-align: left; box-shadow: inset 0 0 0 1px transparent; transition: background .25s var(--courbe), box-shadow .25s var(--courbe); }
.vp-ligne span { font: 500 14px/1.2 var(--corps); white-space: nowrap; }
.vp-ligne i { font: 500 11px/1.2 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-ligne:hover { background: rgba(242, 240, 235, .04); }
.vp-ligne[aria-pressed="true"] { background: rgba(242, 240, 235, .07); box-shadow: inset 0 0 0 1px var(--papier); }
.vp-ligne[aria-pressed="true"] span { color: var(--peche); }