/* Outil · Letterbox : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : lbx- */

/* Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : aperçu, infos, export, puis les réglages. Ordinateur : aperçu et export à gauche, réglages à droite. */
.lbx .outil-fixe { align-items: center; }

/* ---------- Aperçu : le cadre à l'échelle, les bandes et l'image utile ---------- */
.lbx-zone { width: 100%; height: clamp(160px, 30vh, 280px); display: grid; place-items: center; }
@media (min-width: 960px) { .lbx-zone { height: min(52vh, 520px); } }
.lbx-cadre { --bande: 0%; --opacite: 1; position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1.5px var(--papier);
  background: rgba(242, 240, 235, .05); transition: width .6s var(--courbe), height .6s var(--courbe); }
.lbx-bande { position: absolute; left: 0; right: 0; height: var(--bande); background: #000; opacity: var(--opacite);
  transition: height .5s var(--courbe), width .5s var(--courbe), opacity .3s var(--courbe); }
.lbx-b1 { top: 0; } .lbx-b2 { bottom: 0; }
/* bandes sur les côtés (pillarbox) */
.lbx-cadre.vertical .lbx-bande { top: 0; bottom: 0; height: auto; width: var(--bande); right: auto; }
.lbx-cadre.vertical .lbx-b2 { left: auto; right: 0; }
.lbx-utile { position: absolute; inset: 0; display: grid; place-items: center; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--peche); }

/* ---------- Infos et export ---------- */
.lbx-info { margin: 0; text-align: center; font: 500 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--texte2); }
.lbx-info b { font-weight: 500; color: var(--papier); }
.lbx-exporter svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lbx-exporter:hover { translate: none; }

/* ---------- Réglages ---------- */
.lbx-dims { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; margin-top: 14px; }
.lbx-fois { font: 400 22px/1 var(--display); color: var(--texte2); padding-bottom: 20px; }
.lbx-autre { width: 100%; margin-top: 10px; border: 0; outline: none; border-radius: 999px; background: var(--encre); padding: 11px 16px;
  font-size: 15px; box-shadow: inset 0 0 0 1px var(--filet); transition: box-shadow .3s var(--courbe); }
.lbx-autre:focus { box-shadow: inset 0 0 0 1px var(--papier); }
.lbx-autre::placeholder { color: var(--texte2); }