/* Outil · SVG text (Texte SVG) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ts- */

/* Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : l'aperçu, l'info et l'export, puis les réglages. Ordinateur : aperçu et export à gauche, réglages à droite. */
.ts .outil-fixe { align-items: center; }

/* Aperçu : le SVG sur un damier (la transparence), comme Letterbox ; damier clair derrière un texte foncé */
.ts-zone { width: 100%; height: clamp(160px, 28vh, 260px); display: grid; place-items: center; padding: 18px; border-radius: 16px;
  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: background-color .3s var(--courbe); }
.ts-zone.clair { background-color: #e9e6df; background-image: conic-gradient(#d9d5cc 25%, transparent 0 50%, #d9d5cc 0 75%, transparent 0); }
@media (min-width: 960px) { .ts-zone { height: min(48vh, 460px); } }
.ts-apercu { width: 100%; height: 100%; display: grid; place-items: center; }
.ts-apercu svg { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.ts-manque:empty { display: none; }
.ts-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ts-actions .pastille:hover { translate: none; }

/* Polices : chaque nom écrit dans sa police (un peu plus grand pour qu'on la voie) */
.ts-police { font-size: 14px; letter-spacing: 0; }
.ts-importer { margin-top: var(--dans-groupe); cursor: pointer; }
.ts-importer:hover { translate: none; }

/* Couleur : noir, blanc, ou un HEX ; une pastille de la couleur dans chaque puce */
.ts-couleurs { display: flex; flex-direction: column; gap: var(--dans-groupe); }
.ts-couleurs .puce { display: inline-flex; align-items: center; gap: 8px; }
.ts-couleurs .puce i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--filet); }
.ts-hex { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; }