/* M4 — Modèles de mails et tableau de bord. Règles préfixées par .m4 (CONTRAT.md § 8) ; variables de socle.css. */

/* ---- Tableau de bord ---- */
.m4-periode{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sm);margin:0 0 var(--md)}
.m4-periode input[type=date]{width:auto;min-height:40px}
.m4-periode span{color:var(--texte-2);font-size:13px}

.m4-entonnoir{display:grid;gap:6px;margin:var(--sm) 0}
.m4-barre{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:var(--sm);min-height:32px}
.m4-barre .lbl{font-size:13px;color:var(--texte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m4-barre .piste{background:var(--surface-2);border-radius:999px;height:14px;overflow:hidden}
.m4-barre .remplissage{display:block;background:var(--primaire);height:100%;border-radius:999px;min-width:3px;transition:width .3s}
.m4-barre .val{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}

.m4-listes-taches{display:grid;gap:var(--md)}
@media (min-width:700px){.m4-listes-taches{grid-template-columns:repeat(2,minmax(0,1fr))}}

.m4-perf td.num,.m4-perf th.num{white-space:nowrap}

/* ---- Modèles de mails ---- */
.m4-modeles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sm)}
.m4-modele-ligne{display:flex;align-items:center;gap:var(--sm);flex-wrap:wrap}
.m4-modele-ligne .principal{flex:1 1 220px}
.m4-modele-ligne .pastille{flex:none}

.m4-editeur{display:grid;gap:var(--sm)}
.m4-editeur textarea{min-height:160px;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.m4-variables{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 var(--sm)}
.m4-variable{min-height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--bord-fort);background:var(--surface);
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--primaire);cursor:pointer}
.m4-variable:hover{background:var(--primaire-clair)}

/* ---- Préparer / envoyer un mail (fenêtre) ---- */
.m4-envoi{display:grid;gap:var(--sm)}
.m4-envoi textarea{min-height:220px}
.m4-envoi .m4-manquantes{font-size:13px}
.m4-envoi .m4-pieces{display:grid;gap:4px;margin:4px 0}
.m4-envoi .m4-piece{display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px}
.m4-envoi .m4-boite-etat{font-size:13px;color:var(--texte-2)}
.m4-envoi .m4-boite-etat.ok{color:var(--ok)}

@media (max-width:389px){.m4-barre{grid-template-columns:90px 1fr auto}}