/* ==========================================================================
   Écrire un mail
   --------------------------------------------------------------------------
   La fenêtre tient dans l'écran, bouton d'envoi compris. Ce n'est pas une
   coquetterie : elle porte six champs depuis le 6 octobre 2026 — destinataire,
   copie, copie cachée, modèle, objet, message — et chacun d'eux traînait sa
   ligne d'aide. Le bouton « Envoyer » passait sous le pli, et l'on écrivait un
   message sans voir comment l'envoyer.

   Trois réglages suffisent : les copies partagent une ligne, les aides
   deviennent des légendes d'une ligne, et le message fait sept lignes. Tout le
   reste est le style ordinaire de l'application.
   ========================================================================== */

.mail__formulaire { gap: calc(var(--pas) * 2); }

/* Les aides passent de « paragraphe » à « légende » : même rôle, deux fois
   moins de hauteur. Elles se tronquent plutôt que de passer à la ligne —
   une aide qui déborde n'apprend rien de plus. */
.mail__aide {
  margin-top: 2px;
  font-size: 0.72rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Copie et copie cachée côte à côte : deux champs rarement remplis n'ont pas à
   coûter deux lignes chacun. Ils se remettent l'un sous l'autre quand la place
   manque — sur un téléphone, la largeur est le bien rare, pas la hauteur. */
.mail__copies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--pas) * 2);
}

@media (max-width: 560px) {
  .mail__copies { grid-template-columns: 1fr; }
}

/* Le bandeau « la boîte n'est pas connectée » est un rappel, pas un discours :
   il se resserre pour ne pas manger la place du message. */
.mail__bandeau {
  padding: calc(var(--pas) * 1.5) calc(var(--pas) * 2);
  font-size: 0.8rem;
}

.mail__bandeau p { margin: 0; }