/* 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); } }
/* Pas de contour : la zone transparente du PNG est un damier discret (le repère habituel de la transparence) */
.lbx-cadre { --bande: 0%; --opacite: 1; position: relative; overflow: hidden; border-radius: 4px;
  background-color: rgba(242, 240, 235, .05);
  background-image: conic-gradient(rgba(242, 240, 235, .07) 25%, transparent 0 50%, rgba(242, 240, 235, .07) 0 75%, transparent 0);
  background-size: 16px 16px; 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: var(--valeur); line-height: 1; letter-spacing: .06em; color: var(--peche); }

/* ---------- Infos et export ---------- */
.lbx-exporter:hover { translate: none; }

/* ---------- Réglages ---------- */
/* Largeur × Hauteur (.dims, app/kit.css) et ratio libre (.saisie), sous leurs puces */
.lbx-dims, .lbx-autre { margin-top: var(--dans-groupe); }