/* ============================================================================
   EasyEmailing — les écrans du module (Pages/Emailing). Géométrie seulement :
   les couleurs sont celles du gabarit, et l'aperçu d'un message prend le canevas
   CLAIR du navigateur — c'est un document étranger, rendu comme le destinataire
   le verra, et non une surface de la charte qui suivrait le thème.
   ============================================================================ */

.appgrid .eml-liste-choix {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.appgrid .eml-collage {
    width: 100%;
    min-height: 240px;
    font-family: var(--et-font-mono);
    font-size: 13px;
}

.appgrid .eml-rejets {
    max-height: 160px;
    overflow: auto;
    margin: 8px 0 12px;
    padding-left: 20px;
}

/* L'enregistrement DNS lu, tel quel : une clé DKIM tient sur des centaines de caractères sans espace. */
.appgrid .eml-dns-valeur {
    margin-top: 4px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* ---- La barre du groupe Contenu (l'éditeur lui-même : ecran-studio-emailing.css) ---- */
.appgrid .eml-contenu-outils { margin-top: 8px; }
/* Les listes de la barre (composition, modèle) prennent leur largeur, pas la ligne entière. */
.appgrid .eml-contenu-outils > .mx-select { width: auto; min-width: 200px; max-width: 100%; flex: 0 1 auto; }

.appgrid .eml-segment-compte { margin-left: 12px; }

/* Le délai d'une étape de scénario : un nombre court et son unité, sur une ligne. */
.appgrid .eml-delai { width: 96px; flex: 0 0 auto; }
.appgrid .eml-delai-unite { width: auto; min-width: 120px; flex: 0 1 auto; }
/* Le montant minimum d'un scénario « achat », suivi de son unité. */
.appgrid .eml-montant { width: 160px; flex: 0 0 auto; }

/* ---- Lot 4 : l'histogramme de l'analyse dans le temps ---- */
.appgrid .eml-histo {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 180px;
    padding: 12px 12px 0;
}

.appgrid .eml-histo-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.appgrid .eml-histo-zone {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    border-bottom: 1px solid var(--et-hairline);
}

.appgrid .eml-histo-barre { width: 40%; max-width: 18px; min-height: 0; }
.appgrid .eml-histo-barre.est-delivres,
.appgrid .eml-histo-pastille.est-delivres { background: var(--et-cat-1); }
.appgrid .eml-histo-barre.est-ouverts,
.appgrid .eml-histo-pastille.est-ouverts { background: var(--et-cat-2); }

.appgrid .eml-histo-lbl {
    padding-top: 4px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    color: var(--et-muted);
}

.appgrid .eml-histo-legende {
    display: flex;
    gap: 16px;
    padding: 8px 12px 12px;
    font-size: 12px;
}

.appgrid .eml-histo-pastille {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
}

@media (max-width: 1024px) {
    .appgrid .eml-redaction { grid-template-columns: minmax(0, 1fr); }
    .appgrid .eml-liste-choix { min-height: 44px; }
    .appgrid .eml-bloc-champs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    /* Douze mois sur 390 px : un libellé sur deux colonnes ne tient pas, on garde les barres. */
    .appgrid .eml-histo-lbl { font-size: 12px; writing-mode: vertical-rl; transform: rotate(180deg); height: 48px; }
    .appgrid .eml-segment-compte { display: block; margin: 8px 0 0; }
}

/* ---- La fiche d'un mailing modifiable (2026-10-10) : parcours, cartes de listes, colonne de contrôle ---- */

/* Le parcours en quatre étapes : des ancres dans la page, l'étape faite soulignée du bleu de contenu. */
.appgrid .eml-etapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    background: var(--et-surface);
    border-bottom: 1px solid var(--et-hairline);
    margin-bottom: 16px;
}
.appgrid .eml-etape {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    color: var(--et-ink);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}
.appgrid .eml-etape:hover { background: var(--et-rang); color: var(--et-ink); }
.appgrid .eml-etape.est-faite { border-bottom-color: var(--et-form-blue); }
.appgrid .eml-etape-num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--et-bord-champ);
    color: var(--et-ink);
}
.appgrid .eml-etape.est-faite .eml-etape-num {
    background: var(--et-form-blue);
    border-color: var(--et-form-blue);
    color: var(--et-sur-aplat);
}
.appgrid .eml-etape-txt { display: flex; flex-direction: column; min-width: 0; }
.appgrid .eml-etape-titre { font-size: 14px; font-weight: 600; }
.appgrid .eml-etape-etat { font-size: 12px; color: var(--et-muted); }
/* L'étape est un BOUTON depuis le 2026-10-25 : la fiche est en onglets, et l'étape ouvre le sien au
   lieu de faire défiler jusqu'à une ancre. L'étape ouverte prend l'aplat de la rangée survolée. */
.appgrid button.eml-etape { width: 100%; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; text-align: left; cursor: pointer; }
.appgrid button.eml-etape.est-faite { border-bottom-color: var(--et-form-blue); }
.appgrid .eml-etape[aria-current="step"] { background: var(--et-tint); }

/* UN INDICATEUR MÈNE À SON DÉTAIL (2026-10-25) : la valeur d'un fait de la bande ouvre l'onglet
   Envois, filtré sur ce qu'elle compte. C'est un bouton qui se lit comme la valeur : même chasse,
   même corps, le bleu des liens et le soulignement au survol pour dire qu'il s'ouvre. */
.appgrid .eml-fait-lien { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

.appgrid .eml-fiche-controle { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }

/* Le repli s'aligne sur la colonne des valeurs : 18 px de .mx-champ, 158 de libellé, 12 de gouttière. */
.appgrid .eml-suivi { margin: 4px 0 8px; }
.appgrid .eml-suivi > summary { margin-left: calc(18px + 158px + 12px); }
@media (max-width: 720px) { .appgrid .eml-suivi > summary { margin-left: 18px; } }
.appgrid .eml-suivi > summary {
    cursor: pointer;
    min-height: 32px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--et-lien);
}

/* Les listes de diffusion : une carte par liste, cochée = bordure et fond du bleu de contenu. */
.appgrid .eml-listes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    width: 100%;
}
.appgrid .eml-liste-carte {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 44px;
    padding: 10px 14px;
    text-align: left;
    font: inherit;
    color: var(--et-ink);
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    box-shadow: inset 0 0 0 1px transparent;
    border-radius: 0;
    cursor: pointer;
}
.appgrid .eml-liste-carte:hover:not(:disabled) { border-color: var(--et-form-blue); }
.appgrid .eml-liste-carte.est-choisie {
    border-color: var(--et-form-blue);
    box-shadow: inset 0 0 0 1px var(--et-form-blue);
    background: var(--et-tint);
}
.appgrid .eml-liste-carte:disabled { cursor: default; }
.appgrid .eml-liste-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.appgrid .eml-liste-tete > .bi { color: var(--et-form-blue-encre); font-size: 16px; }
.appgrid .eml-liste-nom { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.appgrid .eml-liste-nb { font-size: 18px; }
.appgrid .eml-liste-sous { font-size: 12px; color: var(--et-muted); }
.appgrid .eml-listes-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--et-rang);
    font-size: 14px;
}

/* La colonne de contrôle : deux cartes à bandeau ardoise. */
.appgrid .eml-carte { background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .eml-carte-titre {
    margin: 0;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    background: var(--et-table-head);
    color: var(--et-sur-ardoise-plein);
}
.appgrid .eml-boite { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.appgrid .eml-boite-initiale {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--et-tint);
    color: var(--et-form-blue-encre);
}
.appgrid .eml-boite-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.appgrid .eml-boite-de { font-size: 14px; font-weight: 700; }
.appgrid .eml-boite-sujet { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.appgrid .eml-boite-apercu { font-size: 13px; color: var(--et-muted); overflow-wrap: anywhere; }

.appgrid .eml-pret { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.appgrid .eml-pret > li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.appgrid .eml-pret > li > .bi { font-size: 16px; line-height: 1.3; }
.appgrid .eml-pret > li.est-fait > .bi { color: var(--et-succes-ink); }
.appgrid .eml-pret > li.est-a-faire > .bi,
.appgrid .eml-pret > li.est-a-faire > span { color: var(--et-avertissement-ink); }
.appgrid .eml-pret > li.est-a-faire > span { font-weight: 600; }

/* Règle tactile (docs/cibles-tactiles.md) : sous 1024 px, un lien de la fiche se touche sur 44 px. */
@media (max-width: 1024px) {
    .appgrid .eml-listes-total > a,
    .appgrid .eml-pret a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* LISTES DENSES, UNE LIGNE PAR CELLULE (2026-10-24, recette d'EasyPurchase) : un texte long
   (sujet, destinataires, fonction) tient sur sa ligne, coupé en fin ; l'info-bulle le donne
   entier (EmlColonne.Ligne). Mesuré au banc : des rangées de 51 à 158 px avant. */
.appgrid .eml-cellule {
    display: inline-block;
    vertical-align: bottom;
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appgrid .eml-cellule.est-court { max-width: 16ch; }

/* LES PIÈCES JOINTES D'UN MAILING (fiche du mailing, sous le contenu). Une ligne par fichier :
   icône, nom coupé en fin, taille, et le bouton de rangée du gabarit pour le retirer. */
.appgrid .eml-pj { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.appgrid .eml-pj-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--et-hairline); }
.appgrid .eml-pj-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--et-hairline);
}
.appgrid .eml-pj-ligne > .bi { color: var(--et-muted); font-size: 16px; }
.appgrid .eml-pj-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .eml-pj-taille { flex: none; color: var(--et-muted); font-size: 12px; }
/* Une cible ne rétrécit jamais (docs/cibles-tactiles.md) : la rangée flexible l'écrasait à 25 px de large à 390 px. */
.appgrid .eml-pj-ligne > .mx-tbl-btn { flex: none; }
.appgrid .eml-pj-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.appgrid .eml-pj-total { color: var(--et-muted); font-size: 13px; }
/* Le champ fichier est couvert par son libellé-bouton : un clic n'importe où sur le bouton l'ouvre. */
.appgrid .eml-pj-joindre { position: relative; overflow: hidden; cursor: pointer; }
.appgrid .eml-pj-joindre.est-inerte { opacity: 1; pointer-events: none; color: var(--et-faint); }
.appgrid .eml-pj-fichier { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (max-width: 1024px) {
    .appgrid .eml-pj-ligne { min-height: 52px; }
}

/* LES LISTES EN CARTES SOUS 1024 PX (banc du module, 2026-10-24). Le gabarit range la rangée en
   carte (.mx-liste-cartes, modele-erp.css § 11.x) ; ici, ce que nos cellules y deviennent :
   - la coupure en fin d'.eml-cellule est levée — la carte a la place que la colonne n'avait pas,
     et un sujet coupé par « … » est un sujet qu'on ne lit plus ;
   - un chiffre (.eml-chiffre, EmlColonne.Chiffre) est précédé du libellé de sa colonne : l'en-tête
     a disparu avec le tableau, « 43,8 » seul ne dit plus de quoi il est le taux.
   Au-dessus de 1024 px, rien ne change : la liste reste dense, une ligne par rangée. */
@media (max-width: 1024px) {
    .appgrid .mx-liste-cartes .eml-cellule { display: inline; max-width: none; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
    .appgrid .mx-liste-cartes .eml-chiffre::before { content: attr(data-lib) " "; color: var(--et-muted); font-weight: 400; }
    .appgrid .mx-liste-cartes table.tbl > tbody > tr > td:has(> .eml-chiffre) { font-variant-numeric: tabular-nums; }
}

/* LES FILTRES DE L'API DANS LA BARRE DE LA LISTE (Tableau › Actions) : statut, campagne, sujet,
   recherche d'un contact. Ils tournent en base, la liste étant paginée — d'où un champ à eux, et
   non la recherche du tableau, qui ne lit que la page chargée. Sur un téléphone, un par ligne. */
.appgrid .eml-filtre { width: auto; min-width: 160px; max-width: 240px; }
@media (max-width: 640px) {
    .appgrid .eml-filtre { flex: 1 1 100%; max-width: none; }
}

/* UN LIEN DANS UNE VALEUR (le nombre de réponses d'un mailing, les ventes d'un scénario, le renvoi
   aux serveurs de notification) : sous 1024 px il prend 44 px de cible, comme tout ce qui se
   touche (docs/cibles-tactiles.md) — il en faisait 15. Au-dessus, il reste du texte. */
@media (max-width: 1024px) {
    .appgrid .eml-lien-cible { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}

/* Sur la carte, le libellé d'un chiffre est un libellé : la police du texte, pas la chasse fixe
   de la valeur. */
@media (max-width: 1024px) {
    .appgrid .mx-liste-cartes .eml-chiffre::before { font-family: var(--et-font); }
}