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

   Mise en page : la structure commune .outil-colonnes (app/kit.css), comme le Testeur de LUT.
   Téléphone : l'aperçu, l'info, la note, les boutons, puis les réglages. Ordinateur : l'aperçu à gauche, les réglages à droite. */
.fg .outil-fixe { align-items: stretch; }

/* L'aperçu : un cadre de taille fixe (4:3), l'image s'y loge (fond noir autour) ; maintenu = l'avant ; à 100 %, il se fait glisser
   quand l'image dépasse. Tout le bloc de gauche a des hauteurs fixes : rien ne bouge quand la photo ou les textes changent. */
.fg-cadre { position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #000;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.fg-cadre.deplacable { touch-action: none; cursor: grab; }
.fg-cadre.deplacable:active { cursor: grabbing; }
.fg-toile { display: block; width: 100%; height: 100%; }
.fg-avant { position: absolute; top: 10px; left: 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; }
.fg-avant[hidden] { display: none; }

/* Sous l'aperçu : 100 % / Ajusté en petit à gauche, retirer la photo à droite (place gardée même sans photo) */
.fg-barre { display: flex; align-items: center; justify-content: space-between; margin-top: -10px; }
.fg-vue { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); }
.fg-vue button { border: 0; background: none; border-radius: 999px; padding: 6px 12px; font: var(--valeur); line-height: 1; letter-spacing: .06em;
  color: var(--texte2); transition: background .4s var(--courbe), color .4s var(--courbe); }
.fg-vue button[aria-pressed="true"] { background: var(--papier); color: var(--noir); }
.fg-vue button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.fg-retirer { width: 32px; height: 32px; }
.fg-retirer.fg-cache { visibility: hidden; }

.fg-info { height: 2lh; overflow: hidden; }
.fg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fg-actions .pastille { cursor: pointer; }
.fg-actions .pastille:hover, .fg-plaque .pastille:hover { translate: none; }

/* La plaque de grain : un bloc à part, en bas des réglages */
.fg-plaque { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 8px; border-top: 1px solid var(--filet-doux); }
.fg-plaque .groupe { padding-bottom: 0; }
.fg-plaque .puces { align-self: stretch; }
.fg-plaque-note { margin: 0; font: 400 13px/1.5 var(--corps); color: var(--texte2); }