/* =============================================================================
   EMATEA — Onglet « Modèles email & SMS » : PAGE « PARCOURS CLIENT »
   -----------------------------------------------------------------------------
   Contrat : docs/superpowers/specs/2026-08-29-modeles-email-sms-blocs-design.md §5
   Balisage : extranet/courtier/includes/templates_panel.php
   Chargé par mon-compte.php APRÈS extranet-theme.css.

   Ce fichier ne redéfinit AUCUNE classe partagée. Il réutilise telles quelles
   .em-tpl-card / .em-tpl-thumb / .em-tpl-badge-* / .em-imsg-* / .em-seg-toggle
   (extranet-theme.css §13-14) et n'ajoute que le squelette de la timeline,
   sous les préfixes `em-parcours-` et `em-moment-`.

   Grammaire « verre liquide », trois niveaux — identique au reste de l'app :
     · chrome   blur(22px)  — la barre d'outils, posée SUR la page
     · contenu  blur(16-18px) — les colonnes de canal, dans le flux
     · flottant blur(26px)  — les éléments détachés (repli des variantes ouvert)
   Surlignage spéculaire `inset 0 1px 0 rgba(255,255,255,…)` systématique,
   repli complet en @supports not (backdrop-filter) en fin de fichier.

   Couleurs : uniquement des tokens --em-* (donc --wl-* en marque blanche) et
   la teinte de la macro-étape, injectée par PHP en --em-moment-hex depuis
   EM_MACROS[…]['hex'] (includes/statuts.php). Aucun littéral de marque.

   Sommaire :
     1. Variables locales          6. Le trou : .em-moment-vide
     2. Chrome (filtre, recherche) 7. Variantes repliées
     3. Timeline & rail            8. Aperçu SMS (bulle iMessage)
     4. En-tête d'un moment        9. Responsive (≤ 1180 / 900 / 640 / 380)
     5. Colonnes de canal & cartes 10. Replis (@supports, motion, print)
============================================================================= */

/* =============================================================================
   1. VARIABLES LOCALES
============================================================================= */
[data-em-panel="templates"] {
    /* Largeur de la gouttière du rail, et écart entre deux moments : les deux
       servent AUSSI au calcul du filet vertical continu (§3). */
    --em-rail-w:      66px;
    --em-rail-dot:    44px;
    --em-parcours-gap: 1.5rem;
    --em-moment-hex:  #64748B; /* repli si PHP n'a rien injecté */
}

/* =============================================================================
   2. CHROME — identité, filtre de canal, recherche, création
   Niveau « chrome » du verre : le plus flou des trois (22px). C'est la barre
   d'outils du parcours, elle doit se détacher du fond quadrillé.
============================================================================= */
.em-parcours-chrome {
    position: relative;
    overflow: hidden;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
            backdrop-filter: blur(22px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--em-r-xl, 24px);
    box-shadow: var(--em-sh-md), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* Halo chaud dans l'angle : la lumière « Lumo », jamais un aplat de couleur. */
.em-parcours-chrome::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -55%;
    right: -12%;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, var(--em-primary-light, #FFE5DE) 0%, transparent 68%);
    opacity: .55;
    pointer-events: none;
}
.em-parcours-chrome > * { position: relative; z-index: 1; }

.em-parcours-chrome-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
}
.em-parcours-avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-image: linear-gradient(160deg, var(--em-primary) 0%, var(--em-primary-dark) 100%);
    border-radius: 14px;
    box-shadow: var(--em-sh-warm), inset 0 1px 0 rgba(255, 255, 255, .45);
    color: #fff;
    font-family: var(--em-font-display);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}
/* min-width:0 : sans lui, le bloc de texte impose sa largeur intrinsèque au
   conteneur flex et fait déborder la ligne (cause n°1 de scroll horizontal). */
.em-parcours-ident { flex: 1 1 260px; min-width: 0; }
.em-parcours-titre {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--em-ink);
    font-family: var(--em-font-display);
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.em-parcours-titre i { color: var(--em-primary); font-size: .9em; }
.em-parcours-sub {
    margin: .3rem 0 0;
    color: var(--em-muted);
    font-size: .75rem;
    line-height: 1.5;
}
.em-parcours-sub strong { color: var(--em-ink); font-weight: 700; }
.em-parcours-sub-sep { color: var(--em-ink-3); margin: 0 .15rem; }

.em-parcours-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    margin-left: auto;
}

/* --- Filtre de canal : trois positions (le composant partagé en gère deux) ---
   On ne touche pas à .em-seg-toggle : on ne surcharge que cette instance.
   Le pouce fait exactement un tiers de la piste intérieure (100% - 2×3px de
   padding), donc translateX(100%) / (200%) tombe pile sur chaque cellule. */
#tplFiltreCanal.em-parcours-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tplFiltreCanal.em-parcours-seg .em-seg-thumb { width: calc((100% - 6px) / 3); }
#tplFiltreCanal.em-parcours-seg[data-value="email"] .em-seg-thumb { transform: translateX(100%); }
#tplFiltreCanal.em-parcours-seg[data-value="sms"]   .em-seg-thumb { transform: translateX(200%); }
#tplFiltreCanal.em-parcours-seg .em-seg-opt { padding: 7px 12px; font-size: 12px; white-space: nowrap; }

/* --- Recherche --- */
.em-parcours-search {
    position: relative;
    flex: 1 1 190px;
    min-width: 0;
    max-width: 280px;
}
.em-parcours-search > i {
    position: absolute;
    top: 50%;
    left: .7rem;
    transform: translateY(-50%);
    color: var(--em-ink-3);
    font-size: .7rem;
    pointer-events: none;
}
.em-parcours-search-input {
    width: 100%;
    min-width: 0;
    padding: .55rem .7rem .55rem 1.9rem;
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid var(--em-line-2);
    border-radius: var(--em-r-sm, 12px);
    box-shadow: inset 0 1px 2px rgba(14, 42, 61, .04);
    color: var(--em-ink);
    font: inherit;
    font-size: .8125rem;
    outline: none;
    transition: border-color var(--em-dur-fast) ease, box-shadow var(--em-dur-fast) ease;
}
.em-parcours-search-input::placeholder { color: var(--em-ink-3); }
.em-parcours-search-input:focus {
    border-color: var(--em-primary);
    box-shadow: 0 0 0 3px var(--em-primary-light);
}
/* Croix native de <input type="search"> : masquée sous WebKit, elle casse
   l'alignement de la pilule (et le JS gère déjà la remise à zéro). */
.em-parcours-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* --- Nouveau modèle --- */
.em-parcours-new {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    padding: .6rem 1rem;
    background-image: linear-gradient(180deg, var(--em-primary) 0%, var(--em-primary-dark) 100%);
    border: 1px solid transparent;
    border-radius: var(--em-r-sm, 12px);
    box-shadow: var(--em-sh-warm), inset 0 1px 0 rgba(255, 255, 255, .35);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--em-dur) var(--em-ease), box-shadow var(--em-dur) var(--em-ease);
}
.em-parcours-new:hover { transform: translateY(-2px); box-shadow: var(--em-sh-warm-lg); }
.em-parcours-new:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 3px; }

/* --- Bilan de couverture : la synthèse de tous les .em-moment-vide --- */
.em-parcours-bilan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .7rem;
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid var(--em-line);
}
.em-parcours-stat {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border-radius: var(--em-r-pill);
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
}
.em-parcours-stat strong { font-weight: 800; }
.em-parcours-stat.is-ok   { background: rgba(22, 163, 74, .10);  color: #15803D; }
.em-parcours-stat.is-trou { background: rgba(245, 158, 11, .14); color: #B45309; cursor: help; }
.em-parcours-legende {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--em-ink-3);
    font-size: .6875rem;
    font-weight: 600;
}
.em-parcours-legende i { color: var(--em-primary); font-size: .6rem; }

.em-parcours-erreur {
    margin: 0;
    padding: .55rem .8rem;
    background: rgba(245, 158, 11, .10);
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: var(--em-r-sm, 12px);
    color: #B45309;
    font-size: .6875rem;
    font-weight: 700;
}

/* =============================================================================
   3. TIMELINE & RAIL — l'élément signature de la page
   Un filet vertical continu traverse TOUS les moments ; chaque moment y pose
   une pastille teintée par sa macro-étape. Le filet est dessiné par le rail
   de chaque section et débordé de la gouttière verticale (--em-parcours-gap)
   pour se souder au moment suivant : aucun élément supplémentaire, aucune
   hauteur codée en dur.
============================================================================= */
.em-parcours {
    display: flex;
    flex-direction: column;
    gap: var(--em-parcours-gap);
}

.em-moment {
    display: grid;
    grid-template-columns: var(--em-rail-w) minmax(0, 1fr);
    align-items: start;
    min-width: 0;
}

.em-moment-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    align-self: stretch;
}
/* Le filet. Il court du haut de la section jusque dans la gouttière. */
.em-moment-rail::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: calc(-1 * var(--em-parcours-gap));
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background-image: linear-gradient(180deg,
        rgba(14, 42, 61, .05) 0%,
        rgba(14, 42, 61, .15) 12%,
        rgba(14, 42, 61, .15) 88%,
        rgba(14, 42, 61, .05) 100%);
    border-radius: 2px;
}
/* Le filet naît AU CENTRE de la première pastille et meurt au centre de la
   dernière : un trait qui dépasse par le haut ou par le bas ferait « barre »
   plutôt que « parcours ». (:last-of-type et non :last-child — le message
   « aucun résultat » est le dernier enfant de #tplParcours.) */
.em-moment:first-of-type .em-moment-rail::before { top: calc(var(--em-rail-dot) / 2); }
.em-moment:last-of-type  .em-moment-rail::before { bottom: auto; height: calc(var(--em-rail-dot) / 2); }
.em-moment:first-of-type:last-of-type .em-moment-rail::before { display: none; }

.em-moment-pastille {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--em-rail-dot);
    height: var(--em-rail-dot);
    background: #fff;
    border: 1px solid var(--em-line-2);
    border-radius: 50%;
    box-shadow: var(--em-sh-sm), inset 0 1px 0 rgba(255, 255, 255, .95);
    color: var(--em-moment-hex);
    font-size: .9375rem;
    transition: transform var(--em-dur) var(--em-ease), box-shadow var(--em-dur) var(--em-ease);
}
/* Anneau diffus de la teinte d'étape : c'est lui qui donne la profondeur au
   rail sans salir le blanc dominant. */
.em-moment-pastille::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .1;
    filter: blur(6px);
    z-index: -1;
}
.em-moment:hover .em-moment-pastille { transform: scale(1.06); }

.em-moment-num {
    position: relative;
    z-index: 1;
    padding: .05rem .4rem;
    background: rgba(255, 255, 255, .9);
    border-radius: var(--em-r-pill);
    color: var(--em-ink-3);
    font-family: var(--em-font-display);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .04em;
}

/* =============================================================================
   4. EN-TÊTE D'UN MOMENT
============================================================================= */
.em-moment-corps { min-width: 0; padding-bottom: .1rem; }

.em-moment-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    min-width: 0;
    margin-bottom: .6rem;
    padding-top: .55rem;
}
.em-moment-titre {
    margin: 0;
    min-width: 0;
    color: var(--em-ink);
    font-family: var(--em-font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.2;
}
/* La pastille d'étape reprend em_macro_badge() : aucune couleur redéfinie. */
.em-moment-badge { flex: none; }
.em-moment-tip {
    min-width: 0;
    color: var(--em-muted);
    font-size: .6875rem;
    line-height: 1.45;
}
.em-moment-compte {
    flex: none;
    margin-left: auto;
    padding: .18rem .5rem;
    background: var(--em-surface-3);
    border-radius: var(--em-r-pill);
    color: var(--em-ink-3);
    font-size: .625rem;
    font-weight: 700;
    white-space: nowrap;
}

/* =============================================================================
   5. COLONNES DE CANAL & CARTES
   Deux colonnes de largeur égale : l'email et le SMS d'un même moment se
   lisent d'un seul regard. minmax(0, 1fr) — jamais `1fr` seul, qui vaut
   `minmax(auto, 1fr)` et laisse une vignette large pousser la grille.
============================================================================= */
.em-moment-canaux {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* align-items: start — et surtout PAS l'étirement par défaut : une colonne
       « rien ne part » ne doit pas s'étirer sur la hauteur de la colonne
       d'en face, sinon la page se couvre de grands aplats ambrés qui hurlent
       plus fort que l'information. Le trou reste une carte compacte. */
    align-items: start;
    gap: .85rem;
    min-width: 0;
}

.em-moment-canal {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
    padding: .75rem;
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(17px) saturate(150%);
            backdrop-filter: blur(17px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: var(--em-r-lg, 20px);
    box-shadow: var(--em-sh-sm), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.em-moment-canal-tete {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    margin: 0;
    color: var(--em-ink-3);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.em-moment-canal-tete span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-moment-canal[data-moment-canal="email"] .em-moment-canal-tete i { color: #3B82F6; }
.em-moment-canal[data-moment-canal="sms"]   .em-moment-canal-tete i { color: #16A34A; }

/* --- La carte (hérite tout de .em-tpl-card, on n'ajoute que l'accent) --- */
.em-moment-card { min-width: 0; }
.em-moment-card-head,
.em-moment-card .em-tpl-card-head { min-width: 0; }

/* LA carte : celle qui part vraiment. Elle porte l'accent de marque, jamais
   les variantes — c'est la seule hiérarchie visuelle de la colonne. */
.em-moment-defaut {
    border-color: var(--em-primary-light);
    box-shadow: var(--em-sh-md), var(--em-sh-warm), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* L'aperçu de la carte par défaut est en HAUTEUR FIXE, pas en ratio : la
   colonne fait ~530px de large sur un 1440, et un 4/3 y produirait une
   vignette de 400px de haut — un seul moment tiendrait à l'écran, ce qui
   ruine l'intérêt de la timeline. Un bandeau large montre exactement ce
   qu'il faut (en-tête + titre de l'email, tête de conversation + bulle),
   et aligne les deux colonnes à la ligne près. */
.em-moment-defaut > .em-tpl-thumb,
.em-moment-defaut > .em-moment-sms-screen {
    aspect-ratio: auto;
    height: clamp(150px, 16vw, 205px);
}

.em-moment-card-titre {
    margin: 0;
    color: var(--em-ink);
    font-size: .8125rem;
    font-weight: 800;
    line-height: 1.25;
    /* line-clamp : la recherche travaille sur data-tpl-search, jamais sur ce
       texte — un titre tronqué reste donc trouvable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.em-moment-card-sujet {
    margin: 0;
    min-width: 0;
    color: var(--em-muted);
    font-size: .6875rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.em-moment-card-pieds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}
.em-moment-flag {
    flex: none;
    padding: .12rem .4rem;
    border-radius: var(--em-r-sm, 12px);
    font-size: .625rem;
    font-weight: 800;
}
.em-moment-flag.is-off { background: var(--em-surface-3); color: var(--em-muted); }
.em-moment-usage {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    color: var(--em-ink-3);
    font-size: .625rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bandeau d'état de la vignette (remplace les utilitaires Tailwind posés en
   ligne dans l'ancien gabarit : le JS ne cible que [data-tpl-thumb-etat]). */
.em-tpl-thumb-etat {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .2rem .45rem;
    background: rgba(255, 255, 255, .88);
    color: var(--em-ink-3);
    font-size: .625rem;
    font-weight: 600;
    text-align: center;
}

/* --- « Ajouter un Email / SMS » sous la carte par défaut --- */
.em-moment-ajout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    min-width: 0;
    padding: .45rem .6rem;
    background: transparent;
    border: 1px dashed var(--em-line-2);
    border-radius: var(--em-r-sm, 12px);
    color: var(--em-ink-3);
    font-size: .6875rem;
    font-weight: 700;
    cursor: pointer;
    transition: color var(--em-dur-fast) ease, border-color var(--em-dur-fast) ease, background-color var(--em-dur-fast) ease;
}
.em-moment-ajout:hover {
    background: rgba(255, 255, 255, .7);
    border-color: var(--em-primary);
    color: var(--em-primary-deep);
}
.em-moment-ajout:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 2px; }

.em-moment-neutre {
    margin: 0;
    padding: 1.1rem .6rem;
    border: 1px dashed var(--em-line-2);
    border-radius: var(--em-r-sm, 12px);
    color: var(--em-ink-3);
    font-size: .6875rem;
    font-weight: 600;
    text-align: center;
}

/* =============================================================================
   6. LE TROU — « aucun message ne part à cette étape »
   Raison d'être de la refonte : ce bloc doit se voir depuis l'autre bout de
   la page, sans jamais ressembler à une erreur technique.
============================================================================= */
.em-moment-vide {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    min-width: 0;
    padding: .95rem;
    background: rgba(255, 251, 235, .78);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
    border: 1px dashed rgba(245, 158, 11, .5);
    border-radius: var(--em-r-lg, 20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* Hachures très discrètes : la zone se lit comme « à remplir », pas comme un
   encart d'alerte système. */
.em-moment-vide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg,
        rgba(245, 158, 11, .07) 0 6px,
        transparent 6px 14px);
    pointer-events: none;
}
.em-moment-vide > * { position: relative; }
.em-moment-vide-titre {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    margin: 0;
    color: #B45309;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.3;
}
.em-moment-vide-txt {
    margin: 0;
    min-width: 0;
    color: #92400E;
    font-size: .6875rem;
    line-height: 1.45;
    opacity: .85;
}
.em-moment-vide-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    min-width: 0;
    margin-top: .15rem;
    padding: .5rem .85rem;
    background-image: linear-gradient(180deg, var(--em-primary) 0%, var(--em-primary-dark) 100%);
    border: 1px solid transparent;
    border-radius: var(--em-r-sm, 12px);
    box-shadow: var(--em-sh-warm), inset 0 1px 0 rgba(255, 255, 255, .35);
    color: #fff;
    font-size: .6875rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: transform var(--em-dur) var(--em-ease), box-shadow var(--em-dur) var(--em-ease);
}
.em-moment-vide-cta:hover { transform: translateY(-2px); box-shadow: var(--em-sh-warm-lg); }
.em-moment-vide-cta:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 3px; }

/* =============================================================================
   7. VARIANTES REPLIÉES
   On voit 12 cartes, pas 39. Le <summary> annonce toujours COMBIEN, et
   rappelle que ces modèles ne partent pas d'eux-mêmes.
============================================================================= */
.em-moment-variantes { min-width: 0; margin-top: -.1rem; }
.em-moment-variantes-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    min-width: 0;
    padding: .4rem .6rem;
    border-radius: var(--em-r-sm, 12px);
    color: var(--em-ink-2);
    font-size: .6875rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: background-color var(--em-dur-fast) ease, color var(--em-dur-fast) ease;
}
.em-moment-variantes-sum::-webkit-details-marker { display: none; }
.em-moment-variantes-sum:hover { background: rgba(255, 255, 255, .75); color: var(--em-ink); }
.em-moment-variantes-sum:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 2px; }
.em-moment-chev {
    flex: none;
    font-size: .6rem;
    color: var(--em-ink-3);
    transition: transform var(--em-dur) var(--em-ease);
}
.em-moment-variantes[open] > .em-moment-variantes-sum > .em-moment-chev { transform: rotate(180deg); }
.em-moment-variantes-aide {
    min-width: 0;
    color: var(--em-ink-3);
    font-size: .625rem;
    font-weight: 600;
}

/* Le contenu déplié flotte au-dessus de la colonne : niveau « flottant »
   du verre (26px), le plus net des trois fonds. */
.em-moment-variantes-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
    gap: .6rem;
    min-width: 0;
    margin-top: .45rem;
    padding: .6rem;
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
            backdrop-filter: blur(26px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--em-r, 16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    animation: em-moment-deplie var(--em-dur) var(--em-ease) both;
}
@keyframes em-moment-deplie {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
/* Les variantes sont secondaires : vignette plus courte, typo plus sobre. */
.em-moment-variante .em-tpl-thumb,
.em-moment-variante .em-moment-sms-mini { aspect-ratio: 16 / 10; }
.em-moment-variante .em-tpl-card-head { padding: .5rem .6rem .6rem; gap: .3rem; }
.em-moment-variante .em-moment-card-titre { font-size: .75rem; }

/* =============================================================================
   8. APERÇU SMS — la vraie bulle iMessage, pas une vignette
   Le SMS n'a pas de rendu HTML à miniaturiser : on montre le début du texte
   dans la bulle du thème (.em-imsg-*, extranet-theme.css §13), sur l'écran
   iOS #F2F2F7. Ratio identique à .em-tpl-thumb pour que les deux colonnes
   d'un même moment s'alignent à la ligne près.
============================================================================= */
.em-moment-sms-screen,
.em-moment-sms-mini {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    min-width: 0;
    background: #F2F2F7;
    border-bottom: 1px solid var(--em-line);
}
.em-moment-sms-screen .em-imsg-head { padding: .7rem 0 .4rem; }
.em-moment-sms-flux {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    padding: 0 .7rem;
}
/* La bulle du thème plafonne à 210px : dans une carte de colonne on la laisse
   respirer sur toute la largeur disponible. Aucune couleur redéfinie. */
.em-moment-sms-screen .em-imsg-bubble,
.em-moment-sms-mini .em-imsg-bubble { max-width: min(210px, 100%); }
.em-moment-sms-mini {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: .6rem;
}
/* L'écran a une hauteur bornée et `overflow: hidden` : sans plafond de
   lignes, un SMS long serait tranché en plein milieu d'un mot. On coupe
   proprement, l'extrait complet reste lisible sous la carte et le texte
   intégral dans la modale. */
.em-moment-sms-screen .em-imsg-bubble p:not(.em-imsg-stop),
.em-moment-sms-mini .em-imsg-bubble p:not(.em-imsg-stop) {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.em-moment-sms-mini .em-imsg-bubble p:not(.em-imsg-stop) { -webkit-line-clamp: 3; }

/* =============================================================================
   9. RESPONSIVE
   Objectif vérifié à 390px : scrollWidth === clientWidth. Chaque enfant de
   flex/grid porte min-width:0 (voir plus haut) ; ici on ne fait que réduire
   le rail et empiler les deux canaux.
============================================================================= */
/* À partir de lg, la barre d'outils tient sur une ligne : le bloc d'identité
   ne doit pas grossir au point de replier « Nouveau modèle ». */
@media (min-width: 1024px) {
    .em-parcours-actions { flex: 0 0 auto; flex-wrap: nowrap; }
}

@media (max-width: 1180px) {
    .em-moment-variantes-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
}

/* Sous ~900px, deux colonnes de vignettes deviennent illisibles : on empile,
   en gardant l'ordre email → SMS (l'ordre de lecture du parcours). */
@media (max-width: 900px) {
    .em-moment-canaux { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
    .em-moment-variantes-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
}

@media (max-width: 767px) {
    [data-em-panel="templates"] {
        --em-rail-w: 40px;
        --em-rail-dot: 30px;
        --em-parcours-gap: 1.15rem;
    }
    .em-parcours-chrome { padding: .85rem .9rem; border-radius: var(--em-r-lg, 20px); }
    .em-parcours-actions { margin-left: 0; width: 100%; }
    .em-parcours-search { flex: 1 1 100%; max-width: none; order: 3; }
    #tplFiltreCanal.em-parcours-seg { flex: 1 1 auto; }
    .em-parcours-new { flex: 0 0 auto; }
    .em-moment-pastille { font-size: .6875rem; }
    .em-moment-num { display: none; }
    .em-moment-tete { padding-top: .25rem; }
    .em-moment-titre { font-size: .9375rem; }
    /* Ratio 16:10 tronqué : sur un écran étroit une vignette 4/3 mange tout
       l'écran avant même le titre de la carte. */
    .em-moment-variante .em-tpl-thumb,
    .em-moment-variante .em-moment-sms-mini { aspect-ratio: 16 / 10; }
    .em-moment-defaut > .em-tpl-thumb,
    .em-moment-defaut > .em-moment-sms-screen { height: 158px; }
    .em-moment-sms-screen .em-imsg-bubble p:not(.em-imsg-stop) { -webkit-line-clamp: 3; }
    .em-moment-compte { margin-left: 0; }
}

@media (max-width: 480px) {
    .em-parcours-chrome-top { gap: .6rem; }
    .em-parcours-avatar { width: 36px; height: 36px; border-radius: 12px; font-size: .9rem; }
    .em-parcours-titre { font-size: .9375rem; }
    #tplFiltreCanal.em-parcours-seg .em-seg-opt { padding: 7px 6px; font-size: 11px; }
    .em-parcours-new { padding: .55rem .75rem; }
    .em-moment-canal { padding: .6rem; border-radius: var(--em-r, 16px); }
    .em-moment-variantes-grille { grid-template-columns: minmax(0, 1fr); }
    .em-moment-variante .em-tpl-thumb,
    .em-moment-variante .em-moment-sms-mini { aspect-ratio: 16 / 9; }
    .em-moment-tip { flex: 1 1 100%; }
}

/* Très petits écrans (≤ 360px) : le libellé du bouton de création passerait
   à la ligne et casserait la barre — on ne garde que l'icône, l'aria-label
   du bouton continue de porter le sens. */
@media (max-width: 359px) {
    .em-parcours-new > span { display: none; }
}

/* =============================================================================
   10. REPLIS
============================================================================= */

/* Filtre côté client : le JS pose/retire `hidden`. Déclaré ici avec !important
   parce que .em-moment{display:grid} et .em-moment-canal{display:flex} ont la
   même spécificité que l'utilitaire .hidden du CDN Tailwind, et que l'ordre de
   chargement des deux feuilles n'est pas garanti. */
.em-moment.hidden,
.em-moment-canal.hidden,
.em-moment-variantes.hidden,
.em-moment-variantes-grille.hidden,
.em-tpl-card.hidden,
.em-parcours-noresult.hidden { display: none !important; }

.em-parcours-noresult {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: 2rem 1rem;
    background: rgba(255, 255, 255, .6);
    border: 1px dashed var(--em-line-2);
    border-radius: var(--em-r-lg, 20px);
    color: var(--em-muted);
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
}

/* Teintes dérivées de la macro-étape : uniquement si color-mix() existe (une
   propriété personnalisée invalide n'est détectée qu'à la substitution, et
   dégraderait la pastille en transparent). Sinon, le blanc + la couleur
   d'icône ci-dessus suffisent : la pastille reste lisible. */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .em-moment-pastille {
        background-image: linear-gradient(180deg,
            color-mix(in srgb, var(--em-moment-hex) 13%, #fff) 0%,
            #fff 76%);
        border-color: color-mix(in srgb, var(--em-moment-hex) 28%, #fff);
        box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--em-moment-hex) 60%, transparent),
                    inset 0 1px 0 rgba(255, 255, 255, .95);
    }
    .em-moment-canal { border-color: color-mix(in srgb, var(--em-moment-hex) 12%, rgba(255, 255, 255, .58)); }
    /* Le filet prend la teinte du moment sous sa pastille et se neutralise en
       descendant : d'un moment à l'autre, le rail change de couleur comme le
       dossier change d'étape. C'est ce dégradé qui fait « parcours » plutôt
       que « liste ». */
    .em-moment-rail::before {
        background-image: linear-gradient(180deg,
            color-mix(in srgb, var(--em-moment-hex) 42%, transparent) 0%,
            color-mix(in srgb, var(--em-moment-hex) 16%, transparent) 34%,
            rgba(14, 42, 61, .11) 72%,
            rgba(14, 42, 61, .06) 100%);
    }
    .em-moment-defaut { border-color: color-mix(in srgb, var(--em-primary) 26%, #fff); }
}

/* Navigateur sans backdrop-filter (Firefox ESR d'entreprise, WebView
   ancienne) : le verre devient un aplat opaque. On ne perd que le flou —
   ni contraste, ni lisibilité, ni mise en page. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .em-parcours-chrome        { background: #FFFFFF; }
    .em-moment-canal           { background: #FDFDFE; }
    .em-moment-variantes-grille { background: #F8FAFC; }
    .em-moment-vide            { background: #FFFBEB; }
    .em-parcours-search-input  { background: #FFFFFF; }
    .em-parcours-noresult      { background: #FFFFFF; }
}

@media (prefers-reduced-motion: reduce) {
    .em-parcours-new,
    .em-moment-vide-cta,
    .em-moment-pastille,
    .em-moment-chev { transition: none; }
    .em-parcours-new:hover,
    .em-moment-vide-cta:hover { transform: none; }
    .em-moment:hover .em-moment-pastille { transform: none; }
    .em-moment-variantes-grille { animation: none; }
}

/* Impression : le parcours doit rester lisible sur papier (revue d'équipe).
   Pas de verre, pas d'ombre, tout déplié. */
@media print {
    .em-parcours-actions,
    .em-parcours-erreur,
    .em-moment-ajout { display: none !important; }
    .em-parcours-chrome,
    .em-moment-canal,
    .em-moment-variantes-grille {
        background: #fff;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        box-shadow: none;
        border-color: #CBD5E1;
    }
    .em-moment-canaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .em-moment { break-inside: avoid; }
}