/* Outil · Légende (Caption) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : lg-
   À gauche, deux vues empilées dans la même case (la hauteur de la plus grande) : Légende (l'aperçu coupé comme dans le
   fil, puis les 10 réseaux : compte / limite, coupure) ou Fil (les posts, zone fixe qui défile) ; la ligne d'info ; Copier.
   À droite : le texte, le mode, son panneau (réseau de l'aperçu, ou limite du fil et numérotation). */
.lg .outil-fixe { align-items: stretch; }
.lg-vues { display: grid; }
.lg-vue { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lg-vue[hidden] { display: flex; visibility: hidden; }
.lg-carte { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.lg-carte .groupe { padding-bottom: 6px; }
.lg-apercu { margin: 0; height: 7.5em; overflow-y: auto; overscroll-behavior: contain; font: 400 14px/1.5 var(--corps); color: var(--papier); white-space: pre-wrap; overflow-wrap: anywhere; }
.lg-apercu b { font-weight: 400; color: var(--texte2); }
.lg-apercu s { text-decoration: none; color: var(--orange); }
.lg-gris { color: var(--texte2); }
.lg-ligne { height: 42px; }
.lg-ligne .val { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.lg-ligne .val b { font: 500 12.5px/1.2 var(--mono); color: var(--papier); font-variant-numeric: tabular-nums; }
.lg-ligne .val i { font: 400 10.5px/1.2 var(--corps); font-style: normal; color: var(--texte2); }
.lg-trop .val b, .lg-trop .val i { color: var(--orange); }
.lg-posts { height: 640px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
.lg-post { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.lg-post p { margin: 0; font: 400 13.5px/1.5 var(--corps); color: var(--papier); overflow-wrap: anywhere; }
.lg-post div { display: flex; justify-content: space-between; align-items: center; }
.lg-post span { font: 500 11px/1.2 var(--mono); color: var(--texte2); }
.lg-copier { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte2); }
.lg-copier svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-copier:hover { color: var(--peche); }
.lg-vide { margin: 40px 0; text-align: center; font: var(--valeur); letter-spacing: .06em; }
.lg-info { flex: none; height: 1lh; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lg-actions { display: flex; justify-content: center; }
.lg-actions .pastille { cursor: pointer; }
.lg-actions .pastille:hover { translate: none; }
.lg-actions .pastille:disabled { opacity: .3; cursor: default; }
.lg-zone { display: flex; flex-direction: column; }
.lg-texte { height: 260px; resize: none; font-size: 14.5px; line-height: 1.55; }
.lg-panneaux { display: grid; }
.lg-panneau { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; }
.lg-panneau[hidden] { display: flex; visibility: hidden; }
.lg-puces { flex-wrap: wrap; }
.lg-puces .puce { cursor: pointer; }
@media (max-width: 959px) {
  .lg-zone { order: -1; }
  .lg-texte { height: 180px; }
  .lg-posts { height: 480px; }
}