/* Outil · Lower thirds, id lowerthird : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : tb-
   À gauche : l'aperçu 16:9 (sur une image ou un damier), l'info, Exporter en PNG et le lien vers Safe zones.
   À droite : nom, fonction, style, couleur, position, taille, police, fond de l'aperçu, définition. */
.tb .outil-fixe { align-items: stretch; }
.tb-zone { border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.tb-zone canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.tb-info { flex: none; height: 1lh; margin: 0; overflow: hidden; }
.tb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tb-actions .pastille { cursor: pointer; }
.tb-actions .pastille:hover { translate: none; }
.tb-actions .pastille:disabled { opacity: .3; cursor: default; }
.tb-champs { display: flex; flex-direction: column; gap: 14px; }
.tb-couleurs { display: flex; gap: 10px; flex-wrap: wrap; }
.tb-pastille { width: 34px; height: 34px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px var(--filet); }
.tb-pastille[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 4px var(--noir); }
.tb-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tb .seg button { padding-inline: 4px; }
@media (max-width: 959px) { .tb-premier { order: -1; } }
@media (max-width: 559px) { .tb-deux { grid-template-columns: 1fr; } }