/* ============================================================================
   EasyEmailing — LE STUDIO DE RÉDACTION (.ems-*) : l'éditeur visuel en trois volets,
   l'éditeur HTML coloré, l'onglet « Aperçu et contrôle », la galerie des modèles.
   Composants : StudioEmailing, EditeurBlocsEmailing, EditeurHtmlEmailing, ModelesMailing.

   DEUX SURFACES, DEUX RÈGLES
   Tout ce qui entoure le message suit la charte (jetons --et-*, thème clair ou sombre).
   Le MESSAGE lui-même — le papier de la toile, les cadres d'aperçu, les vignettes — est un
   document étranger, rendu comme le destinataire le verra : canevas CLAIR du navigateur
   (color-scheme: light ; Canvas, CanvasText, GrayText, Mark), jamais un jeton qui suivrait
   le thème. C'est la règle déjà posée par ecran-emailing.css pour l'aperçu.
   ============================================================================ */

/* ---------------------------------------------------------------- cadre et onglets */
.appgrid .ems-cadre { margin-top: 12px; }

.appgrid .ems-onglets {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--et-hairline);
}

.appgrid .ems-onglet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--et-onglet-h);
    padding: 0 var(--et-onglet-px);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--et-muted);
    font: inherit;
    cursor: pointer;
}
.appgrid .ems-onglet:hover { color: var(--et-ink); }
.appgrid .ems-onglet.est-actif { border-bottom-color: var(--et-form-blue); color: var(--et-lien); font-weight: 600; }
.appgrid .ems-onglet:focus-visible { outline: 2px solid var(--et-focus); outline-offset: -2px; }

.appgrid .ems-onglet-compte {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--et-r-pill);
    background: var(--et-avertissement-bg);
    color: var(--et-avertissement-ink);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.appgrid .ems-section-titre {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--et-ink);
}

/* ---------------------------------------------------------------- éditeur visuel : trois volets */
.appgrid .ems-studio {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr) 300px;
    min-height: 640px;
    border: 1px solid var(--et-hairline);
    border-top: 0;
    background: var(--et-surface);
}
.appgrid .ems-studio.est-lecture { grid-template-columns: minmax(0, 1fr) 300px; }

.appgrid .ems-volet {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: 16px;
}
.appgrid .ems-gauche { border-right: 1px solid var(--et-hairline); }
.appgrid .ems-inspecteur { border-left: 1px solid var(--et-hairline); padding: 0; gap: 0; }

.appgrid .ems-section { display: flex; flex-direction: column; gap: 10px; }

.appgrid .ems-palette {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.appgrid .ems-tuile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 68px;
    padding: 8px 4px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface);
    color: var(--et-ink);
    font: inherit;
    font-size: 12px;
    cursor: grab;
}
.appgrid .ems-tuile > .bi { font-size: 20px; color: var(--et-lien); }
.appgrid .ems-tuile:hover:enabled { border-color: var(--et-form-blue); }
.appgrid .ems-tuile:disabled { cursor: not-allowed; color: var(--et-faint); }
.appgrid .ems-tuile:focus-visible,
.appgrid .ems-calque:focus-visible,
.appgrid .ems-puce:focus-visible { outline: 2px solid var(--et-focus); outline-offset: 1px; }

.appgrid .ems-champs { display: flex; flex-wrap: wrap; gap: 6px; }

.appgrid .ems-puce {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--et-hairline);
    background: var(--et-tint);
    color: var(--et-lien);
    font-family: var(--et-font-mono);
    font-size: 12px;
    cursor: pointer;
}
.appgrid .ems-puce:disabled { background: var(--et-surface-2); color: var(--et-faint); cursor: not-allowed; }

.appgrid .ems-structure { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.appgrid .ems-structure > li.est-cible { box-shadow: 0 -2px 0 var(--et-form-blue); }
.appgrid .ems-structure-fin { min-height: 8px; font-size: 12px; color: var(--et-lien); }
.appgrid .ems-structure-fin.est-cible { min-height: 32px; padding: 6px 8px; border: 1px dashed var(--et-form-blue); box-shadow: none; }

.appgrid .ems-calque {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--et-ink);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.appgrid .ems-calque:hover { background: var(--et-survol); }
.appgrid .ems-calque.est-choisi { background: var(--et-tint); font-weight: 600; box-shadow: inset 3px 0 0 var(--et-form-blue); }
.appgrid .ems-calque-rang { flex: none; width: 20px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .ems-calque-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- la toile */
.appgrid .ems-toile { display: flex; flex-direction: column; min-width: 0; }

.appgrid .ems-toile-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface);
}
.appgrid .ems-toile-mesure { margin-left: auto; font-size: 12px; color: var(--et-muted); }
/* Collante, et seule à l'être : les gestes du bloc choisi restent à portée quand le message défile.
   Toute la barre collée mesurait 217 px à 1280 (ses deux sélecteurs passent sur deux lignes) —
   un quart de l'écran ; cette rangée seule en prend une cinquantaine. */
.appgrid .ems-toile-gestes {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface);
}
.appgrid .ems-toile-choisi {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--et-lien);
}

.appgrid .ems-toile-fond {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 16px 48px;
    overflow: auto;
    background: var(--et-surface-2);
}

/* Le papier : le message tel que le destinataire le lira, sur le canevas clair. */
.appgrid .ems-papier {
    width: 600px;
    max-width: 100%;
    color-scheme: light;
    background: Canvas;
    color: CanvasText;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: var(--et-ombre-carte);
}
.appgrid .ems-papier.est-mobile { width: 375px; }

.appgrid .ems-bloc { position: relative; padding: 8px 24px; }
.appgrid .ems-bloc.est-centre { text-align: center; }
.appgrid .ems-bloc.est-droite { text-align: right; }
.appgrid .ems-bloc:hover { outline: 1px dashed var(--et-form-blue); outline-offset: -1px; }
.appgrid .ems-bloc.est-choisi { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }

/* Le bouton de choix couvre le bloc : un clic n'importe où le choisit, au clavier aussi. */
.appgrid .ems-bloc-choix {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.appgrid .ems-bloc-choix:focus-visible { outline: 2px solid var(--et-focus); outline-offset: -2px; }

/* Les zones de dépôt : un filet invisible, qui s'ouvre pendant un glisser. */
.appgrid .ems-depot { height: 4px; margin: 0 24px; display: flex; align-items: center; justify-content: center; }
.appgrid .ems-depot > span { display: none; }
.appgrid .ems-depot.est-actif { height: 28px; border: 1px dashed var(--et-form-blue); background: var(--et-tint); }
.appgrid .ems-depot.est-actif > span { display: inline; font-family: var(--et-font); font-size: 12px; color: var(--et-lien); }
.appgrid .ems-depot.est-fin { margin-top: 4px; }

/* L'esquisse des blocs — les mesures de BlocsMailing (titre 24 px, texte 15 px, bouton 12 × 24). */
.appgrid .ems-p-titre { margin: 8px 0; font-size: 24px; line-height: 1.3; font-weight: 700; }
.appgrid .ems-p-texte { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
/* Le gris d'un texte sur le papier : GrayText (#808080 dans Chromium) ne lit qu'à 3,95:1 sur
   Canvas — mesuré au banc. Un mélange des deux couleurs système, sans valeur écrite, donne 5,7:1. */
.appgrid .ems-papier { --ems-gris-papier: color-mix(in srgb, CanvasText 62%, Canvas); }
.appgrid .ems-p-texte.est-vide,
.appgrid .ems-papier-vide { color: var(--ems-gris-papier); }
.appgrid .ems-p-champ { padding: 0 3px; background: Mark; color: MarkText; font-family: var(--et-font-mono); font-size: .88em; }
.appgrid .ems-p-bouton { display: inline-block; padding: 12px 24px; color: var(--et-sur-aplat); font-weight: 700; font-size: 15px; }
.appgrid .ems-p-image { display: block; max-width: 100%; height: auto; }
.appgrid .ems-bloc.est-centre .ems-p-image { margin: 0 auto; }
.appgrid .ems-bloc.est-droite .ems-p-image { margin-left: auto; }
.appgrid .ems-p-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    border: 1px dashed GrayText;
    color: var(--ems-gris-papier);
    font-size: 13px;
}
.appgrid .ems-p-filet { margin: 8px 0; border: 0; border-top: 1px solid GrayText; opacity: .5; }
.appgrid .ems-p-espace { height: 24px; }
.appgrid .ems-p-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; text-align: left; }
.appgrid .ems-papier-vide { margin: 0; padding: 48px 24px; text-align: center; font-size: 14px; }

/* Vidéo : son image, un repère de lecture, et le lien écrit — ce que l'API envoie. */
/* Le cadre réserve sa hauteur (16/9) : une vignette qui ne charge pas — réseau coupé, images
   bloquées — ne pèse rien, et le repère de lecture tombait alors sur le titre (vu au banc). */
.appgrid .ems-p-video-cadre {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: color-mix(in srgb, CanvasText 10%, Canvas);
}
.appgrid .ems-p-video-cadre > .ems-p-image { width: 100%; height: 100%; object-fit: cover; }
.appgrid .ems-p-lecture {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: color-mix(in srgb, CanvasText 72%, transparent);
}
.appgrid .ems-p-lecture::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 26px;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent Canvas;
}
.appgrid .ems-p-video-titre { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: LinkText; }

/* Produits : deux par rangée, comme le tableau que l'API envoie. */
.appgrid .ems-p-produits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; }
.appgrid .ems-p-produit { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.appgrid .ems-p-produit > .ems-p-image { width: 100%; }
.appgrid .ems-p-produit-sans-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: color-mix(in srgb, CanvasText 8%, Canvas);
    color: var(--ems-gris-papier);
    font-size: 28px;
}
.appgrid .ems-p-produit-titre { font-size: 15px; font-weight: 700; }
.appgrid .ems-p-produit-prix { font-size: 15px; }
.appgrid .ems-p-produit-prix > del { color: var(--ems-gris-papier); }
.appgrid .ems-p-bouton.est-petit { padding: 8px 16px; font-size: 14px; }

/* Réseaux sociaux : des libellés sur un fond, pas des logos (une icône est une image bloquée). */
.appgrid .ems-p-reseaux { display: flex; flex-wrap: wrap; gap: 8px; }
.appgrid .ems-bloc.est-centre .ems-p-reseaux { justify-content: center; }
.appgrid .ems-bloc.est-droite .ems-p-reseaux { justify-content: flex-end; }
.appgrid .ems-p-reseau { display: inline-block; padding: 8px 14px; color: var(--et-sur-aplat); font-size: 13px; font-weight: 700; }
.appgrid .ems-papier-pied {
    margin-top: 16px;
    padding: 12px 24px 16px;
    border-top: 1px dashed GrayText;
    color: var(--ems-gris-papier);
    font-size: 12px;
    text-align: center;
}

.appgrid .ems-rendu {
    display: block;
    width: 600px;
    max-width: 100%;
    height: 640px;
    border: 1px solid var(--et-hairline);
    color-scheme: light;
    background: Canvas;
}
.appgrid .ems-rendu.est-mobile { width: 375px; }

/* ---------------------------------------------------------------- inspecteur */
.appgrid .ems-insp-tete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--et-hairline);
}
.appgrid .ems-insp-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--et-tint);
    color: var(--et-lien);
}
.appgrid .ems-insp-titre { font-weight: 700; }
.appgrid .ems-insp-sous { font-size: 12px; color: var(--et-muted); }
.appgrid .ems-insp-corps { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.appgrid .ems-insp-vide { margin: 0; padding: 16px; color: var(--et-muted); }

.appgrid .ems-champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--et-muted);
}
.appgrid .ems-champ > legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.appgrid .ems-champ .mx-input { width: 100%; font-weight: 400; }
.appgrid .ems-zone { min-height: 140px; resize: vertical; }
.appgrid .ems-reseaux-champs { display: flex; flex-direction: column; gap: 10px; }
.appgrid .ems-lien-boutique { align-self: flex-start; }

/* L'ÉCRITURE SUR LA TOILE (ZoneRicheEmailing) : la zone où l'on tape est le texte du message lui-même.
   Elle passe au-dessus du bouton de choix du bloc (z-index 1) : un clic dans le texte y pose le curseur,
   et son focus choisit le bloc. Aucun cadre au repos — c'est le message ; un filet au focus. */
.appgrid .ems-riche {
    position: relative;
    z-index: 2;
    min-height: 1.6em;
    outline: none;
    cursor: text;
    overflow-wrap: anywhere;
}
.appgrid .ems-riche[contenteditable="false"] { cursor: default; }
.appgrid .ems-riche:focus { box-shadow: 0 0 0 2px var(--et-focus); }
.appgrid .ems-riche.est-vide::before { content: attr(data-vide); color: var(--ems-gris-papier); pointer-events: none; }
.appgrid .ems-riche p { margin: 0 0 12px; line-height: 1.6; }
.appgrid .ems-riche p:last-child { margin-bottom: 0; }
.appgrid .ems-riche ul,
.appgrid .ems-riche ol { margin: 0 0 12px; padding-left: 24px; line-height: 1.6; }
.appgrid .ems-riche a { color: LinkText; text-decoration: underline; }
.appgrid .ems-p-zone { font-size: 15px; text-align: inherit; }
.appgrid .ems-riche.ems-p-titre { margin: 8px 0; }

/* Les quatre blocs de 2026-10-23, tels que l'API les rend. */
.appgrid .ems-p-image-texte { display: grid; grid-template-columns: 2fr 3fr; gap: 24px; align-items: start; text-align: left; }
.appgrid .ems-p-image-texte.est-image-droite > .ems-p-image-texte-image { order: 2; }
.appgrid .ems-p-citation { margin: 0; padding: 4px 0 4px 16px; border-left: 4px solid; font-style: italic; text-align: left; }
.appgrid .ems-p-citation-auteur { display: block; margin-top: 4px; font-size: 13px; font-style: normal; color: var(--ems-gris-papier); }
.appgrid .ems-p-en-tete { margin: -8px -24px; padding: 24px; color: var(--et-sur-aplat); }
.appgrid .ems-p-en-tete-logo { display: block; max-width: 160px; height: auto; margin: 0 0 12px; }
.appgrid .ems-bloc.est-centre .ems-p-en-tete-logo { margin: 0 auto 12px; }
.appgrid .ems-bloc.est-droite .ems-p-en-tete-logo { margin: 0 0 12px auto; }
.appgrid .ems-p-en-tete-titre { font-size: 22px; font-weight: 700; line-height: 1.3; }
.appgrid .ems-p-en-tete .ems-riche a { color: inherit; }
.appgrid .ems-p-pied { font-size: 12px; color: var(--ems-gris-papier); }
.appgrid .ems-p-pied a { color: inherit; }

/* La barre de la toile : annuler, mise en forme, saisie d'un lien. */
.appgrid .ems-historique,
.appgrid .ems-forme { display: flex; flex-wrap: wrap; gap: 4px; }
.appgrid .ems-forme { padding-left: 6px; border-left: 1px solid var(--et-hairline); }
.appgrid .ems-forme > .mx-btn-ico[aria-pressed="true"] { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-lien); }
.appgrid .ems-lien-saisie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
}
.appgrid .ems-lien-saisie-champ { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; font-size: 12px; font-weight: 600; }
.appgrid .ems-lien-saisie-champ > .mx-input { font-weight: 400; }
.appgrid .ems-lien-saisie-gestes { display: flex; flex-wrap: wrap; gap: 8px; }

/* L'inspecteur : le bloc choisi, ou le message entier. */
.appgrid .ems-insp-onglets { margin: 12px 16px 0; }
.appgrid .ems-tailles { flex-wrap: wrap; }
.appgrid .ems-pastille.est-defaut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--et-surface);
    color: var(--et-ink);
    font-weight: 700;
}

/* Le sélecteur d'image (SelecteurImageEmailing) : l'image du bloc en grand dans l'inspecteur, et la
   fenêtre aux trois sources — l'ordinateur, les images déjà utilisées, une adresse web. */
.appgrid .ems-selimg-libelle { font-size: 12px; font-weight: 600; }
.appgrid .ems-selimg-actuelle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 120px;
    padding: 8px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
    color: var(--et-muted);
    font: inherit;
    cursor: pointer;
}
.appgrid .ems-selimg-actuelle.est-vide { border-style: dashed; }
.appgrid .ems-selimg-actuelle:hover:not(:disabled) { background: var(--et-survol); }
.appgrid .ems-selimg-actuelle:focus-visible { outline: 2px solid var(--et-focus); outline-offset: 2px; }
.appgrid .ems-selimg-actuelle:disabled { cursor: default; }
.appgrid .ems-selimg-actuelle > img { display: block; max-width: 100%; max-height: 180px; object-fit: contain; }
.appgrid .ems-selimg-ouvrir { align-self: flex-start; }

.appgrid .ems-selimg-onglets { margin-bottom: 16px; }
.appgrid .ems-selimg-depot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 220px;
    padding: 24px;
    border: 2px dashed var(--et-hairline);
    background: var(--et-surface-2);
    text-align: center;
    cursor: pointer;
}
.appgrid .ems-selimg-depot:hover { border-color: var(--et-form-blue); background: var(--et-tint); }
.appgrid .ems-selimg-depot:focus-within { outline: 2px solid var(--et-focus); outline-offset: 2px; }
.appgrid .ems-selimg-depot.est-occupe { cursor: progress; }
.appgrid .ems-selimg-depot > .bi { font-size: 32px; color: var(--et-lien); }
.appgrid .ems-selimg-depot-titre { font-size: 14px; font-weight: 600; color: var(--et-ink); }
.appgrid .ems-selimg-depot-sous { font-size: 12px; color: var(--et-muted); }
/* Le champ fichier couvre toute la zone : un clic n'importe où l'ouvre, un fichier glissé dessus y tombe. */
.appgrid .ems-selimg-fichier { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; }

.appgrid .ems-selimg-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.appgrid .ems-selimg-vignette {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 6px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface);
    color: var(--et-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.appgrid .ems-selimg-vignette:hover { border-color: var(--et-form-blue); }
.appgrid .ems-selimg-vignette:focus-visible { outline: 2px solid var(--et-focus); outline-offset: 2px; }
.appgrid .ems-selimg-vignette.est-choisie { border: 2px solid var(--et-form-blue); background: var(--et-tint); padding: 5px; }
.appgrid .ems-selimg-cadre {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--et-surface-2);
    overflow: hidden;
}
.appgrid .ems-selimg-cadre > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.appgrid .ems-selimg-origine { font-size: 12px; color: var(--et-muted); overflow-wrap: anywhere; }
.appgrid .ems-selimg-vide { display: flex; align-items: center; gap: 8px; margin: 24px 0; color: var(--et-muted); }
.appgrid .ems-selimg-apercu {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    padding: 8px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
}
.appgrid .ems-selimg-apercu > img { max-width: 100%; max-height: 260px; object-fit: contain; }

/* Le bloc « Produits » : ceux qui sont montrés, puis la recherche dans la boutique. */
.appgrid .ems-produits-choisis,
.appgrid .ems-produits-resultats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.appgrid .ems-produits-choisis > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nom bouton" "prix bouton";
    align-items: center;
    column-gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--et-hairline);
    font-weight: 400;
    color: var(--et-ink);
}
.appgrid .ems-produits-choisis .ems-produit-nom { grid-area: nom; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .ems-produits-choisis .ems-produit-prix { grid-area: prix; color: var(--et-muted); font-size: 12px; }
.appgrid .ems-produits-choisis .mx-btn-ico { grid-area: bouton; }
.appgrid .ems-recherche { display: flex; gap: 6px; }
.appgrid .ems-recherche > .mx-input { flex: 1 1 auto; min-width: 0; }
.appgrid .ems-produits-resultats { max-height: 260px; overflow: auto; border: 1px solid var(--et-hairline); }
.appgrid .ems-produit-choix {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface);
    color: var(--et-ink);
    font: inherit;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}
.appgrid .ems-produit-choix:hover:enabled { background: var(--et-survol); }
.appgrid .ems-produit-choix:disabled { cursor: default; color: var(--et-muted); }
.appgrid .ems-produit-choix[aria-pressed="true"] > .bi { color: var(--et-succes-ink); }
.appgrid .ems-produit-choix:focus-visible { outline: 2px solid var(--et-focus); outline-offset: -2px; }
.appgrid .ems-produit-choix .ems-produit-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .ems-produit-choix .ems-produit-prix { color: var(--et-muted); font-size: 12px; white-space: nowrap; }
.appgrid .ems-produits-vide { padding: 10px; color: var(--et-muted); font-weight: 400; }
.appgrid .ems-champ-alerte { font-weight: 400; color: var(--et-avertissement-ink); }

.appgrid .ems-nuancier { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.appgrid .ems-pastille {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--et-hairline);
    cursor: pointer;
}
.appgrid .ems-pastille.est-actif { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.appgrid .ems-pastille:focus-visible { outline: 2px solid var(--et-focus); outline-offset: 2px; }
.appgrid .ems-pipette { width: 44px; height: 32px; padding: 0 2px; border: 1px solid var(--et-hairline); background: var(--et-surface); cursor: pointer; }

/* ---------------------------------------------------------------- éditeur HTML */
.appgrid .ems-html { border: 1px solid var(--et-hairline); border-top: 0; background: var(--et-surface); }

.appgrid .ems-html-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--et-hairline);
}
.appgrid .ems-extraits { width: auto; min-width: 220px; max-width: 100%; flex: 0 1 auto; }
.appgrid .ems-import { position: relative; overflow: hidden; }
.appgrid .ems-import-champ { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.appgrid .ems-import:focus-within { outline: 2px solid var(--et-focus); outline-offset: 1px; }
.appgrid .ems-html-mesure { margin-left: auto; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }

.appgrid .ems-html-corps { display: grid; height: 560px; }
.appgrid .ems-html-corps.est-partage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.appgrid .ems-html-corps.est-code,
.appgrid .ems-html-corps.est-apercu { grid-template-columns: minmax(0, 1fr); }

/* Le code : gouttière + couche colorée + champ de saisie, dans UN conteneur qui défile. */
.appgrid .ems-code {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    overflow: auto;
    font-family: var(--et-font-mono);
    font-size: 13px;
    line-height: 20px;
    background: var(--et-surface);
}
.appgrid .ems-code:focus-within { outline: 2px solid var(--et-focus); outline-offset: -2px; }

.appgrid .ems-gouttiere {
    position: sticky;
    left: 0;
    z-index: 1;
    flex: none;
    min-width: 52px;
    min-height: 100%;
    padding: 12px 10px 12px 0;
    box-sizing: border-box;
    border-right: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
    color: var(--et-faint);
    text-align: right;
    user-select: none;
}
.appgrid .ems-gouttiere > span { display: block; height: 20px; padding-left: 8px; }
.appgrid .ems-gouttiere > .est-erreur { box-shadow: inset 4px 0 0 var(--et-danger); color: var(--et-danger-ink); font-weight: 600; }
.appgrid .ems-gouttiere > .est-avertissement { box-shadow: inset 4px 0 0 var(--et-avertissement-mark); color: var(--et-avertissement-ink); font-weight: 600; }
.appgrid .ems-gouttiere > .est-info { box-shadow: inset 4px 0 0 var(--et-form-blue); }
.appgrid .ems-gouttiere > .est-choisie { background: var(--et-tint); }

.appgrid .ems-couches {
    display: grid;
    flex: 1 0 auto;
    min-width: calc(var(--ems-colonnes) * 1ch + 32px);
}
.appgrid .ems-couches > .ems-couleurs,
.appgrid .ems-couches > .ems-saisie {
    grid-area: 1 / 1;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 16px;
    font: inherit;
    line-height: 20px;
    letter-spacing: normal;
    tab-size: 2;
    white-space: pre;
}
.appgrid .ems-couleurs { color: var(--et-ink); pointer-events: none; }
.appgrid .ems-ligne { min-height: 20px; }
.appgrid .ems-ligne.est-choisie { background: var(--et-surlignage); }

.appgrid .ems-saisie {
    width: 100%;
    height: calc(var(--ems-lignes) * 20px + 24px);
    overflow: hidden;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: transparent;
    caret-color: var(--et-ink);
}
/* La sélection du champ se peint PAR-DESSUS la couche colorée : opaque, elle effaçait le texte
   de la ligne choisie depuis le relevé (vu au banc). Translucide, le texte coloré reste lisible. */
.appgrid .ems-saisie::selection { background: color-mix(in srgb, var(--et-form-blue) 22%, transparent); color: transparent; }

/* Les balises prennent l'encre des liens, pas --et-form-blue-encre : sur le surlignage de la
   ligne choisie celle-ci ne lisait qu'à 4,20:1 (mesuré au banc). */
.appgrid .ems-c-tag { color: var(--et-lien); }
.appgrid .ems-c-attr { color: var(--et-avertissement-ink); }
.appgrid .ems-c-str { color: var(--et-succes-ink); }
.appgrid .ems-c-com { color: var(--et-faint); font-style: italic; }
.appgrid .ems-c-var { background: var(--et-tint); color: var(--et-lien); }

.appgrid .ems-direct { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--et-hairline); }
.appgrid .ems-html-corps.est-apercu .ems-direct { border-left: 0; }
.appgrid .ems-direct-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--et-hairline);
    font-weight: 600;
}
.appgrid .ems-direct .ems-toile-fond { padding: 16px; }
.appgrid .ems-direct .ems-rendu { height: 100%; min-height: 460px; }

/* Le relevé : chaque défaut mène à sa ligne. */
.appgrid .ems-releve { border-top: 1px solid var(--et-hairline); }
.appgrid .ems-releve-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; }
.appgrid .ems-compte,
.appgrid .ems-niveau {
    padding: 1px 8px;
    border-radius: var(--et-r-pill);
    font-size: 12px;
    font-weight: 600;
}
.appgrid .ems-compte.est-erreur, .appgrid .ems-niveau.est-erreur { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.appgrid .ems-compte.est-avertissement, .appgrid .ems-niveau.est-avertissement { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.appgrid .ems-compte.est-info, .appgrid .ems-niveau.est-info { background: var(--et-info-bg); color: var(--et-lien); }
.appgrid .ems-niveau { flex: none; min-width: 104px; text-align: center; }

.appgrid .ems-releve-liste { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.appgrid .ems-releve-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    border: 0;
    border-top: 1px solid var(--et-hairline);
    background: transparent;
    color: var(--et-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.appgrid .ems-releve-ligne:hover:enabled { background: var(--et-survol); }
.appgrid .ems-releve-ligne:disabled { cursor: default; }
.appgrid .ems-releve-ligne.est-choisie { background: var(--et-tint); box-shadow: inset 3px 0 0 var(--et-form-blue); }
.appgrid .ems-releve-txt { flex: 1 1 auto; min-width: 0; }
.appgrid .ems-releve-txt > strong { font-weight: 600; }
.appgrid .ems-releve-ou { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .ems-releve-vide { margin: 0; padding: 0 12px 12px; color: var(--et-succes-ink); }

/* ---------------------------------------------------------------- aperçu et contrôle */
.appgrid .ems-controle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--et-hairline);
    border-top: 0;
    background: var(--et-surface-2);
}
.appgrid .ems-controle-rendus { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.appgrid .ems-boite { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border: 1px solid var(--et-hairline); background: var(--et-surface); }
.appgrid .ems-boite-ligne { display: flex; align-items: center; gap: 12px; padding: 8px 0; box-shadow: inset 3px 0 0 var(--et-form-blue); padding-left: 12px; }
.appgrid .ems-boite-initiale {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--et-blue);
    color: var(--et-sur-marine);
    font-weight: 700;
}
.appgrid .ems-boite-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.appgrid .ems-boite-de { font-weight: 600; }
.appgrid .ems-boite-objet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .ems-boite-apercu { color: var(--et-muted); }

.appgrid .ems-controle-cadres { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.appgrid .ems-controle-cadre { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.appgrid .ems-controle-cadre.est-mobile { flex: 0 1 auto; }
.appgrid .ems-controle-cadre .ems-toile-fond { padding: 0; background: transparent; }
.appgrid .ems-controle-cadre .ems-rendu { height: 560px; }

.appgrid .ems-liste-controle { align-self: start; border: 1px solid var(--et-hairline); background: var(--et-surface); }
.appgrid .ems-liste-controle > ul { list-style: none; margin: 0; padding: 0; }
.appgrid .ems-liste-tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--et-hairline); }
.appgrid .ems-liste-sous { font-size: 12px; color: var(--et-muted); }
.appgrid .ems-score {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid var(--et-succes);
    font-weight: 700;
    font-size: 13px;
    box-sizing: border-box;
}
.appgrid .ems-score.est-ko { border-color: var(--et-avertissement-mark); }

.appgrid .ems-point { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid var(--et-hairline); }
.appgrid .ems-point:last-child { border-bottom: 0; }
.appgrid .ems-point-etat {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    color: var(--et-sur-aplat);
    font-size: 14px;
}
.appgrid .ems-point-etat.est-ok { background: var(--et-succes); }
.appgrid .ems-point-etat.est-ko { background: var(--et-avertissement-mark); }
.appgrid .ems-point-etat.est-info { background: var(--et-form-blue); }
.appgrid .ems-point-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.appgrid .ems-point-txt > span { font-size: 12px; color: var(--et-muted); }

/* ---------------------------------------------------------------- galerie des modèles */
.appgrid .ems-galerie-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; }
.appgrid .ems-galerie-cherche { width: 280px; max-width: 100%; }
.appgrid .ems-galerie-vide { color: var(--et-muted); }

.appgrid .ems-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
}

.appgrid .ems-carte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface);
    color: var(--et-ink);
    text-decoration: none;
}
.appgrid .ems-carte:hover { border-color: var(--et-form-blue); color: var(--et-ink); }
.appgrid .ems-carte:focus-visible { outline: 2px solid var(--et-focus); outline-offset: 2px; }
.appgrid .ems-carte.est-nouvelle {
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 320px;
    border: 1px dashed var(--et-form-blue);
    color: var(--et-lien);
    font-weight: 600;
}
.appgrid .ems-carte.est-nouvelle > .bi { font-size: 28px; }

/* La vignette : le message à 600 px, réduit à 40 %, centré, inerte. */
.appgrid .ems-vignette {
    position: relative;
    display: block;
    height: 232px;
    overflow: hidden;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}
.appgrid .ems-vignette > iframe {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 600px;
    height: 1000px;
    margin-left: -120px;
    border: 0;
    transform: scale(.4);
    transform-origin: top left;
    pointer-events: none;
    color-scheme: light;
    background: Canvas;
}

.appgrid .ems-carte-txt { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.appgrid .ems-carte-nom { font-weight: 700; }
.appgrid .ems-carte-sujet { font-size: 12px; color: var(--et-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .ems-carte-badge {
    align-self: flex-start;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: var(--et-r-pill);
    background: var(--et-tint);
    color: var(--et-lien);
    font-size: 12px;
}

/* ---------------------------------------------------------------- paliers */
@media (max-width: 1100px) {
    .appgrid .ems-studio,
    .appgrid .ems-studio.est-lecture { grid-template-columns: minmax(0, 1fr) 280px; }
    .appgrid .ems-gauche { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--et-hairline); flex-direction: row; flex-wrap: wrap; }
    .appgrid .ems-gauche > .ems-section { flex: 1 1 240px; }
    .appgrid .ems-palette { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
    .appgrid .ems-structure { max-height: 220px; overflow: auto; }
    .appgrid .ems-html-corps.est-partage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 420px 420px; height: auto; }
    .appgrid .ems-html-corps.est-partage .ems-direct { border-left: 0; border-top: 1px solid var(--et-hairline); }
    .appgrid .ems-controle { grid-template-columns: minmax(0, 1fr); }
}

/* Les cibles du studio au doigt (docs/cibles-tactiles.md) : 44 px sous 1024 px. */
@media (max-width: 1024px) {
    .appgrid .ems-puce,
    .appgrid .ems-calque,
    .appgrid .ems-pastille { min-height: 44px; }
    .appgrid .ems-pastille { width: 44px; }
    .appgrid .ems-pipette { width: 56px; height: 44px; }
    .appgrid .ems-toile-gestes > .mx-btn-ico,
    .appgrid .ems-produits-choisis .mx-btn-ico { width: 44px; height: 44px; }
    /*  ET ILS NE RÉTRÉCISSENT PAS (2026-10-24). Relevé au banc emailing-nouveau : la barre du
        bloc choisi les comprimait à 40 px à 768 et 34 px à 390 — un `width` n'est qu'une base
        pour un élément flexible. Et le choix d'un bloc couvre le bloc entier (.ems-bloc-choix,
        inset 0) : un bloc de texte d'une ligne ne mesurait que 40 px de haut, sa cible avec lui. */
    .appgrid .ems-toile-gestes > .mx-btn-ico { flex: none; }
    .appgrid .ems-bloc { min-height: 44px; }
    .appgrid .ems-produit-choix { min-height: 44px; }
    .appgrid .ems-selimg-ouvrir,
    .appgrid .ems-selimg-onglets > button { min-height: 44px; }
    .appgrid .ems-historique > .mx-btn-ico,
    .appgrid .ems-forme > .mx-btn-ico { width: 44px; height: 44px; }
    .appgrid .ems-insp-onglets > button,
    .appgrid .ems-tailles > button,
    .appgrid .ems-lien-saisie-gestes > .mx-btn { min-height: 44px; }
}

@media (max-width: 720px) {
    .appgrid .ems-studio,
    .appgrid .ems-studio.est-lecture { grid-template-columns: minmax(0, 1fr); }
    .appgrid .ems-inspecteur { border-left: 0; border-top: 1px solid var(--et-hairline); }
    .appgrid .ems-toile-fond { padding: 24px 8px 32px; }
    .appgrid .ems-bloc { padding: 8px 16px; }
    .appgrid .ems-p-colonnes { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .appgrid .ems-p-image-texte { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .appgrid .ems-p-image-texte.est-image-droite > .ems-p-image-texte-image { order: 0; }
    .appgrid .ems-p-en-tete { margin: -8px -16px; }
    .appgrid .ems-html-mesure { margin-left: 0; }
    .appgrid .ems-releve-ligne { flex-wrap: wrap; gap: 6px 12px; }
    .appgrid .ems-releve-txt { flex-basis: 100%; order: 3; }
    .appgrid .ems-niveau { min-width: 0; }
}