/* Outil · Safe zones : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : sz- */

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

/* Aperçu : le calque sur un damier discret (la transparence du PNG), sans contour */
.sz-zone { width: 100%; height: clamp(300px, 52vh, 460px); display: grid; place-items: center; }
@media (min-width: 960px) { .sz-zone { height: min(64vh, 640px); } }
.sz-apercu { display: block; border-radius: 10px;
  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; }

.sz-exporter:hover { translate: none; }

/* Tout en bas, en petit : la date de la dernière vérification des formats (les apps changent souvent) */
.sz-maj { margin: 0; padding-top: 8px; text-align: center; font: var(--repere); letter-spacing: .1em; color: var(--texte2); }