/* ═══════════════════════════════════════════════════════════════════════════
   SOMA — LE COMPOSITEUR DE MAIL, LE COMPOSANT PARTAGÉ
   ───────────────────────────────────────────────────────────────────────────
   GO Maxime, 24/08 : « c'est tellement mieux ! ça je le veux partout partout,
   on doit avoir QU'UN modal mail. »
   Mockup-loi : mockups/modale-mail-SIG-2026-08-24.html — les valeurs ci-dessous
   sont RELEVÉES dessus, pas réinterprétées.

   CE QUE LE RECENSEMENT (lot 0) A TROUVÉ, et qui justifie ce fichier :
   **13 compositeurs**, pas 4. ~3 850 lignes de CSS mail, dont ~2 400 noyées
   dans des fichiers de module — le plus gros bloc fait 1 030 lignes mêlées au
   reste du Commercial. Et **trois compositeurs n'ont AUCUNE classe** : leur
   style est écrit en dur dans le JavaScript.

   ⚠️ CE COMPOSANT NE CHANGE QUE LE DESSIN. Aucun comportement, aucun
   destinataire, aucun objet, aucun garde-fou. Le ticket l'interdit, et ce
   chemin envoie de vrais mails à de vrais clients : une erreur ici ne se
   rattrape pas.

   ⚠️ IL NE PRÉTEND PAS ÊTRE IDENTIQUE PARTOUT. Les contextes diffèrent —
   l'objet est VERROUILLÉ sur l'envoi d'un devis (décision Maxime du 07/07,
   gravée mécaniquement dans js/email.js:353), LIBRE sur un mail perso ; le
   destinataire est imposé sur une relance, saisi sur un mail libre. Ce sont
   des OPTIONS du composant, pas des variantes de dessin. Un compositeur qui
   se prétendrait identique partout casserait le verrou d'objet du devis.

   LES 9 CORRECTIONS DU MOCKUP, chacune adossée à une règle déjà écrite :
     ① le bouton « Réécrire » noir plein → secondaire clair (le noir plein est
        banni de SOMA depuis le 24/08 au matin, sonde grammaire faute ②) ;
     ② trois styles de bouton dans le pied → deux, même forme, même hauteur,
        UN SEUL vert plein : Envoyer (§ 8.6) ;
     ③ quatre étages de petit texte gris → UNE ligne d'état. Ce que SOMA fait
        toujours n'a pas besoin d'être annoncé à chaque fois ;
     ④ « CC » en boîte et « À » en ligne → trois lignes IDENTIQUES ;
     ⑤ le corps encadré → sans bordure (§ 8.9 : pas de contour dans un contour) ;
     ⑥ le champ de réécriture cerclé de vert → neutre sur bande grise. Le vert
        est réservé aux gestes décisifs ;
     ⑦ deux signaux verts pour la même chose → le trait reste, la pastille part ;
     ⑧ le mode test noyé dans une phrase → une PILULE AMBRE. C'est
        l'information la plus importante de l'écran : rien ne part chez le client ;
     ⑨ trois rayons mélangés (14, 8, 8) → deux : modale 12 px, pilules ailleurs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ LA COQUILLE ═════════════════════════════════════════════════════════ */
.smail-ov {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(13, 27, 15, .32); backdrop-filter: blur(8px);
}
.smail {
  width: 600px; max-width: 100%;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  /* ⑨ UN seul rayon pour la modale — 12 px. Pas 14, pas 8. */
  border-radius: var(--soma-r-md, 12px);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(13, 27, 15, .10);
}

/* ══ LE BLOC TITRE ═══════════════════════════════════════════════════════ */
.smail-h { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 12px; border-bottom: 1px solid var(--border); }
/* ⑦ LE TRAIT VERT, et lui seul. La pastille verte « Mail libre » disparaît :
   deux signaux verts qui disent tous deux « c'est ouvert », c'est un de trop. */
.smail-h .smail-bar { width: 3px; align-self: stretch; background: var(--green); border-radius: 2px; flex: none; }
.smail-h .smail-tt { flex: 1; min-width: 0; }
/* ⚠️ `display: block` OBLIGATOIRE — ce sont des <span>, donc en ligne par
   défaut : sans ça le sous-titre se colle au titre sur la même ligne
   (« Relance préparée J+21 · rien ne part sans ton clic »), mesuré au banc. */
.smail-h .smail-tt { display: block; }
.smail-t1 { display: block; font-size: 16px; font-weight: 900; letter-spacing: -.015em; line-height: 1.2; color: var(--text); }
.smail-t2 { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* LA CROIX : RONDE ET BORDÉE — et je corrige MA lecture.
   Maxime a dit « tu mets un carré mais là il y a même pas de contour » : j'ai
   entendu « pas de contour » et je l'ai faite nue. Le mockup dit autre chose,
   vérifié dans le fichier : `border-radius:100px; border:1px solid var(--border);
   background:#fff`. Ce qu'il montrait du doigt, c'était le CARRÉ — pas la
   bordure. Une croix ronde bordée, comme partout ailleurs dans SOMA. */
.smail-x {
  width: 26px; height: 26px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text2); font-family: inherit; font-weight: 900; font-size: 13px;
  cursor: pointer; flex: none; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.smail-x:hover { border-color: var(--green-border, rgba(47, 191, 122, .38)); color: var(--text); }

/* ══ LES CHAMPS — ④ TROIS LIGNES IDENTIQUES ══════════════════════════════
   « À », « CC » et « Objet » ont exactement la même forme : libellé SIG à
   gauche, valeur à droite, filet fin dessous. AUCUNE boîte. C'est la même
   grammaire que la ligne SIG des listes — même hiérarchie par la graisse. */
.smail-champs { padding: 2px 18px 0; }
.smail-ch { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.smail-lab { width: 52px; flex: none; font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.smail-val { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text); }
/* Un champ VIDE dit son état, il ne se laisse pas deviner (§ 8.9). */
.smail-val.est-vide { font-weight: 400; color: var(--muted2, rgba(122, 148, 128, .5)); }
/* Un champ VERROUILLÉ le dit aussi — l'objet du devis, par exemple. */
.smail-val.est-verrou { color: var(--text2); }
.smail-val.est-verrou::after { content: ' · imposé'; font-size: 11px; font-weight: 700; color: var(--muted2, rgba(122, 148, 128, .5)); letter-spacing: 0; }
/* Une valeur SAISISSABLE reste une ligne, jamais une boîte. */
.smail-val input,
.smail-val [contenteditable] { width: 100%; border: 0; background: none; padding: 0; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text); }
.smail-val input:focus, .smail-val [contenteditable]:focus { outline: none; }
.smail-val input::placeholder { font-weight: 400; color: var(--muted2, rgba(122, 148, 128, .5)); }
.smail-add { border: none; background: none; font-family: inherit; font-size: 12px; font-weight: 800; color: var(--text2); cursor: pointer; padding: 0; }
.smail-add:hover { color: var(--text); }

/* ══ LE CORPS — ⑤ SANS BORDURE ═══════════════════════════════════════════
   § 8.9 : on ne met pas un contour dans un contour. Les filets suffisent. */
.smail-corps { flex: 1; overflow-y: auto; padding: 14px 18px 4px; min-height: 150px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.smail-corps:focus { outline: none; }
.smail-corps .est-vide { color: var(--muted2, rgba(122, 148, 128, .5)); }

/* ══ LA BANDE DE RÉÉCRITURE — ⑥ NEUTRE, ① SANS NOIR ══════════════════════ */
.smail-soma { display: flex; align-items: center; gap: 9px; padding: 10px 18px; border-top: 1px solid var(--border); background: var(--grey-soft); }
.smail-soma input {
  flex: 1; height: 32px; border: 1px solid var(--border); border-radius: 100px;
  background: var(--card); padding: 0 14px; font-family: inherit; font-size: 12.5px; color: var(--text);
}
.smail-soma input::placeholder { color: var(--muted2, rgba(122, 148, 128, .5)); }
.smail-soma input:focus { outline: none; border-color: var(--green-border, rgba(47, 191, 122, .38)); }

/* ══ LES BOUTONS — ② DEUX FORMES, UN SEUL VERT PLEIN ═════════════════════ */
.smail-bt {
  height: 34px; padding: 0 16px; border-radius: 100px; border: none;
  background: var(--green); color: var(--card);
  font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.smail-bt:disabled { opacity: .4; cursor: not-allowed; }
/* Le secondaire : même forme, même hauteur, fond clair. C'est ce qui remplace
   le bouton NOIR de « Réécrire » et le lien souligné du pied. */
.smail-bt--pale { background: var(--card); border: 1px solid var(--border); color: var(--text2); }
.smail-bt--pale:hover:not(:disabled) { border-color: var(--green-border, rgba(47, 191, 122, .38)); color: var(--text); }
/* La version courte, pour la bande de réécriture */
.smail-bt--court { height: 32px; padding: 0 14px; font-size: 12px; }

/* ══ LE PIED — ③ UNE SEULE LIGNE D'ÉTAT ══════════════════════════════════ */
.smail-pied { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); }
.smail-etat { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.smail-etat b { color: var(--text2); font-weight: 800; }

/* ⑧ LE MODE TEST — une PILULE AMBRE, pas une phrase noyée.
   C'est l'information la plus importante de l'écran : rien ne part chez le
   client. Ambre et non rouge : le rouge dit « ça réclame », l'ambre dit
   « attention, sache-le » (règle ratifiée par Maxime le 24/08 au matin). */
.smail-pill { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 100px; font-size: 10.5px; font-weight: 900; }
.smail-pill--test { background: var(--yellow-soft, rgba(201, 120, 0, .11)); color: var(--yellow); }

/* ══ LA BASCULE ÉCRAN SERRÉ ══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .smail-ov { padding: 0; }
  .smail { width: 100%; max-height: 100vh; border-radius: 0; border: 0; }
  /* Le libellé passe au-dessus : à 52 px de large, « OBJET » écrase la valeur
     sur un téléphone. La grammaire tient, la colonne cède. */
  .smail-ch { flex-direction: column; align-items: stretch; gap: 3px; }
  .smail-lab { width: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES ADAPTATEURS — pour migrer sans réécrire le markup (24/08)
   ───────────────────────────────────────────────────────────────────────────
   POURQUOI. Le compositeur du Commercial fait 1 450 lignes et porte des
   garde-fous réels : regex sur l'adresse, plafonds de pièces jointes, auto-CC
   MOA, correction d'adresse après rebond, préviz fidèle. **Réécrire son markup
   d'un bloc, sur le chemin qui envoie de vrais mails à de vrais clients,
   serait le geste le plus risqué de la journée.**

   Alors on ne le réécrit pas : on lui POSE les classes du composant à côté des
   siennes, et on rend le composant capable d'habiller la structure qu'il a
   déjà. Chaque `id`, chaque `onclick`, chaque écouteur reste EXACTEMENT en
   place — donc chaque garde-fou aussi.

   C'est la méthode qui a marché ce matin sur les onglets : classe partagée
   posée, habillage maison neutralisé, zéro comportement touché.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Un <dialog> natif porte lui-même la coquille (pas d'overlay à fabriquer) */
dialog.smail { padding: 0; }
dialog.smail::backdrop { background: rgba(13, 27, 15, .32); backdrop-filter: blur(8px); }

/* ⚠️ La ligne de champ doit accepter un <input> ou un <textarea> DIRECT, sans
   le <span class="smail-val"> que le moteur pose. Sinon il faudrait déplacer
   chaque champ — et c'est précisément ce qu'on refuse de faire ici. */
.smail-ch > input,
.smail-ch > textarea,
.smail-ch > .smail-val input,
.smail-ch > .smail-val textarea {
  flex: 1; min-width: 0;
  border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text);
  resize: none;
}
.smail-ch > input:focus, .smail-ch > textarea:focus { outline: none; }
.smail-ch > input::placeholder, .smail-ch > textarea::placeholder {
  font-weight: 400; color: var(--muted2, rgba(122, 148, 128, .5));
}

/* Le corps en <textarea> : même absence de bordure que le corps éditable (⑤) */
textarea.smail-corps { width: 100%; border: 0; background: none; resize: vertical; font-family: inherit; }
textarea.smail-corps:focus { outline: none; }
textarea.smail-corps::placeholder { color: var(--muted2, rgba(122, 148, 128, .5)); }

/* Une zone de champs qui contient AUSSI des blocs hors-ligne (pastilles CC,
   pièces jointes, avertissements) : ils s'alignent sur la colonne des valeurs
   au lieu de flotter n'importe où. */
.smail-champs .smail-hors { padding: 8px 0 8px 66px; font-size: 12px; color: var(--muted); }
.smail-champs .smail-hors:empty { display: none; }


/* La ligne d'état ne coupe pas une adresse en plein milieu — elle enveloppe
   aux espaces, et laisse l'adresse entière (constat au banc : « m.danna@menui
   series-artois.fr » cassé en deux). */
.smail-etat { overflow-wrap: break-word; }
.smail-etat b { white-space: nowrap; }
/* La croix reprend sa place à droite du titre, quelle que soit la structure
   d'origine du compositeur migré. */
.smail-h .smail-x { margin-left: auto; align-self: flex-start; }


/* LE PIED ACCEPTE UN GESTE LARGE — le glisser-pour-envoyer du devis.
   ⚠️ Deux erreurs de suite ici, les deux vues à l'écran et pas dans le code :
     · d'abord le geste se repliait sur trois lignes (« Glissez / pour /
       envoyer ») parce que la ligne d'état lui mangeait la largeur ;
     · puis mon `flex: none` l'a réduit à DEUX PIXELS — ses enfants sont
       positionnés en absolu, il n'a donc aucune largeur propre. L'original
       lui donnait `flex: 1`, et il en a besoin.
   Un dispositif de sécurité illisible n'en est plus un : la ligne d'état prend
   sa PROPRE ligne, le geste garde toute la largeur en dessous. */
.smail-pied { flex-wrap: wrap; }
.smail-pied .smail-etat { flex: 1 0 100%; }
.smail-pied > .slide-to-send { flex: 1; min-width: 200px; }


/* ═══════════════════════════════════════════════════════════════════════════
   CONFORMITÉ STRICTE AU MOCKUP — ordre Maxime du 24/08 :
   « je le veux strictement conforme, même taille, même couleur ».
   Les valeurs ci-dessous sont RELEVÉES dans mockups/modale-mail-SIG-2026-08-24
   et vérifiées au navigateur, pas estimées.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le champ de réécriture : BLANC et en PILULE. Il était en vert pâle
   (rgba(237,250,243,.55)) avec un rayon de 12 px — « il est vert pisseux ».
   Le vert est réservé aux gestes décisifs : encadrer une saisie en vert, c'est
   crier pour rien (correction ⑥). */
.smail-soma input,
.smail-soma .com-mp-input {
  flex: 1; height: 32px;
  border: 1px solid var(--border); border-radius: 100px;
  background: var(--card); padding: 0 14px;
  font-family: inherit; font-size: 12.5px; font-style: normal; color: var(--text);
}

/* Le corps : les valeurs du mockup, et RIEN d'autre. Il gardait sa bordure,
   son rayon 14 et un fond translucide — trois décorations dans un contour. */
.smail-corps, textarea.smail-corps {
  padding: 14px 18px 4px;
  min-height: 150px;
  font-size: 13.5px;
  line-height: 1.6;
  border: 0; border-radius: 0; background: none;
}

/* Le pied : 12/18, comme le mockup. Il avait 14px 20px 10px. */
.smail-pied { padding: 12px 18px; gap: 10px; }


/* ═══════════════════════════════════════════════════════════════════════════
   LES 11 FINITIONS DU RELEVÉ D'ÉCARTS (24/08) — valeurs relevées, pas estimées
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① LES TROIS LIBELLÉS EN CAPITALES, SANS EXCEPTION.
   « À » et « CC » l'étaient, « Objet » non : trois libellés, deux casses. */
.smail-lab, .smail-ch > label, .smail-ch .com-mp-inline-label, .smail-ch .mail-row-label {
  width: 52px; flex: none;
  font-size: 11px; font-weight: 900; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}

/* ② LE SOUS-TITRE : UNE SEULE GRAISSE, muted (§ 8.8).
   Il portait trois graisses et se battait avec le titre. */
.smail-t2, .smail-t2 b, .smail-t2 strong, .smail-t2 span {
  font-size: 11.5px; font-weight: 400; color: var(--muted);
}

/* ⑤ AUCUN ITALIQUE PÂLE DANS LA MODALE — c'est exactement ce qu'on retire de
   SOMA. Le placeholder et les mentions restent droits. */
.smail input::placeholder, .smail textarea::placeholder,
.smail .est-vide, .smail em, .smail i { font-style: normal; }

/* ⑦ LES PILULES CC EN GRIS — le vert est réservé aux gestes décisifs (§ 8.6).
   Un destinataire n'est pas un geste. UNE seule graisse forte par pilule. */
.smail .com-mp-cc-pill {
  background: var(--grey-soft); color: var(--text);
  border: 0; border-radius: 100px;
  height: 22px; padding: 0 4px 0 8px; font-size: 11.5px;
  display: inline-flex; align-items: center; gap: 5px;
}
.smail .com-mp-cc-pill-src {
  font-weight: 900; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: none; padding: 0;
}
.smail .com-mp-cc-pill-email { font-weight: 700; color: var(--text); }
.smail .com-mp-cc-pill-x { border: 0; background: none; color: var(--muted); cursor: pointer; }
.smail .com-mp-cc-pill-x:hover { color: var(--red); }

/* ⑧ « Auto-CC MOA » PASSE SOUS LES PILULES, aligné sur la colonne des valeurs.
   C'est un réglage, pas une action : il ne prend pas la vedette. */
.smail .com-mp-autocc {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0 0 66px; font-size: 11.5px; color: var(--muted); cursor: pointer;
}

/* ⑪ LA DENSITÉ — c'est elle qui fait « sérieux », pas l'espace.
   Les lignes faisaient 45-50 px ; le mockup est à 9 px de padding. */
.smail-ch { padding: 9px 0; min-height: 0; }


/* Une ligne de champ posée HORS du bloc `.smail-champs` (la PJ, qui vit après
   le corps) reprend son alignement horizontal : sinon elle colle au bord et
   ses trois parties s'empilent. Mesuré à l'écran, pas supposé. */
.smail > .smail-ch, .smail-corps ~ .smail-ch { padding-left: 18px; padding-right: 18px; }


/* ═══════════════════════════════════════════════════════════════════════════
   PASSE 3 (Cowork, 24/08) — trois corrections faites sur constat à l'écran.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① LE DÉBORDEMENT. `.com-mp-body` portait son padding horizontal dans
   `commercial-actions.css` ; cette règle a été neutralisée le 24/08, et
   `.smail-champs` (qui devait la remplacer) N'EST PAS dans le markup — les
   lignes de champ se sont donc collées au bord de la modale, libellés coupés.
   Le padding horizontal se pose UNE fois, sur le conteneur. Jamais sur la ligne. */
.smail .com-mp-body { padding: 2px 18px 0; }

/* ② LA BANNIÈRE JAUNE n'est pas une alarme : c'est l'ÉTAT du champ « À ».
   Elle coupait la colonne des champs en deux (À · PAVÉ · CC · OBJET) et
   l'œil perdait l'alignement. Elle devient une sous-ligne, alignée sur la
   colonne des valeurs (52 px de libellé + 14 px de gouttière = 66 px).
   AUCUN fond, AUCUNE bordure, AUCUNE pleine largeur. */
.smail .com-mp-warn-email {
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 0 9px;
  margin: -4px 0 0 66px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--yellow);
  border-bottom: 1px solid var(--border);
}

/* ③ Idem pour l'avertissement de rebond, même famille, même grammaire. */
.smail .com-mp-rebond-hint {
  display: block;
  background: none;
  border: none;
  padding: 0 0 9px;
  margin: -4px 0 0 66px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--yellow);
  border-bottom: 1px solid var(--border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   PASSE 4 (Cowork, 24/08) — DEUX classes de l'ANCIENNE couche gagnaient encore.
   C'est ça, « trop large et c'est vert » : ce n'était pas du goût, c'était deux
   règles de `commercial-actions.css` qui écrasaient le composant.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① « TROP LARGE » — `.com-mp-dialog` impose 680 px et gagne sur `.smail`
   (chargé après, même spécificité). La modale validée fait 600. */
.smail.com-mp-dialog { width: 600px; max-width: calc(100vw - 48px); }

/* ② « C'EST VERT » — la croix. Trois sources de vert, toutes de l'ancienne
   couche : le hover, le halo de focus (visible dès l'ouverture, car le bouton
   prend le focus) et les éclats `com-mp-close-shard` en vert pâle.
   Le focus reste VISIBLE — c'est une règle d'accessibilité — mais en neutre. */
.smail .com-mp-close,
.smail .smail-x { border: 1px solid var(--border); background: var(--card); color: var(--text2); }
.smail .com-mp-close:hover,
.smail .smail-x:hover { border-color: var(--text2); color: var(--text); background: var(--grey-soft); }
.smail .com-mp-close:focus-visible,
.smail .smail-x:focus-visible { outline: 2px solid var(--text2); outline-offset: 2px; border-color: var(--text2); }
.smail .com-mp-close-shard { display: none; }

/* ③ « TOUT LE FOND EST BLANC » — la modale est un pavé blanc sans structure.
   En grammaire SIG, la structure vient des BANDES grises : la zone
   d'assistance en a déjà une, le pied (zone de service) en prend une aussi.
   La zone d'écriture reste blanche — c'est elle qui doit ressortir. */
.smail .smail-pied { background: var(--grey-soft); }


/* ═══════════════════════════════════════════════════════════════════════════
   PASSE 5 (Cowork, 24/08) — DEUX régressions provoquées par la passe 3/4.
   Je les corrige et je rends la main : je répare à l'aveugle, sans voir l'écran.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① LE DÉFILEMENT HORIZONTAL (contenu coupé à gauche, ascenseur en bas).
   Cause exacte : `.com-mp-autocc` porte `margin-left: auto` + `white-space: nowrap`
   dans l'ancien CSS. Sur une modale à 600 px, la case « Auto-CC MOA sur cette
   affaire » ne peut pas tenir sur la même ligne que les pastilles CC — elle
   pousse la rangée au-delà du conteneur, et TOUT le corps se met à défiler.
   → Elle passe SOUS les pastilles, sur sa propre ligne, alignée sur la colonne
   des valeurs. Ce n'est pas une action, c'est un réglage : il ne prend pas la
   vedette (écart n°8 du relevé de la passe 1, jamais appliqué). */
.smail .com-mp-cc-row { flex-wrap: wrap; }
.smail .com-mp-cc-box { min-width: 0; }
.smail .com-mp-autocc {
  margin: 6px 0 0 66px;
  flex: 0 0 100%;
  white-space: normal;
  text-transform: none;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
}

/* Ceinture : plus rien ne déborde horizontalement du corps. */
.smail .com-mp-body { overflow-x: hidden; }
.smail .smail-ch { min-width: 0; }
.smail .smail-val { overflow-wrap: anywhere; }

/* ② LE LISERÉ BLEU autour de la modale. C'est le halo de focus par défaut du
   navigateur sur l'élément `<dialog>` lui-même. Un conteneur n'est pas un
   contrôle : il n'a pas à porter un anneau de focus. Les BOUTONS, eux, gardent
   le leur (accessibilité) — voir la passe 4. */
.smail:focus, .smail:focus-visible { outline: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   LES 3 DERNIERS POINTS DU RELEVÉ — jamais faits en 5 passes (24/08)
   Ils échouaient tous les trois pour la MÊME raison : mes règles visaient
   `.smail-lab` et `.smail-ch`, mais les compositeurs migrés portent AUSSI
   leurs classes maison, et certaines règles legacy plus spécifiques
   (`.com-mp-consigne-row .com-mp-inline-label`, `.mail-row-label`) gagnaient.
   Ici on vise les deux, avec la spécificité du composant.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ③ LES TROIS VALEURS ALIGNÉES AU MÊME X — c'est la largeur FIXE du libellé
   qui l'obtient, et elle doit gagner sur toutes les variantes maison. */
.smail .smail-lab,
.smail .com-mp-inline-label,
.smail .mail-row-label,
.smail .nogo-mail-lbl,
.smail-ch > label {
  width: 52px !important;
  flex: 0 0 52px;
  font-size: 11px; font-weight: 900; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  text-align: left;
}

/* ② LA DENSITÉ — 9 px, pas 45. C'est la densité qui fait « sérieux ». */
.smail .smail-ch,
.smail .com-mp-row,
.smail .mail-row {
  padding-top: 9px; padding-bottom: 9px;
  min-height: 0; align-items: baseline;
}

/* ① LA CROIX RONDE ET BORDÉE — la référence du mockup, sans les éclats morts */
.smail .smail-x, .smail .com-mp-close {
  width: 26px; height: 26px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text2); font-weight: 900; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; overflow: visible;
}
.smail .com-mp-close-x { color: var(--text2); opacity: 1 !important; font-size: 13px; }


/* LE CHAMP CC ÉTAIT DÉCALÉ DE 6 PX — et la cause n'était pas celle que je
   croyais. Les CONTENEURS sont bien tous à 875 : c'est le TEXTE du CC qui
   commençait à 881. Le coupable : `.com-mp-cc-pills`, la zone des pastilles,
   reste dans le flux même VIDE, et l'espacement de 6 px de son parent pousse
   le placeholder d'autant.
   Deux leçons dans un même bug : mesurer là où l'ŒIL SE POSE (le texte, pas la
   boîte — mon contrôle précédent disait « alignés » et Maxime voyait le
   contraire), et se méfier d'un conteneur vide qui occupe encore sa place. */
.smail .com-mp-cc-input { padding: 0; border: 0; background: none; }
.smail .com-mp-cc-pills:empty { display: none; }


/* LE CORPS ÉTAIT À 36 PX DU BORD, LES LIBELLÉS À 18 — un DOUBLE rembourrage :
   le conteneur `.com-mp-row-corps` en ajoutait un par-dessus celui du
   textarea. Dans le mockup, le corps et les libellés partent du MÊME x : c'est
   ce qui fait tenir la colonne de gauche. Mesuré, corrigé, remesuré. */
.smail .com-mp-row-corps,
.smail .mail-corps-wrap { padding: 0; margin: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   UN SEUL NIVEAU PORTE LE RETRAIT — la cause des 36 px (24/08)
   ───────────────────────────────────────────────────────────────────────────
   Le corps et la bande de réécriture étaient à 36 px du bord au lieu de 18 :
   `.com-mp-body` porte 18 px (Cowork, passe 4, pour rattraper les libellés qui
   débordaient), et mes règles de composant en ajoutaient 18 de plus.
   Deux corrections justes qui s'additionnent font une faute.

   Le mockup ne nested rien : `.champs`, `.corps`, `.soma` et `.pied` sont
   FRÈRES, chacun avec ses 18 px. On reproduit ça : le bloc conteneur ne porte
   plus de retrait horizontal, chaque section le porte elle-même. Effet de bord
   voulu : la bande grise et le pied retrouvent la pleine largeur, bord à bord,
   comme dans le mockup.
   ═══════════════════════════════════════════════════════════════════════════ */
.smail .com-mp-body, .smail .mail-body, .smail .mail-fields { padding-left: 0; padding-right: 0; }
.smail .smail-ch { padding-left: 18px; padding-right: 18px; }