/* =============================================================================
   MODÈLES EMAIL & SMS — MODALE UNIFIÉE & ÉDITEUR DE BLOCS
   -----------------------------------------------------------------------------
   Spec : docs/superpowers/specs/2026-08-29-modeles-email-sms-blocs-design.md §6
   Balisage : extranet/courtier/includes/templates_editor.php
   Script   : extranet/assets/js/templates-blocs.js

   Chargée APRÈS extranet-theme.css, qu'elle ne modifie JAMAIS : les classes
   partagées (.em-tpl-modal, .em-tpl-modal-panel, .em-tpl-modal-body, .em-dev-*,
   .em-gmail-*, .em-imsg-*, .em-seg-*, .em-tpl-badge-*) sont réutilisées telles
   quelles et seulement COMPLÉTÉES ici, sous des sélecteurs propres à cet écran.

   Grammaire Liquid Glass à 3 niveaux, tokens --em-* uniquement (zéro hex de
   marque en dur), repli @supports not (backdrop-filter) partout :
     · chrome    blur(22px) — en-tête et pied de modale
     · contenu   blur(16-18px) — cartes de blocs, réglages
     · flottant  blur(26px) — menu d'ajout, menus de variables
   FontAwesome 6 FREE uniquement. Mobile 390px sans débordement horizontal :
   min-width:0 sur tous les enfants flex/grid.

   Sommaire :
     1. Utilitaires locaux & bascules segmentées (filtre 3 valeurs, onglets)
     2. Coque de la modale (en-tête, corps, pied, plein écran mobile)
     3. Colonne « Écrire » — bandeaux, aide, barre de variables
     4. Éditeur de blocs (.em-blk-*)
     5. Menu d'ajout de bloc (verre flottant)
     6. Réglages repliés (<details>)
     7. Colonne « Aperçu » — appareils et compteur SMS
     8. Parcours : état filtré
     9. Responsive & mouvement réduit
============================================================================= */

/* =============================================================================
   1. UTILITAIRES LOCAUX & BASCULES SEGMENTÉES
============================================================================= */

/* Masquage piloté par le JS (filtre du parcours, variables hors canal). Distinct
   de .hidden (Tailwind) pour ne jamais entrer en conflit avec un état serveur. */
.em-tplmod-off { display: none !important; }

/* --- Filtre de canal du parcours : TROIS valeurs (tous|email|sms) ------------
   .em-seg-toggle du thème est câblé pour deux colonnes et ne déplace son pouce
   que pour data-value="test"/"mobile" ; extranet-theme.css restant intact, la
   3ᵉ valeur se gère dans une feuille de page.

   FILET DE SÉCURITÉ UNIQUEMENT. Le widget appartient à la page parcours :
   templates-parcours.css le stylise sous #tplFiltreCanal.em-parcours-seg, avec
   les mêmes valeurs et une spécificité supérieure — c'est cette règle-là qui
   fait foi. Les quatre lignes ci-dessous ne servent que si la modale est
   chargée sans la feuille du parcours : sans elles, le pouce resterait collé à
   gauche. Même arithmétique que l'original : largeur = (100% − 2×3px) / n. */
#tplFiltreCanal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tplFiltreCanal .em-seg-thumb { width: calc((100% - 6px) / 3); }
#tplFiltreCanal[data-value="email"] .em-seg-thumb { transform: translateX(100%); }
#tplFiltreCanal[data-value="sms"]   .em-seg-thumb { transform: translateX(200%); }

/* --- Onglets « Écrire | Aperçu » : MOBILE UNIQUEMENT -------------------------
   Sur desktop les deux colonnes coexistent, la barre n'a pas lieu d'être. */
#tplModalTabs.em-tplmod-tabs { display: none; }
#tplModalTabs[data-value="apercu"] .em-seg-thumb { transform: translateX(100%); }
.em-tplmod-tabs .em-seg-opt { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }

/* =============================================================================
   2. COQUE DE LA MODALE
   .em-tpl-modal / .em-tpl-modal-panel / .em-tpl-modal-body viennent du thème :
   voile, verre, largeur max, corps défilant. On n'ajoute ici que la structure
   en trois bandes (chrome / corps / pied) et le comportement plein écran.
============================================================================= */
/* --- Ceinture et bretelles du portail ---------------------------------------
   Le JS déplace #tplModal en enfant direct de <body> (voir porterModaleDansBody).
   Ces deux règles sont la seconde ligne de défense, au cas où un ancêtre
   inattendu redeviendrait le bloc conteneur du position:fixed :
     · le voile est explicitement à la hauteur de l'ÉCRAN — dvh d'abord (barres
       d'URL mobiles qui se rétractent), vh en repli pour les moteurs anciens ;
     · le panneau se plafonne sur le voile (100%) plutôt que sur 92vh, donc il
       ne peut pas dépasser en bas quelle que soit la base de calcul retenue.
   Aucune ne touche extranet-theme.css : elles le surchargent depuis ici. */
.em-tpl-modal.em-tplmod {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}
/* `height` (pas juste `max-height`) : le panneau garde TOUJOURS la même
   hauteur, qu'il y ait 2 blocs ou 12 — sans ça, .em-tpl-modal-panel n'a
   qu'un plafond (92vh) et se contracte sur son contenu (align-items:center
   du voile ne l'étire pas), d'où un redimensionnement brutal à chaque ajout/
   suppression de bloc ou changement d'onglet Variables/Valeurs test. */
.em-tplmod-panel {
    min-width: 0;
    height: 100%;
    max-height: 100%;
}

/* --- Chrome supérieur : verre 22px + spéculaire, comme .cl-chrome ------------ */
.em-tplmod-head {
    position: relative;
    z-index: 2;
    /* Le panneau est un flex vertical à hauteur contrainte (92vh, 100% en
       mobile) : sans flex:none, le chrome et le pied se feraient écraser par
       le corps défilant — les onglets mobiles se retrouvaient rognés. */
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: 1rem 1.15rem .85rem;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
            backdrop-filter: blur(22px) saturate(170%);
    border-bottom: 1px solid var(--em-line);
    border-radius: var(--em-r-xl) var(--em-r-xl) 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
@supports not (backdrop-filter: blur(1px)) {
    .em-tplmod-head { background: rgba(255, 255, 255, .95); }
}
@media (min-width: 768px) { .em-tplmod-head { padding: 1.15rem 1.6rem .95rem; } }

.em-tplmod-head-id {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    flex: 1 1 240px;
}
/* Pastille de canal : email ou SMS, remplie par le JS. */
.em-tplmod-canal {
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--em-r-sm);
    background: color-mix(in srgb, var(--em-primary) 10%, #fff);
    color: var(--em-primary-deep);
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
#tplModal[data-canal="sms"] .em-tplmod-canal {
    background: color-mix(in srgb, var(--em-warn) 14%, #fff);
    color: #B45309;
}
.em-tplmod-head-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: .2rem;
    min-width: 0;
}
.em-tplmod-head-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    min-width: 0;
    margin-left: auto;
}
/* La vue « Ordinateur | Mobile » n'a pas de sens pour un SMS. */
#tplModal[data-canal="sms"] .em-tplmod-device { display: none; }

/* --- Corps : deux colonnes sur desktop -------------------------------------- */
/* min-height:0 : sans lui, un item de flex column garde min-height:auto et ne
   peut pas rétrécir sous la hauteur de son contenu — le corps grandissait avec
   la colonne « Écrire », débordait du panneau, et `height:100%` sur la grille
   n'avait plus de hauteur de référence à propager à la colonne d'aperçu. */
.em-tplmod-body { min-width: 0; min-height: 0; }
.em-tplmod-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 1.5rem;
    align-items: start;
    min-width: 0;
}
.em-tplmod-col { min-width: 0; }
.em-tplmod-col-ecrire {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
}
.em-tplmod-col-apercu {
    position: sticky;
    top: 0;
    align-self: start;
    min-width: 0;
}

/* --- Pied : chrome 22px, actions ------------------------------------------- */
.em-tplmod-foot {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .85rem 1.15rem calc(.85rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
            backdrop-filter: blur(22px) saturate(170%);
    border-top: 1px solid var(--em-line);
    border-radius: 0 0 var(--em-r-xl) var(--em-r-xl);
}
@supports not (backdrop-filter: blur(1px)) {
    .em-tplmod-foot { background: rgba(255, 255, 255, .95); }
}
@media (min-width: 768px) { .em-tplmod-foot { padding: .95rem 1.6rem; } }
.em-tplmod-foot-hint {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    color: var(--em-muted);
    text-align: right;
}

/* `:not(.hidden)` : ces boutons sont masqués par le JS via la classe .hidden
   (0,1,0). Déclarer `display` sur .em-tplmod-btn, de spécificité identique mais
   posé plus tard dans la cascade, le rendait inopérant — « Supprimer »,
   « Dupliquer » et « Tester à mon email » restaient affichés sur un modèle
   SYSTÈME, où ils n'ont pas lieu d'être (constaté en capture le 2026-08-29). */
.em-tplmod-btn:not(.hidden) {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .62rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--em-r-sm);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--em-dur) var(--em-ease),
                box-shadow var(--em-dur) var(--em-ease),
                background-color var(--em-dur-fast) ease,
                color var(--em-dur-fast) ease;
}
.em-tplmod-btn:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 2px; }
.em-tplmod-btn-primary {
    padding: .62rem 1.15rem;
    background-image: linear-gradient(180deg, var(--em-primary) 0%, var(--em-primary-dark) 100%);
    color: #fff;
    box-shadow: var(--em-sh-warm);
}
.em-tplmod-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--em-sh-warm-lg); }
.em-tplmod-btn-ghost {
    background: var(--em-surface-3);
    color: var(--em-muted);
}
.em-tplmod-btn-ghost:hover { background: var(--em-line); color: var(--em-ink); }
.em-tplmod-btn-danger {
    background: var(--em-surface-3);
    color: var(--em-muted);
}
.em-tplmod-btn-danger:hover {
    background: color-mix(in srgb, var(--em-danger) 10%, #fff);
    color: var(--em-danger);
}
.em-tplmod-btn-info {
    background: color-mix(in srgb, var(--em-info) 10%, #fff);
    color: #1D4ED8;
}
.em-tplmod-btn-info:hover { background: color-mix(in srgb, var(--em-info) 18%, #fff); }
.em-tplmod-btn-soft {
    background: color-mix(in srgb, var(--em-primary) 10%, #fff);
    color: var(--em-primary-deep);
}
.em-tplmod-btn-soft:hover { background: color-mix(in srgb, var(--em-primary) 18%, #fff); }

/* =============================================================================
   3. COLONNE « ÉCRIRE » — bandeaux, aide, barre de variables
============================================================================= */
.em-tplmod-note-sys:not(.hidden) {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    padding: .7rem .85rem;
    border-radius: var(--em-r-sm);
    background: color-mix(in srgb, var(--em-info) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--em-info) 24%, transparent);
    color: #1D4ED8;
    font-size: 11.5px;
    line-height: 1.5;
}
.em-tplmod-note-sys > span { min-width: 0; }

.em-tplmod-erreur {
    margin: 0;
    padding: .55rem .75rem;
    border-radius: var(--em-r-sm);
    background: color-mix(in srgb, var(--em-warn) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--em-warn) 28%, transparent);
    color: #92400E;
    font-size: 11.5px;
    font-weight: 600;
}

/* --- Aide à la rédaction ---------------------------------------------------- */
.em-tplmod-aide {
    min-width: 0;
    padding: .75rem .9rem;
    border-radius: var(--em-r-sm);
    background: color-mix(in srgb, var(--em-primary) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--em-primary) 20%, transparent);
}
.em-tplmod-aide-titre {
    margin: 0 0 .25rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--em-primary-deep);
}
.em-tplmod-aide-l {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--em-ink-2);
}
.em-tplmod-aide-l strong { color: var(--em-ink); }
.em-tplmod-aide-vars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
    min-width: 0;
}
.em-tplmod-aide-varslabel {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--em-primary-deep);
}
#tplAideVars { display: contents; }
.em-tplmod-aide-var {
    padding: .12rem .4rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--em-primary) 26%, transparent);
    color: var(--em-primary-deep);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.em-tplmod-aide-var:hover { background: color-mix(in srgb, var(--em-primary) 12%, #fff); }

/* --- Barre d'insertion de variables ----------------------------------------- */
.em-tplmod-vars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    padding: .45rem .5rem;
    border-radius: var(--em-r-sm);
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
            backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--em-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
@supports not (backdrop-filter: blur(1px)) {
    .em-tplmod-vars { background: var(--em-surface-2); }
}
.em-tplmod-vars-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-right: .15rem;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--em-muted);
}
.em-tplmod-vars-group { position: relative; min-width: 0; }
.em-tplmod-vars-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .5rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--em-line-2);
    color: var(--em-ink-2);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--em-dur-fast) ease, color var(--em-dur-fast) ease;
}
.em-tplmod-vars-btn:hover { border-color: var(--em-primary); color: var(--em-primary-deep); }
.em-tplmod-vars-btn:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 2px; }
/* Verre FLOTTANT (26px) : troisième niveau de la grammaire. Opacité relevée
   à .96 (au lieu de .8) : sous ce menu il y a souvent un bord pointillé
   orange (.em-blk-add) ou du texte (.em-tplmod-aide) qui, en dessous de .9,
   restait lisible en transparence et rendait la liste dure à lire —
   voir docs/superpowers/specs/2026-08-29-modeles-email-sms-blocs-design.md.
   z-index relevé à 60 : au-dessus de tout élément local de l'écran (le
   plus haut sinon était .em-blk-addmenu à 45), pour ne jamais se faire
   recouvrir si les deux menus se chevauchent.

   `position:fixed` (pas absolute) : ce menu vit dans #tplModalForm
   (.em-tplmod-col-ecrire), qui défile seul dès 1024px (§9) — un ancêtre
   `overflow-y:auto` force `overflow-x` à `auto` aussi (règle CSS overflow),
   donc un menu absolute s'y faisait rogner pile au bord de la colonne
   (texte coupé en plein mot). `top`/`left` ci-dessous ne sont qu'un repli :
   positionnerMenuFlottant() (templates-blocs.js) les recalcule en JS depuis
   le bouton à chaque ouverture, ce qui échappe au rognage. */
.em-tplmod-vars-menu {
    position: fixed;
    z-index: 60;
    top: calc(100% + .3rem);
    left: 0;
    width: min(17rem, 78vw);
    max-height: 16rem;
    overflow-y: auto;
    padding: .35rem;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
            backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--em-r);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), var(--em-sh-lg);
}
@supports not (backdrop-filter: blur(1px)) {
    .em-tplmod-vars-menu { background: rgba(255, 255, 255, .98); }
}
.em-tplmod-vars-item {
    display: block;
    width: 100%;
    padding: .3rem .4rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    text-align: left;
    font-size: 11px;
    cursor: pointer;
}
.em-tplmod-vars-item:hover { background: color-mix(in srgb, var(--em-primary) 10%, transparent); }
.em-tplmod-vars-item code {
    color: var(--em-primary-deep);
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.em-tplmod-vars-item span { color: var(--em-muted); margin-left: .25rem; }
.em-tplmod-vars-cible {
    margin: -.35rem 0 0;
    font-size: 10.5px;
    color: var(--em-muted);
}
.em-tplmod-vars-cible strong { color: var(--em-primary-deep); font-weight: 700; }

/* --- Zones d'écriture, pilotées par le canal courant ------------------------- */
#tplModal[data-canal="email"] [data-tpl-zone="sms"],
#tplModal[data-canal="sms"]   [data-tpl-zone="email"] { display: none; }
.em-tplmod-zone { min-width: 0; }
.em-tplmod-zone-head { margin-bottom: .5rem; min-width: 0; }
.em-tplmod-zone-titre {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-family: var(--em-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--em-ink);
}
.em-tplmod-zone-aide {
    margin: .15rem 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--em-muted);
}
.em-tplmod-sms-editor {
    width: 100%;
    min-height: 8rem;
    padding: .7rem .8rem;
    border-radius: var(--em-r-sm);
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--em-line-2);
    font-size: 13.5px;
    line-height: 1.55;
    resize: vertical;
}
.em-tplmod-sms-editor:focus {
    outline: none;
    border-color: var(--em-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--em-primary) 16%, transparent);
}

/* =============================================================================
   4. ÉDITEUR DE BLOCS
   Une carte = un morceau du message. Verre « contenu » (16-18px), spéculaire
   inset, bordure 1px : jamais de blur sur le texte lui-même.
============================================================================= */
.em-blk-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
}
.em-blk {
    position: relative;
    min-width: 0;
    border-radius: var(--em-r);
    background: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--em-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--em-sh-xs);
    transition: border-color var(--em-dur-fast) ease, box-shadow var(--em-dur) var(--em-ease);
}
@supports not (backdrop-filter: blur(1px)) {
    .em-blk { background: rgba(255, 255, 255, .96); }
}
.em-blk:focus-within {
    border-color: color-mix(in srgb, var(--em-primary) 40%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
                0 0 0 3px color-mix(in srgb, var(--em-primary) 12%, transparent);
}
.em-blk.is-drag { opacity: .5; }
.em-blk.is-over { border-color: var(--em-primary); box-shadow: 0 -3px 0 -1px var(--em-primary); }

.em-blk-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    padding: .45rem .5rem .45rem .35rem;
    border-bottom: 1px solid var(--em-line);
}
.em-blk-grip {
    flex: none;
    width: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--em-ink-3);
    font-size: 10px;
    cursor: grab;
}
.em-blk-grip:active { cursor: grabbing; }
.em-blk-ident {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    flex: 1 1 auto;
}
.em-blk-ico {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--em-primary) 10%, #fff);
    color: var(--em-primary-deep);
    font-size: 10px;
}
.em-blk-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--em-ink);
}
.em-blk-tag {
    flex: none;
    padding: .1rem .35rem;
    border-radius: 6px;
    background: var(--em-surface-3);
    color: var(--em-muted);
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.em-blk-actions { display: inline-flex; align-items: center; gap: .15rem; flex: none; }
.em-blk-actions button {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--em-ink-3);
    font-size: 10px;
    cursor: pointer;
    transition: background-color var(--em-dur-fast) ease, color var(--em-dur-fast) ease;
}
.em-blk-actions button:hover { background: var(--em-surface-3); color: var(--em-ink); }
.em-blk-actions button:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 1px; }
.em-blk-actions button:disabled { opacity: .3; cursor: not-allowed; }
.em-blk-del:hover { background: color-mix(in srgb, var(--em-danger) 12%, #fff) !important; color: var(--em-danger) !important; }

.em-blk-body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    padding: .6rem .7rem .7rem;
}
.em-blk-field { min-width: 0; }
.em-blk-field > label {
    display: block;
    margin-bottom: .25rem;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--em-muted);
}
.em-blk-input {
    width: 100%;
    min-width: 0;
    padding: .5rem .6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--em-line-2);
    color: var(--em-ink);
    font-size: 13px;
    line-height: 1.5;
}
.em-blk-input::placeholder { color: var(--em-ink-3); }
.em-blk-input:focus {
    outline: none;
    border-color: var(--em-primary);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--em-primary) 14%, transparent);
}
.em-blk-textarea { resize: vertical; overflow: hidden; }
.em-blk-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    resize: vertical;
    overflow: auto;
}
.em-blk-hint {
    margin: .25rem 0 0;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--em-muted);
}

/* --- Alignement ------------------------------------------------------------- */
.em-blk-align { display: inline-flex; gap: .25rem; }
.em-blk-align-opt {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--em-line-2);
    color: var(--em-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.em-blk-align-opt[aria-pressed="true"] {
    background: color-mix(in srgb, var(--em-primary) 12%, #fff);
    border-color: var(--em-primary);
    color: var(--em-primary-deep);
}
.em-blk-align-opt:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 1px; }

/* --- Listes de lignes et paires label/valeur -------------------------------- */
.em-blk-item,
.em-blk-paire {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    margin-bottom: .3rem;
}
.em-blk-paire { flex-wrap: wrap; }
.em-blk-paire .em-blk-input { flex: 1 1 7rem; min-width: 0; }
.em-blk-item-num {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: color-mix(in srgb, var(--em-primary) 12%, #fff);
    color: var(--em-primary-deep);
    font-size: 10px;
    font-weight: 800;
}
.em-blk-fort {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: none;
    font-size: 10.5px;
    color: var(--em-muted);
    cursor: pointer;
    white-space: nowrap;
}
.em-blk-item-del {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--em-ink-3);
    font-size: 10px;
    cursor: pointer;
}
.em-blk-item-del:hover { background: color-mix(in srgb, var(--em-danger) 12%, #fff); color: var(--em-danger); }
.em-blk-item-del:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 1px; }
.em-blk-item-add {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .5rem;
    border: 1px dashed var(--em-line-2);
    border-radius: 9px;
    background: transparent;
    color: var(--em-muted);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
}
.em-blk-item-add:hover { border-color: var(--em-primary); color: var(--em-primary-deep); }
.em-blk-item-add:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 1px; }

/* --- Bloc legacy : le HTML brut ne s'ouvre qu'à la demande ------------------- */
.em-blk-avance { min-width: 0; }
.em-blk-avance > summary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--em-muted);
    cursor: pointer;
    list-style: none;
}
.em-blk-avance > summary::-webkit-details-marker { display: none; }
.em-blk-avance > summary:hover { color: var(--em-ink); }
.em-blk-avance[open] > summary { margin-bottom: .3rem; }

/* --- État vide -------------------------------------------------------------- */
.em-blk-vide:not(.hidden) {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .9rem 1rem;
    border: 1px dashed var(--em-line-2);
    border-radius: var(--em-r);
    background: rgba(255, 255, 255, .5);
    color: var(--em-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

/* =============================================================================
   5. MENU D'AJOUT DE BLOC — verre flottant (26px)
============================================================================= */
.em-blk-addwrap { position: relative; min-width: 0; }
.em-blk-add {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    justify-content: center;
    padding: .6rem .8rem;
    border: 1px dashed color-mix(in srgb, var(--em-primary) 42%, transparent);
    border-radius: var(--em-r);
    background: color-mix(in srgb, var(--em-primary) 6%, #fff);
    color: var(--em-primary-deep);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color var(--em-dur-fast) ease, transform var(--em-dur) var(--em-ease);
}
.em-blk-add:hover { background: color-mix(in srgb, var(--em-primary) 12%, #fff); transform: translateY(-1px); }
.em-blk-add:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 2px; }

/* Même relèvement d'opacité (.8 → .96) et de z-index (45 → 61, un cran
   au-dessus de .em-tplmod-vars-menu) que ci-dessus, même raison : ce menu
   s'ouvre juste au-dessus des cartes de blocs (.em-blk, fond opaque à 66%)
   et doit rester net par-dessus elles. Même `position:fixed` que
   .em-tplmod-vars-menu et pour la même raison (rognage par le défilement de
   #tplModalForm) — `bottom`/`left`/`width` recalculés en JS à l'ouverture
   par positionnerMenuFlottant(), `right` retiré (la largeur vient du bouton
   ancre, pas d'un `right:0` qui n'a plus de sens en fixed). */
.em-blk-addmenu {
    position: fixed;
    z-index: 61;
    bottom: calc(100% + .35rem);
    left: 0;
    max-height: 19rem;
    overflow-y: auto;
    padding: .35rem;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
            backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--em-r-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), var(--em-sh-lg);
}
@supports not (backdrop-filter: blur(1px)) {
    .em-blk-addmenu { background: rgba(255, 255, 255, .98); }
}
.em-blk-addopt {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    width: 100%;
    min-width: 0;
    padding: .45rem .5rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.em-blk-addopt:hover { background: color-mix(in srgb, var(--em-primary) 10%, transparent); }
.em-blk-addopt:focus-visible { outline: 2px solid var(--em-primary); outline-offset: -2px; }
.em-blk-addopt > i {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--em-primary) 12%, #fff);
    color: var(--em-primary-deep);
    font-size: 10px;
}
.em-blk-addopt-txt { min-width: 0; display: block; }
.em-blk-addopt-txt strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--em-ink);
}
.em-blk-addopt-txt span {
    display: block;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--em-muted);
}

/* =============================================================================
   6. RÉGLAGES REPLIÉS
   Le courtier vient écrire un message, pas remplir un formulaire : tout ce qui
   n'est pas le message lui-même vit ici, fermé par défaut.
============================================================================= */
.em-tplmod-reglages {
    min-width: 0;
    border-radius: var(--em-r);
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
            backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--em-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
@supports not (backdrop-filter: blur(1px)) {
    .em-tplmod-reglages { background: var(--em-surface-2); }
}
.em-tplmod-reglages > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .6rem .75rem;
    cursor: pointer;
    list-style: none;
}
.em-tplmod-reglages > summary::-webkit-details-marker { display: none; }
.em-tplmod-reglages > summary:focus-visible { outline: 2px solid var(--em-primary); outline-offset: -2px; border-radius: var(--em-r); }
.em-tplmod-reglages-t {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: none;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--em-ink);
}
.em-tplmod-reglages-r {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--em-muted);
}
.em-tplmod-reglages-c { flex: none; color: var(--em-ink-3); transition: transform var(--em-dur) var(--em-ease); }
.em-tplmod-reglages[open] .em-tplmod-reglages-c { transform: rotate(180deg); }
.em-tplmod-reglages-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
    padding: 0 .75rem .75rem;
}
/* Micro-en-têtes de groupe à l'intérieur des réglages : casse le mur de champs
   en deux paquets courts et scannables (Message / Diffusion) plutôt qu'une
   colonne unique de six éléments. */
.em-tplmod-reglages-groupe {
    margin: 0;
    font-size: 9.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--em-ink-3);
}
.em-tplmod-reglages-groupe-sep {
    margin-top: .15rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--em-line-2);
}
.em-tplmod-field { min-width: 0; }
.em-tplmod-field > label {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .25rem;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--em-muted);
}
/* Titre interne : seul champ visible hors accordéon, un cran plus affirmé que
   les champs repliés qu'il précède. */
.em-tplmod-field-titre > label {
    font-size: 10.5px;
    color: var(--em-ink-2);
}
/* Bouton-info compact : remplace une annotation textuelle permanente
   ("(visible client)", "— auto si vide"…) par une infobulle à la demande,
   pour que le libellé reste court sans perdre l'explication. */
.em-tplmod-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--em-ink-3);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    cursor: help;
}
.em-tplmod-hint i { font-size: 10.5px; }
.em-tplmod-hint:hover, .em-tplmod-hint:focus-visible { color: var(--em-primary); }
.em-tplmod-hint:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 1px; border-radius: 50%; }
.em-tplmod-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .6rem;
    min-width: 0;
}
.em-tplmod-input {
    width: 100%;
    min-width: 0;
    padding: .5rem .6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--em-line-2);
    color: var(--em-ink);
    font-size: 13px;
}
.em-tplmod-input:focus {
    outline: none;
    border-color: var(--em-primary);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--em-primary) 14%, transparent);
}
.em-tplmod-input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.em-tplmod-check {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    min-width: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--em-muted);
    cursor: pointer;
}
.em-tplmod-check input { margin-top: .15rem; flex: none; accent-color: var(--em-primary); }
.em-tplmod-check strong { color: var(--em-ink); }
.em-tplmod-check span { min-width: 0; }

/* =============================================================================
   7. COLONNE « APERÇU »
   Les cadres eux-mêmes (.em-dev-mac / .em-dev-phone / .em-dev-sms) et le chrome
   Gmail / iMessage viennent d'extranet-theme.css : rien n'est redéfini ici.
============================================================================= */
.em-tplmod-apercu-titre {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .5rem;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--em-muted);
}
/* --- L'aperçu occupe la hauteur disponible ----------------------------------
   Constat du 2026-08-29 (1440×1100) : le cadre MacBook s'arrêtait à y≈556 alors
   que le pied de modale est à y≈1043 — 452px de colonne vide, pendant que la
   fenêtre de l'email ne montrait que 176px d'un message qui en fait 605. En
   mobile c'était pire : la fenêtre tombait à 0px de haut, l'aperçu était
   littéralement invisible.

   Cause : .em-dev-mac-screen porte `aspect-ratio: 16/9` — la hauteur du cadre
   ne dépend QUE de sa largeur (640px max), jamais de la place disponible.

   Correction, entièrement scopée à #tplModalPreview / .em-tplmod-* : cette
   feuille ne touche pas .em-dev-mac* de manière globale, le cadre garde son
   ratio partout ailleurs (extranet-theme.css reste intact et ses autres usages
   avec). Ici, la colonne devient une pile verticale et le cadre s'étire.

   Le cadrage à 800px NATIFS est préservé : fitDesktopFrame() ne dépend que de
   la LARGEUR (echelle = wrap.clientWidth / 800) et mesure toujours la hauteur
   par scrollHeight sur le sizer. Agrandir la fenêtre ne change donc ni
   l'échelle, ni les media queries « ordinateur » de l'email — on en voit
   simplement davantage, le reste défilant dans #tplFrameDesktopWrap.

   Ce comportement (l'écran prend TOUTE la hauteur dispo, quel que soit le
   ratio que ça donne) reste le bon choix sous 1024px : la modale y est plein
   écran, une seule colonne, et le contrat est « montrer tout le message »
   plutôt que « ressembler à un appareil » (voir §9, le cas 390×844 mesuré où
   contraindre la hauteur RÉTRÉCISSAIT la fenêtre d'email à 117px). À partir de
   1024px en revanche, la colonne « Ce que le client recevra » est large et
   haute : un rectangle étiré n'y ressemble plus ni à un ordinateur ni à un
   téléphone (constat du 2026-08-30 : un « ordinateur » aussi haut que large,
   un « mobile » à la coque étroite mais tout aussi démesurément haute). La
   règle plus bas (§7 bis-0) y substitue donc un vrai ratio d'écran, centré
   dans la colonne — l'email plus long que l'écran continue de défiler dans
   #tplFrameDesktopWrap / .em-tplmod-scrollzone, signalé par le fondu + chevron
   de la section 7 ter (« il y a une suite »). */
.em-tplmod-col-apercu {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.em-tplmod-apercu-titre,
.em-tplmod-col-apercu > .em-tplmod-erreur,
.em-tplmod-counter { flex: none; }

/* MacBook : capot et base gardent leur taille, l'écran prend tout le reste.
   `:not(.hidden)` est INDISPENSABLE sur les trois appareils : ces sélecteurs
   pèsent 1,1,0 et écraseraient sans lui le `display:none` de .hidden (0,1,0)
   posé par le JS — les trois cadres s'empilaient alors en même temps, et la
   colonne d'aperçu passait à 1797px de haut. */
#tplModalPreview .em-dev-mac:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#tplModalPreview .em-dev-mac-cam,
#tplModalPreview .em-dev-mac-base { flex: none; }
#tplModalPreview .em-dev-mac-screen {
    aspect-ratio: auto;          /* remplacé par la hauteur disponible */
    flex: 1 1 auto;
    min-height: 180px;
}

/* Téléphones (aperçu mobile de l'email, conversation SMS) : même traitement que
   le MacBook — ils occupent la hauteur au lieu de flotter en haut d'une colonne
   vide. Mesuré avant correction : l'iPhone tombait à 244px de haut pour 610px de
   vide en dessous, et le cadre SMS à 299px pour 326px de vide.

   Deux pièges rencontrés, d'où l'absence de `margin: auto` et de `min-height:0`
   sur les écrans :
     · une marge automatique absorbe l'espace libre AVANT flex-grow (spec flexbox
       §8.1) : `margin-block:auto` neutralisait purement et simplement
       l'étirement, le cadre restait à sa taille naturelle et se contentait de se
       centrer ;
     · `min-height:0` sur les écrans écrasait le `min-height:420px` que
       .em-dev-sms-screen tient d'extranet-theme.css — le téléphone SMS
       rétrécissait sous sa taille de gabarit. On ne le redéclare pas ici : la
       valeur du thème fait foi, on se contente de laisser l'écran grandir. */
#tplModalPreview .em-dev-phone:not(.hidden),
#tplModalPreview .em-dev-sms:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#tplModalPreview .em-dev-phone-screen,
#tplModalPreview .em-dev-sms-screen {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* -----------------------------------------------------------------------------
   7 bis-0. DÈS 1024px — un vrai appareil, pas un rectangle élastique
   -----------------------------------------------------------------------------
   Réservé à >=1024px : c'est là que la colonne d'aperçu est stretchée à la
   hauteur de la colonne « Écrire » (§9), et donc là que l'étirement ci-dessus
   produisait un « ordinateur » aussi haut que large et un « mobile » à la
   coque étroite mais démesurément haute. Sous 1024px la modale est plein
   écran et le contrat inverse s'applique (§9) : montrer tout le message prime
   sur la ressemblance avec un appareil, donc on n'y touche pas ici.

   L'ÉCRAN garde le ratio d'un vrai appareil — 16/10 pour un MacBook, 9/19.5
   pour un iPhone — calculé sur sa LARGEUR, qui suit toujours la colonne. Le
   cadre entier n'est plus étiré (`flex:0 1 auto`) et se centre verticalement
   dans la place restante via `margin-block:auto` : un vrai appareil posé au
   milieu de la colonne plutôt qu'un rectangle collé en haut. Rien n'est perdu
   de l'email plus long que l'écran : il défile dans #tplFrameDesktopWrap /
   .em-tplmod-scrollzone, et le fondu + chevron de la section 7 ter signalent
   qu'il y a plus à voir.

   Aucun invariant de cadrage n'est effleuré : fitDesktopFrame() ne dépend que
   de la LARGEUR (échelle = wrap.clientWidth / 800) et mesure toujours la
   hauteur par scrollHeight — rien de tout ça ne dépend de la hauteur du cadre. */
@media (min-width: 1024px) {
    #tplModalPreview .em-dev-mac:not(.hidden) {
        flex: 0 1 auto;
        margin-block: auto;
    }
    #tplModalPreview .em-dev-mac-screen {
        aspect-ratio: 16 / 10;    /* écran de MacBook réel */
        flex: none;
    }
    #tplModalPreview .em-dev-phone:not(.hidden),
    #tplModalPreview .em-dev-sms:not(.hidden) {
        flex: 0 1 auto;
        margin-block: auto;
    }
    #tplModalPreview .em-dev-phone-screen,
    #tplModalPreview .em-dev-sms-screen {
        flex: none;
        aspect-ratio: 9 / 19.5;   /* écran d'iPhone réel */
    }
}
/* Depuis l'ajout du rail de défilement, l'iframe n'est plus enfant DIRECT de
   l'écran : elle est enveloppée dans une .em-tplmod-scrollzone. C'est donc la
   zone qui s'étire, et l'iframe qui la remplit. */
#tplModalPreview .em-dev-phone-screen > .em-tplmod-scrollzone {
    flex: 1 1 auto;
    min-height: 0;
}
#tplModalPreview #tplFrameMobile {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 260px;
}

/* -----------------------------------------------------------------------------
   7 bis. HAUTEUR UTILE — on rend à l'email les pixels mangés par le décor
   -----------------------------------------------------------------------------
   Constat du 2026-08-30 (1440×1100, modèle « Perdu — réactivation, fenêtre
   Lemoine », le plus long) : sur ordinateur la fenêtre d'email montrait 609px
   d'un message qui en fait 668 (91 %), sur téléphone 723px pour 859 (84 %). Le
   pied de coque — mentions légales, « Ne plus recevoir ces messages » — n'était
   JAMAIS visible, alors que la colonne s'intitule « Ce que le client recevra ».

   Or, entre la colonne (651px de large) et la fenêtre d'email, 158px partaient
   dans le faux chrome Gmail : barre de recherche 51px, rangée de quatre carrés
   gris 39px, en-tête de message 68px. Un seul de ces trois porte de
   l'information — l'expéditeur et l'objet. Les deux autres sont du décor : ils
   disent « ceci est un webmail », ce qu'un liseré et un avatar suffisent à dire.

   Tout est scopé à #tplModalPreview : extranet-theme.css n'est pas touché, et le
   chrome Gmail garde ses cotes partout ailleurs. La rangée d'actions n'est pas
   supprimée du DOM (le contrat d'aperçu exige la classe .em-gmail-toolbar), elle
   est seulement masquée ici.

   Aucun invariant de cadrage n'est effleuré : fitDesktopFrame() ne dépend que de
   la LARGEUR du conteneur (échelle = wrap.clientWidth / 800) et mesure toujours
   la hauteur par scrollHeight. Rendre de la hauteur ne change ni l'échelle, ni
   les media queries « ordinateur » de l'email — on en voit simplement plus. */

/* Coque MacBook : capot et base assez fins pour ne plus être un cadre, encore
   assez présents pour rester un ordinateur. */
#tplModalPreview .em-dev-mac { padding: 6px 6px 7px; }
#tplModalPreview .em-dev-mac-cam { height: 9px; }
#tplModalPreview .em-dev-mac-screen { margin-top: 5px; }
#tplModalPreview .em-dev-mac-base { height: 7px; }

/* Barre du haut : la recherche passe de 30 à 22px, l'avatar de 28 à 22 — la
   silhouette Gmail reste lisible, la bande tombe de 51 à 33px. */
#tplModalPreview .em-gmail-bar { gap: 12px; padding: 5px 12px; }
#tplModalPreview .em-gmail-search { height: 22px; max-width: 300px; }
#tplModalPreview .em-gmail-avatar { width: 22px; height: 22px; font-size: 10px; }
/* Rangée d'actions : quatre carrés gris, zéro information. 39px rendus. */
#tplModalPreview .em-gmail-toolbar { display: none; }
/* En-tête du message : la seule bande informative. On ne touche donc pas aux
   corps de texte, seulement aux marges — 68px → ~55px. */
#tplModalPreview .em-gmail-msghead { padding: 8px 18px 7px; gap: 10px; }
/* Le rail latéral gauche est conservé : il ne coûte AUCUNE hauteur, et le
   supprimer élargirait le conteneur donc l'échelle de l'iframe (clientWidth/800),
   ce qui rendrait l'email plus grand — l'inverse du but recherché. */

/* Téléphone : même raisonnement. Barre d'état 28 → 18px, bandeau expéditeur
   51 → ~37px, coque 8 → 6px de biseau. */
#tplModalPreview .em-dev-phone { padding: 6px; }
#tplModalPreview .em-dev-island { top: 6px; }
#tplModalPreview .em-dev-statusbar { padding: 5px 14px 0; font-size: 8.5px; }
#tplModalPreview .em-dev-statusbar::after { width: 17px; height: 9px; }
.em-tplmod-mailhead {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    padding: 5px 11px;
    border-bottom: 1px solid #F1F5F9;
}
.em-tplmod-mailhead .em-gmail-avatar { width: 20px; height: 20px; font-size: 9.5px; }
.em-tplmod-mailhead-de,
.em-tplmod-mailhead-obj {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.em-tplmod-mailhead-de  { font-size: 10.5px; font-weight: 700; color: var(--em-ink); line-height: 1.3; }
.em-tplmod-mailhead-obj { font-size: 9.5px; color: var(--em-muted); line-height: 1.3; }

/* Écran de 390px CSS, et pas 338 --------------------------------------------
   La coque du thème est verrouillée à 280px : écran 264px, sur lesquels le
   zoom .78 injecté dans le document donne 264 / .78 = 338px de largeur CSS.
   C'est un téléphone qui n'existe pas. Dans une colonne de 651px, une coque de
   320px tient large, donne 308px d'écran, donc ~390px CSS : le viewport de
   référence exact. L'email se reflue sur plus large, donc plus court — c'est à
   la fois plus fidèle et plus visible.
   Réservé au desktop : sous 1024px la modale est plein écran et la coque du
   thème (280px) est déjà la bonne. */
@media (min-width: 1024px) {
    #tplModalPreview .em-dev-phone { max-width: 320px; }
}

/* -----------------------------------------------------------------------------
   7 ter. « IL Y A UNE SUITE » — défilement rendu visible
   -----------------------------------------------------------------------------
   Un email de 860px n'entrera jamais dans une colonne de 840 : le défilement est
   inévitable. Il existait déjà — le document de l'iframe défile à la molette —
   mais frameStyles() masquait les barres (*::-webkit-scrollbar{width:0}) et le
   bas de l'écran était un aplat blanc net. Rien ne distinguait « le message
   s'arrête là » de « le message continue ». D'où la lecture « c'est coupé ».

   Deux signaux, tous deux conditionnés par le JS (classes .is-defilable /
   .is-au-bout posées sur le cadre de l'appareil, cf. majDefilements) :
     1. une vraie barre de défilement, fine, À L'INTÉRIEUR de l'écran ;
     2. un fondu sur le bord bas + un chevron, qui s'effacent dès qu'on touche
        le fond.
   Le fondu est en ::before et le chevron en ::after : le thème ne se sert
   d'aucun des deux sur ces trois écrans, rien n'est écrasé. */

#tplModalPreview .em-dev-mac-screen::before,
#tplModalPreview .em-dev-phone-screen::before,
#tplModalPreview .em-dev-sms-screen::before,
#tplModalPreview .em-dev-mac-screen::after,
#tplModalPreview .em-dev-phone-screen::after,
#tplModalPreview .em-dev-sms-screen::after {
    content: "";
    position: absolute;
    pointer-events: none;      /* jamais entre le lecteur et l'email */
    opacity: 0;
    transition: opacity .18s ease;
}
/* Le fondu. z-index 1 : au-dessus de l'email, SOUS l'encoche et la barre
   d'accueil du téléphone SMS (z-index 2 dans le thème). */
#tplModalPreview .em-dev-mac-screen::before,
#tplModalPreview .em-dev-phone-screen::before,
#tplModalPreview .em-dev-sms-screen::before {
    z-index: 1;
    left: 0; right: 0; bottom: 0;
    height: 46px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .78) 55%, #fff 100%);
}
/* L'écran iMessage est gris iOS, pas blanc : le fondu doit fondre vers SA
   couleur, sinon il se voit comme un voile. */
#tplModalPreview .em-dev-sms-screen::before {
    background-image: linear-gradient(180deg, rgba(242, 242, 247, 0) 0%, rgba(242, 242, 247, .8) 55%, #F2F2F7 100%);
}
/* Le chevron : un carré dont deux côtés seulement sont tracés, pivoté de 45deg.
   L'ombre blanche le détache du texte qu'il survole. */
#tplModalPreview .em-dev-mac-screen::after,
#tplModalPreview .em-dev-phone-screen::after,
#tplModalPreview .em-dev-sms-screen::after {
    z-index: 2;
    left: 50%;
    bottom: 12px;
    width: 8px; height: 8px;
    margin-left: -6px;
    border-right: 2px solid rgba(15, 23, 42, .62);
    border-bottom: 2px solid rgba(15, 23, 42, .62);
    transform: rotate(45deg);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95));
}
/* La barre d'accueil du téléphone SMS occupe déjà le bas : on remonte. */
#tplModalPreview .em-dev-sms-screen::after { bottom: 20px; }

/* Les deux signaux ne s'allument que si l'email déborde ET qu'on n'est pas au
   fond — c'est exactement le moment où « il y a une suite » est vrai. */
#tplModalPreview .em-dev-mac.is-defilable:not(.is-au-bout) .em-dev-mac-screen::before,
#tplModalPreview .em-dev-mac.is-defilable:not(.is-au-bout) .em-dev-mac-screen::after,
#tplModalPreview .em-dev-phone.is-defilable:not(.is-au-bout) .em-dev-phone-screen::before,
#tplModalPreview .em-dev-phone.is-defilable:not(.is-au-bout) .em-dev-phone-screen::after,
#tplModalPreview .em-dev-sms.is-defilable:not(.is-au-bout) .em-dev-sms-screen::before,
#tplModalPreview .em-dev-sms.is-defilable:not(.is-au-bout) .em-dev-sms-screen::after { opacity: 1; }

/* --- La barre de défilement, dessinée ---------------------------------------
   On ne s'en remet PAS à la barre native, et ce n'est pas un choix esthétique :
   sur macOS elle est en superposition, elle ne se montre qu'une fois qu'on
   défile déjà, et ni `::-webkit-scrollbar` ni `scrollbar-width` ne la ramènent
   (mesure faite dans le Chromium de la recette : documentElement.clientWidth
   reste égal à innerWidth, aucune gouttière réservée, rien de peint). Or c'est
   précisément AVANT de défiler que le lecteur doit voir qu'il y a une suite. On
   la dessine donc : un rail par zone qui défile, posé à l'intérieur de l'écran
   de l'appareil, dont le JS reporte la taille et la position depuis
   scrollTop / scrollHeight (majAffordance).

   Conséquence heureuse côté ordinateur : le rail ne prend jamais de largeur, il
   ne peut donc pas modifier wrap.clientWidth — donc pas d'échelle qui bouge, pas
   de hauteur qui bouge, pas d'oscillation « barre apparaît / barre disparaît ».
   Le problème est supprimé plutôt que contourné.

   Les barres natives sont neutralisées pour ne pas doubler le signal.
   `.em-tplmod-scrollzone` n'a PAS de z-index : ses enfants positionnés restent
   dans le contexte d'empilement de l'écran, où le rail (3) passe au-dessus du
   fondu (1) et du chevron (2) — sans jamais faire remonter l'email par-dessus
   eux, ce qu'un contexte local aurait provoqué. */
.em-tplmod-scrollzone {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.em-dev-scrollrail {
    position: absolute;
    z-index: 3;
    top: 4px;
    right: 3px;
    bottom: 4px;
    width: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .07);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;      /* indicateur, pas poignée : on ne vole rien au natif */
}
.em-dev-scrollthumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 20%;
    border-radius: 999px;
    background: rgba(15, 23, 42, .34);
}
/* Le rail ne s'affiche que s'il y a matière à défiler — mais il reste visible
   une fois arrivé en bas, contrairement au fondu : c'est lui qui dit « où j'en
   suis », et cette information vaut aussi au fond de l'email. */
#tplModalPreview .em-dev-mac.is-defilable .em-dev-scrollrail,
#tplModalPreview .em-dev-phone.is-defilable .em-dev-scrollrail,
#tplModalPreview .em-dev-sms.is-defilable .em-dev-scrollrail { opacity: 1; }

#tplModalPreview #tplFrameDesktopWrap {
    overscroll-behavior: contain;
    scrollbar-width: none;
}
#tplModalPreview #tplFrameDesktopWrap::-webkit-scrollbar { width: 0; height: 0; }

/* SMS : c'est la CONVERSATION qui défile, pas l'écran. Faire défiler l'écran
   entier décollerait l'encoche et la barre d'accueil, qui y sont en absolute. */
#tplModalPreview .em-imsg-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
#tplModalPreview .em-imsg-scroll::-webkit-scrollbar { width: 0; height: 0; }

@media (prefers-reduced-motion: reduce) {
    #tplModalPreview .em-dev-mac-screen::before,
    #tplModalPreview .em-dev-phone-screen::before,
    #tplModalPreview .em-dev-sms-screen::before,
    #tplModalPreview .em-dev-mac-screen::after,
    #tplModalPreview .em-dev-phone-screen::after,
    #tplModalPreview .em-dev-sms-screen::after,
    .em-dev-scrollrail { transition: none; }
}

.em-tplmod-counter {
    margin: .7rem 0 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--em-muted);
}
.em-tplmod-counter-sep { margin: 0 .25rem; color: var(--em-line-2); }
#tplSmsCounterAlpha { color: var(--em-ink-3); cursor: help; }

/* =============================================================================
   8. PARCOURS — état filtré
============================================================================= */
.em-tplmod-parcours-vide {
    margin: 1rem 0 0;
    padding: 1.25rem;
    border: 1px dashed var(--em-line-2);
    border-radius: var(--em-r);
    text-align: center;
    font-size: 12px;
    color: var(--em-muted);
}

/* =============================================================================
   9. RESPONSIVE & MOUVEMENT RÉDUIT
============================================================================= */

/* --- À partir de 1024px : le CORPS ne défile plus, la colonne « Écrire » oui --
   C'est ce qui donne une hauteur connue à la colonne d'aperçu — sans aucune
   constante magique du type calc(100dvh - 250px), qui se serait décalée au
   moindre retour à la ligne de l'en-tête. Le corps est déjà un flex:1 du
   panneau : en lui coupant le défilement, sa hauteur devient celle de l'espace
   réellement disponible entre le chrome et le pied, et `height:100%` sur la
   grille la propage aux deux colonnes.

   Effet de bord voulu : l'aperçu ne bouge plus pendant qu'on écrit — le
   position:sticky qui le rattrapait devient inutile. */
@media (min-width: 1024px) {
    /* Le corps devient un FLEX CONTAINER, et la grille son unique item étiré.
       `height:100%` sur la grille ne suffisait pas : la hauteur du corps est
       résolue par le flex du panneau, donc `height` y reste *spécifié* à auto,
       et un pourcentage de hauteur sur l'enfant retombe alors sur auto (mesuré :
       grille à 1797px pour un corps de 905px). L'étirement flex, lui, ne dépend
       d'aucune hauteur spécifiée. */
    .em-tplmod-body { overflow: hidden; display: flex; }
    .em-tplmod-grid { flex: 1 1 auto; min-width: 0; min-height: 0; align-items: stretch; }
    .em-tplmod-col-ecrire {
        overflow-y: auto;
        min-height: 0;
        padding-right: .4rem;    /* la barre de défilement ne colle pas aux champs */
        scrollbar-width: thin;
    }
    /* align-self:stretch ANNULE le `align-self:start` posé plus haut pour le
       sticky : sans lui la colonne garde la hauteur de son contenu (mesuré
       377px dans une grille de 840px), et les cadres n'ont aucun espace libre
       à s'approprier. Le sticky, lui, n'a plus lieu d'être ici : le corps ne
       défile plus. */
    .em-tplmod-col-apercu { position: static; min-height: 0; align-self: stretch; }
}

/* --- Sous 1024px : modale PLEIN ÉCRAN, une seule colonne à la fois ----------- */
@media (max-width: 1023px) {
    .em-tpl-modal.em-tplmod { padding: 0; }
    .em-tplmod-panel {
        max-width: none;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    .em-tplmod-head { border-radius: 0; }
    .em-tplmod-foot { border-radius: 0; }

    /* La barre d'onglets n'existe qu'ici. */
    #tplModalTabs.em-tplmod-tabs {
        display: inline-grid;
        flex: none;
        margin: .6rem 1.15rem 0;
        width: calc(100% - 2.3rem);
    }
    .em-tplmod-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .em-tplmod-col-apercu { position: static; }
    /* Un seul volet visible à la fois : celui que désignent les onglets. */
    #tplModal[data-tab="ecrire"] [data-modal-pane="apercu"],
    #tplModal[data-tab="apercu"] [data-modal-pane="ecrire"] { display: none; }

    /* Onglet « Aperçu » : ICI, ON NE FORCE PAS l'étirement — le corps continue de
       défiler et le cadre garde la hauteur de son contenu.
       Mesuré à 390×844 : contraindre le cadre à la hauteur disponible le faisait
       RÉTRÉCIR (fenêtre d'email à 117px), parce que le chrome Gmail y mange 231px
       des 348px de l'écran — l'objet, long, passe sur trois lignes une fois la
       colonne à 328px. Sans contrainte, la fenêtre fait 354px pour un email de
       354px : la totalité du message est visible, ce qui est déjà l'optimum.
       Le `aspect-ratio: auto` posé plus haut suffit donc en mobile : c'est lui
       qui a fait passer cette fenêtre de 0px (ratio 16/9 sur 340px de large) à
       la hauteur réelle du message. */

    /* Vue « Mobile » sous 1024px : ici l'écran du téléphone n'est PAS étiré (le
       corps de la modale défile, cf. le commentaire ci-dessus), donc l'iframe
       retombait sur son plancher de 260px — un hublot, pour un email qui en fait
       850. On lui donne une hauteur franche, proportionnelle à l'écran, avec un
       plancher pour les très petites fenêtres. Le cadre ORDINATEUR, lui, garde
       son comportement : le contraindre le faisait rétrécir (mesure du
       2026-08-29), et il montre déjà l'email entier. */
    #tplModalPreview #tplFrameMobile { min-height: max(320px, 58vh); }

    .em-tplmod-foot-hint { display: none; }
    .em-tplmod-btn { flex: 0 0 auto; }
    .em-tplmod-btn-primary { flex: 1 1 auto; justify-content: center; }
}

/* --- 390px : rien ne dépasse. Les enfants flex/grid portent déjà min-width:0,
   on resserre ici les paddings et on empile ce qui ne tient plus. --- */
@media (max-width: 480px) {
    /* La fermeture est ancrée en haut à droite plutôt que rejetée en bout de
       ligne : sans cela elle passait seule à la ligne et creusait une bande
       vide entre le titre et les onglets. */
    .em-tplmod-head { padding: .8rem 3.1rem .7rem .85rem; gap: .5rem; }
    .em-tplmod-head #tplModalClose { position: absolute; top: .75rem; right: .8rem; }
    .em-tplmod-head-tools { width: 100%; justify-content: flex-start; margin-left: 0; }
    #tplModalTabs.em-tplmod-tabs { margin: .5rem .85rem 0; width: calc(100% - 1.7rem); }
    .em-tplmod-foot { padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom, 0px)); }
    .em-tplmod-field-row { grid-template-columns: minmax(0, 1fr); }
    .em-blk-paire { gap: .3rem; }
    .em-blk-paire .em-blk-input { flex: 1 1 100%; }
    .em-blk-addmenu { max-height: 15rem; }
    .em-tplmod-vars-menu { width: min(15rem, 82vw); }
    /* Le segmenté « Variables | Valeurs test » prend toute la largeur plutôt que
       de pousser la fermeture hors du cadre. */
    #tplPreviewMode, #tplModalDevice { font-size: 11px; }
    #tplPreviewMode .em-seg-opt, #tplModalDevice .em-seg-opt { padding: 6px 8px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .em-tplmod-btn,
    .em-blk,
    .em-blk-add,
    .em-tplmod-reglages-c { transition: none; }
    .em-tplmod-btn-primary:hover,
    .em-blk-add:hover { transform: none; }
}