/* Outil · Signature mail (Email signature) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : sg-
   À gauche : l'aperçu sur fond blanc (comme dans un e-mail ; zone de hauteur fixe), l'info, les trois exports.
   À droite : les champs (Toi, Contact, En plus), le modèle, la couleur d'accent. Au téléphone, les champs d'abord. */
.sg .outil-fixe { align-items: stretch; }
.sg-apercu { position: relative; height: 260px; border-radius: 14px; background: #ffffff; overflow: auto; display: flex; align-items: center; padding: 24px 26px; }
.sg-papier { min-width: 0; color: #111111; }
.sg-papier a { pointer-events: none; }   /* l'aperçu ne s'ouvre pas : il se copie */
.sg-vide { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font: var(--valeur); letter-spacing: .06em; color: #8a8a8a; }
.sg-vide[hidden] { display: none; }
.sg-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.sg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sg-actions .pastille { cursor: pointer; }
.sg-actions .pastille:hover { translate: none; }
.sg-actions .pastille:disabled { opacity: .3; cursor: default; }

.sg-bloc { display: flex; flex-direction: column; gap: 10px; }
.sg-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sg-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sg-champ > span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-eteint { opacity: .3; pointer-events: none; transition: opacity .4s var(--courbe); }

/* Les couleurs : des ronds, puis « la tienne » (sélecteur du système) et son code */
.sg-couleurs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sg-pastille { position: relative; 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); transition: box-shadow .25s var(--courbe); }
.sg-pastille[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 4px var(--noir); }   /* l'anneau à l'intérieur : rien ne dépasse, rien n'est coupé */
.sg-perso { background: conic-gradient(#ff5a1f, #f5c518, #16a34a, #1f6feb, #7c3aed, #ff5a1f); overflow: hidden; }
.sg-perso[aria-pressed="true"] { background: var(--c); }
.sg-perso input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.sg-couleurs code { font: var(--valeur); letter-spacing: .06em; color: var(--texte2); margin-left: 4px; }

@media (max-width: 959px) {
  .sg-bloc, .sg .outil-defile > div:not(.sg-bloc) { order: -1; }
  .sg-apercu { height: 230px; padding: 18px; }
}