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

/* Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : l'image, l'info, l'export, puis les choix. Ordinateur : l'image à gauche, les choix à droite. */
.lt .outil-fixe { align-items: stretch; }

/* L'image : aux proportions de l'image (16:9 pour la scène), le trait avant / après se fait glisser */
.lt-cadre { --coupe: 50%; position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: #000; touch-action: pan-y; cursor: ew-resize; }
.lt-toile { display: block; width: 100%; height: 100%; }
/* La poignée du trait */
.lt-cadre.compare::after { content: ""; position: absolute; top: 50%; left: var(--coupe); width: 26px; height: 26px; translate: -50% -50%; border-radius: 50%;
  background: rgba(18, 16, 14, .7); box-shadow: inset 0 0 0 1.5px rgba(242, 240, 235, .95); pointer-events: none; }
.lt-etiquette { position: absolute; top: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(18, 16, 14, .6); color: var(--papier);
  font: 500 11px/1.2 var(--mono); letter-spacing: .06em; pointer-events: none; }
.lt-etiquette[hidden] { display: none; }
.lt-avant { left: 10px; }
.lt-apres { right: 10px; }

/* La forme d'onde : sous l'image, à sa largeur, colonne par colonne ; graduée 0 / 25 / 50 / 75 / 100 % ;
   le trait avant / après la suit */
.lt-onde { --coupe: 50%; position: relative; width: 100%; height: clamp(110px, 18vh, 150px); margin: -10px auto 0; border-radius: 12px; overflow: hidden;
  background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px var(--filet); }
.lt-onde[hidden] { display: none; }
.lt-onde-zone { position: absolute; inset: 9px 0; }   /* toute la largeur : les colonnes tombent sous celles de l'image */
.lt-onde canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lt-grad { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(242, 240, 235, .14); pointer-events: none; }
.lt-grad i { position: absolute; left: 5px; top: -5px; font: 500 9px/1 var(--mono); font-style: normal; color: var(--texte2); }
.lt-onde-coupe { position: absolute; top: 0; bottom: 0; left: var(--coupe); width: 1px; background: rgba(242, 240, 235, .35); pointer-events: none; }
.lt-onde-coupe[hidden] { display: none; }

/* La note : hauteur fixe (3 lignes), rien ne bouge quand elle change */
.lt-note { height: 3lh; text-wrap: balance; }
.lt-actions { display: flex; justify-content: center; }
.lt-actions .pastille:hover { translate: none; }

/* Les LUTs importées : marquées d'un point pêche dans les listes, et rangées avec un bouton pour les retirer */
.lt-perso::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--peche); vertical-align: middle; }
.lt-imports { display: flex; flex-wrap: wrap; gap: 10px; }
.lt-imports .pastille { cursor: pointer; }
.lt-imports .pastille:hover { translate: none; }
.lt-mienne { align-items: center; cursor: default; }
.lt-mienne .val { margin-left: auto; }
.lt-retirer { border: 0; background: none; padding: 6px; margin-right: -6px; color: var(--texte2); cursor: pointer; display: grid; place-items: center; }
.lt-retirer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lt-retirer:hover { color: var(--peche); }